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 ]

二、其他方法

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 ]

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