js数组方法总结

---

前言

数组方法是js中的重点，下面表格中标红的是重点哦，一定要会使用！

---

一、js数组方法总结表

方法名	参数	返回值	是否影响原数组
sort()	可选(函数) 规定排序规则 默认排序顺序为按字母升序	排序后新数组	是
reverse()	/	倒序后新数组	是
shift()	/	修改后数组的长度	是
unshift()	/	新数组的长度	是
pop()	/	被删除的值	是
push()：	一个或者多个值或者数组等	修改后数组的长度	是
splice()：	一个或两个数作为参数	数组	是
slice()：	一个或两个数作为参数	数组	否
concat()	数组项或数组	数组	否
map()：	函数	数组	否
filter()：	函数	数组	否
find()：	函数	返回符合条件的元素,如没有符合条件的元素返回 undefined	否
forEach()：	函数	undefined	基本数据类型不改变原数组，引用数据类型改变原数组
includes()：	指定内容	true/false	否
some()	函数	true/false	否
every()	函数	true/false	否
indexOf()：	要查找的元素	第一次出现查到元素的索引，未找到返回-1	否
lastindexOf()	要查找的元素	最后一次出现查到元素的索引，未找到返回-1	否
join()	字符	设定字符隔开的字符串	否

二、数组方法使用详解

2.1 concat()

concat()：合并两个或者多个数组，返回一个新数组，不改变原数组

    let arr = ["a", "b", "c"];
    let arr1 = ["1", "2", "3"];
    let arr2 = ["4", "5", "6"];
    console.log(arr.concat("d")); //['a', 'b', 'c', 'd']
    console.log(arr.concat("d", "e")); // ['a', 'b', 'c', 'd', 'e']
    console.log(arr.concat("d", "e", arr)); // ['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c']
    console.log(arr.concat(arr1, arr2));// ['a', 'b', 'c', '1', '2', '3', '4', '5', '6']
    console.log("原数组", arr); // ['a', 'b', 'c']

2.2 slice()

slice()：可以基于当前数组中的一个或者多个项，返回一个新数组，主要用途就是数组的截取，参数是一个数或者两个数，即：slice(“起始位置”，“结束位置”)，注意！不包括结束位置，不改变原数组
array.slice(n, m)，从索引n开始查找到m处（不包含m）

array.slice(n) 第二个参数省略，则一直查找到末尾

array.slice(0)原样输出内容，可以实现数组克隆

array.slice(-n,-m) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项

    let arr = ["a", "b", "c", "d", "e", "f", "g"];
    // slice()中没有参数表示重新复制一遍原数组
    console.log(arr.slice()); //["a", "b", "c", "d", "e", "f", "g"]
    // slice()中有一个参数表示从当前索引开始截取，一直到最后
    // 例如：从索引为2的值开始截取，一直截取到最后
    console.log(arr.slice(2)); //['c', 'd', 'e', 'f', 'g']
    // slice()中有两个参数，表示从索引开始的位置开始截取，一直到索引结束的位置
    // 例如：从索引为2的值开始截取，一直截取到索引为4的值，不包括索引为4的值
    console.log(arr.slice(2, 4)); // ['c', 'd']
    // // slice()中有为负的参数，为负的参数要倒着数，索引从-1开始，表示从索引开始的位置开始截取，一直到索引结束的位置
    // 例如：从索引为2的值开始截取，并且负数从后往前数索引，从-1(g)开始，并且不包括-2索引所对应的参数(f)
    console.log(arr.slice(2, -2)); //['c', 'd', 'e']
    console.log(arr.slice(-6, -2)); // ['b', 'c', 'd', 'e']
    // // slice()中有为负的参数，但是不存在范围，则直接输出空数组
    // 例如：没有-100的值，则直接输出空数组
    console.log(arr.slice(2, -100)); //[]
    console.log("原数组", arr); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

2.3 splice()

splice()：对数组进行删除、插入，替换，是最强大的数组方法，返回一个新数组，改变原数组。

    // 删除功能-返回的是被删除的数组项
    // 参数1：起始索引位置   参数2：删除的长度
    let arr = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr.splice(2, 4)); // ['c', 'd', 'e', 'f']
    console.log("原数组", arr); //['a', 'b', 'g']

    // 插入功能-返回插入元素后的总数组,删除了0个，添加了几个
    // 参数1：起始索引位置   参数2：删除的长度   参数3：要插入的元素(长度不限)
    let arr1 = ["a", "b", "c", "d", "e", "f", "g"];
    arr1.splice(2, 0, "hello", "hi", "hahaha");
    console.log("原数组", arr1); // ['a', 'b', 'hello', 'hi', 'hahaha', 'g']-插入元素后的数组

    let arr2 = ["a", "b", "c", "d", "e", "f", "g"];
    arr2.splice(2, 0, ["1", "3"]);
    console.log("原数组", arr2); //  ['a', 'b', ['1','2'], 'c', 'd', 'e', 'f', 'g']-插入元素后的数组

    // 替换功能-返回替换元素后的总数组,删除了几个，替换了几个
    // 参数1：起始索引位置   参数2：删除的长度   参数3：要替换的元素(长度不限)
    let arr3 = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr3.splice(2, 3, "hello", "hi", "hahaha"));//['c', 'd', 'e']-被删掉的元素
    console.log("原数组", arr3); //['a', 'b', 'hello', 'hi', 'hahaha', 'f', 'g']-替换后的数组

2.4 join()

join()：将数组转字符串，参数是任意字符，返回一个用字符隔开的字符串，不改变原数组

    let arr = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr.join("*"));//a*b*c*d*e*f*g
    console.log(arr.join("&"));//a&b&c&d&e&f&g
    console.log("原数组", arr);//['a', 'b', 'c', 'd', 'e', 'f', 'g']

2.5 push()

push()：接收任意数量的参数，把他们添加到数组末尾，并返回修改后的数组，改变原数组

    let arr1 = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr1.push("1",'2'));//9
    console.log("原数组", arr1);//['a', 'b', 'c', 'd', 'e', 'f', 'g', '1', '2']
    
    let arr2 = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr2.push(['1', '3']));//8
    console.log("原数组", arr2);//['a', 'b', 'c', 'd', 'e', 'f', 'g', ['1','2']]

2.6 pop()

pop()：移除数组末尾最后一项，减少数组的length值，返回被移除的项，改变原数组

   let arr = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr.pop());//g
    console.log("原数组", arr);// ['a', 'b', 'c', 'd', 'e', 'f']

2.6 unshift()

unshift()：接收任意数量的参数，把他们逐个添加到数组前面，并返回修改数组后的长度，改变原数组

 let arr = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr.unshift('1','2'));//9
    console.log("原数组", arr);// ['1', '2', 'a', 'b', 'c', 'd', 'e', 'f', 'g']
    let arr1 = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr1.unshift(['1','2']));//8
    console.log("原数组", arr1);// [['1', '2'], 'a', 'b', 'c', 'd', 'e', 'f', 'g']

2.7 shift()

shift()：从数组前面删除一项，减少数组的length值，返回被删除的项，改变原数组

 let arr = ["a", "b", "c", "d", "e", "f", "g"];
    console.log(arr.shift());//a
    console.log("原数组", arr);//  ['b', 'c', 'd', 'e', 'f', 'g']

2.8 map()

map()：原数组的每一项执行函数后，返回一个新数组，不改变原数组

    let arr = [10, 20, 30, 40];
    let arr1 = [];
    arr.map((val) => {
      val = val * 2;
      arr1.push(val);
    });
    console.log(arr1); //[20, 40, 60, 80]
    console.log("原数组", arr); //[10, 20, 30, 40]

2.9 filter()

filter()：过滤数组，返回符合条件的新数组，不改变原数组

//过滤出大于10的值
    let arr = [10, 20, 30, 40]
    let arr1 = [];
    arr.filter((val) => {
      if (val > 10) {
      arr1 .push(val)
      }
  })
  console.log(arr1 )//[20, 30, 40]
  console.log("原数组", arr); //[10, 20, 30, 40]
  

2.10 find()

find()：查找，返回符合条件的对应的那个值，不改变原数组

//查找id=2的值
var memoList = [{
        id: 1, name: '1'
      },{
        id: 2, name: '2'
      },{
        id: 3, name: '3'
      }]
// 用 editItem 变量将 查找出来的数据进行接收
var editItem = memoList.find((ele) => {
               return ele.id == 2 
            })  
 console.log(editItem ) //{id: 2, name: '2'}
 //但是查找id=10的值就返回underfined
 var editItem = memoList.find((ele) => {
               return ele.id == 10 
            })  
   console.log(editItem )//underfined
  console.log("原数组", memoList ); //[{id: 1, name: '1'},{id: 2, name: '2'},{id: 3, name: '3'}]

2.11 forEach()

forEach()：是循环遍历数组中的每一项，没有返回值

//基本数据类型不改变原数组，引用数据类型改变原数组
    let arr = [10,20,30,40];
    let arr1 = [];
    arr.forEach((v, i) => {
      v = v * 2;
      arr1.push(v);
    });
    console.log(arr1);//[20, 40, 60, 80]
    console.log('原数组',arr);//[10, 20, 30, 40]

    let arr2 = [{ v: 1 }, { v: 2 }, { v: 3 }];
    let arr3 = [];
    arr2.forEach((val) => {
      val.v = val.v * 2;
      arr3.push(val.v);
    });
    console.log(arr3);//[2, 4, 6]
    console.log('原数组',arr2); //[{ v: 2 }, { v: 4 }, { v: 6 }]

2.12 includes()

includes()：判断数组是否包含一个指定值，包含输出true，不包含输出false，不改变原数组

    let arr = [10, 20, 30, 40];
    let ary = arr.includes(10);
    console.log(ary);//true
    console.log("原数组", arr); //[10, 20, 30, 40]

2.13 some()

some()：对数组中的每一项进行判断，若有其中一个符合条件，返回true，否则返回false，不改变原数组

   let arr = [10, 20, 30, 40];
   let arr1 = arr.some(function (val) {
      return val > 10;
    });
    console.log(arr1); //true
    console.log("原数组", arr); //[10, 20, 30, 40]

2.14 every()

every()：对数组中的每一项进行判断，若都符合条件，返回true，否则返回false，不改变原数组

   let arr = [10, 20, 30, 40];
   let arr1 = arr.every(function (val) {
      return val > 10;
    });
    console.log(arr1); //false
    console.log("原数组", arr); //[10, 20, 30, 40]

2.15 indexOf()

indexOf()：检测当前值在数组中第一次出现的位置索引，不改变原数组

 let arr = ["a", "b", "c", "d", "e", "a", "f"];
    console.log(arr.indexOf("c")); //2
    // 如果是两个参数的话：indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
    console.log(arr.indexOf("a", 3)); //5
    console.log('原数组',arr)// ['a', 'b', 'c', 'd', 'e', 'a', 'f']

2.16 lastindexOf()

lastindexOf()：检测当前值在数组中最后一次出现的位置索引，不改变原数组

    let arr = ["a", "b", "c", "d", "e", "a", "f"];
    console.log(arr.lastIndexOf("c")); //2
    // array.lastIndexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
    console.log(arr.lastIndexOf("f", 1)); //-1
    console.log("原数组", arr); //["a", "b", "c", "d", "e", "a", "f"]

2.17 reverse()

reverse()：把数组倒过来排列，改变原数组

   let arr = [6,8,10,12]; 
   console.log(arr.reverse());//[12, 10, 8, 6]

2.18 sort()

sort()：对数组的元素进行排序（默认是从小到大来排序 并且是根据字符串来排序的），改变原数组，sort在不传递参数情况下，只能处理10以内（个位数）数字排序

     let arr = [32, 44, 23, 54, 90, 12, 9];
     arr.sort(function (a, b) {
      return a-b;  // 结果[9, 12, 23, 32, 44, 54, 90]
      // return b - a; // 结果[90, 54, 44, 32, 23, 12, 9]
    }),
      console.log('原数组',arr);