js中的Array

js中的Array

1. 啥是ArrayLike对象

   类似，下面这种对象的就是ArrayLikevar arraylike = { ???0: "a", ???1: "b", ???2: "c", ???length: 3}arraylike.forEach(element => { // 报错 ???console.log(element);});ArrayLike对象和数组类似，但是不能使用数组的方法，因为它是继承自Object.prototype而不是Array.prototype获取dom元素的方法，一般都会产生ArrayLike对象

2. 将ArrayLike对象转换成Array

   方式一： ???var array = Array.from(arraylike);方式二： ???var array = Array.from(arraylike, item => item+item);

3. reduce方法

   reduce方法其实类似于叠罗汉，取数组中第一个参数和第二个参数做运算，然后将结果返回，作为下一次运算的第一个元素与数组中的第三个元素运算，重复这种操作var array = [1,2,3,4,5];var res = array.reduce((a, b) => a + b); ???????????// 15 求和运算var res = array.reduce((a, b) => a + b, 10); ???????// 25 传递第二个参数作为运算的起始第一个参数数组格式化成对象，这对于处理后端api数据，方便前端渲染很有用 ???var array = [ ???????{name: "小明", age: "10"}, ???????{name: "小张", age: "20"}, ???????{name: "小王", age: "30"}, ???] ???方式一: ???????var obj = array.reduce((a, b) => { ???????????a[b.name] = b.age; ???????????return a; ???????}, {}); ??// { ‘小明‘: ‘10‘, ‘小张‘: ‘20‘, ‘小王‘: ‘30‘ } ???方式二： ???????var obj = array.reduce((a, b) => Object.assign(a, { ???????????[b.name]: b.age ???????}), {}); ???方式三： ???????var obj = array.reduce((a, b) => ({...a, [b.name]: b.age}), {});

4. map方法

   map方法循环便利所有元素，产生一个新的数组var arr = [1,2,3,4,5];var res = arr.map(item => item+1); // [ 2, 3, 4, 5, 6 ]var res = arr.map(function(item){ ???return item+this.init;}, { ???init: 1}); ?// [ 2, 3, 4, 5, 6 ]

5. filter方法

   filter方法循环便利所有元素，根据条件筛选出符合的元素，产生一个新的数组 ???var arr = [1,2,3,4,5]; ???var res = arr.filter(item => item > 3) // [ 4, 5 ]

6. sort方法

   sort方法在原数组的基础上进行排序 ???按照字母表顺序排序 ???????var arr = ["c", "b", "f", 1, "g", 2]; ???????arr.sort((a, b) => a.toString().localeCompare(b)); ?// [ 1, 2, ‘b‘, ‘c‘, ‘f‘, ‘g‘ ] ???升序排序 ???????var arr = [3,5,2,1,9]; ???????arr.sort((a, b) => a - b);

7. for...of

   遍历数组var arr = [3,5,2,1,9];for(let item of arr) { ???console.log(item);}

8. every

   有条件的暂停遍历var arr = [3,5,2,"end",1,9];arr.every(item => { ???console.log(item); ???return item != "end";})

9. some

   和上面的every逻辑上正好相反var arr = [3,5,2,"end",1,9];arr.some(item => { ???console.log(item); ???return item === "end";})

10. find和findIndex

    var arr = [ ???{name: "小明", age: "10"}, ???{name: "小张", age: "20"}, ???{name: "小王", age: "30"},];var res = arr.find(item => item.age==20); ??????// { name: ‘小张‘, age: ‘20‘ }var res = arr.findIndex(item => item.age==20); ?// 1

11. 解构

    var arr = [1,2,3,4,5];var [a,,b, ...c] = arr;console.log(a, b, c); ??// 1 3 [ 4, 5 ]

12. 去重

    var arr = [1,1,2,1,1,2,3,3];利用reduce进行数组去重 ???var res = arr.reduce((a,b) => { ???????if(a.indexOf(b) === -1) { ???????????a.push(b); ???????} ???????return a; ???}, []) // [ 1, 2, 3 ]利用filter进行去重 ???var res = arr.filter((a,b,c) => { ???????return c.indexOf(a) === b; ???}) 利用Set去重 ???var res = [...new Set(arr)];

js中的Array

原文地址：https://www.cnblogs.com/ye-hcj/p/10348251.html