1.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
补充:在ES6里面也可以使用拓展运算符 ‘...’来合并数组。
eg: // 1.扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3,相当于下面的代码
console.log(1, 2, 3);
//2.扩展运算符可以应用于合并数组
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);
//方法三
arr1.concat(arr2)
// 3.将伪数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div');//oDiv为伪数组
oDivs = [...oDivs];
2.Array.from() 方法从一个将伪数组或可遍历对象转换为真正的数组,浅拷贝的数组实例。
//定义一个集合
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
补充:此方法只是浅拷贝了原数组,当arrayLike 里面的属性值发生了改变时,arr2数组的内容也会发生变化。
例如:将 arrayLike[2] = 'qwe', arr2 数组的内容也会发生变化
3.find() 用于找出第一个符合条件的数组成员,如果没有找到返回undefined
例如:let ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);
console.log(target)
//找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个
输出结果为: {id: 2, name: "李四"}
4.findIndex()用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1。
例如:
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
5.includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
6.join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符
例如:
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// 输出: "Fire,Air,Water"
console.log(elements.join(''));
// 输出: "FireAirWater"
console.log(elements.join('-'));
// 输出: "Fire-Air-Water"
7.pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度,修改了原数组。
例如:
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// 输出结果: "tomato"
console.log(plants);
// 输出结果: Array ["broccoli", "cauliflower", "cabbage", "kale"]
8.push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度,修改了原数组。
例如:
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// 输出: 4
console.log(animals);
// 输出: Array ["pigs", "goats", "sheep", "cows"]
8.unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
例如:
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// expected output: 5
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
9.shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// expected output: Array [2, 3]
console.log(firstElement);
// expected output: 1
10.reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]
const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]
11.splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
说明:splice(参数1,参数2,参数3...) 最多有三个参数,参数1代表起始位置,参数2代表要删除的个数,参数3代表要添加的数据,可以多个,用逗号隔开。
eg:
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 在months数组索引为1的位置,向后删除0个元素,并添加上 'Feb'
console.log(months);
// 输出: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// 在months数组索引为4的位置,向后删除1个元素,并添加上 'May'
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
12.slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
eg:
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// 输出结果: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// 输出结果: Array ["camel", "duck"]
13.sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// 输出结果: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// 输出结果: Array [1, 100000, 21, 30, 4]
要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列
eg:
varnumbers=[4,2,5,1,3];
numbers.sort(function(a,b){
return a-b;//升序
});
console.log(numbers); // number[1,2,3,4,5]
14.reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
reducer函数接收4个参数:
1.Accumulator (acc) (累计器)
2.Current Value (cur) (当前值)
3.Current Index (idx) (当前索引)
4.Source Array (src) (源数组)
您的reducer函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果。
假如运行下段reduce()代码:
[0,1,2,3,4].reduce(function(accumulator,currentValue,currentIndex,array)
{
return accumulator+currentValue;
});
callback 被调用四次,每次调用的参数和返回值如下表:
15.forEach()方法从头至尾遍历数组,为每个元素调用指定的函数
eg:
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"
16.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。(筛选,过滤数组)
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
//筛选数组里面元素长度大于6的元素
console.log(result);
// 输出: Array ["exuberant", "destruction", "present"]
17.map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。(映射)
eg:
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
18.数组的深拷贝可以使用lodash工具参考: https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue