Javascript常用数组方法及使用

cecilia_tw
102 阅读9分钟

------------------------前端小白，仅用作自我总结，有问题感谢指出------------------------

数组基本方法：

Array.pop() 会改变原始数组

pop() 删除数组内最后一个元素，返回该元素的值。此方法会更改数组长度。

Array.push() 会改变原始数组

push() 将一个或多个元素添加到数组末尾，返回该元素的值。此方法会更改数组长度。

Array.shift() 会改变原始数组

shift() 删除数组内第一个元素，并返回该元素的值。此方法更改数组的长度。

Array.unshift() 会改变原始数组

unshift() 将一个或多个元素添加到数组开头，返回该元素的值。此方法会更改数组长度。

Array.splice() 会改变原始数组

splice() 可实现删除，替换，新增元素。返回该元素的值。此方法会更改数组长度。

  • array.splice(start,deleteCount,item...)
  • 参数start是移除元素的开始位置；
  • 参数deleteCount是移除的元素个数,必须是整数，如果是0或者负数，则不移除元素；
  • 如果有额外的参数，那么item会插入到被移除元素的位置上；
var a=[1,2,3,4,5,6]; 
var b=a.splice(1,2,'f','g'); 
//这里表示从数组索引1开始移除元素,移除2个元素,在移除的位置分别插入'f' 和'g'
//输出 a=[1,'f','g',4,5,6], b=[2,3]

Array.slice() 不会改变原始数组 左闭右开

slice() 截取选定的元素，返回新数组对象，不会改变原始数组。slice(begin，end)，begin为开始索引，end为结束索引（包括 begin，不包括end）。

Array.join() 不会改变原始数组

join() 将一个数组（或类数组对象）的所有元素连接成一个字符串,并返回这个字符串,不会改变原始数组。如果数组只有一个项目，返回该项目而不使用分隔符。

const list = [1, 2, 3, 4, 5]; 
const newJoinArr = list.join(', '); // "1, 2, 3, 4, 5"

Array.concat() 不会改变原始数组

concat() 用于连接两个或多个数组。不会更改现有数组，而是返回一个新数组。

var array1 = [1,2,3];
var array2 = [4,5,6];

**1.合并两个数组**
array1.concat(array2);  // [1,2,3,4,5,6]

**2.合并普通值**
array1.concat(4,5);     // [1,2,3,4,5]
array1.concat(4,[5,6]); // [1,2,3,4,5,6]

**3.合并对象（浅拷贝）**
var array1 = [1,2,3];
var obj = { a : 1 };
var array2 = array1.concat(obj); //浅拷贝
array2; // [1,2,3,{a:1}]
array2[3].a = 2;
obj.a; // 2 

**4.合并嵌套数组**
var array1 = [1,2,3];
array1.concat([[4]], [5], [[6,7]]); // [1,2,3,[4],5,[6,7]]

Array.reverse() 会改变原始数组

reverse() 将数组中元素的位置颠倒，并返回该数组，会改变原数组。

const list = [1, 2, 3, 4, 5]; 
list.reverse(); // [5, 4, 3, 2, 1]

Array.sort() 会改变原始数组

sort() 对数组的元素进行排序，并返回数组，sort() 方法会改变原始数组。。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

// 升序：arr.sort((a, b) => a - b); 
// 降序：arr.sort((a, b) => b - a); 

const arr = [49, 5, 14, 89, 71, 3, 10]; 
// 一般写法 
arr.sort(function (a, b) { 
    return a - b; // 按照升序排列 
}); 
// 箭头函数 
arr.sort((a, b) => a - b); 
// 结果 [3, 5, 10, 14, 49, 71, 89]

Array.includes() 区分大小写,返回布尔值。

includes() 用来判断一个数组是否包含一个指定的值，包含返回 true，否则 false。+

其他数组方法：

Array.filter() 不会改变原始数组。

filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,不会改变原始数组。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
     // filter方法，返回新数组，起过滤作用；
    filterValue(){
      let newArr = this.initialValue.filter((item) => {
        return item > this.boundaryValue
      })
      // 如果箭头函数只有一个形参，可以省略小括号，如果函数体只有一行可以省略花括号，且必须省略return
      let newArr2 = this.initialValue.filter(item => item > this.boundaryValue)
      return newArr // [ 5, 6, 7, 8, 9, 10 ]
    },
  }

Array.map() 不会改变原始数组。

map() 方法创建一个新数组，由原数组中的每个元素都调用提供的函数后的返回值组成。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // map方法，返回新数组，对数据进行依次处理；
    mapValue(){
      let newArr = this.initialValue.map(item=> item * this.boundaryValue)
      return newArr // [ 4, 8, 12, 16, 20, 24, 28, 32, 36, 40 ]
    },
  }

Array.forEach() 不会改变原始数组

forEach() 不返回新数组，不更改旧数组，对数据进行依次遍历。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // forEach方法，不返回新数组，不更改旧数组，对数据进行依次遍历；
    foreachValue(){
      let newArr=[]
      this.initialValue.forEach(item=>{
        if(item <= this.boundaryValue){
          newArr.push(item)
        }
      })
      return newArr // [ 1, 2, 3, 4 ]
    },
  }

Array.reduce() 不会改变原始数组

reduce() 起到累加器作用，返回一个新值，从左向右左累加。reduceRight方法和reduce是一样的，不同的是reduceRight从数组的末尾向前将数组中的数组项做累加。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // reduce方法，累加器作用，返回一个新值，从左向右左累加；
    // reduceRight方法和reduce是一样的，不同的是reduceRight从数组的末尾向前将数组中的数组项做累加；
    reduceValue(){
      // prev上次调用函数的返回值，cur当前元素，0表示prev初始值为0
      let arrSum = this.initialValue.reduce((prev,cur)=>{
        return prev+cur
      },0)
      return arrSum // 55
    },
  }

Array.fill() 会覆盖原始数组

fill() 用静态值填充数组中的指定元素。可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi");

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // fill方法，返回修改后的原数组
    fillValue(){
      // 在computed中不允许直接修改data中的数据,先拷贝原数据
      // Object.assign拷贝方法，当对象中没有嵌套对象，可以实现深拷贝
      const initialValueToFill = Object.assign([], this.initialValue) // [ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ]
      return initialValueToFill.fill(this.boundaryValue)
    },
  }

Array.find() 不改变原始数组

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。不对空数组执行该函数。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // find方法，返回数组中满足条件的第一个元素的值，否则返回undefined
    findValue(){
      return this.initialValue.find(item => item == this.boundaryValue) // 4
    },
  }

Array.findIndex() 不改变原始数组

findIndex() 返回数组中通过测试的第一个元素的索引（作为函数提供）。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // findIndex方法，返回数组中满足条件的第一个元素的索引值，否则返回undefined
    findindexValue(){
      return this.initialValue.findIndex(item => item == this.boundaryValue) // 3
    },
  }

Array.indexOf() 不改变原始数组

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在返回-1。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.indexOf("Apple", 4); // 6

findIndex()和indexOf()区别

  • findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
  [1, 2, 5, -1, 9].findIndex((n) => n < 0)
//返回符合条件的值的位置（索引）
// 3

注释：字符串不可以

  • indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。
  • stringObject.indexOf( value, index );
  • value：必需，规定需检索的字符串值。可选的整数参数。
  • index：规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索

注释：indexOf() 方法对大小写敏感！
注释：如果要检索的字符串值没有出现，则该方法返回 -1。
注释：数组也可以

Array.some() 返回布尔值

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回布尔值。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // some方法，测试数组内是否有一个元素通过条件，有返回true
    someValue(){
      return this.initialValue.some(item => item > this.boundaryValue) // true
    },
  }

Array.every() 返回布尔值

every() 方法测试一个数组内的所有元素是否都通过某个指定函数的测试。它返回布尔值。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // every方法，测试数组内是否有所有元素通过条件，有返回true
    everyValue(){
      return this.initialValue.every(item => item > this.boundaryValue) // false
    },
  }

Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // Array.from方法，对类似数组或可迭代对象创建一个新的数组，拷贝为浅拷贝
    arrayfromValue(){
      const newArr = Array.from(this.initialValue) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
      return newArr
    },
  }

Array.of()

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

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个 undefined 组成的数组）。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // Array.of方法，创建一个具有可变数量参数的新数组实例
    arrayofValue(){
      // Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组
      let newArr = Array.of(this.boundaryValue) // [ 4 ]
      return newArr
    },

  }

Array.isArray() 返回布尔值

Array.isArray() 如果对象是数组，则此函数返回 true，否则返回 false。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // Array.isArray用于确定传递的值是否是一个Array
    arrayisarrayValue(){
      let isarray = Array.isArray(this.initialValue) // true
      return isarray
    },

  }

Array.at()

at() 方法接收一个整数值并返回该索引的项目。负整数从数组中的最后一个开始倒数。

  data(){
    return{
      initialValue:[1,2,3,4,5,6,7,8,9,10],
      boundaryValue:4,
    }
  },
  
  computed:{
    // Array.at方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。
    arrayatValue(){
      let arrayat = this.initialValue.at(this.boundaryValue) // 5
      return arrayat
    },
  }
avatar
文章
阅读
粉丝