【javaScript常用数组方法】

javaScript常用数组方法

序号	方法名	功能	返回	是否会改变原数组	版本
1	push()	(在结尾)向数组添加一个或多个元素	返回新数组长度	Y	ES5
2	unshift()	(在开头)向数组添加一个或多个元素	返回新数组长度	Y	ES5
3	pop()	删除数组最后一位元素	返回被删除的数据	Y	ES5
4	shift()	删除数组第一项	返回被删除的数据	Y	ES5
5	reverse()	反转数组中的元素	返回反转后的数组	Y	ES5
6	sort()	排序	返回排序后的新数组	Y	ES5
7	splice()	删除现有元素和/或添加新元素来更改数组内容	返回删除的数据	Y	ES5
8	slice()	截取指定位置的元素	返回被截取的元素形成的新数组	N	ES5
9	join()	用特定的字符，将数组拼接成字符串，默认（“ ， ”）	返回拼接后的字符串	N	ES5
10	concat()	数组连接（合并）	返回合并之后的数组	N	ES5
11	toString()	将数组转换为字符串	返回新数组	N	ES5
12	valueOf()	查询数组原始值	数组的原始值	N	ES5
13	indexOf()	查询某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在 返回 -1	N	ES5
14	lastIdexOf()	反向查询数组某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在 返回 -1	N	ES5
15	forEach()	(迭代) 遍历数组,每次循环中执行传入的回调函数	无/(undefined)	N	ES5
16	map()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组	有/自定义	N	ES5
17	filter()	过滤数组	满足条件的元素组成的新数组	N	ES5
18	every()	(迭代) 判断数组中所有的元素是否满足某个条件	全部满足返回true，只要有一个不满足就返回false	N	ES5
19	some()	(迭代) 判断数组中是否存在,满足某个条件的元素	只要有一个元素满足条件就返回true,都不满足返回false	N	ES5-
20	reduce()	(归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中，我一般用于计算价格 购物车全选 反选	最终操作的结果	N	ES5-
21	includes()	判断一个数组是否包含一个指定的值.	是返回 true，否则false	N	ES6
22	Array.from()	接收伪数组,返回对应的真数组，我一般用于去重Array.from(new Set（arr）)	对应的真数组	N	ES6
23	find()	返回满足条件的第一个元素,不存在返回undefined	满足条件第一个元素/否则返回undefined	N	ES6
24	findIndex()	返回满足条件的第一个元素下标,不存在返回-1	满足条件第一个元素下标,不存在返回-1	N	ES6
25	fill()	用给定值填充一个数组	新数组	N	ES6
26	flat()	用于将嵌套的数组“拉平”，变成一维的数组。	返回一个新数组	N	ES6
27	…

1、arr.length : 获取数组长度

    let arr = [1, 2, 3, [4, 5]];
    console.log(arr.length); //4

2、str.split() : 字符串转数组，语法：split(‘字符串的分隔符’)

    var str = '啊,吧,c' //字符串
    var arr66 = str.split(",") //字符串转数组方法括号里面是 分隔符
    console.log(arr66); //数组

3、arr.join() : 将数组转字符串，语法：join(‘要拼接的字符’)

 let arr1 = [1, 2, 3, 4, 5, 6];
 console.log(arr1.join("-")); //1-2-3-4-5-6

4、arr.push(): 在数组末尾追加元素，返回的是追加后数组元素长度个数

 let arr2 = ["a", "b", "c", "d"];
 console.log(arr2.push("e", "f")); //6

5、arr.unshift() : 在数组头部追加，返回的是追加后数组元素个数

    let arr4 = ["a", "b", "c", "d"];
    console.log(arr4.unshift("aa")); //5

6、arr.pop() : 删除数组最后一个元素，返回值是被删除的元素

    let arr3 = ["a", "b", "c", "d"];
    console.log(arr3.pop()); //d   

7、arr.shift() : 删除数组的第一个元素，返回值是被删除的元素

  	let arr5 = ["a", "b", "c", "d"];
    console.log(arr5.shift()); //a

8、arr.sort() : 数组排序，要用retrun返回出来

		 let arr6 = [1, 59, 6, 9, 2, 4];

    //1,2,4,6,9,59 箭头函数可以省略return只有一行语句时 a-b升序 b-a倒序
    console.log(arr6.sort((a, b) => a - b));

9、arr.reverse() : 数组反转

    let arr7 = ["a", "b", "c", "d"];
    console.log(arr7.reverse()); //d c b a
    //数组方法可以串联例如, 也可以在data中定义,
   //在vue中复杂过重的模板建议写在computed中
    computed: {
 
           xx.split('').reverse().join('')
        }

10、arr.slice() :

1. 可以提取数组中指定元素

2. 该方法不会改变原数组，而是将截取的元素封装到一个新数组返回；

   参数：

   1. 截取开始位置的索引，包含开始索引；
   2. 截取结束位置的索引，不包含结束索引；
   3. 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素；
   4. 索引可以传递一个负值，如果传递一个负值，则从后往前计算
      • ​ -1 ： 倒数第一个
      • -2 ： 倒数第二个

 let arr8 = ["a", "b", "c", "d", "e", "f"];
    console.log(arr8.slice(3)); //d e f  一个参数是删除几个
 //b c d 两个参数是从开始下标到结束下标之间组成新数组包头不包尾
//括号里默认不写就是从头到尾
    console.log(arr8.slice(1, 4));
    console.log(arr8); //(6) ['a', 'b', 'c', 'd', 'e', 'f'] 特点不会改变原数组

11、arr.splice() :

1. 用于删除数组中的指定元素；
2. 使用splice() 会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回；
3. 参数 ：
   1. ​ 第一个表示开始位置索引；
   2. ​ 第二个表示删除的数量，
   3. ​ 第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边；

//  arr.splice(从下标那个位置删除，删除几个元素包含当前元素)
// 会改变原数组
 var arr = ['a', 'b', 'c', 'd'] 
    arr.splice(1, 2) //删除 b  c
    console.log(arr); //打印 a d

12、arr.filter() : 过滤数组，要用return返回出来

 let arr10 = [1, 2, 4, 5, 6, 7, 8, 9]
    let arr11 = arr10.filter(item => {
        return item > 5
    });
    console.log(arr11); // 6 7 8 9 

13、arr.forEach() : 数组遍历 可以传三个参 item index array (每一项，下标，原数组)

 let arr12 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    arr12.forEach((item, index, array) => {
         console.log(item); //每一项
       
          console.log(index); //0 1 2 3 4 5 6 7 8  下标
 
        console.log(array); //9个数组，每一数组有1 2 3 4 5 6 7 8 9
 
    })

14、 set ： 数组去重

    var arr14 = [1, 2, 1, 2, 3];
    console.log(new Set(arr14)); // 1 2 3

15 、取出数组中的一种类型，将数组中的字符串提取出来

let arr15 = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
    let newArr1 = [];
    for (i = 0; i < arr15.length; i++) {
        // 不是必要循环的内容不要放在for里 定义的新数组不要放在for循环里
        //  var  newArr1 = []; 错误 定义 
        if (typeof arr15[i] == "string") {
            newArr1.push(arr15[i])
        }
    };
    console.log(newArr1); // 'a' 'b' 'c'

16 、 数组去空

 let arr16 = [1, 2, , , 3];
    let newArr2 = [];
    for (i = 0; i < arr16.length; i++) {
        //空就是undefined 所以将不是空的拿出来，逆向思维
        if (typeof arr16[i] != "undefined") {
            newArr2.push(arr16[i]) //不等于空追加到新数组
        }
    };
    console.log(arr16); //[1, 2, empty × 2, 3]
    console.log(newArr2); // 1 2 3

17、arr.concat(n, n) : 合并数组

    var arr1 = [1, 2, 3];
    var arr2 = ["a", "b", "c"];
    var arr3 = ["A", "B", "C"];
    var rel = arr1.concat(arr2, arr3);
    console.log(arr1); //原数组
    console.log(rel); //新数组

18 、 arr.join() : 将数组转字符串

    var list = ["a", "b", "c", "d"]; // "a-b-c-d"
    var result = list.join("-");     //"a-b-c-d"
    var result1 = list.join("/");     //"a/b/c/d"
    var result2 = list.join("");      //"abcd"
    var result3 = list.join();        //  a,b,c,d 默认不写就是逗号
    console.log(result,result1 ,result2 ,result3 );

19、 arr.toString() : 将数组转为字符串类型

    var list = ["a", "b", "c", "d"];
    var rel = list.toString();
    console.log(rel);   // a,b,c,d   (字符串类型)

20 、 arr.valueOf() : 返回数组的原始值（一般情况下其实就是数组自身)

    var list = [1, 2, 3, 4];
    var rel = list.valueOf();
    console.log(list); // [1, 2, 3, 4]
    console.log(rel); // [1, 2, 3, 4]

21 、 arr.indexOf() : 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1

    var list = [1, 2, 3, 4];
    var index = list.indexOf(4); //3
    var index = list.indexOf("4"); //-1
    console.log(index);

21、arr.map() : 同forEach() 方法,但是map()方法有返回值,可以return出来;

    var list = [32, 93, 77, 53, 38, 87];
    var res = list.map(function (item, index, array) {
      return item + 10;
    });
    console.log("原数组", list);
    console.log("新数组", res);

22 、 arr.find() :返回满足条件的第一个元素，不存在则返回undefined

 var list = [505, 686, 77, 48, 99, 100];
    var index = list.find(function(item, index, array) {
        console.log(item, index, array);
        return item > 800;
    });
    console.log(index); //undefined   找到返回元素，找不到返回undefined

23 、 arr.fill() : 语法：xx.fill(‘要填充的值’，从下标哪里开始，到下标那里结束)

   var result = ["a", "b", "c"]
 
    var rel = result.fill("填充", 0, 2);
 
    console.log(rel);

23 、 arr.flat(n/Infinity);

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

​ 2. 注意 默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity

  var list = [1, 2, [3, 4, [5], 6, [7, 8, [66, 77]]]];
    var arr = list.flat(); // 默认拉平一次
    console.log("拉平一次", arr);
 
    var arr = list.flat(2); // 拉平2次
    console.log("拉平两次", arr);
    // 小括号里写几拉平几次，infinity全部拉平
    var arr = list.flat(Infinity); // 拉平2次
    console.log("全部拉平", arr);