数组常用方法
2019-07-29 本文已影响0人
没了提心吊胆的稗子
forEach
不支持return
遍历数组每一项
声明式 不关心如何实现
forEach, for in, for, for of 的区别
arr.forEach((item) => { // 声明式 不关心如何实现
console.log(item);
});
for(let key in arr){ // key 会变成字符串类型
console.log(typeof key); // 可以遍历除数组以外的私有属性
}
let obj = {name: 'zhangsan', age: 8}; // Object.keys 将对象的key作为新的数组
for(let val of Object.keys(obj)){ // 支持return 值of数组 不能遍历对象
// ['name','age']
console.log(obj[val]);
}
filter
是否操作原数组:不;
返回结果:过滤后的新数组;
是否改变原数组:否 回调函数返回的结果:
返回true 表示这一项放入新数组
let newArr = [1,2,3,4,5].filter((item) => {
return item > 2 && item < 5;
});
console.log(newArr); // 1 === 1 === 1 => false
map
映射 将原有数组映射成一个新数组
是否操作原数组:不; 返回结果:过滤后的新数组;
回调函数返回的结果:返回什么这一项就是什么
let arr1 = [1,2,3].map((item) => {
return `<li>${item}</li>`; //`` es6中的模板字符串 ${}取变量
});
console.log(arr1.join(''));
includes
返回Boolean
包含传入参数就是true,反之false
let arr2 = [1,2,3,4,5];
console.log(arr2.includes(5));
find
返回找到的那一项
不会改变原数组
返回true表示找到了
找到即停止
找不到返回undefined
let result = arr2.find((item, index) => { // 找到具体的某一项
return item === 5
});
console.log(result);
some
找到true后停止 返回true 找不到返回false
every
找到false后停止 返回false
reduce
收敛
4个参数 (prev, next, index, item)
第一次循环:prev表示第一项,next表示第二项,index是next的下标,item是原数组
第二次循环:prev是undefined,next是第三项,......
。。。。。
undefined的原因是因为没有return ,当前循环的返回值会是下一次的prev
(可做累加)
返回叠加后的结果
原数组不变
let sum = [1,2,3,4,5].reduce((prev, next, index, item) => {
// 本次的返回值会作为下一次循环的prev
return prev + next;
});
console.log(sum);
let sum1 = [{price:30, count:2},{price:40, count:3},{price:50, count:4}]
.reduce((prev, next) => {
// return prev.price * prev.count + next.price * next.count
// 这样第二次遍历的时候prev就是一个数字没有price count属性
return prev + next.price * next.count
}, 0); // 默认指定第一次的prev
console.log(sum1);
// 数组扁平
let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce((prev, next) => {
return prev.concat(next)
});
console.log(flat);