数组方法

1.indexOf

  • 查找数组中元素的下标, 找到则会返回元素下标,否则返回-1

1    ['2', 'e', '5'].indexOf('e') // 1
2    ['2', 'e', '5'].indexOf('3') // -1
View Code

2.slice

  • 截取数组的一部分,返回一个新数组,不会改变原数组

  • 起止参数包括开始索引,不包括结束索引,不传递任何参数,就会从头到尾截取元素,赋值这个数组

1    ['A', 'B', 'C', 'D', 'E', 'F', 'G'].slice(2,3) // ["C"]
2    ['A', 'B', 'C', 'D', 'E', 'F', 'G'].slice(3) // ["D", "E", "F", "G"]
3    ['A', 'B', 'C', 'D', 'E', 'F', 'G'].slice() //   ["A", "B", "C", "D", "E", "F", "G"]
View Code

3.push 和 pop

  • push 向数组的末尾添加一个数据, pop 删除数组的最后一项,空数组pop不会报错,返回undefined

1     let arr = [1,3,4]
2     arr.push(5)  // (4) [1, 3, 4, 5]
3     arr.pop() // 5
View Code

4.unshift 和 shift

  • unshift 向数组头部添加数据, shift 删除数组的第一项,空数组shift不会报错,会返回undefined

1     let arr = [1,3,4]
2     arr.unshift(9) // (4) [9, 1, 3, 4]
3     arr.shift() // 9
View Code

5.sort

  • 对数组元素排序,会改变原数组,参数可以接收一个方法,也可以不写参数

1     let arr = [1,4,6,3,2,38,10]
2     arr.sort() // (7) [1, 10, 2, 3, 38, 4, 6]
3     let arr2 = ['e', 'd', 'w', 'sd']
4     arr2.sort() // (4) ["d", "e", "sd", "w"]
5     // 升序
6     arr.sort(function(a,b){return a-b}) // (7) [1, 2, 3, 4, 6, 10, 38]
7     // 降序
8     arr.sort(function(a,b){return b-a}) // (7) [38, 10, 6, 4, 3, 2, 1]
View Code

6.splice

  • 该方法是修改数组的万能方法,可以从指定的索引开始删除若干元素,然后再从该位置添加若干个元素

  • 该方法会修改原数组,返回修改的元素

 1     let arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
 2     let delArr = arr.splice(2, 3 , 'ni', 'hao', 'ma') // 返回删除的元素
 3     delArr // (3) ["Yahoo", "AOL", "Excite"]
 4     arr // (6) ["Microsoft", "Apple", "ni", "hao", "ma", "Oracle"]
 5     // 只删除,不添加
 6     arr.splice(2,3) // ["ni", "hao", "ma"]
 7     arr // ["Microsoft", "Apple", "Oracle"]
 8     // 只添加,不删除
 9     arr.splice(2,0,'ni', 'bu', 'hao') // [] 没删除元素
10     arr // ["Microsoft", "Apple", "ni", "bu", "hao", "Oracle"]
View Code

7.concat

  • 将两个数组拼接起来,返回新数组,不会改变原数组

1     let arr = ['A', 'B', 'C'];
2     let added = arr.concat([1, 2, 3]);
3     added; // ['A', 'B', 'C', 1, 2, 3]
4     arr; // ['A', 'B', 'C']
View Code

8.join

  • 很实用,数组转字符串,把当前的数组的每个元素都用指定的字符串连接起来,然后返回连接后的字符串

1     let arr = ["Microsoft", "Apple", "ni", "bu", "hao", "Oracle"]
2     arr.join('-') // Microsoft-Apple-ni-bu-hao-Oracle"
View Code

9.reverse

  • 数组元素倒倒置,改变原数组

1     let arr = ['hello','zhang', 'li']
2     arr.reverse()
3     arr // (3) ["li", "zhang", "hello"]
View Code

10.lastIndexOf

  • 从数组末尾向前查找,第一次出现的位置,找到返回元素的下标,找不到返回-1

1     let arr = [1,4,7,10,7,18,7,26];
2     arr.lastIndexOf(7) // 6
3     arr.lastIndexOf(7, 2) // 查找到索引为2的元素为止  2
4     arr.lastIndexOf(7, 5) // 4
5     arr.lastIndexOf(5) // -1
View Code

11.forEach

  • 对数组进行遍历循环,这个方法没有返回值(arr.forEach(function(item, index, arr){}))

1     let arr = [1, 2, 3, 4, 5];
2     arr.forEach(function(x, index, a){
3     console.log(x + '|' + index + '|' + (a === arr));
4     });
5     // 1|0|true
6     // 2|1|true
7     // 3|2|true
8     // 4|3|true
9     // 5|4|true
View Code

12.map

  • 指“映射”,方法返回一个新数组,数组元素为原始数组元素调用函数处理后的值

 1     let arr = [1,3,5,7,9]
 2     let arr2 = arr.map((item, index, a) =>{
 3         // console.log(item + ',' + index + ',' + (a === arr))
 4         return item * 2
 5     })
 6         // 1,0,true
 7         // 3,1,true
 8         // 5,2,true
 9         // 7,3,true
10         // 9,4,true
11     arr2 // (5) [2, 6, 10, 14, 18]
12     arr // (5) [1, 3, 5, 7, 9]
View Code

13.filter

  • "过滤"功能,方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素

1     let arr = [2, 6, 10, 14, 18]
2     let arr2 = arr.filter(item => {
3         return item >10
4     })
5     arr2 // [14, 18]
View Code

14.every

  • 判断数组中每一项是否满足条件,只有所有项都满足条件,才会返回true

1     let arr = [2, 6, 10, 14, 18]
2     let result = arr.every(item => {
3         return item > 10
4     })
5     result // false
View Code

15.some

  • 判断数组中是否存在至少一项的项满足条件,就会返回true

1     let arr = [2, 6, 10, 14, 18]
2     let result = arr.some(item => {
3         return item > 10
4     })
5     result // true
View Code

16.reduce 和 reduceRight

  • 这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接收四个参数,分别为初始值,当前值,索引值和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值就是数组的第一项,从数组的第一项开始叠加,缺省参数要比正常传值少一次运算。

  • reduce方法从数组第一项开始,逐个遍历到最后,而reduceRight则是从数组的最后一项开始遍历到第一项

  • reduce语法:arr.reduce(function(total, cur, index, arr){},initialValue)

  • reduceRight(function(total,cur, index, arr){}, initialValue)

 1     let arr = [2,3,5,7,9]
 2     let res = arr.reduce((total, cur, index, arr)=>{
 3         console.log("total:" + total + "cur:" + cur + "index:" + index)
 4         return total + cur
 5     })
 6     // total:2cur:3index:1
 7     // total:5cur:5index:2
 8     // total:10cur:7index:3
 9     // total:17cur:9index:4
10     res // 26
11     let res2 = arr.reduce((total, cur, index, arr)=>{
12         // console.log("total:" + total + "cur:" + cur + "index:" + index)
13         return total + cur
14     },10)
15     res2 // 36
View Code

17.Array.from

  • 从一个类似数组或者可迭代的对象中船舰一个新的数组实例【浅拷贝数组】

  • 语法: Array.from(arrayLike[, mapFn[,thisArg]])

    • arrayLike 想要转换成数组的伪数组对象或可迭代对象。

    • mapFn 如果指定了该参数,新数组中的每个元素会执行该回调函数。

    • thisArg 可选参数,执行回调函数 mapFn 时 this 对象。

  • Array.from() 可以通过以下方式来创建数组对象:

  • 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)

  • 可迭代对象(可以获取对象中的元素,如 Map和 Set 等)

  • Array.from() 方法有一个可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。 这对一些数组的子类,如 typed arrays 来说很重要, 因为中间数组的值在调用 map() 时需要是适当的类型。

 1    Array.from('foo') // [ "f", "o", "o" ]
 2     const set = new Set(['foo', 'bar', 'baz', 'foo'])
 3     Array.from(set) //  [ "foo", "bar", "baz" ]
 4     const map = new Map([[1, 2], [2, 4], [4, 8]]);
 5     Array.from(map); // [[1, 2], [2, 4], [4, 8]]
 6     const mapper = new Map([['1', 'a'], ['2', 'b']]);
 7     Array.from(mapper.values()); // ['a', 'b']
 8     Array.from(mapper.keys()); //  ['1', '2']
 9     // 从类数组对象(arguments)生成数组
10     function f() {
11        return Array.from(arguments);
12     }
13     f(1, 2, 3); // [ 1, 2, 3 ]
14     Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
15     Array.from({length: 5}, (v, i) => i); //  [0, 1, 2, 3, 4]
16     // 数组去重合并
17     function combine(){ 
18         let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
19         return Array.from(new Set(arr));
20     } 
21 
22     let m = [1, 2, 2], n = [2,3,3]; 
23     console.log(combine(m,n)); // [1, 2, 3]
View Code

18.Array.of

  • 是将一组值转变为数组,参数不分类型,只分数量,数量为0返回空数组。

1     let arr1 = Array.of(1,2,3);    
2     let arr2 = Array.of([1,2,3]);
3     let arr3 = Array.of(undefined);
4     let arr4 = Array.of();
5     arr1  // [1, 2, 3]
6     arr2  // [[1, 2, 3]]
7     arr3  // [undefined]
8     arr4  // []
View Code

19.find

  • 方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回true时,find返回缝合条件的元素,之后的值不会再调用执行函数,如果没有符合条件的元素返回undefined

  • 回调函数可以接收三个参数。当前值,当前位置,原数组

  • find 对于空数组,函数是不会着行的,find并没有改变原数组

1     let Arr = [1,2,5,7,5,9];
2     let result1 = Arr.find(function(currentValue,index,arr){            
3         return currentValue>5;
4     });
5     let result2 = Arr.find(function(currentValue,index,arr){            
6         return currentValue>9;
7     });
8     result1 // 7
9     result2 // undefined
View Code

20.findIndex

  • findIndex和find差不多,不过默认返回的是索引,如果没有符合条件的元素返回 -1

1     let Arr = [1,2,5,7,5,9];
2     let result1 = Arr.findIndex(function(currentValue,index,arr){            
3         return currentValue>5;
4     });
5     let result2 = Arr.findIndex(function(currentValue,index,arr){            
6         return currentValue>9;
7     });
8     result1 // 3
9     result2 // -1
View Code

21.fill

  • fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引, 会改变原数组。

  • 语法 arr.fill(value, start, end)

1     let arr = [1,2,3,4,5,6];
2     arr.fill(0) // (6) [0, 0, 0, 0, 0, 0]
3     arr.fill(0,1) // (6) [1, 0, 0, 0, 0, 0]
4     arr.fill(0,1,2); // [1, 0, 3, 4, 5, 6]
5     arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
6     arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]
View Code

22.keys 和 values 和 entries

  • 这三个方法都是返回一个遍历器对象,可用for...of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

 1     let arr = ["a","b","c","d"];
 2     for(let i of arr.keys()){
 3         console.log(i);
 4     }
 5     for(let i of arr.values()){
 6         console.log(i);
 7     }
 8     for(let i of arr.entries()){
 9         console.log(i);
10     }
11     for(let [idx,item] of arr.entries()){
12         console.log(idx+":"+item);
13     }
View Code

23.includes

  • 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

  • 语法:arr.includes(searchElement , fromIndex)

1     let arr = ["a","b","c","d"];
2     let result1 = arr.includes("b");
3     let result2 = arr.includes("b",2);
4     let result3 = arr.includes("b",-1);
5     let result4 = arr.includes("b",-3);
6     result1 // true
7     result2 // false
8     result3 // fasle
9     result4 // true
View Code

24.copyWithin

  • 用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员

  • 语法:array.copyWithin(target , start , end)

 1     let result1 = [1,2,3,4,5,6].copyWithin(0);
 2     let result2 = [1,2,3,4,5,6].copyWithin(0,1);
 3     let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);
 4     let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);
 5     let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);
 6     result1 //  [1, 2, 3, 4, 5, 6]
 7     result2 //  [2, 3, 4, 5, 6, 6]
 8     result3 //  [1, 4, 5, 4, 5, 6]
 9     result4 //  [1, 3, 4, 5, 5, 6]
10     result5 //  [1, 3, 4, 5, 6, 6]
View Code

25.flat

  • 用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

  • 默认只会“拉平”一层,想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

  • 不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

1     [1, 2, [3, 4]].flat() // [1,2,3,4]
2     [1, 2, [3, [4, 5]]].flat() // [1,2,3,[4,5]]
3     [1, 2, [3, [4, 5]]].flat(2) // [1,2,3,4,5]
4     [1, [2, [3]]].flat(Infinity) // [1,2,3]
5     [1, 2, , 4, 5].flat() // [1, 2, 4, 5] 会跳过空位
View Code

26.flatMap

  • 对原数组每个成员执行一遍函数,相当于执行arr.map(),然后对返回值组成的数组执行flat()方法。该方法会返回一个新数组,不会改变原数组

1     [2,3,4].flatMap((x) => [x, x*2]) 
2     // [2, 4, 3, 6, 4, 8]
View Code

 

posted @ 2020-02-27 17:09  ichthyo-plu  阅读(107)  评论(0编辑  收藏  举报