前言
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。你会
Array数组吗？今天，给大家分享的小知识是JS中原生数组附带的各种方法，能够熟练掌握这些方法的话，你的开发效率将会得到显著提升，代码不仅优雅可靠，还能避免被各种各样的BUG支配！话不多说，直接进入正题。
▶ 数组方法总览
☛ 遍历
array.forEach()
掌握指数：★★★★★
方法说明：
用于调用数组的每个元素，并将元素传递给回调函数
语法：
array.forEach(function(currentValue, index, arr), thisValue)
示例：
let names = ['Jojo', 'Machine', 'Mikes', 'John', 'James', 'Chris'];
names.forEach((item, index, arr) => {
console.log(`names = [${arr}]`);
console.log(`names[${index}] = ${item}`);
})
控制台：
注意: forEach() 对于空数组是不会执行回调函数的
array.map()
掌握指数：★★★★★
方法说明：
按照原始数组元素顺序依次处理元素，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
语法：
array.map(
function(currentValue(必需；当前元素),
index(所选；每个元素的下标),
arr(所选；元素所属的对象数组)
),
thisValue(可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值)
)
示例：
let arr1 = ['apple', 'banana', 'bear', 'watermelon'];
let arr2 = arr1.map((currentValue, index) => {
if (index >= 2) {
return currentValue + 's';
}
return currentValue;
});
console.log(arr2);
示例说明：
此示例将数组中下标为
2及以后的元素后缀填上's'，返回一个新数组arr2
控制台：
注意:
map()不会对空数组进行检测map()不会改变原始数组
array.every()
掌握指数：★★★
方法说明：
用于检测数组所有元素是否都符合指定条件（通过函数提供），
every()方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回true。简而言之，这个方法的逻辑如同&&
语法：
array.every(function(currentValue, index, arr), thisValue)
示例：
let ages = [18, 19, 29, 40, 21];
let ifAdult = ages.every((currentValue, index, ages) => {
return currentValue >= 18;
});
console.log(ifAdult ? '恭喜都是成年人了！' : '其中至少有一个未成年人！');
控制台：
注意:
every()不会对空数组进行检测every()不会改变原始数组
array.some()
掌握指数：★★★
方法说明：
同理，参考 ☝
语法：
array.some(function(currentValue, index, arr), thisValue)
示例：
ages.push(10);
let ifAdultFlag = ages.some((currentValue) => {
return currentValue < 18; // 至少有一个满足条件就返回 true，否则返回 false
});
console.log(!ifAdultFlag ? '恭喜都是成年人了！' : '其中至少有一个未成年人！');
控制台：
注意:
some()不会对空数组进行检测some()不会改变原始数组
array.filter()
掌握指数：★★★★
方法说明：
创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
语法：
array.filter(function(currentValue, index, arr), thisValue)
示例：
let arr3 = arr1.filter((currentValue) => {
return currentValue.length > 4;
});
console.log(arr3);
控制台：
注意:
filter()不会对空数组进行检测filter()不会改变原始数组
array.reduce()
掌握指数：★★★★★
方法说明：
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
语法：
array.reduce(function(
total(必需；计算结束后的返回值),
currentValue(必需；当前元素),
currentIndex(可选),
arr(可选；当前元素所属的对象)
),
initialValue(累加器的初始值)
)
示例：
let arr4 = [13.2, 23.4, 23.1, 13.2, 13.0, 20.26];
let result1 = arr4.reduce((total, currentValue) => {
total += currentValue;
return total;
}, 0);
let result2 = arr1.reduce((total, currentValue, currentIndex) => {
if (currentIndex != arr1.length - 1) {
return total + currentValue + '|';
}
return total + currentValue;
}, 'begin to sum -> ')
console.log(result1);
console.log(result2);
示例说明：
这里将
arr4数组中的每一个值累加到total变量中，total初始值为0，最终得到的累积之和放到result1当中；对于字符串数组也是同理的，对数组arr1中的每个元素拼接到'begin to sum -> '字符串后面，并以'|'作为元素与元素之间的分隔符，直到最后一个元素后面不加分隔符
控制台：
注意：reduce() 对于空数组是不会执行回调函数的
☛ 拼接
array.concat()
掌握指数：★★★★
方法说明：
接收多个数组作为参数，最终返回拼接后的数组
语法：
array.concat(array2, array3, ..., arrayX(可拼接多个数组))
示例：
let array1 = [1, 2, 3, 4, 5];
let array2 = [6, 7, 8, 9, 10];
let array3 = [11, 12, 13, 14, 15];
let newArr1 = array1.concat(array2, array3);
let newArr2 = array1 + array2 + array3;
console.log(`newArr1 = [${newArr1}]，其数据类型：${typeof (newArr1)}`);
console.log(`newArr2 = ${newArr2}，其数据类型：${typeof (newArr2)}`);
示例说明：
+和concat(array)方法不同，一个是string对象中的方法，一个是数组中的方法，所以返回的数据类型一个仍是Array(object)，另一个则是string，而newArr2通过将array.toString()后进行字符串拼接得到的结果
控制台：
array.join()
掌握指数：★★★★
方法说明：
将数组中的每个元素用指定的分隔符连接起来，最后变成一个字符串
语法：
array.join(separator)
示例：
let arrToString1 = site.join('|');
let arrToString2 = names.join(' and ');
let arrToString3 = ages.join();
console.log(arrToString1);
console.log(arrToString2);
console.log(arrToString3);
控制台：
注意：需指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
☛ 元素查找
array.find()
掌握指数：★★★★★
方法说明：
查找数组中通过测试（函数内判断）的数组的第一个元素的值，找到则返回该值，否则返回
undefined
语法：
array.find(function(currentValue, index, arr), thisValue)
示例：
let names = ['Jojo', 'Machine', 'Mikes', 'John', 'James', 'Chris'];
let name = names.find((currentValue, index) => {
return currentValue.length > 5 && index < 5; // 返回第一个符合条件的值
});
console.log(name);
示例说明：
find()方法为数组中的每个元素都调用一次函数执行，当数组中的元素在测试条件时返回true时,find()返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回undefined
控制台：
注意：
find()对于空数组，函数是不会执行的find()并没有改变数组的原始值
array.findIndex()
掌握指数：★★★
方法说明：
返回传入一个测试条件（函数）符合条件的数组第一个元素位置
语法：
array.find(function(currentValue, index, arr), thisValue)
示例：
let nameIndex = names.findIndex((currentValue, index) => {
return currentValue.length > 4 && index > 1; // 返回第一个符合条件的元素的下标
});
console.log(nameIndex);
控制台：
array.indexOf()
掌握指数：★★★
方法说明：
返回数组中某个指定的元素位置，如果在数组中没找到指定元素则返回
-1
语法：
array.indexOf(item(查找的元素), start(开始查找的索引位置，缺少该参数则从头开始查找))
示例：
let site = ['baidu', 'taobao', 'tencent', 'alibaba'];
let eleIndex = site.indexOf('taobao');
console.log(`site 数组中 taobao 这个元素的索引是：${eleIndex}`);
let eleIndex2 = site.indexOf('taobao', 2);
console.log(`${eleIndex2 == -1 ? '从数组索引 2 的位置开始查找，并未找到指定元素 taobao' : '从数组索引 2 的位置开始查找，找到了指定元素 taobao'}`);
控制台：
array.includes()
掌握指数：★★★★
方法说明：
用来判断一个数组是否包含一个指定的元素，如果是返回
true，否则false
语法：
array.includes(item(查找的元素))
示例：
let site = ['baidu', 'taobao', 'tencent', 'alibaba'];
console.log(`site 数组中是否包含 tencent：${site.includes('tencent') ? '√' : '×'}`);
console.log(`site 数组中是否包含 google：${site.includes('google') ? '√' : '×'}`);
控制台：
☛ 元素的添删截排
array.push()
掌握指数：★★★★★
方法说明：
可向数组的末尾添加一个或多个元素，并返回新的长度
语法：
array.push(item1, item2, ..., itemX)
示例：
let newLen = names.push('harden', 'mercy', 'marry');
console.log(`names = [${names}]，在该数组末尾添加多个元素成功！目前数组的最新长度为：${newLen}`);
控制台：
array.pop()
掌握指数：★★★★★
方法说明：
用于删除数组的最后一个元素并返回删除的元素
语法：
array.pop()
示例：
console.log(`names = [${names}]`);
let lastElement = names.pop();
console.log(`已将 names 数组中最后一个元素移除，该元素为：${lastElement}`);
console.log(`names = [${names}]`);
控制台：
注意：
- 此方法改变数组的长度
- 移除数组第一个元素，请使用
shift()方法
array.shift()
掌握指数：★★★
方法说明：
用于把数组的第一个元素从其中删除，并返回第一个元素的值
语法：
array.shift()
示例：
let firstElement = names.shift();
console.log(`已将 names 数组中第一个元素移除，该元素为：${firstElement}`);
console.log(`names = [${names}]`);
控制台：
注意：
- 此方法改变数组的长度
- 移除数组最后一个元素，请使用
pop()方法
array.unshift()
掌握指数：★★★
方法说明：
可向数组的开头添加一个或更多元素，并返回新的长度
语法：
array.unshift(item1, item2, ..., itemX)
示例：
let newLength = names.unshift('jordan', 'robot', 'rose', 'karry');
console.log(`names = [${names}]，在该数组开头添加多个元素成功！目前数组的最新长度为：${newLength}`);
控制台：
array.slice()
掌握指数：★★★★★
方法说明：
可从已有的数组中返回选定的元素。返回一个新的数组，包含从
start到end（不包括该元素）的arrayObject中的元素
语法：
array.slice(start(开始截取位置), end(结束截取位置))
图解说明：
示例：
let nums = [1, 2, 3, 4, 5];
let newNums = nums.slice(-3, -1);
console.log(newNums); // 返回的是一个新数组，但不会影响原数组
console.log(`截取最后四个元素：${nums.slice(-4)}`);
示例说明：
slice(-3, -1)使用 负数 从数组中读取元素（从数组中倒数第三个元素（包含）开始截取到倒数第一个（不包含））
控制台：
注意：
start规定从何处开始选取，可以为负数end规定从何处结束选取，也可以为负数slice()方法不会改变原始数组
array.sort()
掌握指数：★★★★★
方法说明：
用于对数组的元素进行排序
语法：
array.sort(sortfunction(排序规则函数))
示例：
let points1 = [40, 100, 1, 5, 25, 10];
let points2 = ['e', 'b', 't', 'z', 'd', 'k'];
// 按数值从小到大排序，升序
points1.sort(function (a, b) { return a - b; });
// 默认排序顺序为按字母升序
points2.sort();
console.log(`数组从小到大排序后：${points1.join(' < ')}`);
console.log(`默认排序顺序为按字母升序：${points2.join(' < ')}`);
// 按数值从大到小排序，降序
points1.sort((a, b) => {
return b - a;
})
console.log(`数组从大到小排序后：${points1.join(' > ')}`);
// 如果要将字母默认排序改成降序，需要借助 reverse() 方法
console.log(`改变默认排序顺序为按字母降序：${names.sort().reverse().join(' > ')}`);
控制台：
注意：
- 当数字是按字母顺序排列时"30"将排在"4"前面
- 使用数字排序，你必须通过一个函数作为参数来调用
- 函数指定数字是按照升序还是降序排列
- 使用这种方法会改变原始数组
- 默认排序顺序为按字母升序
- 如果要将字母默认排序改成降序，需要借助
array.reverse()方法
☛ 迭代器
Symbol.iterator
掌握指数：★★★★
说明：
Iterator是ES6引入的一种新的迭代机制，是一个统一的接口，可以用它来遍历String、Array、Map、Set等各种数据结构，它是通过一个键为Symbol.iterator的方法来实现的
示例：
let users = [
{ name: '张三', password: 'zhangsan123' },
{ name: '李四', password: 'lisi123' },
{ name: '王五', password: 'wangwu123' },
{ name: '刘六', password: 'liuliu123' }];
let it = users[Symbol.iterator]();
while (true) {
let cur = it.next();
if (cur.done) { // 指针位置是否到达末尾
break;
} else {
console.log(cur);
}
}
示例说明：
通过
users[Symbol.iterator]()给数组构建一个迭代器，指向当前数据结构的 起始位置 。随后通过next方法进行向下迭代指向下一个位置，该方法会返回当前位置的对象，value和done是当前对象的两个属性，当done为true时则遍历结束
控制台：
array.keys()
掌握指数：★★★
方法说明：
用于从数组创建一个包含 数组键 的 可迭代对象
语法：
array.keys()
示例：
let users = [
{ name: '张三', password: 'zhangsan123' },
{ name: '李四', password: 'lisi123' },
{ name: '王五', password: 'wangwu123' },
{ name: '刘六', password: 'liuliu123' }];
console.log(users.keys()); // Array Iterater
let it = users.keys();
for (let key of users.keys()) {
console.log(it.next().value);
console.log(`第 ${key + 1} 位用户的名字 : ${users[key].name}`);
}
控制台：
array.values()
掌握指数：★★★★
方法说明：
返回新的
Array Iterator对象，包含数组中每个下标处的值
语法：
array.values()
示例：
let users = [
{ name: '张三', password: 'zhangsan123' },
{ name: '李四', password: 'lisi123' },
{ name: '王五', password: 'wangwu123' },
{ name: '刘六', password: 'liuliu123' }];
let iterator = names.values();
for (let it of iterator) {
console.log(it);
}
控制台：
array.entries()
掌握指数：★★★★
方法说明：
返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)
语法：
array.entries()
示例：
let programs = ["Java", "JavaScript", "C++", "Python"];
let entries = programs.entries();
// console.log(entries.next().value);
// console.log(entries.next().value);
// console.log(entries.next().value);
// console.log(entries.next().value);
for (const [key, value] of entries) {
console.log(`key: ${key} => value: ${value}`);
}
示例说明：
迭代对象中数组的索引值作为
key，数组元素作为value。如果代码注释部分未注释掉，那么next指针已经到了entries末尾，for ... of entries无果
控制台：
☛ 静态方法
Array.from()
掌握指数：★★★★★
方法说明：
用于通过拥有
length属性的对象或可迭代的对象来返回一个数组
语法：
Array.from(object, mapFunction, thisValue(映射函数(mapFunction)中的 this 对象。))
示例：
let setObj = new Set(['a', 'b', 'c', 'a', 'b', 'c']);
console.log(setObj);
let arrObj = Array.from(setObj, (item, index) => {
return item + index;
}); // 最后返回的是一个数组
console.log(arrObj);
let arrr = Array.from(arrObj.entries());
console.log(arrr);
示例说明：
首先，初始化一个
Set集合，然后将该集合每一个元素和其下标进行拼接，使用Array的静态方法from将拼接好的元素组合成一个新的数组；同理，也可以组装返回一个由arrObj.entries()可迭代对象入参的新数组
控制台：
Array.isArray()
方法说明：
掌握指数：★★★★
用于判断一个对象是否为数组。如果对象是数组返回
true，否则返回false
示例：
let site = ['baidu', 'taobao', 'tencent', 'alibaba'];
let ifArray = Array.isArray(site);
console.log(`${ifArray ? 'site 是数组！' : 'site 不是数组！'}`);
控制台：
注意：是 Array.isArray(数组名) 而不是 数组名.isArray()
☛ 其他
array.reverse()
掌握指数：★★★
方法说明：
用于颠倒数组中元素的顺序
语法：
array.reverse()
示例：
console.log(`原先，site = [${site}]`);
site.reverse();
console.log(`翻转过后，site = [${site}]`);
控制台：
注意：会改变原先数组
array.toString()
掌握指数：★★
方法说明：
可把数组转换为字符串，并返回结果
语法：
array.toString()
示例：
console.log(`将数组转化成字符串，数组的所有值用逗号隔开：${points2.toString()}`)
控制台：
array.valueOf()
掌握指数：★★
方法说明：
返回
Array对象的原始值
语法：
array.valueOf()
示例：
console.log(site.valueOf());
// 同以下
console.log(site);
示例说明：
该原始值由
Array对象派生的所有对象继承。valueOf()方法通常由JavaScript在后台自动调用，并不显式地出现在代码中
控制台：
注意：valueOf() 方法不会改变原数组
结尾
撰文不易，欢迎大家点赞、评论，你的关注、点赞是我坚持的不懈动力，感谢大家能够看到这里！Peace & Love。
