Array 方法汇总

leezozz
203 阅读7分钟

1. 改变原数组

1.1 splice()

  • 改变原数组。通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
  • 返回值：删除的数组元素，若没有删除则返回空数组；删除一个，则返回一个数组元素的数组
1.1.1 删除

array.splice(start, deleteCount)

  • start，数组的索引，0开始
  • deleteCount，删除元素个数，[可选]
  • 如果 deleteCount 大于等于 start 之后的元素的总数或者直接省略deleteCount，则从 start 后面的元素都将被删除（含第 start 位）。
  • 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
  const arr1 = ref([
    {count: 1, userInfo: '第一层信息', context: 'a'},
    {count: 2, userInfo: '第一层信息', context: 'v'},
    {count: 3, userInfo: '第一层信息', context: 'd'}
  ])
  
  arr1.value.splice(0)  // 直接省略`deleteCount`
  console.log('deleteCount', arr1.value)  // 这里返回空数组
  
  arr1.value.splice(0, 4)  // deleteCount大于start之后的元素的总数
  console.log('deleteCount', arr1.value) // 这里返回空数组
  
  // 这里通过findIndex方法找到 item.count === 1 对应的索引
  // 注意： indIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
  const someDelete = arr1.value.findIndex(item => 
    item.count === 1
  )
  console.log('someDelete', someDelete)

  const newArr1 = arr1.value.splice(someDelete, 1)

  console.log('newArr1', newArr1)
  // 返回删掉的那条/些数据
  // {count: 1, userInfo: '第一层信息', context: 'a'}

  console.log('arr1', arr1.value)
  // 返回删除之后剩下的数据
  // [{count: 2, userInfo: '第一层信息', context: 'v'},
  // {count: 3, userInfo: '第一层信息', context: 'd'}]
1.1.2 添加

array.splice(start, deleteCount,[item1, item2...])

  • item1, item2... 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。[可选]
  // 添加
  const arr2 = ref([
    {count: 1, userInfo: '第一层信息', context: 'a'},
    {count: 2, userInfo: '第一层信息', context: 'v'},
    {count: 3, userInfo: '第一层信息', context: 'd'}
  ])
  // 从索引为1的位置开始删除0个元素，插入一条新的数组元素
  const newArr2 = arr2.value.splice(1, 0, {
    count: 666, userInfo: '第一层信息', context: 'd'
  })
  console.log('newArr2', newArr2) // 返回空数组，没有删除数组元素
  console.log('arr2', arr2.value)
  // 打印：arr2
  [
    {count: 1, userInfo: '第一层信息', context: 'a'},
    {count: 666, userInfo: '第一层信息', context: 'd'},
    {count: 2, userInfo: '第一层信息', context: 'v'},
    {count: 3, userInfo: '第一层信息', context: 'd'}
  ]
1.1.3 替换

array.splice(start, deleteCount,[item1, item2...])

  • 原理同上面的”添加“，当deleteCount的值 = [item1, item2...]的个数时
  // 替换
  const arr3 = ref([
    {count: 1, userInfo: '第一层信息', context: 'a'},
    {count: 2, userInfo: '第一层信息', context: 'v'},
    {count: 3, userInfo: '第一层信息', context: 'd'}
  ])

  const newArr3 = arr3.value.splice(1, 2,
    {count: 88, userInfo: '第一层信息', context: 'v'},
    {count: 77, userInfo: '第一层信息', context: 'd'}
  )
  console.log('newArr3', newArr3)
  // 打印newArr3删除的数组元素：
  [
    {count: 2, userInfo: '第一层信息', context: 'v'},
    {count: 3, userInfo: '第一层信息', context: 'd'}
  ]
  console.log('arr3', arr3.value)
  // 打印arr3：替换之后的数据
  [
     {count: 1, userInfo: '第一层信息', context: 'a'},
     {count: 88, userInfo: '第一层信息', context: 'v'},
     {count: 77, userInfo: '第一层信息', context: 'd'}
  ]

1.2 push()

  • 将一个或多个元素添加到数组的末尾，并返回该数组的新长度
  • 语法：arr.push(element1, ..., elementN)
    const arr1 = ref([1, 2, 3])
    const a1 = arr1.value.push('a')
    console.log('arr1', arr1.value) // [1, 2, 3, 'a']
    console.log('a1', a1) // 返回数组长度 4

1.3 pop()

  • 从数组中删除最后一个元素，并返回该元素的值
  • 语法：arr.pop()
  • 返回值：从数组中删除的元素(当数组为空时返回undefined)
    const arr2 = ref(['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'])
    const a2 = arr2.value.pop()
    console.log('arr2', arr2.value) // ['broccoli', 'cauliflower', 'cabbage', 'kale']
    console.log('a2', a2) // 返回删除的数组中最后一个数组元素

1.4 unshift()

  • 将一个或多个元素添加到数组的开头，并返回该数组的新长度
  • 语法：arr.unshift(element1, ..., elementN)
  • 返回值：返回新数组的长度
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

1.5 shift()

  • 从数组中删除第一个元素，并返回该元素的值
  • 语法：arr.shift()
  • 返回值：删除的数组元素，如果数组为空则返回undefined
const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

1.6 fill()

  • 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
  • 不包括终止索引
  • 语法：arr.fill(value[, start[, end]])
    其中value：用来填充数组元素的值；start：开始索引；end：结束索引
  • 返回值：修改后的数组
const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

const tableArr = new Array(20).fill('').map(item => {
      return {
        'branch': '部门1',
        'marginMaturityYears': '2016',
        'marginMaturityMonth': '6月',
        'amountLocalCurrency': '2300.23'
      }
    })

1.7 reverse()

  • reverse 方法反转数组中元素的位置，改变了数组，并返回该数组的引用。
  • 返回值：原始数组反转后的引用
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// "array1:" Array ["three", "two", "one"]

2. 不改变原数组

2.1 concat()

  • 用于合并两个或多个数组， 返回一个新数组
  • 语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
  • 返回值：新的 Array 实例。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]


var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]


var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
// var alphaNumeric = alpha.concat(1, 2, 3); 
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

2.2 some() 检测数组元素中是否有元素符合指定条件

  // 检查数组中是否有 大于8的元素，有的话，返回true
  const arr = [9, 7, 5, 4]
  const checkArray = (item) => {
    return item > 8
  }
  const res = arr.some(checkArray)
  console.log('res', res) // true
  
  语法：
  array.some(function(currentValue,index,arr),thisValue)
  参数：currentValue  必须。当前元素的值
       index  可选。当前元素的索引值
       arr  可选。当前元素属于的数组对象
       
  some() 方法会依次执行数组的每个元素：
  -   如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
  -   如果没有满足条件的元素，则返回false。
  注意：some() 不会对空数组进行检测。
  注意：some() 不会改变原始数组。

2.3 every() 检测数组元素的每个元素是否都符合条件

  // 检查数组元素是否都大于8，有的话，返回true
  const arr = [9, 7, 5, 4]
  const checkArray = (item) => {
    return item > 8
  }
  const resData = arr.every(checkArray)
  console.log('resData', resData)  // false
  
  语法：
  array.every(function(currentValue,index,arr),thisValue)
  参数：currentValue  必须。当前元素的值
       index  可选。当前元素的索引值
       arr  可选。当前元素属于的数组对象
       
  every() 方法使用指定函数检测数组中的所有元素：
  -   如果数组中检测到有一个元素不满足，则整个表达式返回 *false* ，且剩余的元素不会再进行检测。
  -   如果所有元素都满足条件，则返回 true。
  注意：every() 不会对空数组进行检测。
  注意：every() 不会改变原始数组。

2.4 filter 数组过滤

不改变原数组，创建一个新数组

  const arr = ref([
    {count: 1, userInfo: '第一层信息', context: 'a'},
    {count: 2, userInfo: '第一层信息', context: 'v'},
    {count: 3, userInfo: '第一层信息', context: 'd'}
  ])

  const newArr = arr.value.filter(item => 
    item.count > 1
  )
  console.log('arr', arr.value)  // 这里是原数组
  console.log('newArr', newArr)  // 这里是满足 item.count > 1 的数组元素
  // 控制台输出 newArr:
  // [
  //     {count: 2, userInfo: '第一层信息', context: 'v'},
  //     {count: 3, userInfo: '第一层信息', context: 'd'}
  // ]

2.5 find()

  • 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

2.6 map()

  • 不改变原数组
  • map() 不会对空数组进行检测
const mapData = [
    ['广东', 32],
    ['江苏', 40],
    ['四川省', 37],
]
const newArr = mapData.map(item => {
    return {
        name: item[0],
        value: item[1]
    }
})
console.log('mapDatas', mapDatas)
// [["广东",32],["江苏",40],["四川省",37]]
console.log('newArr', newArr)
// [{"name":"广东","value":32},{"name":"江苏","value":40},{"name":"四川省","value":37}]

2.7 slice()

slice()  方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
语法：

slice()
slice(start)
slice(start, end)
// start：提取开始的位置【可选】
// end：提取结束的位置，不包含结束位置的数组元素【可选】
2.7.1 提取所有数组元素
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(); // ["Banana", "Orange", "Lemon", "Apple", "Mango"]
const res = fruits.slice(0);  // ["Banana", "Orange", "Lemon", "Apple", "Mango"]
2.7.2 提取部分数组元素
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

// fruits 包含 ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus 包含 ['Orange','Lemon']

参考：
developer.mozilla.org/zh-CN/docs/…

avatar
文章
阅读
粉丝