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,