数组的各种增删查改

一、增

1. push 【改变原数组】

定义：push() 方法（在数组结尾处）向数组添加一个或多个新元素，返回值为新数组的长度

语法：arr.push(ele,ele2,ele3…);

示例：

var arr = [1,2];
var m = arr.push(3,4,5);
console.log('arr:' + arr, 'm' + m); // arr:[1, 2, 3, 4, 5] m:5

2. unshift 【改变原数组】

定义：unshift()方法（在开头）向数组添加一个或多个新元素，并“反向位移”旧元素，返回值为新数组的长度

语法：arr.unshift(ele,ele2,ele…);

示例：

var arr = [1,2];
var m = arr.unshift("a","b");
console.log("原数组：" + arr, "返回值:" + m);
//原数组： ["a", "b", 1, 2] 返回值:4

3. concat 【合成一个新数组，不改变原数组】

定义：concat() 方法通过合并（连接）一个或多个数组来创建一个新数组

语法：arr.concat(arr1,arr2…);

示例：

// 合并两个数组
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
console.log(myChildren); // ["Emma","Isabella","Jacob","Michael","Ethan"]

// 合并三个数组
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // ["Cecilie","Lone","Emil", "Tobias", "Linus","Robin", "Morgan"]

4. length 属性

使用数组的 length 属性向数组添加新元素

示例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";
console.log(fruits); // ["Banana","Orange","Apple","Mango","Lemon"]

注意：
添加最高索引的元素可在数组中创建未定义的“洞”：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";
console.log(fruits); // ["Banana","Orange","Apple","Mango","undefined","undefined","Lemon"]

splice 【改变原数组】

定义：splice() 方法在数组中添加/删除/查看/修改项目，并返回删除的项目。

语法：array.splice(index, howmany, item1, ....., itemX)

参数：

• index：必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
• howmany：可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
• item1, …, itemX：可选。要添加到数组中的新项目。

示例：

// 第二个参数为 0 且有第三个或三个以上的参数即说明是增加元素，增加的元素数量为第二个参数之后的参数数量
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // ["Banana","Orange","Lemon","Kiwi","Apple","Mango"]

二、删

delete 【改变原数组】

示例：

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

shift 【改变原数组】

定义：shift() 方法删除数组的第一个元素，并返回删除的这个元素

语法：array.shift();

示例：

var arr = [1,2];
var num = arr.shift();
console.log("原数组：" + arr, "返回值:" + num);
//原数组： [2] 返回值:1

pop 【改变原数组】

定义：pop() 方法删除数组的最后一个元素，并返回删除的这个元素

语法：array.pop();

示例：

var arr = [1, 2];
var num = arr.pop();
console.log("原数组：" + arr, "返回值:" + num);
//原数组： [1] 返回值:2

splice

第二个参数不为 0 且无第三个参数则说明是从 以第一个参数为下标值 开始删除数组元素，删除的数组元素个数为第二个参数的值

示例：

// 在位置 2，添加新项目，并删除 1 个项目：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1);
console.log(fruits); // ["Banana", "Orange", "Lemon"]

// 在位置 2，删除 2 个项目：
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.splice(2, 2);
console.log(fruits); // ["Banana", "Orange", "Kiwi"]

三、查

slice 【不改变原数组】

定义：slice() 方法将原来的数组的元素替换，返回新的数组。

语法：array.slice(start, end);

参数：

• start：可选。整数，指定从哪里开始选择（第一个元素的索引为 0）；若使用负数则从数组的末尾进行选择；如果省略，则类似于 “0”。
• end：可选。整数，指定结束选择的位置；如果省略，将选择从开始位置到数组末尾的所有元素；若使用负数则从数组末尾进行选择。

注意：选定参数后，区间范围为【左闭右开】。即操作数组时，只截取从 start 到 end - 1 位置的数组元素

示例：

// 两个参数都不写，就是复制完整数组；否则就是复制指定元素的数组
var arr = [4, 5, 6, 3, 7, 8, 8];
var newArr = arr.slice();
newArr[0] = "aaaa";
console.log(arr, newArr);
// [4, 5, 6, 3, 7, 8, 8]  ["aaaa", 5, 6, 3, 7, 8, 8]

// 使用正值选择元素：
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ["Orange","Lemon"]

// 使用负值选择元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3, -1);
console.log(myBest); // ["Lemon","Apple"]

includes

定义：includes() 方法返回一个布尔值，表示某个数组是否包含给定的值

语法：Array.includes(para, start);

参数：

• para：必需。表示要查找的值。
• start：可选。表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

示例：

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

indexOf

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

语法：Array.indexOf(para, index);

参数：

• para：必需。要查找的元素。
• index：可选。开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1；如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找……。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0。

示例：

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

find 【不改变原数组】

定义：find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

语法：Array.find(function(currentValue, index, arr),thisValue)

参数：

• function：必需。数组每个元素需要执行的函数。
  • currentValue：必需。当前元素。
  • index：可选。当前元素的索引值。
  • arr：可选。当前元素所属的数组对象。
• thisValue：可选。传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

说明：
find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

注意：
find() 对于空数组，函数是不会执行的。

示例：

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

四、改

splice

第二个参数不为 0 且有第三个或三个以上的参数则说明是从 以第一个参数为下标值 开始修改数组元素，修改的数组元素个数为第二个参数之后的参数数量

示例：

var arr = [4, 5, 6, 3, 7, 8, 8];
var newArr = arr.splice(2, 1, "a", "b");
console.log(arr, newArr);
// [4, 5, "a", "b", 3, 7, 8, 8] [6]

reverse 【改变原数组】

定义：reverse() 方法可以反转数组中的所有元素

示例：

var arr = [1, 2, 3, 4, 5];
var newArr = arr.reverse();
console.log('arr:' + arr, 'newArr:' + newArr); // arr:[5,4,3,2,1] newArr:[5,4,3,2,1]

reduce

定义：reduce() 方法对数组中的每个元素执行一个由您提供的函数(升序执行)，将其结果汇总为单个返回值。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数：

• function(total,currentValue, index,arr)：必需。用于执行每个数组元素的函数。
  • total：必需。初始值, 或者累计器累计回调的返回值。
  • currentValue：必需。当前元素。
  • currentIndex：可选。当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始。
  • arr：可选。调用reduce()的数组。
• initialValue：可选。传递给函数的初始值。如果没有提供初始值，则将使用数组中的第一个元素。

注意：
reduce() 对于空数组是不会执行回调函数的。

示例：

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
  return total + num;
}
const ans = numbers.reduce(getSum);
console.log(ans); // 125

写在最后

对数组的各种操作就整理到这，如果读者没有找到自己想要的内容，可以尝试找找阮一峰的 ECMAScript 6 入门 之数组的扩展，或许能有所收获！