JavaScript内置对象 - Array数组（二）- 方法

        在 JavaScript 中，可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。这里将常用的或不常用的函数方法都统一整理出来。

        下表中列举了 Array 对象中提供的方法及其描述信息：

名称	描述
of()	创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
concat()	拼接两个或更多的数组，并返回结果
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中
entries()	返回数组的可迭代对象
every()	检测数值元素的每个元素是否都符合条件
fill()	使用一个固定值来填充数组
filter()	检测数值元素，并返回符合条件所有元素的数组
find()	返回符合传入函数条件的数组元素
findIndex()	返回符合传入函数条件的数组元素索引
forEach()	数组每个元素都执行一次回调函数
from()	通过给定的对象中创建一个数组
includes()	判断一个数组是否包含一个指定的值
indexOf()	搜索数组中的元素，并返回它所在的位置
isArray()	判断对象是否为数组
join()	把数组的所有元素放入一个字符串
keys()	返回数组的可迭代对象，包含原始数组的键（key）
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置
map()	通过指定函数处理数组的每个元素，并返回处理后的数组
pop()	删除数组的最后一个元素并返回删除的元素
push()	向数组的末尾添加一个或更多元素，并返回数组的长度
reduce()	累加（从左到右）数组中的所有元素，并返回结果
reduceRight()	累加（从右到左）数组中的所有元素，并返回结果
reverse()	反转数组中元素的顺序
shift()	删除并返回数组的第一个元素
slice()	截取数组的一部分，并返回这个新的数组
some()	检测数组元素中是否有元素符合指定条件
sort()	对数组的元素进行排序
splice()	从数组中添加或删除元素
toString()	把数组转换为字符串，并返回结果
unshift()	向数组的开头添加一个或多个元素，并返回新数组的长度
valueOf()	返回数组对象的原始值

一、常用方法

1.1 concat()方法 - 合并数组

        concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

语法：

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

参数：

参数名	描述
valueN	将数组和/或值连接成新数组。 如果省略了valueN参数，则concat会返回一个它所调用的已存在的数组的拷贝。

返回值：新的 Array 实例。

示例一：

const num1 = [1, 3, 5, 7, 9];
const num2 = [2, 4, 6, 8, 10];

console.log(num1.concat(num2));

输出结果如下：

[
  1, 3, 5, 7,  9,
  2, 4, 6, 8, 10
]

        除了使用concat()方法可以合并数组外，也可以用扩展运算符来合并数组，在ES6中新增加的内容，代码示例如下。

示例二：

const num1 = [1, 3, 5, 7, 9];
const num2 = [2, 4, 6, 8, 10];

// 通过扩展运算符合并数组
console.log([...num1, ...num2]);

输出结果如下：

[
  1, 3, 5, 7,  9,
  2, 4, 6, 8, 10
]

1.2 filter()方法

        filter() 方法创建一个新数组, 其包含通过所提供函数实现的校验通过的所有元素，用于筛选数据时使用，剔除不需的数据，返回一个新的数组。

语法：

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数：

参数名	描述
callback	用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素， false 则不保留。它接受以下三个参数
element	数组中当前正在处理的元素。
index	正在处理的元素在数组中的索引。
array	调用了 filter 的数组本身。
thisArg	执行 callback 时，用于 this 的值。

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

示例一， 使用箭头符号直接测试元素：

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];

// 筛选出带有小于字母a的水果，并返回新数组
const newFruits = fruits.filter(item => item.includes('a'));
// 输出新数组
console.log(newFruits);

输出结果：

// 只有通过测试的元素才会添加到新数组中

[ 'Pear', 'Orange', 'Banana' ]

示例二，定义测试函数获取对应参数进行测试：

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];

// 定义测试的函数
const callback = (ele, index, arr) => {
    console.log(index, ele, arr);
    return ele.includes('a');
}

// 筛选出带有小于字母a的水果，并返回新数组
const newFruits = fruits.filter(callback);
// 输出新数组
console.log(newFruits);

输出结果如下：

// 每个元素测试时所获取的三个参数

0 Apple [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
1 Pear [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
2 Orange [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
3 Banana [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
4 Plum [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]

    

// 通过测试返回的新数组
[ 'Pear', 'Orange', 'Banana' ]

1.3 find()方法

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

语法：

arr.find(callback[, thisArg])

参数：

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

示例：

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];

// 查询带p的水果名称
const firstValue = fruits.find(item => item.includes('p'));
// 输出结果
console.log(firstValue);

输出结果：

Apple

1.4 findIndex()方法

        findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

语法：

arr.findIndex(callback[, thisArg])

参数：

返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1

示例：

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];

// 查询带p的水果名称
const firstIndex = fruits.findIndex(item => item.includes('p'));
// 输出结果
console.log(firstIndex);

输出结果：

0

1.5 indexOf()方法

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

语法：

arr.indexOf(searchElement[, fromIndex])

参数：

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

示例：

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];

// 从数组fruits开头位置查询Pear元素的位置
const index = fruits.indexOf("Pear");
// 输出结果
console.log(index);

// 从数组fruits索引为2的位置，查询Banana的索引
const bIndex = fruits.indexOf("Banana", 2);
console.log(bIndex);

输出结果：

// Pear的索引位置

1

    

//Banana的索引位置

3 

1.6 lastIndexOf()方法

        lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

语法：

arr.lastIndexOf(searchElement[, fromIndex])

参数：

返回值：数组中该元素最后一次出现的索引，如未找到返回-1。

示例：

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];

// 从数组fruits结尾位置开始查询Pear元素的位置
const index = fruits.lastIndexOf("Pear");
// 输出结果
console.log(index);

// 从数组fruits索引为fruits.length-1的位置，查询Banana的索引
const bIndex = fruits.lastIndexOf("Banana", fruits.length-1);
console.log(bIndex);

输出结果：

// Pear的索引位置

1

   

//Banana的索引位置

3 

1.7 find与index的四种方法区别

• find()查询返回的是结果中第一个元素的值
• findIndex()查询返回的是结果中第一个元素的索引
• indexOf()是从数组开始方向查询，并返回第一个结果的索引。
• lastIndexOf()是从数组结尾方向反向查询，并返回第一个结果的索引。

1.8 forEach()方法

        forEach() 方法对数组的每个元素执行一次提供的函数。

语法：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

参数：

参数名	描述
callback	为数组中每个元素执行的函数，该函数接收三个参数
currentValue	数组中正在处理的当前元素。
index	数组中正在处理的当前元素的索引。
array	forEach() 方法正在操作的数组。
thisArg	可选参数。当执行回调函数 callback 时，用作 this 的值。

返回值：undefined

注意： 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不建议使用。

示例：

const numbers = [50, 89, 22, 59, 38, 99, 105];

// map()循环
numbers.forEach(item => console.log(item));

输出结果：

50
89
22
59
38
99
105

1.9 includes()方法

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

语法：

arr.includes(valueToFind[, fromIndex])

参数：

返回值：返回一个布尔值 Boolean ，如果在数组中找到了（如果传入了 fromIndex ，表示在 fromIndex 指定的索引范围中找到了）则返回 true 。

注：使用 includes()比较字符串和字符时是区分大小写。

1.9.1 fromIndex大于零或小于零不同之处

示例：

const numbers = [1, 2, 3, NaN];

// 大于0位置开始查询
console.log(numbers.includes(2));
console.log(numbers.includes(4));
console.log(numbers.includes(3, 3));
console.log(numbers.includes(NaN));

// 小于0位置开始查询
//实际起始位：numbers.length + (-1) = 3，值3的索引为2，故结果为false
console.log(numbers.includes(3, -1));    
//实际起始位：numbers.length + (-1) = 3, 值1的索引为0，故结果为false
console.log(numbers.includes(1, -1));
// 实际起始位：numbers.length + (-100) = -96，值2的索引为1，故结果为true
// 起始位索引小于0，则从0开始查询
console.log(numbers.includes(2, -100));

输出结果：

// 大于0位置开始查询

true
false
false
true

   

// 小于0位置开始查询
false
false
true

1.9.2 includes()不支持模糊查询

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];

// 输出结果：
console.log(fruits.includes('an'));
console.log(fruits.includes('Plum'));

输出结果：

false
true

1.9.3 arguments对象使用includes()方法

示例：

(function() {
  console.log([].includes.call(arguments, 'a'));
  console.log([].includes.call(arguments, 'd'));
})('a','b','c');

输出结果：

true
false

1.10 join()方法

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

语法：

arr.join([separator])

参数：

返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

1.10.1 常规合并

示例：

const words = ["How", "are", "you", "?"];
// 拼接字符
console.log(words.join(" ")); 
console.log(words.join("-")); 

输出结果：

How are you ?
How-are-you-?

1.10.2 arguments对象使用join()方法

示例：

(function(){
    const word = Array.prototype.join.call(arguments, '');
    console.log(word);
})('H', 'e', 'l', 'l', 'o');

输出结果：

Hello

1.11 map()方法

        map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

参数：

返回值：回调函数的结果组成了新数组的每一个元素。

1.11.1 重构元素

示例：

const numbers = [23, 77, 26, 38, 15, 69];
// 使用map()循环将数组中元素乘以2，并返回一个新数组
const newNums = numbers.map(item => item * 2);
// 输出结果
console.log(newNums);

// 将索引模2等于0的，减去10
const newNums2 = numbers.map((item, index) => index%2===0 ? item-10 : item);
// 输出结果
console.log(newNums2);

输出结果：

// 乘以2结果

[ 46, 154, 52, 76, 30, 138 ]

  

// 减去10结果
[ 13, 77, 16, 38, 5, 69 ]

1.11.2 使用map()获取ASCII码

示例：

const codes = Array.prototype.map.call("Hello World!", item => item.charCodeAt(0))
// 输出结果
console.log(codes);

输出结果：

[ 72, 101, 108, 108, 111, 32,  87, 111, 114, 108, 100,  33 ]

1.12 pop()方法

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

语法：

arr.pop()

返回值：从数组中删除的元素(当数组为空时返回undefined)。

示例：

const words = ["How", "are", "you", "?"];
// 删除最后一个元素
words.pop();
// 输出结果
console.log(words);

输出结果：

[ 'How', 'are', 'you' ]

1.13 push()方法

        push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

语法：

arr.push(element1, ..., elementN)

参数：

参数名	描述
elementN	被添加到数组末尾的元素。

返回值：当调用该方法时，新的 length 属性值将被返回。

1.13.1 添加元素到数组

示例：

const words = ["How", "are", "you", "?"];
// 添加一个元素
words.push("Nice");
// 输出结果
console.log(words);

// 添加多个元素
words.push("to", "meet", "you");
// 输出结果
console.log(words);

输出结果：

// 添加一个元素 输出结果

[ 'How', 'are', 'you', '?', 'Nice' ]

  

// 添加多个元素 输出结果
['How',  'are', 'you',  '?', 'Nice', 'to', 'meet', 'you' ]

1.13.2 结合apply()合并两数组

        使用 apply() 添加第二个数组的所有元素，当第二个数组太大时不要使用这个方法来合并数组，因为事实上一个函数能够接受的参数个数是有限制的。

示例：

const words = ["How", "are", "you", "?"];
const word2 = ["Nice", "to", "meet", "you"];

// 合并两个数组
Array.prototype.push.apply(words, word2);
// 输出结果
console.log(words);

输出结果：

[ 'How',  'are', 'you',  '?',  'Nice', 'to',  'meet', 'you' ]

1.14 reduce()方法

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

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数：

参数名	描述
callback	执行数组中每个值 (如果没有提供  initialValue则第一个值除外)的函数，包含四个参数
accumulator	累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
currentValue	数组中正在处理的元素。
index	数组中正在处理的当前元素的索引。 如果提供了 initialValue，则起始索引号为0，否则从索引1起始。(可选)
array	调用 reduce()的数组(可选）
initialValue	作为第一次调用  callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值：函数累计处理的结果。

1.14.1 求和

示例：

const numbers = [10, 20, 30, 15, 35, 5, 50];

// 求和
const total = numbers.reduce((total, value) => total + value, 0);
// 输出结果
console.log("Total:", total);

输出结果：

Total: 165

1.14.2 合并子数组

        reduce()也可以作为flatMap()方法的替补方案，将数组中所有子数组合并到一维数组中。

示例：

const arr = [20, 30, 50, 60, [15, 35, 55, 75], [5, 10, 12]];
// 合并数组
const newArr = arr.reduce((all, item) => 
    all.concat( Array.isArray(item) ? item : [item] ) 
    , []);
// 输出结果
console.log(newArr);

输出结果：

[ 20, 30, 50, 60, 15, 35, 55, 75,  5, 10, 12 ]

1.14.3 求数组中最小值和最大值

示例：

const arr = [20, 30, 50, 60, 15, 35, 55, 75];

// 求最小值
const minValue = arr.reduce((minValue, item) => Math.min(minValue, item), arr[0]);

// 求最大值
const maxValue = arr.reduce((maxValue, item) => Math.max(maxValue, item), arr[0]);

// 输出结果
console.log("最小值：", minValue);
console.log("最大值：", maxValue);

输出结果：

最小值： 15
最大值： 75

1.15 reduceRight()方法

        reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

语法：

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数：

参数名	描述
callback	一个回调函数，用来操作数组中的每个元素，可接受四个参数
accumulator	上一次调用回调的返回值，或提供的  initialValue。
currentValue	当前被处理的元素。
index	数组中当前被处理的元素的索引。（可选）
array	调用 reduceRight() 的数组(可选）
initialValue	值用作回调的第一次调用的累加器。如果未提供初始值，则将使用并跳过数组中的最后一个元素。在没有初始值的空数组上调用reduce或reduceRight就会创建一个TypeError。

返回值：执行之后的返回值。

示例：

const number = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 从右向左合并元素
const numStr = number.reduceRight((allStr, item) => allStr + item.toString(), "");
// 输出结果
console.log(numStr);

输出结果：

987654321

1.16 reverse()方法

        reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

语法：

arr.reverse()

返回值：颠倒后的数组。

1.16.1 反转数组

示例：

const number = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 反转数组
number.reverse();
// 输出结果
console.log(number);

输出结果：

[ 9, 8, 7, 6, 5, 4, 3, 2, 1 ]

1.16.2 反转类数组对象

        以下类数组中包含3个元素和一个 length 属性, 然后颠倒这个类数组对象。reverse() 的调用返回一个颠倒后的类数组对象的引用。

示例：

const arrObj = { 0: "Hello", 1: "are", 2: "you", length: 3 };
// 反转数组对象
Array.prototype.reverse.call(arrObj);
// 输出结果
console.log(arrObj);

输出结果：

{ '0': 'you', '1': 'are', '2': 'Hello', length: 3 }

1.17 shift()方法

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

语法：

arr.shift()

返回值：从数组中删除的元素; 如果数组为空则返回undefined 。 

示例：

const number = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 删除第一个元素
number.shift();
// 输出结果
console.log(number);

//循环删除
let i;
while( (i = number.shift()) !== undefined ){
    console.log('val: ' + i);
}
// 最后输出数组
console.log("arr: ", number);

输出结果：

// 删除第一个元素后数组

[ 2, 3, 4, 5, 6, 7, 8, 9 ]

  

// while循环删除
val: 2
val: 3
val: 4
val: 5
val: 6
val: 7
val: 8
val: 9
arr []

1.18 slice()方法

        slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

语法：

arr.slice([begin[, end]])

参数：

参数名	描述
begin	提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。         如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取， slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。         如果省略 begin，则 slice 从索引 0 开始。         如果 begin 大于原数组的长度，则会返回空数组。
end	提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。 slice 会提取原数组中索引从  begin 到  end 的所有元素（包含 begin，但不包含 end）。         slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。         如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。         如果  end 被省略，则  slice 会一直提取到原数组末尾。         如果 end 大于数组的长度， slice 也会一直提取到原数组末尾。

返回值：一个含有被提取元素的新数组。

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 从索引为1的位置截取 begin - 1 + len - 1 = 索引为2位置
// begin - 1是起始位从begin开始且包含begin
// len - 1是end位置不包含end
// 故 1 - 1 + 3 - 1 = 2
const cutArr = fruits.slice(1, 3);
// 输出结果
console.log(cutArr);

输出结果：

[ 'Pear', 'Orange' ]

1.19 sort()方法

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

语法：

arr.sort([compareFunction])

参数：

参数名	描述
compareFunction	用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl	第一个用于比较的元素。
secondEl	第二个用于比较的元素。

返回值：排序后的数组。请注意，数组已原地排序，并且不进行复制。

1.19.1 数值排序

示例：

const number1 = [20, 30, 50, 60, 15, 35, 55, 75];
const number2 = [20, 30, 50, 60, 15, 35, 55, 75];

// 升序
number1.sort((a, b) => a - b);
// 降序
number2.sort((a, b) => b - a);

// 输出结果
console.log(number1);
console.log(number2);

输出结果：

// 升序

[ 15, 20, 30, 35, 50, 55, 60, 75 ]

  

// 降序
[ 75, 60, 55, 50, 35, 30, 20, 15 ]

1.19.2 字符串排序

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];

// 降序排序
fruits.sort((a, b) => {
    if(a.toUpperCase() > b.toUpperCase()){
        return 1;
    } else if(a.toUpperCase() < b.toUpperCase()){
        return -1;
    }
    return 0;
});
// 输出结果
console.log(fruits);

输出结果：

[ 'Apple', 'Banana', 'Orange', 'Pear', 'Plum' ]

1.19.3 localeCompare()比较

        当排序非 ASCII 字符的字符串（如包含类似 e, é, è, a, ä 等字符的字符串）。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序。

示例：

var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];

// 使用localeCompare()进行字符比较
items.sort((a, b) => a.localeCompare(b));
// 输出结果
console.log(items);

输出结果：

[ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]

1.20 splice()方法

        splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法：

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

参数：

参数名	描述
start	指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于 array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
deleteCount	整数，表示要移除的数组元素的个数。 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。 如果 deleteCount 被省略了，或者它的值大于等于 array.length - start(也就是说，如果它大于或者等于 start之后的所有元素的数量)，那么 start之后数组的所有元素都会被删除。 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
item1, item2, ...	要添加进数组的元素,从 start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值 ：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

1.20.1 删除某个元素

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 删除Apple
fruits.splice(0, 1);
// 输出结果
console.log(fruits);

输出结果：

[ 'Pear', 'Orange', 'Banana', 'Plum' ]

1.20.2 删除某元素及后面所有元素

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 删除Orange及后面所有元素
fruits.splice(2);
// 输出结果
console.log(fruits);

输出结果：

[ 'Apple', 'Pear' ]

1.20.3 删除某元素及后面指定长度元素

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 删除Orange及长度为2
fruits.splice(2, 2);
// 输出结果
console.log(fruits);

输出结果：

[ 'Apple', 'Pear', 'Plum' ]

1.20.4 删除某几个元素，并插入新元素

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 删除Orange及长度为2，并插入三个新元素
fruits.splice(2, 2, 'Grapes', 'Muskmelon', 'Grapefruit');
// 输出结果
console.log(fruits);

输出结果：

[ 'Apple', 'Pear', 'Grapes', 'Muskmelon', 'Grapefruit', 'Plum' ]

1.21 toString()方法

        toString() 返回一个字符串，表示指定的数组及其元素。

语法：
 

arr.toString()

返回值 ：一个表示指定的数组及其元素的字符串。

示例：

const array1 = [1, 'a', "Hello"];
const stringVal = array1.toString();
console.log(stringVal);

输出结果：

1,a,Hello

1.22 unshift()方法

        unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

语法：

arr.unshift(element1, ..., elementN)

参数：

参数名	描述
elementN	要添加到数组开头的元素或多个元素。

返回值：当一个对象调用该方法时，返回其 length 属性值。

示例：

const number = [2, 5, 8, 11, 15, 18, 21, 23];

// 逐个添加
number.unshift(50);
number.unshift(23);
number.unshift(19);
// 输出结果
console.log(number);

// 一次添加多个
number.unshift(100, 150, 230);
console.log(number);

输出结果：

// 逐个添加 结果

[ 19, 23, 50,  2,  5, 8, 11, 15, 18, 21, 23 ]

// 一次添加多个 结果 
[ 100, 150, 230, 19, 23, 50, 2,   5,   8, 11, 15, 18, 21,  23 ]

1.23 isArray()方法

        Array.isArray() 用于确定传递的值是否是一个 Array。

语法：

Array.isArray(obj)

参数：

参数名	描述
obj	需要检测的值。

返回值：如果值是 Array，则为true; 否则为false。

示例：

// 下面的函数调用都返回 true
console.log(Array.isArray([]));
console.log(Array.isArray([1]));
console.log(Array.isArray(new Array()));
console.log(Array.isArray(new Array('a', 'b', 'c', 'd')))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
console.log(Array.isArray(Array.prototype)); 

// 下面的函数调用都返回 false
console.log(Array.isArray());
console.log(Array.isArray({}));
console.log(Array.isArray(null));
console.log(Array.isArray(undefined));
console.log(Array.isArray(17));
console.log(Array.isArray('Array'));
console.log(Array.isArray(true));
console.log(Array.isArray(false));
console.log(Array.isArray(new Uint8Array(32)))
console.log(Array.isArray({ __proto__: Array.prototype }));

输出结果：

// // 下面的函数调用都返回 true

true
true
true
true
true

  

// // 下面的函数调用都返回 false
false
false
false
false
false
false
false
false
false
false

二、其他方法

2.1 of()方法

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

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

语法：

Array.of(element0[, element1[, ...[, elementN]]])

参数：

参数	描述
element N	任意个参数，将按顺序成为返回数组中的元素。

返回值：新的 Array 实例。

示例：

const num1list = Array.of(7);
const num2list = Array.of(3,4,5);

const num1 = Array(5);
const num2 = Array(1, 2, 3);
const num3 = Array(undefined);

console.log(num1list);
console.log(num2list)

console.log(num1);
console.log(num2);
console.log(num3);

输出结果如下：

> [ 7 ]
>  [3, 4, 5 ]

   

> [ <5 empty items> ]
> [ 1, 2, 3 ]
> [ undefined ]

2.2 copyWithin()方法

        copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

语法：

arr.copyWithin(target[, start[, end]])

参数：

参数名	描述
target	0 为基底的索引，复制序列到该位置。如果是负数， target 将从末尾开始计算。 如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
start	0 为基底的索引，开始复制元素的起始位置。如果是负数， start 将从末尾开始计算。 如果  start 被忽略， copyWithin 将会从0开始复制。
end	0 为基底的索引，开始复制元素的结束位置。 copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数，end 将从末尾开始计算。 如果 end 被忽略， copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。

返回值：改变后的数组。

示例：

const words = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const words2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const words3 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

// 将words数组中 0 位置元素 a 移至索引为3的位置
words.copyWithin(3, 0, 1);

// 将words2数组中0位置元素 a 移至索引 3位置，并移2位
words2.copyWithin(3, 0, 2);

// 将words3数组中 0位置元素移至 索引为4位置，且不指定结束位置
words3.copyWithin(4, 0);

console.log( words);
console.log( words2);
console.log( words3);

输出结果如下所示，移至位置元素被替换，使用此方法请注意使用场景：

[
  'a', 'b', 'c',
  'a', 'e', 'f', 'g'
]

   
[
  'a', 'b', 'c',
  'a', 'b', 'f','g'
]

  
[
  'a', 'b', 'c',
  'd', 'a', 'b', 'c'
]

2.3 entries()方法

        entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

语法：

arr.entries()

参数：无

返回值：一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（__proto__:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。

2.3.1 while循环

示例：

const words = ['a','b','c','d','e','f','g'];
// 获取迭代器实例
const iteratorObj = words.entries();
// 获取第一个迭代器
let nextObj = iteratorObj.next();

console.log(nextObj);       //迭代器结构

// 循环获取剩余元素，当nextObj.done为true时结束
while(!nextObj.done){
    // 输出结果
    console.log(nextObj.value);
    // 获取下一个迭代器
    nextObj = iteratorObj.next();
};

输出结果如下：

// 迭代器结构，done 用于指示迭代器是否完成：在每次迭代时进行更新而且都是false，直到迭代器结束done才是true。

{ value: [ 0, 'a' ], done: false }

   

// while循环输出结果

[ 0, 'a' ]
[ 1, 'b' ]
[ 2, 'c' ]
[ 3, 'd' ]
[ 4, 'e' ]
[ 5, 'f' ]
[ 6, 'g' ]

2.3.2 二维数组的排序

        可以使用迭代器循环获取所有子元素，进而将子数组通过sort()进行排序，示例/如下：

const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
];
// 获取Iterator实例对象
const iteratorObj = numbers.entries();
// 获取迭代器
let next = iteratorObj.next();
// 循环获取子数组
while(!next.done){
    // 子数组在迭代器 next.value数组索引为1的位置
    // 通过sort()方法进行排序
    next.value[1].sort((a, b) => a - b);
    // 获取下一个迭代器
    next = iteratorObj.next();
}

console.log(numbers)

输出结果如下，此时二维数组中子数组已全部进行升序排序：

[
  [ 8, 12, 20, 32 ],
  [ 3,  4,  6,  9, 12, 19, 45, 88 ],
  [  21, 23,  33,  39,  52, 59, 100, 150 ],
  [ 1, 2, 4, 5, 6, 8 ]
]

2.3.3 使用for ... of循环

        除了以上使用while + next.done循环外，还可以使用for ... or循环，示例如下：

const words = ['a','b','c','d','e','f','g'];
// 获取迭代器实例
const iteratorObj = words.entries();

// 使用for ..of 循环输出迭代器
for(let value of iteratorObj){
    console.log(value);
}

输出结果如下：

[ 0, 'a' ]
[ 1, 'b' ]
[ 2, 'c' ]
[ 3, 'd' ]
[ 4, 'e' ]
[ 5, 'f' ]
[ 6, 'g' ]

2.4 every()方法

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

语法：

arr.every(callback[, thisArg])

参数：

参数名	描述
callback	用来测试每个元素的函数，它可以接收三个参数：
element	用于测试的当前值
index	用于测试的当前值的索引。（可选）
array	调用 every 的当前数组。（可选）
thisArg	执行 callback 时使用的  this 值。

返回值：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

示例：

const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
];

// 1.判断numbers数组中，所有子元素是否为数组
console.log(numbers.every( item => Array.isArray(item) ));

// 2.回调函数（也可以把执行函数拿出来单独定义）
// 判断是否为数组外，并判断是否所有数组长度都大于5
const callback = function(ele, index, arr){
    return Array.isArray(ele)&&ele.length>5;
}

// 判断numbers数组中，所有子元素是否为数组
console.log(numbers.every( callback ));


// 3.回调函数（可以传入callback回调中的this对象）
const callback2 = function(ele, index, arr){
    console.log('this object:', this);
    return Array.isArray(ele);
}
// 模拟this对象
const thisArg = { value: 2 };
// 判断numbers数组中，所有子元素是否为数组
console.log(numbers.every( callback2 , thisArg));

输出结果如下：

// 1.因二维数组中所有子元素都为数组，故返回为true

true

  

// 2.因二维数组中所有子元素长度有小于5位的，故返回false
false

  

// 3.这里是模拟了一个thisArg对象传入，也可以将numbers输入或其他需绑定对象
this object: { value: 2 }
this object: { value: 2 }
this object: { value: 2 }
this object: { value: 2 }
true

2.4 fill()方法

        fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法：

arr.fill(value[, start[, end]])

参数：

参数名	描述
value	用来填充数组元素的值。
start	起始索引，默认值为0。（可选）
end	终止索引，默认值为 this.length。(可选）

返回值：修改后的数组。

示例：

const words = ['a','b','c','d','e','f','g'];
const words2 = ['a','b','c','d','e','f','g'];

// words数组，将w从索引3位置填充到5位置终止
words.fill('w', 3, 5);

// words数组，将x从索引 5位置填充到结束位置
words.fill('x', 5);

// words2数组，将数组中所有元素都替换为 z
words2.fill('z');

console.log(words);
console.log(words2);

输出结果如下：

[  'a', 'b', 'c', 'w', 'w', 'x', 'x' ]

  
[  'z', 'z', 'z', 'z', 'z', 'z',  'z' ]

注：fill()方法和copyWithin()之间区别：

1. fill()方法是将内容指定到数组的某位置，copyWithin()是将数组中某位或多位元素移至新位置。
2. fill()方法中的end是指结束位置的索引，但不包含本位置；copyWithin()方法中的end是自start起始点索引位置开始，至结束长度，实际结束位置索引为start+end-1位置。
3. fill()方法不指定end位置则会填充整个数组；copyWithin()方法不指定end位置则只移动start位置元素。

2.5 flat()方法

        flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法：

var newArray = arr.flat([depth])

参数：

返回值：一个包含将数组与子数组中所有元素的新数组。

2.5.1 扁平化嵌套数组

示例：

const numbers = [
    3, 50, 89, 22, 59,
    [38, 99, 105, 30],
    [26, 78]
]

// 扁平化嵌套数组
const newArr = numbers.flat();

// 输出结果
console.log(numbers);
console.log(newArr);

输出结果：

// 原数组

[ 3, 50, 89, 22, 59, [ 38, 99, 105, 30 ], [ 26, 78 ] ]

    

// 合并后新数组
[3, 50,  89, 22, 59, 38, 99, 105, 30, 26, 78 ]

2.5.2 移除数组中空间

        flat() 方法可以移除数组中的空项。

示例：

const numbers = [ 3, 50, 89,, 22, 59 ]

// 移除空项
const newNums = numbers.flat();
// 输出结果
console.log(newNums);

输出结果：

[ 3, 50, 89, 22, 59 ]

2.6 flatMap()方法

        flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

语法：

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

参数：

参数名	描述
callback	可以生成一个新数组中的元素的函数，可以传入三个参数
currentValue	当前正在数组中处理的元素
index	可选的。数组中正在处理的当前元素的索引。
array	可选的。被调用的  map 数组
thisArg	可选的。执行  callback 函数时 使用的 this 值。

返回值：一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

2.6.1 通过映射函数合并

示例：

const numbers = [
    3, 50, 89, 22, 59,
    [38, 99, 105, 30],
    [26, 78]
];
// 通过映射函数合并所有结果
// 如果是数组，直接使用valuue，如果不是将value转换为数组
const newNums = numbers.flatMap(value => Array.isArray(value)?value:[value]);
// 输出结果
console.log(newNums);

输出结果：

[ 3, 50,  89, 22, 59, 38, 99, 105, 30, 26, 78 ]

2.6.2 Object元素合并

示例：

const menus =  [ 
    {name: "Java", children: [
        {name: "SpringBoot"},
        {name: "Struts"},
        {name: "Freemarker"}
    ]},
    {name: "PHP", children: [
        {name: "ThinkPHP"},
        {name: "Yii"}
    ]},
    {name: "Python", children: [
        {name: "Python基础"}
    ]}
];

// 通过映射函数将对象元素合并成一维数组
const newMenus = menus.flatMap(item => [{name: item.name}, ...item.children]);
// 输出结果
console.log(newMenus);

输出结果：

[
  { name: 'Java' },
  { name: 'SpringBoot' },
  { name: 'Struts' },
  { name: 'Freemarker' },
  { name: 'PHP' },
  { name: 'ThinkPHP' },
  { name: 'Yii' },
  { name: 'Python' },
  { name: 'Python基础' }
]

2.6.3 map()和flatMap()区别

1. map()和flatMap()都可以循环遍历数组。
2. map()是一对一返回元素到新数组中，flatMap()是将的所有元素合并到一维数组中。
3. map()在循环返回新数组后不会改变元素数量，flatMap()循环返回新数组中元素个数会因条件不同而改变。

示例：

const numbers = [ 3, 50, 89, 22, 59, 38, 99, 105, 30 ];

// map()循环
const numsMap = numbers.map(value => [value]);
// flatMap()循环
const numsFlatMap = numbers.flatMap(value => [value]);
// 一对一返回，输出结果
console.log(numsMap);
console.log(numsFlatMap);


// flatMap() 修改返回结果，不满足条件指定为空数组
const numsNewFlatMap = numbers.flatMap(value => value<50?[]:[value]);
// 输出结果
console.log(numsNewFlatMap);

输出结果：

// map()返回结果

[ [ 3 ],  [ 50 ], [ 89 ], [ 22 ], [ 59 ], [ 38 ], [ 99 ], [ 105 ],  [ 30 ] ]

  

// flatMap()返回结果
[ 3, 50,  89, 22, 59, 38, 99, 105, 30 ]

  

// flatMap()返回结果个数不唯一，可通过条件筛选
[ 50, 89, 59, 99, 105 ]

2.7 keys()方法

        keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

语法：

arr.keys()

返回值：一个新的 Array 迭代器对象。

示例：

const words = ["How", "are", "you", "?"];
// 获取keys迭代器
const keysIterator = words.keys();
// 使用for ... of输出
for(const value of keysIterator){
    console.log('key', value);
}

输出结果：

key 0
key 1
key 2
key 3

2.8 values()方法

        values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

语法：

arr.values()

返回值：一个新的 Array 迭代对象。

示例：

const words = ["How", "are", "you", "?"];
// 获取values迭代器
const valuesIterator = words.values();
// 使用for ... of输出
for(const value of valuesIterator){
    console.log('value：', value);
}

输出结果：

value： How
value： are
value： you
value： ?

注：keys()方法是获取数组中所有索引值的迭代器实例，values()方法是获取数组中所有值的迭代器实例。

2.9 some()方法

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

注：如果用一个空数组进行测试，在任何情况下它返回的都是false。

语法：

arr.some(callback(element[, index[, array]])[, thisArg])

参数：

参数名	描述
callback	用来测试每个元素的函数，接受三个参数
element	数组中正在处理的元素。
index	可选的。数组中正在处理的元素的索引值。
array	可选的。some()被调用的数组。
thisArg	可选的。执行 callback 时使用的  this 值。

返回值：数组中有至少一个元素通过回调函数的测试就会返回true；所有元素都没有通过回调函数的测试返回值才会为false。

示例：

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 判断数组中是否存在Orange
const flagOrange = fruits.some(item => item == "Orange");
const flagGrapes = fruits.some(item => item == "Grapes");
// 输出结果
console.log(flagOrange);
console.log(flagGrapes);

输出结果：

true
false

2.10 toLocaleString()方法

        toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

语法：

arr.toLocaleString([locales[,options]]);

参数：

参数名	描述
locales	带有BCP 47语言标记的字符串或字符串数组，关于 locales参数的形式与解释，请看 Intl页面。（可选）
options	一个可配置属性的对象，对于数字  Number.prototype.toLocaleString()，对于日期 Date.prototype.toLocaleString()。（可选）

返回值：表示数组元素的字符串。

示例：

const array1 = [1, 'a', new Date('2023/10/01')];
const localeString = array1.toLocaleString('en', {timeZone: "UTC"});
console.log(localeString);

输出结果：

1,a,10/1/2023, 12:00:00 AM

2.11 @@iterator

        @@iterator 属性和 Array.prototype.values() 属性的初始值是同一个函数对象。

语法：

arr[Symbol.iterator]()

返回值：数组的 iterator 方法，默认情况下，与 values() 函数。

示例：

const number = [2, 5, 8, 11, 15, 18, 21, 23];

// 获取迭代器
const newArr = number[Symbol.iterator]();

// 通过next获取
console.log(newArr.next().value);

// 获取for...of 输出所有元素
for(let val of newArr){
    console.log('val:', val);
}

输出结果：

// 通过next()获取值

2

  

// 通过for...of输出剩下所有元素
val: 5
val: 8
val: 11
val: 15
val: 18
val: 21
val: 23

2.12 Array[@@species]

        Array[@@species] 访问器属性返回 Array 的构造函数。species 访问器属性返回 Array 对象的默认构造函数。子类的构造函数可能会覆盖并改变构造函数的赋值。

语法：

Array[Symbol.species]

返回值：Array 的构造函数。

示例：

// 获取默认的构造器
const constructorArr = Array[Symbol.species];
// 输出结果
console.log(constructorArr);

class myArr extends Array{
    // // 重写 MyArray 的 species 属性到父类 Array 的构造函数
    static get [Symbol.species](){
        return [1, 2, 3];
    }
}

// 获取重写后的构造器
const constructorFunc = myArr[Symbol.species];

// 输出结果
console.log(constructorFunc);

输出结果：

// 默认构造器 

[Function: Array]

  

// 重写后的构造器
[ 1, 2, 3 ]

2.23 from()方法

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

语法：

Array.from(arrayLike[, mapFn[, thisArg]])

参数：

参数名	描述
arrayLike	想要转换成数组的伪数组对象或可迭代对象。
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg	可选参数，执行回调函数 mapFn 时 this 对象。

返回值：一个新的数组实例。

2.23.1 字符串生成数组

示例：

console.log(Array.from("Hello!"));

输出结果：

[ 'H', 'e', 'l', 'l', 'o', '!' ]

2.23.2 从Set生成数组

示例：

const data = new Set([1, 2, 3, 4, 5]);
console.log(Array.from(data));

输出结果：

[ 1, 2, 3, 4, 5 ]

2.23.3 从Map生成数组

示例：

const data = new Map([ [1, "How"], [2, "are"], [3, "you"] ]);
console.log(Array.from(data));

输出结果：

[ [ 1, 'How' ], [ 2, 'are' ], [ 3, 'you' ] ]

2.23.4 从Map中单独获取key和value

示例：

const data = new Map([ [1, "How"], [2, "are"], [3, "you"] ]);
// 获取键
console.log(Array.from(data.keys()));
// 获取值
console.log(Array.from(data.values()));

输出结果：

[ 1, 2, 3 ]
[ 'How', 'are', 'you' ]

2.23.5 arguments生成数组

示例：

function run(){
    console.log(Array.from(arguments));
};

run('a', 'b', 'c');

输出结果：

[ 'a', 'b', 'c' ]

   2.23.6 使用箭头函数

        示例：

// 将每个元素乘以2输出
console.log(Array.from([1, 2, 3], v => v * 2));

输出结果：

[ 2, 4, 6 ]

2.23.7 数组去重合并

示例：

// 定义去重合并函数
function deMerge(){
    let arr = [].concat.apply([], arguments);
    return Array.from(new Set(arr));
}

let arr1 = [2, 3, 5, 8, 10];
let arr2 = [3, 6, 8, 10, 12];
// 合并并去重
let mergeArr = deMerge(arr1, arr2);
// 输出新数组
console.log(mergeArr);

输出结果：

[ 2, 3,  5, 8, 10, 6, 12 ]

        以上则是表格中收集的所有函数方法，希望对大家开发有所帮助。