美文网首页
数组常用方法

数组常用方法

作者: 没了提心吊胆的稗子 | 来源:发表于2019-07-29 10:47 被阅读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);

相关文章

网友评论

      本文标题:数组常用方法

      本文链接:https://www.haomeiwen.com/subject/dkuvrctx.html