js数组常用方法和es6数组新增方法一锅炖

卡布奇诺__
1,336 阅读10分钟
❝

学习需要日积月累，成就事业也需要积累，不懈地努力奋斗。积累是一种毅力，是由微小到伟大的必经之路，是成功的前提，是由量变到质变的过程。

❞

最近在看阮一峰的ES6的数组扩展，顺便回顾了一下ES5数组的方法然后总结一下，希望能帮到大家👍👍

ES6数组的扩展

扩展运算符 （...）

将一个数组转化为用逗号隔开的序列

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

注意： 1. 如果扩展运算符后面传入一个空数组，则不产生任何效果

2. 只有函数调用的时候扩展运算符才放在圆括号中，否则放在[]中

「赋值数组」

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

「合并数组」

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
const newArr = [...arr1, ...arr2,...arr3];
console.log(newArr) //['a', 'b','c','d', 'e']

「与解构赋值结合」

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [a, ...b] = ['a', 'b','c','d', 'e'];
console.log(a) //a
console.log(b) //["b", "c", "d", "e"]

「扩展运算符还可以将字符串转为真正的数组。」

有一个重要的好处，那就是能够正确识别四个字节的 Unicode 字符。

console.log([...'haha']) //["h", "a", "h", "a"]

Array.from()

用于将类似数组的对象和可遍历的对象转化为数组，

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而扩展运算符就无法转换。 Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

Array.of方法用于将一组值，转换为数组。 Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

数组实例的 find() 和 findIndex()

find()用于找出第一个符合条件的数组成员，然后返回该成员，如果没有符合条件的元素，则返回undefined;

[1, 4, -5, 10].find((n) => n < 0)
// -5

findIndex()用于找出第一个符合条件的数组成员，然后返回该成员的下标，如果没有符合条件的成员，则返回-1；

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

fill()

方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置 ['a', 'b', 'c'].fill(7, 1, 2) 如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

数组实例的 entries()，keys() 和 values()

唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

const objArr = [
    {
        name: '张三',
        age: 23
    },
    {
        name: '李四',
        age: 25
    },
    {
        name: '王五',
        age: 26
    }
]
for(item of objArr.keys()){
    console.log(item) 
}
for(item of objArr.values()){
    console.log(item) 
}
for([index, item] of objArr.entries()){
    console.log(index, item)
}

includes()

「Array.prototype.includes（target, start）」

target: 必须参数，给定的值

start: 可选参数，搜索的起始位置，默认是从0开始的，如果是0表示倒数的位置，如果超过数组的长度则从0开始搜索 方法返回一个布尔值，表示某个数组是否包含给定的值

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

[NaN].indexOf(NaN)

数组实例的 flat()，flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位，flat()方法会跳过空位

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()只能展开一层数组。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

ES6数组的方法

forEach()

「遍历数组，没有返回值，不允许在循环体内写return,不会改变原数组」

 let arr = [11,22,33,44,66]
 arr.forEach((item,index, arr) =>{
    console.log(item, index, arr)
})

map()

「遍历数组 ，返回一个新数组，不会改变原来的数组」

let arr = [11,22,33,44,66]
let newArr = arr.map((item,index,arr) => {
    return item*10
})
console.log(newArr) //[110, 220, 330, 440, 660]
let newArr2 = arr.map(String);  //将数组的元素变为String类型
console.log(newArr2) //["11", "22", "33", "44", "66"]
let newArr3 = newArr2.map(Number) // 将数组的元素变为Number类型
console.log(newArr3) //[11, 22, 33, 44, 66]

filter()

「过滤掉数组中不满足条件的元素，把满足条件的元素放到一个新的数组中，不改变原来的数组」

 let arr4 = arr.filter(item => item%2 === 0);
 console.log(arr4)  //[22, 44, 66]

reduce()

「方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。」

  • 求数组项之和
let array = [1,2,3,4,5];
let temp = array.reduce((prev,cur) => {
    console.log('prev',cur)
    console.log('cur', cur)
    return prev+cur;
})
console.log(temp)

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

  • 数组元素的最大项
let array = [1,2,3,4,5];
var max = array.reduce((prev,cur)=>{
return Math.max(prev,cur)
})
console.log(max)  //5

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

  • 数组去重
var arr = [11,22,33,22,11]
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
console.log(newArr) //[11,22,33]
    • ① 初始化一个空数组
    • ② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
    • ③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
    • ④ ……
    • ⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
    • ⑥ 将这个初始化数组返回

every()

「遍历数组，每一项返沪都是true,则返回true,只要有一个是false,则返回false」

let arr = [11,22,33,44,66]
let arr2 = arr.every((item,index,arr) => {
    return item % 2 === 0
})
console.log(arr2) //false

some()

「遍历数组的元素，只要有一个返回true,就停止循环,返回一个布尔值 不改变原来的数组」

let arr = [11,22,33,44,66]
let arr3 = arr.some((item,index,arr) => {
    console.log(index) //0
    return item > 1
})
console.log(arr3) // true

find()

「找到第一个符合条件的数组元素,就停止遍历，不改变原来的数组」

let arr = [11,22,33,44,66]
let arr4 = arr.find((value,index, arr) => {
    return value % 3 === 0
})
console.log(arr4) //33

ES5数组的方法

splice()

「方法向/从数组中添加/删除项目，然后返回被删除的项目。——改变原来的数组」

arrayObject.splice(index,howmany,item1,.....,itemX)

  • index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  • howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
  • item1, ..., itemX 可选。向数组添加的新项目。
let arr = [1,2,3,4,5]
let arr2 = arr.splice(2,2) //下标从2开始删除2个元素
console.log(arr) //[1,2,5]
console.log(arr2)//[3,4]

concat()

「方法用于连接两个或多个数组。」

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX是必须参数，该参数可以是具体的值，也可以是数组对象。可以是任意多个。

let arr1 = [1,2,3,4,5];
let arr2 = ['aa','bb','cc']
let arr3 = arr1.concat(arr2)
console.log(arr3) //[1, 2, 3, 4, 5, "aa", "bb", "cc"]
console.log(arr1.concat('qq','ww')) //[1, 2, 3, 4, 5, "qq", "ww"]

join() 与 toString()

  • arrayObject.join(separator)*

「方法用于把数组转化为一个字符串，如果不传参数，字符传之间默认用逗号隔开，如果传了参数，以指定的分隔符方式隔开」

  • arrayObject.toString()

「该方法无需传参，可把数组转换为字符串，以逗号的方式隔开。」

let arr1 = [1,2,3,4,5];
var str1 = arr1.join()
var str2 = arr1.join('*')
console.log(str1) //1,2,3,4,5
console.log(str2) //1*2*3*4*5

let arr3 = ['aa','bb','cc']
var arr4= arr3.toString() //aa,bb,cc

pop()与shift()——改变原数组

「pop()方法用于删除并返回数组的最后一个元素。」

「shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。」

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

let arr2 = ['aa','bb','cc']
var arr3= arr2.pop()
console.log(arr3) // cc
console.log(arr2) //(2) ["aa", "bb"]

slice()

「方法可从已有的数组中返回选定的元素。」

arrayObject.slice(start,end)

总结

方法 描述
concat() 连接2个或者更多的数组，并返回结果
join() 把数组的所有元素放入一个字符串中，元素通过指定分分隔符进行分割
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
revere() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice 从某个已有的数组返回选定的元素
sort 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值

如何生成类似[1 - 100]这样的数组

fill()方法

Array(100)会生成有100空位的数组，这个数组不能使用map(),forEach(),filter()等方法遍历，因为空位会被跳过，（for of 不会跳过空位），然后使用fill() 方法给数组填充数字.

Array(3) // [empty × 100]
const arr1 = Array(100).fill(0).map((item, index) =>{ return index})

Array.from

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

const arr4 = Array.from(Array(100), (value, key) => key + 1);

扩展运算符（...）

keys()是对键名的遍历

const arr2 = [...Array(100).keys() ]

for of

这种不推介使用

let arr = []
for(let x of Array(100).keys()){
    console.log(x)
    arr.push(x+1)
}
console.log(arr)

如何获取2个数组的并集、交集和差集

并集

let arr1  = new Set([1,2,3,4,3,2,1]); //{1,2,3,4}

let arr2 = new Set([3,3,2,66]); //{3,2,66}


let union  = new Set([...arr1, ...arr2]); //Set{1, 2, 3, 4, 66}
console.log([...union]) //[1, 2, 3, 4, 66]

交集

let intersect = new Set([...arr1].filter(x => arr2.has(x)));
console.log(intersect) // {2,3}

差集

（arr1 相对于 arr2 的）差集

let difference = new Set([...arr1].filter(x => !arr2.has(x)));
console.log(difference) // {1,4}
avatar
文章
阅读
粉丝