开启辅助访问
帐号登录 |立即注册

JS最新数组方法总结,包含ES10方法

 
map、filter、reduce
JS 数组方法map、filter和reduce容易混淆,这些都是转换数组或返回聚合值的有用方法。

map:返回一个数组,其中每个元素都使用指定函数进行过转换
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

filter:返回一个数组,只有当指定函数返回 true 时,相应的元素才会被包含在这个数组中
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

forEach() 方法
forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined,没有返回值。
var array = ['a', 'b', 'c'];
array.forEach(function(element) {
  console.log(element);
});
输出为:
a;
b;
c;
var arr = [1,2,3,4];  
arr.forEach(alert);
//    等价于:   
var arr = [1, 2, 3, 4];
for (var k = 0,  k < arr.length; k++) {   
  alert(array[k]);  
    }

reduce:按函数中指定的值累加
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21

reduceRight
和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
var arr = [5,8,10,16];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    console.log(arr.reduceRight(getSum)); //39
}
myFunction()  

find, findIndex, indexOf
find:返回与指定条件匹配的第一个实例,如果查到不会继续查找其他匹配的实例
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6
注意,虽然5之后的所有元素都满足条件,但是 find 只返回第一个匹配的元素。当咱们发现匹配项并想中断for循环,在这种情况下,find 就可以派上用场了。

findIndex:这与find几乎完全相同,但不是返回第一个匹配元素,而是返回第一个匹配元素的索引
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

indexOf:与findIndex几乎完全相同,但它不是将函数作为参数,而是采用一个简单的值。 当你需要更简单的逻辑并且不需要使用函数来检查是否存在匹配时,可以使用此方法
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

push, pop, shift, unshift
push:这是一个相对简单的方法,它将一个项添加到数组的末尾。它就地修改数组,函数本身会返回添加到数组中的项
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(pushed); // 5

pop:这将从数组中删除最后一项。同样,它在适当的位置修改数组,函数本身返回从数组中删除的项
let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr); // [1, 2, 3]
console.log(popped);// 4

shift:从数组中删除第一项。同样,它在适当的位置修改数组。函数本身返回从数组中删除的项
let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(shifted); // 1

unshift:将一个或多个元素添加到数组的开头。同样,它在适当的位置修改数组。与许多其他方法不同,函数本身返回数组的新长度
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr); // [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted); // 7

splice, slice
splice:通过删除或替换现有元素和/或添加新元素来更改数组的内容,此方法会修改了数组本身
下面的代码示例的意思是:在数组的位置 1 上删除 0 个元素,并插入 b。
let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')
console.log(arr);//a,b,c,d,e

slice:从指定的起始位置和指定的结束位置之前返回数组的浅拷贝。 如果未指定结束位置,则返回数组的其余部分。 重要的是,此方法不会修改数组,而是返回所需的子集
let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

sort:根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或 0,则顺序保持不变。如果返回正数,则交换元素顺序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});

reverse()翻转数组
var arr = [1,3,5,7,9];
arr.reverse();   // [9,7,5,3,1]
反转数组项的顺序,会改变原数组。

Array.from() 将具有length属性或者可迭代的对象转化为数组
Array.from('abcdef') // 返回值['a', 'b', 'c', 'd', 'e', 'f']
Array.from(new Map([['b', 1 ], ['a', 2 ]]))
Array.from(new Set([ 1 , 2 , 3 ]))

every(),some()
every()  判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(item) {
     return item < 10;
});
some()判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
var arr = [1, 2, 3, 4, 5];
var flag= arr.some(function(x) {
     return x > 3;
});
console.log(flag); //true

join() 和 toString()转换为字符串
var arr = [1,2,3];
console.log(arr.join('-'));  // 1-2-3console.log(arr.toString());  // 1,2,3
① toString() 转换为字符串,没有参数,以逗号分割。② join(‘分隔符’) 一个参数,可以规定分隔符,默认是逗号。
concat()连接数组
var arr = [1,3,5];
var arr2 = [2,4,6]var arr3 = arr.concat(arr2 ); //[1,2,3,4,5,6]
concat() :将参数添加到原数组中。
① 先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
② 在没有参数的情况下,它只是复制当前数组并返回副本。

toLocaleString() 方法
toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。
根据本地时间把 Date 对象转换为字符串:
var d=new Date();
var n=d.toLocaleString();
//2020/8/14 下午4:22:51
将数字变成千分位格式
let num=12345678;
console.log(num.toLocaleString()); // 12,345,678

Array.isArray() 和 instanceof 判断是否是数组
Array.isArray()
var arr = [1,3,5];
Array.isArray(arr)   //true
Array.isArray('arr')   //false
用于确定传递的值是否是一个 Array,如果值是 Array,则为true; 否则为false。

instanceof (运算符,并不是一个方法)
用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上语法.
var arr = [1,3,5];
var flag = arr instanceof Array    //true
var flag2 = 'arr' instanceof Array    //flase
运算符,可以用来检测是否是数组


copyWithin
copyWithin:复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度
// 语法:arr.copyWithin(target,start,end)
//参数: target 必写 索引从该位置开始替换数组项
//start 可写可不写 索引从该位置开始读取数组项,默认为0.如果为负值,则从右往左读。
//end 可写可不写 索引到该位置停止读取的数组项,默认是Array.length,如果是负值,表示倒数
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.copyWithin(0,4,6));     //[5, 6, 3, 4, 5, 6, 7, 8, 9]
console.log(arr)        //[5, 6, 3, 4, 5, 6, 7, 8, 9]
const array1 = ['a', 'b', 'c', 'd', 'e']
console.log(array1.copyWithin(0, 3, 4)) // ["d", "b", "c", "d", "e"]
console.log(array1.copyWithin(1, 3)) // ["d", "d", "e", "d", "e"]

fill
fill:用给定的值填充原来的值
//语法: arr.fill(value,start,end)  
//value需要填充的值
//start起始索引,默认为0
//end终止索引,默认为this.length
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(arr.fill(1));   //[1, 1, 1, 1, 1, 1, 1, 1, 1]
console.log(arr.fill('a',5,8));     //[1, 1, 1, 1, 1, "a", "a", "a", 1]

Array
Array:从一个数组或可迭代对象创建一个新的数组
var str = 'Hello world'
console.log(Array.from(str));   //["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
console.log(str)        //Hello world

Array.of
Array.of:将一组值转化成数组,和声明数组类似,可替代Array() 或 new Array()
console.log(Array.of(1,2,3,4,5,6,'A','B'));     //[1, 2, 3, 4, 5, 6, "A", "B"]   
console.log(Array.of(1))        //[1]

includes
includes:判断一个数组中是否包含一个指定的值
//当该数组中包含一个指定的值时,则为true,不包含一个指定的值时,则为false
//includes()   最终结果一定为boolean值
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.includes(5));       //true
console.log(arr.includes(100));     //false
console.log(arr)        //[1,2,3,4,5,6,7,8,9]

entries
entries:返回以索引值和属性值为遍历器的对象,这个对象包含数组中每个索引的键与值
var arr = ['a','b','c','d']
var arr2 = arr.entries();
console.log(arr.entries())      // Array Iterator {}console.log(arr.entries().next().value)     //[0, "a"]
for(var i of arr2){ console.log(i)      // [0, "a"] [1, "b"] [2, "c"] [3, "d"]
        }

keys
keys:返回以索引值为遍历器的对象
var arr = [1,5,3,8,2,18,2154];
var newArr = arr.keys();
console.log(newArr);    //结果需要通过for of遍历出来
for(var key of newArr){
console.log(key);       //0    1    2   3   4   5   6
        }

values
values:返回以属性值为遍历器的对象,该对象包含数组每个索引的值
var arr = ['a','p','p','l','e'];
var newArr = arr.values();
console.log(newArr)     //使用for..of循环进行迭代
for(var arr1 of newArr){
console.log(arr1);      //"a" "p" "p" "l" "e"        }

flat
flat:简单来说,就是将多维数组降维,flat()会默认拉平一层
//如果想要拉平多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认情况下是1
//如果想要不管多少层都要变成一维数组的话,可以使用flat(Infinity)
var arr1 = [1,2,3,[7,8,9,[10,11]]]
console.log(arr1.flat());   //[1, 2, 3, 7, 8, 9, [10,11]]
console.log(arr1.flat(2))   //[1, 2, 3, 7, 8, 9, 10, 11]
var arr2 = [1,2,3,[25,26,[77,23,[55,6681,[11223,1234,[7862]]]]]]
console.log(arr2.flat(Infinity))        //[1, 2, 3, 25, 26, 77, 23, 55, 6681, 11223, 1234, 7862]

flatMap
flatMap:原数组的每个成员执行一个函数,相当于执行map(),然后对返回值组成的数组执行flat()方法,返回一个新数组,不改变原数组
var arr = [1,2,3,4];
console.log(arr.flatMap(x => [x,[2*x]]));   //[1, [2], 2, [4], 3, [6], 4, [8]]



回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。