常用js数组操作大全

145 阅读5分钟

1.数组对象属性

1.constructor 属性返回对创建此对象的数组函数的引用。object.constructor 可用来判断数据类型

    let da=new Array()
    if(da.constructor==Array){
    console.log('这是数组')//这是数组
    }
    if (test.constructor==Array)
      {
      document.write("This is an Array");
      }
      if (test.constructor==Boolean)
      {
      document.write("This is a Boolean");
      }
      if (test.constructor==Date)
      {
      document.write("This is a Date");
      }
      if (test.constructor==String)
      {
      document.write("This is a String");
      }
      //This is an Array

2.length 数组长度 object.length 不做演示

3.prototype 属性使您有能力向对象添加属性和方法。 object.prototype.name=value

       function employee(name,job,born)
        {
        this.name=name;
        this.job=job;
        this.born=born;
        }

        var bill=new employee("Bill Gates","Engineer",1985);

        employee.prototype.salary=null;
        bill.salary=20000;

        document.write(bill.salary);
        //20000

2.数组对象方法

1.concat()链接两个数据形成一个新的数组arrayObject.concat(arrayX,arrayX,......,arrayX)

  //第一种 可以加多个
   [1,2].concat([3,4])
   //[1,2,3,4]
  //第二种
  let a=[1,2]
  let b=[3,4]
  let c=[...a,...b]
  console.log(c)
  //[1,2,3,4]

2.join()把数组以一定的格式转换为字符串 默认是逗号

    [1,2,3].join()
    //"1,2,3'
    [1,2,3].join("|")
    //"1|2|3"

3.pop() 方法用于删除并返回数组的最后一个元素。

   [1,2,3].pop()
   //3

4.push()向数组中增加数据

let da=[]
let len =da.push(1,2,3)
console.log(da,len)
//[1,2,3] 3

5.reverse()方法用于颠倒数组中元素的顺序。

    [1,2,3].reverse()
    //[3,2,1]

6.shift() 删除数组中的第一个元素并返回第一个元素的值

   let da=[1,2,3]
   let str=da.shift()
   console.log(da,str)
   //[2,3]  1

7.slice(start,end) 方法可从已有的数组中返回选定的元素。

    [1,2,3,4].slice(2,3)左闭右开的数据[2,3)
    //[3]

8.sort()方法用于对数组的元素进行排序。默认是按照字符编码的顺序进行排序

    function sortNumber(a,b)
    {
    return a - b
    }

    var arr = new Array(6)
    arr[0] = "10"
    arr[1] = "5"
    arr[2] = "40"
    arr[3] = "25"
    arr[4] = "1000"
    arr[5] = "1"
    console.log(arr.sort(sortNumber))
    // ["1", "5", "10", "25", "40", "1000"]

9.splice()方法向/从数组中添加/删除项目,然后返回被删除的数组。arrayObject.splice(index,howmany,item1,.....,itemX)

  • index: 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  • item1, ..., itemX 可选。向数组添加的新项目。
   let a=[1,2,3,4]
   let b=a.splice(1,2,5,6)
   console.log(a,b)
   //[1,5,6,4] [2,3]

10.toLocaleString()把数组转换成本地字符串亦可以用toString()

    [1,2].toLocaleString()
    //"1,2"
    [1,2].toString()
    //"1,2"

11.unshift()向数组的头部添加一个或者多个元素

   let a = [1,2]
   let b = a.unshift(3,4,5)
   console.log(a,b)
   //[3,4,5,1,2] 5

12.every()是否都满足条件 如果全部满足返回true 否则返回false

    [1,2,3].every(x=>x>0)
    //true
    [1,2,3].every(x=>x>1)
    //false

13.some()和every()相反 又满足条件的就返回true否则返回false

    [1,2,3].some(x=>x>2)
    //true
    [1,2,3].some(x=>x>3)
    //false

14.filter()筛选,返回筛选后得值

    [1,2,3].filter(x=>x>1)
    //[2,3]

15.forEach()和map()相同都是遍历数组

    [1,2,3].forEach(x=>console.log(x))
    //1
    //2
    //3
     [1,2,3].map(x=>console.log(x))
    //1
    //2
    //3

3.ES6新特性

1.Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)

    //1,把字符串转化成数组
    Array.from('123')
    //['1','2','3']
    
    //2,对象转数组
    let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
    };
    let arr2 = Array.from(arrayLike);
    // ['a', 'b', 'c']
    let namesSet = new Set(['a', 'b'])
    Array.from(namesSet) 
   // ['a', 'b']
   
   //3* Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
    Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);

    Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]

2.Array.of方法用于将一组值,转换为数组。

   Array.of(1,2,3)
   //[1,2,3]
   Array.of(3)
   //[3]
   Array.of(3).length
   //1

3.copyWithin()在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。 它接受三个参数。

  • target(必需):从该位置开始替换数据。
  • start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
    [1,2,3,4,5].copyWithin(1,3)
    //[1,4,5,4,5]
    
    // 将3号位复制到0号位
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]

4.find()和findIndex()

  • 数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
   [1,2,3,-2,3].find(n=>n<0)
   //-2
   [1,2,3,3].find(n=>n<0)
   //undefined
   [1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
    }) // 10
    //上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
  • 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
    [1, 5, 10, 15].findIndex(function(value, index, arr) {
      return value > 9;
    }) // 2

5.fill()方法使用给定值,填充一个数组。

    [1,2,3].fill(0)
    //[0,0,0]
    new Array(3).fill(0)
    //[0,0,0]
    
    //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

    ['a', 'b', 'c'].fill(7, 1, 2)//左闭右开
    // ['a', 7, 'c']

5.entries(),keys()和values()

  • ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1

    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'

    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

6.includes()方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于ES7,但Babel转码器已经支持。

    [1, 2, 3].includes(2);     // true
    [1, 2, 3].includes(4);     // false
    [1, 2, NaN].includes(NaN); // true