es6常⽤数组操作及技巧汇总定义数组
const array = [1, 2, 3];
// 或者
const array = new Array();
array[0] = '1';
检测数组
Array.isArray([]); // true
Array.isArray(undefined); // false;
或者
array instanceof Array; // true 检测对象的原型链是否指向构造函数的prototype对象
或者
终极⼤招:
if (!Array.isArray) {
Array.isArray = function(arg) {
return String.call(arg) === '[object Array]';
};
}
//注意:typeof []; // "object" 不可以⽤此⽅法检查
常⽤⽅法
1. at(array1, array2,...arrayN);
合并多个数组,返回合并后的新数组,原数组没有变化。
const array = [1,2].concat(['a', 'b'], ['name']);
// [1, 2, "a", "b", "name"]
2. array.every(callback[, thisArg]);
检测数组中的每⼀个元素是否都通过了callback测试,全部通过返回true,否则返回false。
// callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组
function callback(element, index, array) {
// callback函数必须返回true或者false告知every是否通过测试
return true || false;
}
3. array.filter(callback[, thisArg]);
返回⼀个新数组,包含通过callback函数测试的所有元素。
/
/ callback定义如下,三个参数: element:当前元素值;index:当前元素下标; array:当前数组
function callback(element, index, array) {
// callback函数必须返回true或者false,返回true保留该元素,false则不保留。
return true || false;
es6字符串转数组}
const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];
4. array.find(callback[, thisArg]);
返回通过callback函数测试的第⼀个元素,否则返回undefined,callback函数定义同上。
const finded = [1, 2, 3].find(element => element > 1);
// finded: 2
如果你需要到⼀个元素的位置或者⼀个元素是否存在于数组中,使⽤Array.prototype.indexOf() 或 Array.prototype.includes()。
5. array.findIndex(callback[, thisArg]);
返回通过callback函数测试的第⼀个元素的索引,否则返回-1,callback函数定义同上。
const findIndex = [1, 2, 3].findIndex(element => element > 1);
// findIndex: 1
6. array.includes(searchElement, fromIndex);
includes() ⽅法⽤来判断⼀个数组是否包含⼀个指定的值,返回 true或 false。searchElement:要查的元素;fromIndex:开始查的索引位置。
[1, 2, 3].includes(2, 2);
// false
7. array.indexOf(searchElement[, fromIndex = 0]);
返回在数组中可以到⼀个给定元素的第⼀个索引,如果不存在,则返回-1。searchElement:要查的元素;fromIndex:开始查的索引位置。
[2, 9, 7, 8, 9].indexOf(9);
// 1
8. array.join(separator=',');
将数组中的元素通过separator连接成字符串,并返回该字符串,separator默认为","。
[1, 2, 3].join(';');
// "1;2;3"
9. array.map(callback[, thisArg]);
返回⼀个新数组,新数组中的每个元素都是调⽤callback函数后返回的结果。注意:如果没有return值,则新数组会插⼊⼀个undefined值。
array.map由于不具有过滤的功能,因此array调⽤map函数时,如果array中的数据并不是每⼀个都会ret
urn,则必须先filter,然后再map,即map调⽤时必须是对数组中的每⼀个元素都有效。const maped = [{name: 'aa', age: 18}, {name: 'bb', age: 20}].map(item => item.name + 'c');
// maped: ['aac', 'bbc'];
10. array.pop() 与 array.shift();
pop为从数组中删除最后⼀个元素,并返回最后⼀个元素的值,原数组的最后⼀个元素被删除。数组为空时返回undefined。
[1, 2, 3].pop();
// 3
shift删除数组的第⼀个元素,并返回第⼀个元素,原数组的第⼀个元素被删除。数组为空返回undefined。
const shifted = ['one', 'two', 'three'].shift();
// shifted: 'one'
11. array.push(element1, element2, ....elementN) 与 array.unshift(element1, element2, ...elementN);
push是将⼀个或多个元素添加到数组的末尾,并返回新数组的长度; unshift将⼀个或多个元素添加到数组的开头,并返回新数组的长度。唯⼀的区别就是插⼊的位置不同。
const arr = [1, 2, 3];
const length = arr.push(4, 5);
// arr: [1, 2, 3, 4, 5]; length: 5
push和unshift⽅法具有通⽤性,通过call()或者apply()⽅法调⽤可以完成合并两个数组的操作。
const vegetables = ['parsnip', 'potato'];
const moreVegs = ['celery', 'beetroot'];
// 将第⼆个数组融合进第⼀个数组
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);
或者
[].push.apply(vegetables, moreVegs);
// vegetables: ['parsnip', 'potato', 'celery', 'beetroot']
12. duce(callback[, initialValue]);
对数组中的每个元素(从左到右)执⾏callback函数累加,将其减少为单个值。
const total = [0, 1, 2, 3].reduce((sum, value) => {
return sum + value;
}, 0);
// total is 6
const flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
at(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
// initialValue累加器初始值, callback函数定义:
function callback(accumulator, currentValue, currentIndex, array) {
}
accumulator代表累加器的值,初始化时,如果initialValue有值,则accumulator初始化的值为initialValue,整个循环从第⼀个元素开始;initialValue⽆值,则accumulator初始化的值为数组第⼀个元素的值,currentValue为数组第⼆个元素的值,整个循环从第⼆个元素开始。initialValue的数据类型可以是任意类型,不需要跟原数组内的元素值类型⼀致。const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].reduce((arr, element) => {
if (element.age >= 2) {
arr.push(element.name);
}
return arr; // 必须有return,因为return的返回值会被赋给新的累加器,否则累加器的值会为undefined。
}, []);
// newArray is ["bb", "cc"];
上⾯代码的同等写法:
const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].filter(element => element.age >= 2).map(item => item.name);
// newArray is ["bb", "cc"];
对于reduce的特殊⽤法,其实类似于省略了⼀个变量初始化步骤,然后通过每次的callback的返回修改该变量,最后返回最终变量值的过程,类似于⼀个变量声明 + ⼀个forEach执⾏过程。const newArray = [];
[{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].forEach(item => {
if (item.age >=2) {
newArray.push(item.name);
}
});
13. verse();
将数组中元素的位置颠倒。
['one', 'two', 'three'].reverse();
// ['three', 'two', 'one'],原数组被翻转
14. array.slice(begin, end)
返回⼀个新数组,包含原数组从begin 到 end(不包含end)索引位置的所有元素。
const newArray = ['zero', 'one', 'two', 'three'].slice(1, 3);
// newArray: ['one', 'two'];
15. array.some(callback[, thisArg]);
判断数组中是否包含可以通过callback测试的元素,与every不同的是,这⾥只要某⼀个元素通过测试,即返回true。callback定义同上。
[2, 5, 8, 1, 4].some(item => item > 6);
// true
16. array.sort([compareFunction]);
对数组中的元素进⾏排序,compareFunction不存在时,元素按照转换为的字符串的诸个字符的Unicode位点进⾏排序,慎⽤!请使⽤时⼀定要加compareFunction函数,⽽且该排序是不稳定的。
[1, 8, 5].sort((a, b) => {
return a-b; // 从⼩到⼤排序
});
// [1, 5, 8]
17. array.splice(start[, deleteCount, item1, item2, ...]);
通过删除现有元素和/或添加新元素来更改⼀个数组的内容。start:指定修改的开始位置;deleteCount:从 start位置开始要删除的元素个数;:要添加进数组的元素,从start 位置开始。
返回值是由被删除的元素组成的⼀个数组。如果只删除了⼀个元素,则返回只包含⼀个元素的数组。如果没有删除元素,则返回空数组。
如果 deleteCount ⼤于start 之后的元素的总数,则从 start 后⾯的元素都将被删除(含第 start 位)。
const myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
const deleted = myFish.splice(2, 0, 'drum'); // 在索引为2的位置插⼊'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"],deleted为[]
⼩结
push、 shift、 pop、 unshift、 reverse、 sort、 splice⽅法会对原来的数组进⾏修改,其他的数组操作⽅法只有返回值不同,对原数组都没有影响,即原数组不变。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论