ES6你不知道的事儿

Posted 2021-09-10 zhaojiaershao

修改数组中的某一项或多项 fill

value:需要填充的值（必填）
start:开始填充的位置（可选）
end:停止填充的位置；默认为array.length（可选）

let arr = [1, 2, 3, 4, 5]
arr.fill(6,6,7)

数组扁平化 flat

var arr = [555,[888,[99]], , 999];

console.log(arr.flat(Infinity)) // [555, 888, 99, 999]

flat()默认只会拉平一层，flat（n）拉平n层，Infinity无限次

flat()会跳过空格,返回新数组不改变原数组

forEach终止循环

错误用法一:使用break(会报错)

var array = ["第一","第二","第三","第四"];
        
// 直接就报错了
array.forEach(function(item,index){
    if (item == "第三") {
        break;
    }
    alert(item);
});

错误用法二:使用return false(会跳过当前项,继续循环)

相当于for 循环中的continue

var array = ["第一","第二","第三","第四"];
        
// 会遍历数组所有元素，只是执行跳过"第三"，return false下面的代码不再执行而已
array.forEach(function(item,index){
    if (item == "第三") {
        return false;
    }
    console.log(item);// "第一" "第二" "第四"
});
console.log("以下代码")// 以下代码

正确用法:运用try catch(抛出异常)

try {
    var array = ["第一","第二","第三","第四"];
    
    // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "第三") {
            throw new Error("第三");
        }
        console.log(item);// 第一 第二
    });
} catch(e) {
    if(e.message!="第三") throw e;
};
// 下面的代码不影响继续执行
console.log("下方代码");//下方代码

参考原文

reduce方法

下面是api的使用和每个参数代表的含义：

arr.reduce((prev,cur,index,arr)=>{

},init)

• prev:表示上一次调用回调时的返回值，或者初始值init
• cur:表示当前正在处理的数组元素
• index:表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1
• init: 表示初始值

数组求和

const arr = [1,2,3,4,5,6,7]
const sum = arr.reduce((pre,cur)=>{
    return pre +cur
})
console.log(sum)

数组求和方法是这个reduce方法最常见的使用案例了，但是很多人只知道返回pre + cur就能返回总和，如果我稍微把这个方法下面这样呢

const arr = [1,2,3,4,5,6,7]
const sum = arr.reduce((pre,cur)=>{
    return pre +cur
},2)
console.log(sum)

大家觉得结果还是一样的吗
答案显然是否定的，下面我给大家解释解释：

首先我们要明确的时候，pre表示的是上一次回调时的返回值，或者是初始值init。
在我们第一次调用的时候，第一个案例是没有设置init的值，在没有设置init值的情况下，index的索引值是从1，其实是第一次的时候就隐式调用了pre+cur，你可以理解为是在背后做了pre是0+cur:1。我们在控制台看到的就是整个计算过程是index是1-6。
在第二个案例中，init设置的值是2，那么就是代表pre的初始值就是2，那么第一次的时候，index是从0开始的,第一次调用返回的就是2+arr[1]=3,整个过程index执行是从0-6，共7次

计算数组中每个元素出现的次数

let person = [\'李白\',\'雅典娜\',\'安琪拉\',\'李白\',\'诸葛亮\',\'安琪拉\']
let nameObj = person.reduce((pre,cur) =>{
    if( cur in pre){
        pre[cur]++
    }
    else{
        pre[cur] = 1
    }
    return pre
}, {})
console.log(nameObj) // {李白: 2, 雅典娜: 1, 安琪拉: 2, 诸葛亮: 1}

数组扁平化

const arr2 = [1,[2,[3,[4,5]]],6]
const newArr = (arr) => {
    return arr.reduce((pre,cur)=>{
        return pre.concat(Array.isArray(cur) ? newArr(cur) : cur)
},[])
}
console.log(newArr(arr2)) // [1, 2, 3, 4, 5, 6]

这个方法是使用了递归的方法结合reduce实现的。当然实现数组扁平化的方式不止这一种，另外的几种方式可一查看我的另外一篇博文数组扁平化的方式
数组去重

const arr3 = [1,2,3,4,5,3,2,1,6,4,7,8]
const resultArr = arr3.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }
    else{
        return pre
    }
},[])
console.log(resultArr)

value