JS常用数组方法总结
1. 数组的遍历
1.1 for in
for in是个两用方法
可以用来遍历数组，也可以用来遍历对象
多数用来遍历对象，效率比较低
首先遍历对象
let person={name:"老王",age:23,city:"大唐"}
let text=""
for (let i in person){
text+=person[i]
}
输出结果为：老王23大唐
其次在尝试一些数组
let arry=[1,2,3,4,5]
for (let i in arry){
console.log(arry[i])
}
能输出出来，证明也是可以的。
1.1 for..of 循环
for in循环看似完美，但实际使用中除了循环对象，基本不会用来循环数组。因为es6提供了一个更完美的数组循环方法：for..of
避免了for in的所有缺点，可以使用break,continue和return，
不仅支持数组的遍历，还可以遍历类似数组的对象，还支持字符串的遍历
支持Map和Set对象遍历
for(const item of items)循环遍历数组项，如下所示遍历colors列表：
const colors = ['blue', 'green', 'white'];
for (const color of colors) {
console.log(color);
}
// 'blue'
// 'green'
// 'white'
提示：
可以随时使用break语句停止遍历。
1.2 for 循环
for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。
for通常需要在每个循环中递增index 变量
const colors = ['blue', 'green', 'white'];
for (let index = 0; index < colors.length; index++) {
const color = colors[index];
console.log(color);
}
// 'blue'
// 'green'
// 'white'
index变量从0递增到colors.length-1。此变量用于按以下索引访问项：colors [index]。
提示
for循环也可以随时使用break语句停止遍历。
1.3 array.forEach() 方法
array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。
在每次遍历中，都使用以下参数调用callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本身。
const colors = ['blue', 'green', 'white'];
colors.forEach(function callback(item, i) {
console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2
提示：
不能中断array.forEach()迭代。
value参数代表循环当前项，必传
只能用来循环数组
没有返回值（undefined）
不影响原来的数组
2. 数组的映射
2.1 Array.map()方法
array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。
在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身，并应该返回新项。
如下所示对每个数组元素都递增 1：
const numbers = [0, 2, 4];
const newNumbers = numbers.map(function increment(number) {
return number + 1;
});
newNumbers; // => [1, 3, 5]
提示：
array.map()创建一个新的映射数组，而不改变原始数组。
2.2 Array.from()方法
Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。
在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。
如下所示咱们对每个数组元素都递增 1：
const numbers = [0, 2, 4];
const newNumbers = Array.from(numbers,
function increment(number) {
return number + 1;
}
);
newNumbers; // => [1, 3, 5]
提示：
Array.from()创建一个新的映射数组，而不改变原始数组。
Array.from()更适合从类似数组的对象进行映射。
在实际项目开发中，我们通过使用Array.from()将类数组对象转换为真正数组
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。
这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：
let arrayLike = {
'name': 'tom',
'age': '65',
'sex': '男',
'friends': ['jane','john','Mary'],
length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]
会发现结果是长度为4，元素均为undefined的数组
由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
2、该类数组对象的属性名必须为数值型或字符串型的数字
注: 该类数组对象的属性名可以加引号，也可以不加引号
3. 数组简化
3.1 Array.reduce() 方法
array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。
在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器。
示例是对数字数组求和：
const numbers = [2, 0, 4];
function summarize(accumulator, number) {
return accumulator + number;
}
const sum = numbers.reduce(summarize, 0);
sum; // => 6
第一步，将accumulator 初始化为0。然后，对每个累加数字和的数组项调用summary函数。
提示：
如果没有使用 initialValue 来设置初始值，则默认使用数组的第一个元素作为初始值。
4. 数据连接
4.1 array.concat() 方法
array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示，连接两个数组：
const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];
const everyone = heroes.concat(villains);
everyone // ["小智", "前端小智", "老王", "小三"]
提示：
concat()创建一个新的数组，而不改变原来的数组
array.concat(array1 [，array2，...]) 接受多个要连接的数组。
4.2 展开操作符号
咱们将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]。
const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];
const names = [...heroes, ...villains];
names; // ["小智", "前端小智", "老王", "小三"]
提示
[...arr1, ...arr2, ...arrN]：可以使用展开运算符连接所需数量的数组。
5.数组截取
5.1 array.slice() 方法
array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。
const names = ["小智", "前端小智", "老王", "小三"]
const heroes = names.slice(0, 2)
const villains = names.splice(2)
heroes // ["小智", "前端小智"]
villains // ["老王", "小三"]
提示：
array.slice() 创建一个新数组，而不改变原始数组。
6. 数组拷贝
6.1 展开操作符
拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：
const colors = ['white', 'black', 'gray'];
const clone = [...colors];
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
提示：
[...array] 创建一个浅拷贝。
6.2 array.concat()方法
[].concat(array)是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray'];
const clone = [].concat(colors);
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
提示：
[].concat(array) 创建一个浅拷贝。
6.3 array.slice() 方法
array.slice())是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray'];
const clone = colors.slice();
clone; // => ['white', 'black', 'gray']
colors === clone; // => false
提示：
colors.slice() 创建一个浅拷贝。
7. 数组查找
7.1 array.includes() 方法
array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 是否包含itemToSearch。 可选参数fromIndex，默认为0，表示开始搜索的索引。如下所示：判断2和99是否存在于一组数字中：
const numbers = [1, 2, 3, 4, 5];
numbers.includes(2); // => true
numbers.includes(99); // => false
7.2 array.find() 方法
array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
如下所示，找到数组中的第一个偶数：
const numbers = [1, 2, 3, 4, 5];
function isEven(number) {
return number % 2 === 0;
}
const evenNumber = numbers.find(isEven);
evenNumber; // => 2
7.3 array.indexOf() 方法
array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。
如下所示，找到前端小智的索引：
const names = ["小智", "前端小智", "老王", "小三"]
const index = names.indexOf('前端小智')
index // 1
提示：
如果找不到该项，则array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使用predicate函数查找索引的替代方法。
7.3 array.every() 方法
如果每个项都通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示，确定数组是否只包含偶数：
const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];
function isEven(number) {
return number % 2 === 0;
}
evens.every(isEven); // => true
numbers.every(isEven); // => false
7.4 array.some() 方法
如果每个项只要一下通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示：确定数组是否至少包含一个偶数：
const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];
function isEven(number) {
return number % 2 === 0;
}
numbers.some(isEven); // => true
odds.some(isEven); // => false
8. 数组过滤
8.1 array.filter() 方法
array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示：将一个数组过滤为仅包含偶数：
const numbers = [1, 5, 7, 10];
function isEven(number) {
return number % 2 === 0;
}
const evens = numbers.filter(isEven);
evens; // => [10]
提示：
array.filter() 创建一个新数组，而不改变原始数组。
9. 数组插入
9.1 array.push() 方法
array.push(item1 [...，itemN]) 方法将一个或多个项追加到数组的末尾，并返回新的长度。
如下所示，在names 数组的末尾添加 '小智'
const names = ['小智']
names.push('前端小智')
names // ["小智", "前端小智"]
提示：
array.push() 会改变原数组
array.push(item1, item2, ..., itemN) 可以添加多个元素。
9.2 array.unshift() 方法
array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头，返回数组的新长度
const names = ['小智']
names.unshift('前端小智')
names // ["前端小智", "小智"]
提示：
array.unshift() 会改变原数组
array.unshift(item1, item2, ..., itemN) 可以添加多个元素。
9.3 展开操作符
可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。
在数组末尾追加一个项:
const names = ['小智', '大治']
const names2 = [...names, '王大冶']
names2 // ["小智", "大治", "王大冶"]
在数组的开头追加一个项:
const names = ['小智', '大治']
const names2 = [
'王大冶',
...names
]
names2 // ["王大冶", "小智", "大治"]
在任何索引处插入元素：
const names = ['小智', '大治']
const indexToInsert = 1
const names2 = [
...names.slice(0, indexToInsert),
'前端小智',
...names.slice(indexToInsert)
]
names2 // ["小智", "前端小智", "大治"]
10. 删除数组元素
10.1 array.pop() 方法
array.pop()方法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：
const colors = ['blue', 'green', 'black'];
const lastColor = colors.pop();
lastColor; // => 'black'
colors; // => ['blue', 'green']
提示：
array.pop() 会改变原数组。
10.2 array.shift() 方法
array.shift()方法从数组中删除第一个元素，然后返回该元素。
const colors = ['blue', 'green', 'black'];
const firstColor = colors.shift();
firstColor; // => 'blue'
colors; // => ['green', 'black']
提示：
array.shift() 会改变原数组。
10.3 array.splice() 方法
array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
例如，咱们从索引1处删除2个元素：
const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2)
names // => ["张三", "赵六"]
names.splice(1，2)删除元素'张三'和'赵六'。
names.splice() 可以插入新元素，而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素，然后插入一个新的元素 '小智'：
const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2, '小智')
names // ["张三", "小智", "赵六"]
提示：
array.splice() 会改变原数组。
11. 清空数组
11.1 array.length属性
array.length是保存数组长度的属性。 除此之外，array.length是可写的。
如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。
如下所示：使用array.length = 0删除数组中的所有项目：
const colors = ['blue', 'green', 'black'];
colors.length = 0;
colors; // []
11.2 array.splice() 方法
array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：
const colors = ['blue', 'green', 'black'];
colors.splice(0);
colors; // []
12. 填充数组
12.1 array.fill() 方法
array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。
例如，使用用零值填充数组：
const numbers = [1, 2, 3, 4];
numbers.fill(0);
numbers; // => [0, 0, 0, 0]
不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。
const length = 3;
const zeros = Array(length).fill(0);
zeros; // [0, 0, 0]
12.2 Array.from() 函数
Array.from() 可以初始化带有对象的特定长度的数组：
const length = 4;
const emptyObjects = Array.from(Array(length), function() {
return {};
});
emptyObjects; // [{}, {}, {}, {}]
13. 数组扁平化
13.1 array.flat()方法
array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：
const arrays = [0, [1, 3, 5], [2, 4, 6]];
const flatArray = arrays.flat();
flatArray; // [0, 1, 3, 5, 2, 4, 6]
arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平，使其仅包含数字。
提示：
array.flat() 创建一个新数组，而不会改变原始数组。
14. 数组的排序
14.1 array.sort() 方法
array.sort([compare])方法对数组的元素进行排序。
可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：
如果 a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。
如果a等于b，就返回0。
如果a大于b，就返回一个大于0的值。
如下所示，对数组 numbers 时行排序
const numbers = [4, 3, 1, 2];
numbers.sort();
numbers; // => [1, 2, 3, 4]
numbers.sort() 以升序对数字进行排序。
使用比较函数，让偶数排在奇数前面：
const numbers = [4, 3, 1, 2];
function compare(n1, n2) {
if (n1 % 2 === 0 && n2 % 2 !== 0) {
return -1;
}
if (n1 % 2 !== 0 && n2 % 2 === 0) {
return 1;
}
return 0;
}
numbers.sort(compare);
numbers; // => [4, 2, 3, 1]
提示：
array.sort() 会改变原数组。
14.2 reverse()
此方法用于颠倒数组中元素的顺序。第一个元素成为最后一个，最后一个元素将成为第一个。
···
const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
// -------> Output : ['a', 'b', 'c', 'd', 'e']
···
15.数组的转换
将数组转换为字符串
15.1 toString()
JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
//结果为 Banana,Orange,Apple,Mango
15.2 join()
join()行为类似 toString()，但是参数可以规定分隔符
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
//结果为 Banana * Orange * Apple * Mango
发表评论 (审核通过后显示评论)：