关于javascript:技巧收藏｜10个JavaScript常用数组操作方法

摘要：这篇文章，向大家展现了在日常开发中，数组有哪些小技巧值得借鉴和学习。

在 web 前端开发第二阶段 Javascript 中，数组是一个重要且常见的知识点，咱们常常将数据存储在数组中，遍历数组或替换数组元素日常开发咱们都会用到。学习 web 前端开发，数组也是会常常用到的。这篇文章，向大家展现了在日常开发中，数组有哪些小技巧值得借鉴和学习，那让咱们开始说吧！

1. 增加数组元素

1）push() 在咱们数组的 开端 增加一个或者多个数组元素，push 在英文中也是推的意思

var arr = [1, 2, 3];
// arr. push(4,pink');
console.1og(arr .push(4, 'pink'));
console.1og(arr);

(1)push 是能够给数组追加新的元素

(2) push() 参数间接写数组元素就能够了

(3) push 结束之后，返回的后果是新数组的长度

(4) 原数组也会发生变化

2）. unshift 在咱们数组的 结尾 增加一个或者多个数组元素

console.1og(arr .unshift('red', 'purple'));
console.1og(arr);

(1) unshift 是能够给数组后面追加新的元素

(2) unshift() 参数间接写数组元素就能够了

(3) unshift 结束之后，返回的后果是新数组的长度

(4) 原数组也会发生变化 |

2. 删除数组元素

pop()它能够删除数组的最初一个元素

console .log(arr. pop());
console.log(arr);

1) pop 是能够删除数组的最初一个元素记住一 次只能删除个元素

2) pop() 没有参数

3) pop 结束之后，返回的后果是删除的那个元素

4) 原数组也会发生变化

shift() 它能够删除数组的第一个元素

console.1og(arr .shift());
console.1og(arr);

(1) shift 是能够删除数组的第一个元素记住一 次只能删除个元素

(2) shift() 没有参数

(3) shift 结束之后，返回的后果是删除的那个元素

(4) 原数组也会发生变化

3. 数组去重

怎么对 JS 的数组 去重 ，有个十分疾速且简略的办法，应用new Set() 以及 Array.from() 或者开展运算符(…)

var fruits = [“banana”,“apple”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”];
// 办法一
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // 后果返回 [“banana”,“apple”,“orange”,“watermelon”,“grape”]
// 办法二
var uniqueFruits2 = [...new Set(fruits)];
console.log(uniqueFruits2); // 后果返回[“banana”,“apple”,“orange”,“watermelon”,“grape”]

4. 替换数组

日常开发中常常须要替换或者删除一些指定的数据，遇到这种场景时肯定要联想到 Array.protoType.splice 这个办法。传参时略微简单点，第一个参数是开始的索引，第二个参数是须要删除的数量，剩下的就是须要增加的值（能够是一个或者多个）。

var fruits = [“banana”,“apple”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”];

fruits.splice(0, 2,“potato”,“tomato”);

console.log(fruits); // 后果返回[“potato”,“tomato”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”]

5. 遍历数组

在 遍历数组倡议 应用 for() 循环或者for of；

//for of 遍历数组

var arr=[1,2,3,4];
for(var value of arr){console.log(value)；var arr=[1,2,3,4];
for(arr = 0; arr < arr.length; j++) {}

6. 清空数组

有时咱们须要清空一个数组，比方用户点击了清空购物车。能够一条一条地删除，然而很少有像我这么 可恶 的程序员，hhhhh。其实一行代码就能搞定，那就是间接将 length 设置成 0 就 ok 啦！

var fruits = [“banana”,“apple”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”];
fruits.length = 0;
console.log(fruits); // 返回空 []

7. 数组转换为对象

有时候须要将数组转换成对象的模式，应用 .map() 一类的迭代办法能达到目标，这里还有个更快的办法，前提是你正好心愿对象的 key 就是数组的 索引。

var fruits = [“banana”,“apple”,“orange”,“watermelon”];
var fruitsObj = {…fruits};
console.log(fruitsObj); 
// 后果返回{0:“banana”, 1:“apple”, 2:“orange”, 3:“watermelon”, 4:“apple”, 5:“orange”, 6:“grape”, 7:“apple”}

8. 填充数组

创立数组的时候，你有没有遇到过须要填充上默认值的场景，你必定首先想到的就是循环这个数组。能够用.fill 这个办法

var newArray = new Array(10).fill(“1”);
console.log(newArray); 
// 后果返回的都是 1 [“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”]

9. 合并数组

你晓得如何合并数组吗，答案就是.concat()。

var fruits = [“apple”,“banana”,“orange”];
var meat = [“poultry”,“beef”,“fish”];
var vegetables = [“potato”,“tomato”,“cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); 
// 后果返回 [“apple”,“banana”,“orange”,“poultry”,“beef”,“fish”,“potato”,“tomato”,“cucumber”]

10. 两个数组的交、差、补、并集

找出两个数组的交加的答案有很多，上面展现的是罕用写法，间接应用 filter、concat 来计算

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
// 交加
var c = a.filter(function(v){return b.indexOf(v) > -1 })
// 差集
var d = a.filter(function(v){return b.indexOf(v) == -1 })
// 补集
var e = a.filter(function(v){return !(b.indexOf(v) > -1) })
 .concat(b.filter(function(v){return !(a.indexOf(v) > -1)}))
// 并集
var f = a.concat(b.filter(function(v){return !(a.indexOf(v) > -1)}));
console.log("数组 a：", a);
console.log("数组 b：", b);
console.log("a 与 b 的交加：", c);
console.log("a 与 b 的差集：", d);
console.log("a 与 b 的补集：", e);
console.log("a 与 b 的并集：", f);

小结

这篇文章，向小伙伴们展现了在 JS 中怎么去操作数组的十种小技巧，其实在日常开发中，很可能还会遇到更加简单的业务，心愿你们能一一解剖成小问题，换个角度去思考，最终找到动手的中央来解决问题。

本文分享自华为云社区《web 前端开发之 JavaScript：数组技巧知多少》，原文作者：运气男孩。

点击关注，第一工夫理解华为云陈腐技术~