摘要：这篇文章，向大家展现了在日常开发中，数组有哪些小技巧值得借鉴和学习。
在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：数组技巧知多少》，原文作者：运气男孩。
点击关注，第一工夫理解华为云陈腐技术~