2020/12/30 (2)

注意：此文章内容基本是借鉴而来。

前端渲染数据，避免不了需要对后端返回的数组数据进行有必要的遍历，当然啦，这个数据可以是后台处理，但是，并不是处处都是要为难后台开发小伙伴的，有些简单的可以由我们自己处理，这个就要需要了解一下，数组循环的方式。

遍历数组通常用for循环、 ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {
  console.log(myArray[index]);
}

for in遍历数组的毛病

1.index索引为字符串型数字，不能直接进行几何运算 2.遍历顺序有可能不是按照实际数组的内部顺序 3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性所以for in更适合遍历对象，不要使用for in遍历数组。for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

遍历对象

通常用for in来遍历对象的键名 for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

同样可以通过ES5的Object.keys(myObject)获取对象的实例属性组成的数组，不包括原型方法和属性

//使用for of 实现对象的循环
for (var key of Object.keys(myObject)){
   console.log(myObject[key]);
}

foreach

接收一个回调函数作为参数, 该回调接收3个参数。

item：每个元素
index：元素数组下标
arr：数组本身

arr.forEach((item,index,arr)=>{
    //代码
})

注意：forEach到底会不会改变原数组，分类型，如果循环改变的数据是原始类型，不会改变元素组，如果循环改变的是引用类型的数据，由于内存地址的原因，则会发生改变

var arr1=[1,2,3];
arr1.forEach(item=>{
 item = item*item;
})
console.log(arr1);
//[1,2,3]  值不发生改变

var arr2=[{a:1},{a:2},{a:3}];
arr2.forEach(item=>{
 item = item.a*item.a;
})
console.log(arr2);
//[{a:1},{a:4},{a:9}];  //值发生改变

map

map的用法和forEach差不多，但 map 有返回值。

map() 不会对空数组进行检测。
map() 不会改变原始数组。

const brr= arr.map((item,index,arr)=>{
    //代码
    return item * 2;
})
console.log(brr) // [2, 4, 6]

filter

filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

const arr = [
    {name:'tony',age:'20'},
    {name:'jack',age:"30"}
]
const brr = arr.filter(item=>{
    return item.age > 20;
})
console.log(brr) // [{name:'jack',age:"30"}]

every

every() 是对数组中的每一项运行给定函数。如果该函数对每一项返回 true ,则返回 true (全部符合条件)，否则返回 false。

every() 不会对空数组进行检测。
every() 不会改变原始数组。

const arr= [50, 6, 70, 80];
const flag = arr.every((item,index,arr)=>{
    return item > 50; //每一项数据都要大于50
})

console.log(flag) // false

some

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。(只要有一个符合)，否则返回false

some() 不会对空数组进行检测。
some() 不会改变原始数组。

const arr= [50, 6, 70, 80];
const flag = arr.some((item,index,arr)=>{
    return item > 50; //只要有一项数据都要大于50
})

console.log(flag) // true

reduce

reduce()方法接收一个函数作为累加器,数组中每个值(从左往右)开始缩减,最终计算为一个值。

reduce() 对于空数组是不会执行回调函数的。

const arr = [1, 2, 3]

arr.reduce((initialValue, currentValue, index, arr) => {
    console.log(initialValue) // 第一次循环  initialValue = 1
    return initialValue + currentValue; // 6   
})

arr.reduce((initialValue, currentValue, index, arr) => {
    console.log(initialValue) // 第一次循环 initialValue = 10
    return initialValue + currentValue; // 16  
}, 10)

reduceRight

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

reduceRight() 对于空数组是不会执行回调函数的。

const arr = [1, 2, 3]

arr.reduceRight((initialValue, currentValue, index, arr) => {
    console.log(initialValue) // 第一次循环  initialValue = 3
    return initialValue + currentValue; // 6   
})

arr.reduceRight((initialValue, currentValue, index, arr) => {
    console.log(initialValue) // 第一次循环 initialValue = 10
    return initialValue + currentValue; // 16  
}, 10)

find

返回数组中符合测试函数条件的第一个元素。否则返回undefined

find() 对于空数组，函数是不会执行的。
find() 并没有改变数组的原始值。

const arr = [
    {name:'tony',age:'20'},
    {name:'jack',age:"30"}
]
const result = arr.find(item=>{
    return item.name === 'jack';
})

console.log(result) //  {name:'jack',age:"30"}

findIndex

返回传入一个测试函数条件的第一个元素的位置，没有则返回 -1。

findIndex() 对于空数组，函数是不会执行的。
findIndex() 并没有改变数组的原始值。

const arr = [
    {name:'tony1',age:'20'},
    {name:'tony2',age:'20'},
    {name:'tony3',age:'20'},
    {name:'jack',age:"30"},
]
const result = arr.findIndex(item=>{
    return item.name === 'jack';
})
console.log(result) // 3

keys、values、entries

它们都返回一个遍历器对象，可以用 for...of 循环进行遍历。

keys() —— 返回元素索引
values() —— 返回元素本身
entries() —— 返回元素和索引

const arr = ['a', 'b', 'c']
for (let index of arr.keys()) {
    console.log(index);
}
// 0
// 1
// 2
for (let elem of arr.values()) {
    console.log(elem); // a  b  c
}
// a
// b
// c
for (let [index, elem] of arr.entries()) {
    console.log(index, elem);
}
// 0 "a"
// 1 "b"
// 2 "c"

每日一题