数组常用方法总结 (7) ：copyWithin / fill / reduce / reduceRight

news2025/1/15 17:06:04

copyWithin

将指定位置的元素复制到数组的其他位置。
返回值为移动后数组。
原始数组的内容会被改变，原始数组的长度不会改变。
arr.copyWithin(index, startIndex, endIndex)
第一个参数为，期望被复制的内容将要插入的位置。
第二个参数为，数组中复制的内容起始的位置。
第三个参数为，数组中复制的内容截至的位置。

// 简单数组
let arr = [12, 18, 53, 100];
// 复杂数组
let arr2 = [
    { num: "0", value: "12" },
    { num: "1", value: "18" },
    { num: "2", value: "53" },
    { num: "3", value: "100" },
];
let result1 = arr.copyWithin(2, 0); 
// 复制出的内容：从 0 开始复制，一直复制到数组末尾.
// 将复制出的内容，插入到数组索引为 2 的位置。
// 应用本例解释为：复制出的内容为 12 18 53 100，将此内容插入到原本 53 的位置。
// 并覆盖掉原始的内容（复制内容的长度为 2，则覆盖的长度为 2），得到 12 18 12 18

let result2 = arr2.copyWithin(1, 0, 1); 
// 复制出的内容：从 0 开始复制，复制到 1.
// 将复制出的内容，插入到数组索引为 1 的位置。
// 应用本例解释为：复制出的内容为 { num: "0", value: "12" }，将此内容插入到原本 { num: "1", value: "18" } 的位置。
// 并覆盖掉原始的内容（复制内容的长度为 1，则覆盖的长度为 1），得到如图结果

console.log('result1',result1,arr);
console.log('result2',result2,arr2);

copyWithin

fill

将传入的参数填充到数组的指定位置。
返回值为移动后数组。
原始数组的内容会被改变。
arr.fill(value, startIndex, endIndex)
第一个参数为，希望被填充的内容。
第二个参数为，填充内容覆盖的起始位置。
第三个参数为，填充内容覆盖的截至位置。

// 简单数组
let arr = [12, 18, 53, 100];
// 复杂数组
let arr2 = [
    { num: "0", value: "12" },
    { num: "1", value: "18" },
    { num: "2", value: "53" },
    { num: "3", value: "100" },
];
let result3 = arr.fill("11", 0, 2); 
// 填充内容为字符串 '11'
// 数组中索引为 0 的位置到索引为 2 的位置，填充为 '11' 

let result4 = arr2.fill({ num: "4", value: "256" }, 0, 2);
// 填充内容为对象 { num: "4", value: "256" }
// 数组中索引为 0 的位置到索引为 2 的位置，填充为 { num: "4", value: "256" } 

console.log('result3',result3,arr);
console.log('result4',result4,arr2);

fill

reduce

方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
不会对原始数组进行更改。
arr.reduce((prev,cur,index,arr)=>{},init)
prev：上一次回调函数的返回值，默认为 init
cur：当前回调函数内，正在处理的数组元素
index：当前回调函数内，正在处理的数组元素的索引值
arr：原始数组
init：初始值
普通示例 - 观察参数值

let reduceArr = [1, 2, 3, 4];
let result5 = reduceArr.reduce((prev, cur, index, arr) => {
    console.log(
        "prev：" + prev + "，cur：" + cur + "，index：" + index + "，arr：" + arr
    );
    return cur;
}, 0);
console.log('result5',result5,reduceArr); // 4

reduce-普通示例

常用方法 - 累加器

let reduceArr = [1, 2, 3, 4];
let result6 = reduceArr.reduce((prev, cur, index, arr) => {
    console.log(
        "prev：" + prev + "，cur：" + cur + "，index：" + index + "，arr：" + arr
    );
    // 返回值为上一次返回的内容加当前值
    return prev + cur;
}, 0);
console.log('result6',result6); // 10
// 第一次：
// prev：0，cur：1，返回结果 prev + cur 为 1
// 第二次：
// prev：1，cur：2，返回结果 prev + cur 为 3
// 第三次：
// prev：3，cur：3，返回结果 prev + cur 为 6
// 第四次：
// prev：6，cur：4，返回结果 prev + cur 为 10

reduce-累加器

常用方法 - 计算元素出现次数

let reduceArr = ['qqq', 'www', 'qqq', 'eee'];
let result7 = reduceArr.reduce((prev, cur, index, arr) => {
    console.log(
        "prev：" + prev + "，cur：" + cur + "，index：" + index + "，arr：" + arr
    );
    if (cur in prev) {
    	// 如果当前值已经在返回结果的对象中了，则对结果加1
        prev[cur]++;
    } else {
    	// 如果当前值没有在返回结果中，则为返回结果新增一个属性
        prev[cur] = 1;
    }
    return prev;
    // 初始值为空对象
}, {});
console.log('result7',result7,reduceArr);
// 第一次：
// prev：{}，cur：'qqq'，属性 'qqq' 不在 prev 中，则进入判断 else，返回结果 prev 为 { 'qqq': 1 }
// 第二次：
// prev：{ 'qqq': 1 }，cur：'www'，属性 'www' 不在 prev 中，则进入判断 else，返回结果 prev 为 { 'qqq': 1, 'www': 1 }
// 第三次：
// prev：{ 'qqq': 1, 'www': 1 }，cur：'qqq'，属性 'qqq' 在 prev 中，则进入判断 if，返回结果 prev 为 { 'qqq': 2, 'www': 1 }
// 第四次：
// prev：{ 'qqq': 2, 'www': 1 }，cur：'eee'，属性 'eee' 不在 prev 中，则进入判断 else，返回结果 prev 为 { 'qqq': 2, 'www': 1, 'eee': 1 }

reduce-计算

reduceRight

方法接收一个函数作为累加器，数组中的每个值（与 reduce 不同，顺序是从右到左）开始缩减，最终计算为一个值。
不会对原始数组进行更改。
arr.reduce((prev,cur,index,arr)=>{},init)
prev：上一次回调函数的返回值，默认为 init
cur：当前回调函数内，正在处理的数组元素
index：当前回调函数内，正在处理的数组元素的索引值
arr：原始数组
init：初始值
普通示例 - 观察参数值

let reduceArr = [1, 2, 3, 4];
let result8 = reduceArr.reduceRight((prev, cur, index, arr) => {
    console.log(
        "prev：" + prev + "，cur：" + cur + "，index：" + index + "，arr：" + arr
    );
    return cur;
}, 0);
console.log('result8',result8,reduceArr); // 1