ES6数组,及扩展方法
数组
1、创建数组
//方式一
var array=new Array();
//方式二
var array=[];
转换成数组
Array.of() 将参数中所有值作为元素形成数组。
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
// 参数为空时返回空数组
console.log(Array.of()); // []
Array.from() 将类数组对象或可迭代对象转化为数组。
// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]
//可选,map 函数,用于对每个元素进行处理,放入数组的是处理后的元素。
console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]
//可选,用于指定 map 函数执行时的 this 对象。
let map = {
do: function(n) {
return n * 2;
}
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
return this.do(n);
}, map)); // [2, 4, 6]
数组的扩展的方法
查找
find() 查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3
// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined
findIndex() 查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。没有符合条件的返回-1。
let arr = Array.of(1, 2, 1, 3);
// 参数1:回调函数
// 参数2(可选):指定回调函数中的 this 值
console.log(arr.findIndex(item => item == 2)); // 1
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0
包含
includes()表示某个数组是否包含给定的值,返回布尔值。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
填充
fill() 将一定范围索引的数组元素内容填充为单个指定的值。
let arr = Array.of(1, 2, 3, 4);
// 参数1:用来填充的值
// 参数2:被填充的起始索引
// 参数3(可选):被填充的结束索引,默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
copyWithin() 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
// 参数1:被修改的起始索引
// 参数2:被用来覆盖的数据的起始索引
// 参数3(可选):被用来覆盖的数据的结束索引,默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
// 参数1为负数表示倒数
console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]
console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]
遍历
forEach
var arr = ['我','和','我的','祖国'];
arr.forEach(function(item,index,self){
console.log(item,index,self);
})
//箭头函数写法
arr.forEach((item,index,self) => console.log(item,index,self))
输出如下:
我 0 ["我", "和", "我的", "祖国"]
和 1 ["我", "和", "我的", "祖国"]
我的 2 ["我", "和", "我的", "祖国"]
祖国 3 ["我", "和", "我的", "祖国"]
映射,即原数组映射成一个新的数组;map()
var arr = [1,2,3];
var arr2 = arr.map(function(item){
return item*2;
})
console.log(arr2)
//[2,4,6]
过滤 filter
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.filter(function(item){
return item>3;
})
console.log(arr2)
//箭头函数
var arr2 = arr1.filter(item=>{return item>3})
console.log(arr2)
///[4,5,6]
排序 sort()
let arr = [2,1,3,5,4];
arr= arr.sort((n1,n2)=>{
return n1-n2;
// n2 - n1 从大到小
// n1 - n2 从小到大
});
console.log(arr);
//[1,2,3,4,5]
每一个 every
数组里面所有的元素都有符合条件,才返回true
var arr = [1,2,3,9];
var ret = arr.every(function(item){
return item>2;
})
console.log(ret) //false
//箭头函数
var ret = arr.every(item=>{return item>2})
有 一个 some
var arr = [1,2,3,9];
var ret = arr.some(item=>{return item>2})
console.log(ret) //true
累加
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce() 的数组。
1、基本使用累加
var arr = [1,2,3];
var ret = arr.reduce(function(a,b){
return a+b;
})
console.log(ret)
//6
2、二维数组转为一维数组
var array = [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => {
return acc.concat(cur)
}, []);
console.log(array) // [ 0, 1, 3, 4, 5, 6 ]
3、计算数组中每个元素出现的次数
方法一
let names = ['tom', 'jim', 'jack', 'tom', 'jack'];
const countNames = names.reduce((allNames, name) => {
if (name in allNames) {
allNames[name] ++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countNames) // { tom: 2, jim: 1, jack: 2 }
方法二
const arraySum = (arr, val) => arr.reduce((acc, cur) => {
return cur == val ? acc + 1 : acc + 0
}, 0);
let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ]
console.log(arraySum(arr, 0)) // 数组arr中 0 元素出现的次数为3
4、数组去重
方法一
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((init, current) => {
if (init.length === 0 || init[init.length - 1] !== current) {
init.push(current);
}
return init;
}, []);
console.log(result); //[1,2,3,4,5]
方法二
当然,对于数组去重,也可以直接使用es6的…[拓展运算符] + Set 实现:
// console.log(...new Set([1,2,3,4,5,2,4,1]))
const dedupe = (array) => {
return Array.from(new Set(array));
}
console.log(dedupe([1, 1, 2, 3])) //[1,2,3]