Array 操作方法大全（一）

00_kawayi
314 阅读5分钟

JS数组操作方法

简单操作

1.原数组发生改变

push

可以将一个或者更多的参数添加在数组的尾部;返回添加后的数组的长度

arr.push(item1, item2, …, itemX)

var arr=[1,2,3];
var newArr=arr.push(9,8,7);
console.log("arr=="+arr,"newArr=="+newArr);
// 结果如下：arr==1,2,3,9,8,7 newArr==6

unshift

可以将一个或者更多的参数添加在数组的头部;返回添加后的数组的长度

arr.unshift(item1, item2, …, itemX)

var arr=[1,2,3];
var newArr=arr.unshift(9,8,7);
console.log("arr=="+arr,"newArr=="+newArr);
// 结果如下：arr==9,8,7,1,2,3 newArr==6

pop

从数组尾部删除一个元素;返回这个被删除的元素

arr.pop()

var arr=[1,2,3];
var newArr=arr.pop();
console.log("arr=="+arr,"newArr=="+newArr);
// 结果如下：arr==1,2 newArr==3

shift

从数组头部删除一个元素;返回这个被删除的元素

arr.shift()

var arr=[1,2,3];
var newArr=arr.shift();
console.log("arr=="+arr,"newArr=="+newArr);
// 结果如下：arr==2,3 newArr==1

splice

用于删除、添加或者替换数组中的某些元素; 返回被删除或被替换元素组成的数组

arr.splice(start,deleteCount,item1,…,itemN)

  • start:元素索引值
  • deleteCount:可选,整数，表示数组中要从 start 开始删除的元素数量
  • item1, …, itemN:可选,从 start 开始要加入到数组中的元素,不写表示删除
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

reverse

反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。

arr.reverse()

const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]

arr.reverse();
console.log(arr); // [3, 2, 1]

sort

数组的元素进行排序，并返回对相同数组的引用;默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序 (如果想要不改变原数组的排序方法，可以使用 toSorted())

arr.sort()

var arr=[1, 30, 4, 21, 100000];
var newArr=arr.sort();
console.log("arr=="+arr,"newArr=="+newArr);
// 结果如下:arr==1,100000,21,30,4 newArr==1,100000,21,30,4

sort拓展：

[创建、显示及排序数组]

下述示例创建了四个数组，并展示原数组。之后对数组进行排序。对比了数字数组分别指定与不指定比较函数的结果。

const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];
const numericStringArray = ["80", "9", "700"];
const mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b) {
  return a - b;
}

stringArray.join(); // 'Blue,Humpback,Beluga'
stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']

numberArray.join(); // '40,1,5,200'
numberArray.sort(); // [1, 200, 40, 5]
numberArray.sort(compareNumbers); // [1, 5, 40, 200]

numericStringArray.join(); // '80,9,700'
numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort(compareNumbers); // ['9', '80', '700']

mixedNumericArray.join(); // '80,9,700,40,1,5,200'
mixedNumericArray.sort(); // [1, 200, 40, 5, '700', '80', '9']
mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700']
[对象数组的排序]

对象数组可以通过比较它们的某个属性的值来排序。

const items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 },
];

// 根据 value 排序
items.sort((a, b) => a.value - b.value);

// 根据 name 排序
items.sort((a, b) => {
  const nameA = a.name.toUpperCase(); //` `忽略大小写
  const nameB = b.name.toUpperCase(); // 忽略大小写
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // name 必须相等
  return 0;
});

2. 原数组不发生改变

concat

方法用于合并两个或多个数组

arr1.concat(arr2)

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const newArr = arr1.concat(arr2, arr3);
console.log(newArr);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

join

将一个数组（或一个[类数组对象]）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔

arr.join()

const arr = ["Wind", "Water", "Fire"];
arr.join(); // 'Wind,Water,Fire'
arr.join(", "); // 'Wind, Water, Fire'
arr.join(" + "); // 'Wind + Water + Fire'
arr.join(""); // 'WindWaterFire'

slice

提取数组中的元素

slice(start, end)

  • start: 可选，提取起始处的索引
  • end: 可选提取终止处的索引
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

indexOf

返回数组中第一次出现给定元素的下标，如果不存在则返回 -1

indexOf(searchElement, fromIndex)

  • searchElement: 数组中要查找的元素
  • fromIndex: 开始搜索的索引
const array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

lastIndexOf

返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1

lastIndexOf(searchElement, fromIndex)

  • searchElement: 数组中要查找的元素
  • fromIndex: 以 0 起始的索引，表明反向搜索的起始位置
const numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

includes

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// Expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// Expected output: true

console.log(pets.includes('at'));
// Expected output: false

Array.isArray()

判断对象是否为数组

console.log(Array.isArray([1, 3, 5]));
// Expected output: true

console.log(Array.isArray('[]'));
// Expected output: false

console.log(Array.isArray(new Array(5)));
// Expected output: true

console.log(Array.isArray(new Int16Array([15, 33])));
// Expected output: false

Array.keys()

返回数组的可迭代对象，包含原始数组的键(key)

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// Expected output: 0
// Expected output: 1
// Expected output: 2

Array.toLocaleString()

把数组转换为字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.toString(); // Banana,Orange,Apple,Mango

js数组操作方法（二） - 掘金 (juejin.cn)

文章参考于Array - JavaScript | MDN (mozilla.org)

avatar
文章
阅读
粉丝