數(shù)組遍歷
for丈冬，foreach，map(返回新數(shù)組)甘畅，for...of(遍歷element)埂蕊，for...in(遍歷index)往弓，filter(返回新數(shù)組)，every(每一項(xiàng)都要滿足蓄氧，返回boolean)函似，some(任意一項(xiàng)滿足，返回boolean)喉童，reduce撇寞，reduceRight，find(尋找符合條件的第一個(gè)元素)堂氯，findIndex(類似find蔑担，返回索引)，keys咽白，values啤握，entries(for (let [index,ele] of array.entries()))
對(duì)象遍歷
for...in，Object.keys()晶框，Object.values()排抬，Object.getOwnPropertyNames()，Reflect.ownKeys(symbol和symbol對(duì)應(yīng)屬性值也可以被遍歷)
對(duì)象遍歷的本質(zhì)還是遍歷key授段，在拿到對(duì)應(yīng)value
1.數(shù)組遍歷
1.for循環(huán)
var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
for (i = 0; i < arr.length; i++) {
console.log(arr[i])
}
}
fn(arr)
//aaa
//bvv
//423
//32321
2.foreach循環(huán)
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
arr.forEach((element,index,array) => {
console.log(element,index,array)
});
}
fn(arr)
//aaa 0 [ 'aaa', 'bvv', '423', 32321 ]
//bvv 1 [ 'aaa', 'bvv', '423', 32321 ]
//423 2 [ 'aaa', 'bvv', '423', 32321 ]
//32321 3 [ 'aaa', 'bvv', '423', 32321 ]
//{ m: 'mm' } 4 [ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
3.map循環(huán)
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
var res = arr.map(function (el, idx, arr) {
console.log(el, idx, arr)
return el + idx
})
console.log('res', res)
console.log('arr', arr)
}
fn(arr)
ps:會(huì)生成一個(gè)新數(shù)組蹲蒲，但是不會(huì)影響原來(lái)的數(shù)組
4.for...of & for ...in
for...of用于遍歷value，for...in用于遍歷index
for...of不可以用于遍歷object侵贵，但是for...in可以届搁，但是只能遍歷單層的key值，多層遍歷不了
var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
for (var value of arr) {
console.log(value);
}
}
fn(arr)
var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
for (var value in arr) {
console.log(value);
}
}
fn(arr)
5.filter遍歷（遍歷過濾）
var arr = ['aaa', 'bvv', '423', 32321, {m:'mm'}]
function fn(arr) {
var res = arr.filter((item, index) => {
console.log(index, item)
return index < 2
})
console.log(arr)
console.log(res)
}
fn(arr)
可以用index過濾窍育，也可以用于過濾參數(shù)類型
var arr = ['aaa', 'bvv', '423', 32321, {m:'mm'}]
function fn(arr) {
var res = arr.filter((item, index) => {
console.log(index, item)
return Object.prototype.toString.call(item) == '[object Object]'
})
console.log(arr)
console.log(res)
}
fn(arr)
還可以用于判斷某元素某屬性值是否存在或者為true的元素
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
var res = arr.filter((item)=>{
return item.m
})
console.log(arr)
console.log(res)
}
fn(arr)
///[ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
///[ { m: 'mm' } ]
6.every遍歷
every()是對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)卡睦，如果該函數(shù)對(duì)每一項(xiàng)返回true,則返回true。
var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
var res = arr.every( function( item, index, array ){
//every() return Boolean值
return typeof(item) != 'object'; //每一項(xiàng)都要不是對(duì)象才可以返回true
});
console.log(arr)
console.log(res)
}
fn(arr)
///[ 'aaa', 'bvv', '423', 32321 ]
//true
7.some遍歷
和every對(duì)應(yīng)蔫骂，有一個(gè)成立就是true
var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
var res = arr.some( function( item, index, array ){
if(typeof(item) == 'number'){
console.log('item',item)
}
return typeof(item) == 'number';
});
console.log(arr)
console.log(res)
}
fn(arr)
//item 32321
///[ 'aaa', 'bvv', '423', 32321 ]
//true
8.reduce遍歷
reduce() 方法接收一個(gè)函數(shù)作為累加器（accumulator）么翰，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終為一個(gè)值辽旋。
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
var res = [0, 1, 2, 3, 4].reduce(function (previousValue, currentValue, index, array) {
return previousValue + currentValue;
});
var res2 = arr.reduce(function (previousValue, currentValue, index, array) {
return previousValue + currentValue;
});
console.log(arr)
console.log(res)
console.log(res2)
}
fn(arr)
///[ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
//10
//aaabvv42332321[object Object]
//加入第二個(gè)參數(shù)
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
var res = [0, 1, 2, 3, 4].reduce(function (previousValue, currentValue, index, array) {
return previousValue + currentValue;
}, 5);
var res2 = arr.reduce(function (previousValue, currentValue, index, array) {
return previousValue + currentValue;
}, 5);
console.log(arr)
console.log(res)
console.log(res2)
}
fn(arr)
//[ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
//15
//5aaabvv42332321[object Object]
9.reduceRight
反方向的reduce()
10.find
**find()方法返回?cái)?shù)組中符合測(cè)試函數(shù)條件的第一個(gè)元素浩嫌。否則返回undefined **
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
var res = arr.find((element) => {
return typeof (element) == 'string'
})
console.log(res)
}
fn(arr)
//aaa 只返回第一個(gè)，后面的符合條件也不返回了
11.findIndex
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
var res = arr.findIndex((x)=> { return x == '423'; });
// Returns an index value of 1.
console.log(res)
}
fn(arr)
//2 返回的是符合條件的第一個(gè)元素的索引值
12.keys补胚，values码耐，entries
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
for (let index in arr) {
console.log(index);
}
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
for (let elem of arr.values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
}
fn(arr)
2.對(duì)象遍歷
1.for … in
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'yeezy',
child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}
function fn(obj) {
for (var el in obj) {
console.log(el, ':', obj[el])
}
}
fn(obj2)
Symbol屬性是不會(huì)被遍歷的，然后el遍歷的是key值溶其，無(wú)法用for...of方法遍歷
2.使用Object.keys()遍歷 (返回一個(gè)數(shù)組,包括對(duì)象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性).).
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'yeezy',
child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}
function fn(obj) {
var res = Object.keys(obj)
console.log(res)
}
fn(obj2) ///[ 'id', 'name', 'child' ] 遍歷key值成為數(shù)組骚腥，然后考研使用forEach遍歷
3.使用Object.values()遍歷 (與Object.keys類似，也不會(huì)遍歷symbol）
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'yeezy',
child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}
function fn(obj) {
var res = Object.values(obj)
console.log(res)
}
fn(obj2)
///[ 1, 'yeezy', [ { id: 11, name: 'air jorden' }, { id: 12, name: 'air force' } ] ]
4.Object.getOwnPropertyNames(obj)
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'yeezy',
child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}
function fn(obj) {
var res = Object.getOwnPropertyNames(obj)
console.log(res)
}
fn(obj2) //[ 'id', 'name', 'child' ]
5.使用Reflect.ownKeys(obj)遍歷
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'yeezy',
child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}
function fn(obj) {
var res = Reflect.ownKeys(obj)
console.log(res)
}
fn(obj2) //[ 'id', 'name', 'child', Symbol() ]
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'yeezy',
child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}
function fn(obj) {
var res = Reflect.ownKeys(obj)
res.forEach((el)=>{
console.log(el,':',obj[el])
})
// console.log(res)
}
fn(obj2)
3.樹的遍歷
const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { length: 2, 0: 'aaa', 1: 'bbb', 2: 'ccc' }
var obj2 = [{
[PROP_NAME]: 'fdfdsa',
id: 1,
name: 'nike',
child: [
{
id: 11,
name: 'air jorden',
child: [
{ id: 111, name: 'aj1' },
{ id: 112, name: 'aj max' }
]
},
{
id: 12,
name: 'air force',
child: [
{ id: 121, name: 'air force1' },
{ id: 122, name: 'air force2' }
]
}
]
}]
function fn(par) {
for (var i in par) {
console.log(par[i].name)
if(par[i].child){
fn(par[i].child)
}
}
}
fn(obj2)
