重庆做网站好的公司,基于vue的个人网站开发,网站开发安装环境,广州企业公司大全splice、 slice、 pop 和 shift。数组的排序方法是稳定且非原地算法的吗#xff1f;要记住所有 JavaScript 数组方法以及它们之间的区别并不容易。它们的名称相似#xff0c;就好像直接从同义词词典中提取一样。
这个数组速查表列出了 JavaScript 中通常需要的所有数组方法要记住所有 JavaScript 数组方法以及它们之间的区别并不容易。它们的名称相似就好像直接从同义词词典中提取一样。
这个数组速查表列出了 JavaScript 中通常需要的所有数组方法以及不需要的方法都不包含在内。就是这么简单为了让您更容易理解我基于常见用例制作了这个速查表。
在我们开始之前关于不可变性Immutability有一点需要注意。本文中使用的所有函数都是不可变的简而言之这意味着在使用这些方法时您永远不会改变原始数组。不可变性在现代 JavaScript 中非常重要。 Stack Overflow 中对 Immutability 的理解。 尽管这些方法在各自的操作中都是不可变的但您仍然不能完全确保不可变性。如果在不可变数组中包含可变数据类型数组、对象、函数您仍然可以修改数组内部的可变数据。我们将这种数组称为浅不可变数组与深不可变数组相对后者仅包含不可变项。 在数组的开头添加元素 要将一个项目添加到数组的开头使用数组扩展array spreading。不要使用 unshift 方法因为它会修改原始数组。 const arr [1, 2, 3];
const result [0, ...arr];
console.log(result);
// [0, 1, 2, 3]在数组的末尾添加元素 要在数组的末尾追加一个项目使用数组展开array spreading。不要使用 push 方法因为它会修改原始数组。 const arr [1, 2, 3];
const result [...arr, 4];
console.log(result);
// [1, 2, 3, 4]从数组的开头移除一个元素 要移除数组中的第一个项目使用 slice 方法。不要使用 shift 或 splice 方法因为它们会修改原始数组。 const arr [1, 2, 3];
// 保留索引1及其之后的所有元素
const result arr.slice(1);
console.log(result);
// [2, 3]从数组的末尾移除一个元素 要移除数组中的最后一个项目使用 slice 方法。不要使用 pop 或 splice 方法因为它们会修改原始数组。 const arr [1, 2, 3];
// 保留索引0及其之后的所有元素除了数组中的一个元素。
const result arr.slice(0, -1);
console.log(result);
// [1, 2]在数组中的特定索引位置插入元素 要在数组的特定索引位置添加一个元素可以使用 toSpliced 方法。不要使用 splice 方法因为它会修改原始数组。 const arr [1, 2, 3];
// 保留索引1删除0个元素在索引1插入元素 one point five并保留其后的所有元素。
const result arr.toSpliced(1, 0, one point five);
console.log(result);
// [1, one point five, 2, 3]在数组中替换特定索引位置的元素 要在数组中替换特定索引位置的元素可以使用 toSpliced 或 with 方法。不要使用 splice 方法因为它会修改原始数组。 const arr [1, 2, 3];
// 使用 toSpliced。
// 保留索引1删除1个元素在索引1插入元素 two并保留其后的所有元素。
const result1 arr.toSpliced(1, 1, two);
console.log(result1);
// [1, two, 3]
// 使用 with。
// 复制旧数组 arr将索引1替换为 two。
const result2 arr.with(1, two);
console.log(result2);
// [1, two, 3]从数组中删除特定索引位置的元素 要从数组中移除一个项可以使用 toSpliced 方法。不要使用 splice 方法因为它会修改原始数组。 const arr [1, 2, 3];
// 在索引1处删除1个元素。
const result arr.toSpliced(1, 1);
console.log(result);
// [1, 3]从数组中根据值移除一个元素 要从数组中删除特定的值可以使用 filter 方法。不要将 indexOf 与 splice 方法一起使用因为它会修改原始数组。 const arr [1, 2, 3];
const result arr.filter((element) element ! 2);
console.log(result);
// [1, 3]从数组中根据属性移除对象 要从数组中删除具有特定属性的对象可以使用 filter 方法。不要将 findIndex 与 splice 方法一起使用因为它会修改原始数组。 const arr [{ num: 1 }, { num: 2 }, { num: 3 }];
const result arr.filter((obj) obj.num ! 2);
console.log(result);
// [{ num: 1 }, { num: 3 }]检查数组是否包含一个元素 要检查数组是否包含一个值可以使用 includes 方法。 const arr [1, 2, 3];
const result arr.includes(2);
console.log(result);
// true检查数组是否包含具有特定属性的对象 要检查数组是否包含具有特定属性的对象可以使用 some 方法。 const arr [{ num: 1 }, { num: 2 }, { num: 3 }];
const result arr.some((obj) obj.num 2);
console.log(result);
// true检查数组中的所有对象是否都具有特定属性 要检查数组中的每个对象是否都具有特定属性可以使用 every 方法。 const arr1 [{ num: 1 }, { num: 2 }, { num: 3 }];
const result1 arr1.every((obj) obj.num 2);
console.log(result1);
// false
const arr2 [{ num: 2 }, { num: 2 }, { num: 2 }];
const result2 arr2.every((obj) obj.num 2);
console.log(result2);
// true将数组转换为对象 要将数组转换为自定义对象可以使用 reduce 方法。 // 将键映射到值的函数。
const arr1 [1, 2, 3];
const result1 arr1.reduce((acc, cur, index) {acc[attr${index}] cur;return acc;
}, {});
console.log(result1);
// { attr0: 1, attr1: 2, attr2: 3 }
// 一个计算出现次数的函数可能如下所示。
const arr2 [a, b, c, c];
const result2 arr2.reduce((acc, cur) {if (acc[cur]) {acc[cur] 1;} else {acc[cur] 1;}return acc;
}, {});
console.log(result2);
// { a: 1, b: 1, c: 2 })
// 将数组元素映射到布尔值的函数可以如下所示。
// 即将数组转换为对象键。
const arr3 [a, b, c];
const truthValues [b, c];
const result3 arr3.reduce((acc, cur) {acc[cur] truthValues.includes(cur);return acc;
}, {});
console.log(result3);
// { a: false, b: true, c: true }将对象数组转换为对象 要将对象数组转换为对象可以使用 Object.assign方法和数组扩展语法。 const arr [{ attr1: 1 }, { attr2: 2 }, { attr3: 3 }];
const result Object.assign({}, ...arr);
console.log(result);
// { attr1: 1, attr2: 2, attr3: 3 }将对象转换为数组 要从对象创建一个数组可以使用 Object.keys、Object.values 或 Object.entries 方法可能与 map 方法一起使用。 const obj { a: 1, b: 2, c: 3 };
// 键的数组。
const result1 Object.keys(obj);
console.log(result1);
// [a, b, c]
// 值的数组。
const result2 Object.values(obj);
console.log(result2);
// [1, 2, 3]
// 键值对象的数组。
const result3 Object.entries(obj).map(([key, value]) ({ key, value }));
console.log(result3);
// [{ key: a, value: 1 }, { key: b, value: 2 }, { key: c, value: 3 }]在某些情况下可以链式使用一些 map 和 filter方法来修改和筛选值。 const obj { a: 1, b: 2, c: 3 };
// 具有平方值大于3的值的数组。
const result1 Object.values(obj).map((value) value * value).filter((value) value 3);
console.log(result1);
// [4, 9]
// 具有值大于1的键值对象的数组。
const result2 Object.entries(obj).map(([key, value]) ({ key, value })).filter((keyValueObj) keyValueObj.value 1);
console.log(result2);
// [{ key: b, value: 2 }, { key: c, value: 3 }]合并两个数组 要合并两个 JavaScript 数组可以使用 concat 方法或数组的扩展语法。不要使用 push 方法因为它会修改原始数组。 const arr1 [1, 2, 3];
const arr2 [4, 5, 6];
// 使用 concat 方法更快。
const combinedArray1 arr1.concat(arr2);
console.log(combinedArray1);
// [1, 2, 3, 4, 5, 6]
// 使用扩展语法可能更可读。
const combinedArray2 [...arr1, ...arr2];
console.log(combinedArray2);
// [1, 2, 3, 4, 5, 6]对数组进行排序 如果要按值对数组进行排序可以使用 toStorted方法。toStorted 方法是稳定的这意味着它会保持相互相等的元素的顺序不变。而且该方法是非原地的通常这是一件好事因为它不会修改现有的数组。不要使用 sort 方法因为它会进行原地排序从而修改原始数组。 // 对字符串进行排序。
let arr1 [b, c, a];
const result1 arr1.toSorted();
console.log(result1);
// [a, b, c]
// 注意数字是按其 toString 值进行排序的而不是按其数值进行排序的
const arr2 [10, 1, 5];
const result2 arr2.toSorted();
console.log(result2);
// [1, 10, 5]
// 若要对数字进行排序可以使用比较器。
const arr3 [10, 1, 5];
const result3 arr3.toSorted((a, b) a - b);
console.log(result3);
// [1, 5, 10]对对象数组进行排序 要按值对数组进行排序请使用具有比较函数的 toStorted 方法。比较函数用于确定两个值中哪个应该首先排序。toStorted 方法是稳定的这意味着它会保持相互相等的元素的顺序不变。此方法不会原地排序通常这是一件好事因为它不会修改现有的数组。不要使用 sort 方法因为它会修改原始数组。 const arr [{ num: 3 }, { num: 1 }, { num: 2 }];
// 如果比较函数返回正值objA 将在 objB 之前排序。
const byNumberAttribute (objA, objB) objA.num - objB.num;
const result1 arr.toSorted(byNumberAttribute);
console.log(result1);
// [{ num: 1 }, { num: 2 }, { num: 3 }]
// 更通用的比较函数。
const byAttribute (attr) (objA, objB) objA[attr] - objB[attr];
const result2 arr.toSorted(byAttribute(num));
console.log(result2);
// [{ num: 1 }, { num: 2 }, { num: 3 }]
// 注意比较函数必须返回整数值。
// 如果需要对其他数据类型进行排序可以返回 1、0 或 -1。
const arr3 [{ letter: c }, { letter: a }, { letter: b }];
const alphabetically (objA, objB) {if (objA.letter objB.letter) {return -1;}
if (objA.letter objB.letter) {return 1;}
// objA objBreturn 0;
};
const result3 arr3.toSorted(alphabetically);
console.log(result3);
// [{ letter: a }, { letter: b }, { letter: c }]反转数组 要反转数组中的所有值请使用 toReversed 方法。 const arr [1, 2, 3];
const result arr.toReversed(2);
console.log(result);
// [3, 2, 1]从数组中移除重复项 要从数组中移除重复的元素可以使用 filter 方法或使用集合Set。 const arr [1, 2, 3, 2, 1];
// 使用 filter 方法。
const result1 arr.filter((item, index) arr.indexOf(item) index);
console.log(result1);
// [1, 2, 3]
// 使用 Set。
const result2 [...new Set(arr)];
console.log(result2);
// [1, 2, 3]在这篇博客中我们深入研究了JavaScript数组的20个必备高效技巧旨在帮助您更智能、更高效地处理数组数据。我们从数组的基础操作开始逐步引导您掌握更高级的技能。
我们学到了如何在数组的开头和末尾添加、移除元素以及如何在特定索引位置插入、替换和删除元素而不会影响原始数组。我们了解了如何检查数组中是否包含特定元素以及如何将数组转换为对象或对象数组转换为对象或数组。我们还探讨了如何合并两个数组对数组进行排序包括对象数组以及如何反转数组和去除重复项。
这些技巧不仅仅是一堆代码示例它们代表了更深刻的概念涉及到JavaScript中数组操作的核心原则。通过掌握这些技巧您将能够
编写更整洁、可读和高效的代码。更智能地处理数组数据无论是在前端还是后端开发中。解决各种常见问题从数据过滤到数据转换和排序。提高您的编码技能使您成为JavaScript数组操作的专家。
不管您是新手还是经验丰富的开发者这些技巧都将成为您工具箱中的宝贵资产。JavaScript数组是开发中不可或缺的一部分精通数组操作将使您的项目更具竞争力。
如果您想更深入地了解这些技巧我鼓励您动手实践。尝试在自己的项目中应用它们以加深理解。最重要的是保持好奇心不断学习和探索因为JavaScript的世界充满了无限的可能性。
感谢您阅读这篇博客希望它为您提供了有价值的知识帮助您在JavaScript数组操作中取得更大的成功。如果您有任何问题或反馈请随时与我联系。愿您的编码之路充满挑战和成就
