wordpress最新教程,网站优化要做哪些工作,网站建设与管理项目1项目规划,揭阳做网站建设公司1.使用ES6的Set数据结构
Set是一种只存储唯一值的数据结构#xff0c;因此任何重复的元素都会被自动忽略。然后#xff0c;我们使用扩展运算符…将Set对象转换回数组#xff0c;并返回这个新的数组。
请注意#xff0c;这种方法会改变原始数组中元素的顺序#xff0c;因…1.使用ES6的Set数据结构
Set是一种只存储唯一值的数据结构因此任何重复的元素都会被自动忽略。然后我们使用扩展运算符…将Set对象转换回数组并返回这个新的数组。
请注意这种方法会改变原始数组中元素的顺序因为Set不保证元素的插入顺序。如果你需要保持元素的原始顺序那么你可能需要使用其他方法例如使用filter()方法和indexOf()方法来检查元素是否已经在结果数组中。
function removeDuplicates(array) { return [...new Set(array)];
} // 使用示例
const arr [1, 2, 2, 3, 4, 4, 5, 5, 5];
const uniqueArr removeDuplicates(arr);
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]2.使用filter()方法和indexOf()方法
这种方法通过遍历数组并使用indexOf()检查当前元素是否首次出现来实现去重。
function removeDuplicates(array) { return array.filter((item, index) { return array.indexOf(item) index; });
} const arr [1, 2, 2, 3, 4, 4, 5, 5, 5];
const uniqueArr removeDuplicates(arr);
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]3.使用reduce()方法
reduce()方法可以将数组元素组合成一个新值我们可以利用它来创建一个没有重复元素的数组。
function removeDuplicates(array) { return array.reduce((accumulator, current) { if (!accumulator.includes(current)) { accumulator.push(current); } return accumulator; }, []);
} const arr [1, 2, 2, 3, 4, 4, 5, 5, 5];
const uniqueArr removeDuplicates(arr);
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]4.使用Map数据结构
Map对象允许你存储键值对并且键是唯一的。我们可以利用这个特性去除重复元素。
function removeDuplicates(array) { const map new Map(); array.forEach(item map.set(item, true)); return Array.from(map.keys());
} const arr [1, 2, 2, 3, 4, 4, 5, 5, 5];
const uniqueArr removeDuplicates(arr);
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]5.使用两层循环
这种方法通过两层循环来比较和删除重复的元素虽然效率不如前面提到的方法但在一些简单的场景下仍然可以使用。
function removeDuplicates(array) { for (let i 0; i array.length; i) { for (let j i 1; j array.length; j) { if (array[i] array[j]) { array.splice(j, 1); j--; // 因为删除了一个元素所以索引需要回退一位 } } } return array;
} const arr [1, 2, 2, 3, 4, 4, 5, 5, 5];
const uniqueArr removeDuplicates(arr);
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]每种方法都有其优缺点你可以根据具体的场景和需求选择最适合的方法。在性能敏感的场景下使用Set或Map通常会比使用循环更高效。 拓展一下♀️
indexOf()
indexOf() 是 JavaScript 数组Array对象的一个方法它用于返回在数组中可以找到给定元素的第一个索引如果不存在则返回 -1。
这个方法接受两个参数
searchElement必需要查找的元素。 fromIndex可选开始查找的位置。如果该索引值大于或等于数组长度则返回 -1即数组不会被搜索。如果为负值则将其作为从数组末尾开始的偏移量。即使该值为负数它仍然从前往后搜索。如果省略该参数则整个数组都会被搜索。 下面是一个使用 indexOf() 方法的例子
const array [2, 5, 9, 1]; const index array.indexOf(9);
console.log(index); // 输出: 2 const notFoundIndex array.indexOf(3);
console.log(notFoundIndex); // 输出: -1 const fromIndexIndex array.indexOf(2, 3);
console.log(fromIndexIndex); // 输出: -1因为从索引 3 开始查找数组中没有更多的 2reduce()
reduce() 是 JavaScript 数组Array对象的一个方法它接收一个函数作为累加器accumulator数组中的每个值从左到右开始缩减最终为一个值。
reduce() 方法的基本语法如下
array.reduce(function(accumulator, currentValue, currentIndex, array) { // 返回累加器积累的结果
}, initialValue);参数说明
function(accumulator, currentValue, currentIndex, array): 执行数组中每个元素调用的函数它包含四个参数。 accumulator必需累积器累积回调函数的返回值它是上一次调用回调时返回的累积值或者是initialValue如果提供了的话。 currentValue必需数组中正在处理的当前元素。 currentIndex可选数组中正在处理的当前元素的索引。如果提供了initialValue则索引为0否则从索引1起始。 array可选调用reduce()的数组。 initialValue可选作为第一次调用callback函数时的第一个参数的值。如果没有提供初始值则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce将报错。 reduce() 方法非常适合将数组元素组合成单个输出值比如求和、求积或者将数组对象合并为单一对象。
以下是一些使用 reduce() 方法的例子
求和
const numbers [1, 2, 3, 4, 5];
const sum numbers.reduce((accumulator, currentValue) accumulator currentValue, 0);
console.log(sum); // 输出: 15数组元素去重
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray array.reduce((accumulator, currentValue) { if (!accumulator.includes(currentValue)) { accumulator.push(currentValue); } return accumulator;
}, []);
console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]将多维数组转换为一维数组
const nestedArray [1, [2, 3], [4, [5, 6]]];
const flattenedArray nestedArray.reduce((accumulator, currentValue) { return accumulator.concat(Array.isArray(currentValue) ? currentValue.reduce((a, b) a.concat(b), []) : accumulator.concat(currentValue));
}, []);
console.log(flattenedArray); // 输出 [1, 2, 3, 4, 5, 6]计算数组中每个元素出现的次数
const votes [vue, react, angular, vue, react, angular, vue, react, vue];
const count votes.reduce((accumulator, currentValue) { if (!accumulator[currentValue]) { accumulator[currentValue] 1; } else { accumulator[currentValue]; } return accumulator;
}, {});
console.log(count); // 输出 { vue: 4, react: 3, angular: 2 }对象属性的累加
const items [ { name: item1, price: 10 }, { name: item2, price: 20 }, { name: item3, price: 30 }
];
const totalPrice items.reduce((accumulator, currentValue) accumulator currentValue.price, 0);
console.log(totalPrice); // 输出 60字符串连接
虽然这可以用 join() 方法更简单地完成但 reduce() 也可以用来连接数组中的字符串元素。
const words [Hello, world, !];
const sentence words.reduce((accumulator, currentValue) accumulator currentValue);
console.log(sentence); // 输出 Hello world !这些只是 reduce() 方法的一些应用场景示例。实际上由于 reduce() 的灵活性它可以用于任何需要累积或缩减数组元素的场景。
