数组方法

137 阅读6分钟

数组方法

1、toString()

把数组转换成数组值(逗号分隔)的字符串

  const fruits = ['Banana','Orange','Apple','Mango']
  console.log(fruits.toString());                             //Banana,Orange,Apple,Mango

2、join

把数组转换成字符串,但是可以规定分隔符

  const fruits = ['Banana','Orange','Apple','Mango']
  console.log(fruits.join('/'));                              //Banana/Orange/Apple/Mango
  console.log(fruits.join('?'));                              //Banana?Orange?Apple?Mango

3、pop

pop()方法从数组删除最后一个元素。

  const fruits = ['Banana','Orange','Apple','Mango']
  console.log(fruits.pop());                                  //Mango
  console.log(fruits);                                        //['Banana','Orange','Apple']

4、push

push()方法向数组末尾添加一个新元素。

  const fruits = ['Banana','Orange','Apple','Mango']
  console.log(fruits.push('Kiwi'));      //['Banana','Orange','Apple','Mango','Kiwi']

5、shift

shift()方法会删除数组第一个元素,并返回一个新数组。

  const fruits = ['Banana','Orange','Apple','Mango']
  console.log(fruits.shift());                                //Banana
  console.log(fruits);                                        //['Orange','Apple','Mango']

6、unshift

unshift()方法在开头向数组添加新元素,并返回一个新数组。unshift()方法返回新数组的长度。

  const fruits = ['Banana','Orange','Apple','Mango']
  fruits.unshift('Lemon')             // 5
  console.log(fruits);            //['Lemon','Banana','Orange','Apple','Mango']

7、更改数组元素

通过索引号访问数组元素,实现更改。

  const fruits = ['Banana','Orange','Apple','Mango']
  fruits[0] = 'Lemon'
  console.log(fruits);            //['Lemon','Orange','Apple','Mango']

8、length

length属性提供了向数组追加新元素的简易方法

  const fruits = ['Banana','Orange','Apple','Mango']
  fruits[fruits.length] = 'Lemon';    //向fruits追加Lemon
  console.log(fruits)                 //['Banana','Orange','Apple','Mango','Lemon']

9、delete

delete删除数组元素

  const fruits = ['Banana','Orange','Apple','Mango']
  delete fruits[0]
  console.log(fruits);                 //[undefined,'Orange','Apple','Mango']

使用delete会在数组留下未定义的空洞。建议使用pop()或shift()

10、splice()

splice()方法可以实现删除、插入和替换。

删除:可以删除任意数量的项,只需指定两个参数:要删除的第一项的位置和要删除的项数。

  const arr = [1,3,5,7,9,11]
  arr.splice(0,2);
  console.log(arr);                  //[5,7,9,11]
  
  
  arr.splice(2,3)
  console.log(arr);                  //[1,3,11]

插入:可以向指定位置插入任意数量的项,只需提供三个参数:起始位置、0(要删除的项数)和要插入的项。

  const arr = [1,3,5,7,9,11]
  arr.splice(2,0,12,4)
  console.log(arr);                   //[1,3,12,4,5,7,9,11]

替换:可以在指定位置插入任意数量的项,且同时删除任意数量的项,只需指定三个参数:起始位置、要删除的项数和插入的任意数量的项。插入的项数与删除的项数不必相等。

  const arr = [1,3,5,7,9,11]
  arr.splice(1,1,2,4)
  console.log(arr)                    //[1,2,4,5,7,9,11]

10、concat

concat通过合并现有数组创建新数组

  const arr1 = ['a','b','c'];
  const arr2 = ['d','e','f'];
  const arrAll = arr1.concat(arr2);
  console.log(arrAll);                 //['a','b','c','d','e','f']

11、slice

slice返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一个或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项--不包括结束位置的项。

  const arr = [1,3,5,7,9]
  console.log(arr.slice(1));          //[3,5,7,9]
  console.log(arr.slice(1,4));        //[3,5,7]
  console.log(arr.slice(1,-2));       //[3,5]
  console.log(arr.slice(-4,-1));      //[3,5,7]

arr.slice(1,-2)设置了两个参数,终止下标为负数,出现负数时,将负数加上数组长度的值(5)来替换该位置的数,因此时从1开始到3(不包括)的子数组。

arr.slice(-4,-1)中两个参数都是负数,所以都加上数组长度6转换成正数,相当于slice(1,4)

12、sort

sort():按升序排列数组项---最小的值位于最前面,最大的值在最后面。

  const arr = ['c','b','d','a']
  console.log(arr.sort());             //['a','b','c','d']
  const arr2 = [10,20,1,2]
  console.log(arr2.sort());            //[1,10,2,20]
  const arr3 = ['Google', 'apple', 'Microsoft']
  arr3.sort();     // ['Google', 'Microsoft", 'apple']

第二个排序是因为array的sort()方法默认把所有元素先转换成String再排序,所以10排到了2前边,因为字符‘1’比字符‘2’的ASCII码小。 可以用这种方法对数字数组排序:

  const arr = [10,20,1,2]
  arr.sort(function(x,y){
    if(x<y) {
      return -1;
    }
    if(x>y) {
      return 1;
    }
    return 0;
  })
  console.log(arr);             //[1,2,10,20]

第三个排序把apple排到了最后,是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后。可以将字符串转为大写之后再排序。

   const arr = ['Google', 'apple', 'Microsoft']
   arr.sort(function(s1,s2) {
     x1 = s1.toUpperCase();
     x2 = s2.toUpperCase();
     if(x1<x2){
       return -1;
     }
     if(x1>x2) {
       return 1;
     }
     return 0;
   })
   
   console.log(arr);            //['apple','Google','Microsoft']

13、indexOf

检测当前值在数组中第一次出现的位置索引,找不到返回-1

arr.indexOf(item,start) item:查找的元素,start:字符串中开始检索的位置

  const arr = ['a','b','c','d','e','a','f']
  console.log(arr.indexOf('c'));                //2
  console.log(arr.indexOf('a',3))               //5

14、lastIndexOf

检测当前值在数组中最后一次出现的位置索引,找不到返回-1,从数组的末尾开始往前找

arr.lastIndexOf(item,start) item:查找的元素,start:字符串中开始检索的位置

  const arr = ['a','b','c','d','e','a','f']
  console.log(arr.lastIndexOf('c'));            //2
  console.log(arr.lastIndexOf('a'));            //5
  console.log(arr.lastIndexOf('f',1));          //-1

15、inclueds

判断一个数组是否包含一个指定的值,返回一个布尔值

  const arr = ['a','b','c','d']
  console.log(arr.inclueds('c'));                //true
  console.log(arr.inclueds(2));                  //false

16、reverse()

把数组翻转过来排序

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

17、forEach()

遍历循环数组每一项 arr.forEach(item,index,arr){} item:每一项,index:索引,arr:当前数组

forEach不能使用continue和break,forEach不能跳出,只能return跳过

  const arr = ['a','b','c','d'];
  const item = arr.forEach(function(item,index,arr) {
     console.log(item,index,arr)
  })
  //a o ['a','b','c','d']
  //b 1 ['a','b','c','d']
  //c 2 ['a','b','c','d']
  //d 3 ['a','b','c','d']

18、every

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

  const arr = [2,5,8,3,4]
  function isBigEnough(el,index,arr) {
     return el < 10;
  }
  arr.every(isBigEnough);               //true
  
  
  const arr3 = arr.every(function(x){
    return x < 3;
  })
  cosnsole.log(arr3);                   //false

19、some

判断数组中每一项是否满足条件,只要有一项满足条件就返回true 一真即真

  const arr = [10,3,2,6,4]
  const arr2 = arr.some(function(x){
     return x >9
  })
  console.log(arr2);                  //true
  
  const arr3 = arr.some(function(x){
     return x < 2
  })
  console.log(arr3);                   //false

20、filter

过滤、筛选。数组filter后,返回新数组。

应用场景:已知对象数组,要把对象数组中一些符合要求的对象重新组成一个数组

  const arr = ['a',10,'b',20,'c',30];
  const arr2 = arr.filter(function(item){
    //callback必须返回true或false,返回true保留该元素,false不保留
    return typeOf item === 'number'
  })
  
  console.log(arr2);                //[10,20,30]

21、map

查找,返回一个新数组 。

  const arr = [1,2,3]
  const arr2 = arr.map((item,index) => {
    if(item==1) {
      return true
    } else {
      return false           
    }
  })
  console.log(arr2);            //[true,false,false]
  
  
  const arr2 = arr.map((item) => {
    return item * 2
  })
  console.log(arr2);           //[2,4,6]

22、find

找到数组中符合当前搜索规则的第一个元素,返回他并终止搜索。

  const arr = [1,'2',3,3,'2']
  console.log(arr.find(n=>typeOf n === 'number'));              //1

23、findIndex

传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标并终止搜索。

  const arr = [1,'2',3,3,'2']
  console.log(arr.findIndex(n=>typeOf n === 'number'));         //0

24、from

用于类似数组的对象和可比案例对象转为真正的数组

  const json = {
    '0':'11',
    '1':'22',
    '2':'33',
    length:3
  }
  
  const arr = Array.from(json);
  console.log(arr);                                //['11','22','33']
  Array.from('foo');                               //['f','o','o']

25、copyWithin

copyWithin(target,start,end)方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员。(包前不包后)

target:从该位置开始替换数据。

start:从该位置开始读取数据,默认是0.如果是赋值,表示倒数。

end:到该位置前停止读取数据,默认等于数组长度。如果是负值,表示倒数。

  const arr = [1,2,3,4,5]
  arr.copyWithin(0,3,4)    //[4,2,3,4,5]  -> 将3号位复制到0号位
  arr.copyWithin(0,-2,-1); //[4,2,3,4,5]  ->-2相当于3号位,-1相当于4号位

26、of

Array.of()方法创建一个据欧可变数量参数的新数组实例,不考虑参数的数量或类型。

Array.of()总是返回由参数值组成的新数组。如果没有参数,就返回一个空数组。

Array.of(element0,[,element1[,...[,elementN]]])

  const arr = Array.of()
  console.log(arr)                 //[]
  
  const arr1 = Array.of(1)
  console.log(arr1);               //[1]
  
  const arr2 = Array.of(1,2,3)
  console.log(arr2);               //[1,2,3]
  
  const arr3 = Array.of(undefined)
  console.log(arr3)                //[undefined]
  
  const arr4 = Array.of(1,'2',3,true,null,undefined)
  console.log(arr4)                //[1,'2',3,true,null,undefined]