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() 查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。

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]
原文地址:https://www.cnblogs.com/qingheshiguang/p/14789037.html