IT虾米网

ES5和ES6数组常见方法总结

luoye 2022年05月03日 编程语言 244 0

ES5常见方法

1,栈方法(LIFO)后进先出:

push() 往数组尾部添加元素

pop()从数组尾部移除元素,并返回该元素,同时数组长度减1

var arr = [1,2,3] 
arr.push(4)//arr = [1,2,3,4] 
var b = arr.pop()//4

2,队列方法(FIFO)先进先出

shift()移除数组首部元素,并返回该元素,同时数组长度减1

unshift()向数组首部添加元素

var arr = [1,2,3] 
var b = arr.shift()//1 
arr.unshift(1)//arr = [1,2,3,]

3,数组重新排序的方法

reverse()反转数组顺序

sort()按照升序排列数组

复制代码
//reverse()反转数组顺序 
var arr = [1,2,3] 
var b = arr.reverse()//[3,2,1] 

//sort() 将数组每一项执行toString()方法,然后比较得到的字符串,从小到大进行排序
var arr = [1,3,5,25,15]
var b = arr.sort() // [1, 15, 25, 3, 5]
//
这种结果显然不是我们想要的,sort()可以接受一个比较函数作为参数,以便我们指定哪个值在哪个值前面
function compare(value1,value2){
return value1 - value2
}
var arr = [1,3,5,25,15]
var b = arr.sort(compare) // [1, 3,5,15,25]

复制代码

4,数组的操作方法

concat()基于当前数组所有项创建一个副本,将接受的参数,添加这个副本数组的尾部,并返回一个新数组,不影响原数组

var arr = [1,2,3] 
var b = arr.concat([4,5],'6') // [1, 2, 3, 4, 5, "6"]

slice()基于当前数组的部分项创建一个副本,并返回新数组,不影响原数组

var arr = [1,2,3,4,5] 
var b = arr.slice() //[1, 2, 3, 4, 5] 
var c = arr.slice(1,) //[2, 3, 4, 5] 
var d = arr.slice(1,4) //[2, 3, 4]

splice()删除(可不删除)数组中连续的项并插入(可以不插入)其他项,返回删除项,改变原有的数组

复制代码
//第一个参数---要删除第一项的位置 
//第二个参数---要删除的项数 
//第三个及其以后的参数---用来插入的项 
var arr = [1,2,3,4,5] 
var b = arr.splice(0,1) // arr = [2,3,4,5] b = [1] 
var c = arr.splice(1,2,7,8) // arr = [2,7,8,5] c = [3,4] 
var d = arr.splice(1,0,9,0) // arr = [2,7,9,0,8,5] d = []
复制代码

5,位置方法

indexOf()从数组头部开始查找某项,找到后返回第一次找到该项的索引值,若找不到返回-1,该方法接受两个参数。开始查找的起点位置的索引值,要查找的项。

lastIndexOf()从数组尾部开始查找某项,找到后返回第一次找到该项的索引值,若找不到返回-1,该方法接受两个参数。开始查找的起点位置的索引值,要查找的项。

6,迭代方法

以下方法都接受三个参数:数组项,该项的索引值,数组本身

  • forEach()---对数组中的每一项运行给定的函数,此方法无返回值;
  • map()---对数组中的每一项执行给定的函数,返回函数执行结果组成的新数组,不影响原数组;
  • filter()---对数组中的每一项执行给定函数,返回函数执行结果为true构成的新数组,不影响原数组;
  • every()---对数组每一项执行给定函数,如果函数执行结果都为true,则返回true,否则返回false;
  • some()---对数组每一项执行给定函数,如果有一项执行函数结果为true,则返回true。
复制代码
//forEach 
var arr = [1,2,3,4] 
arr.forEach((item,index,array)=>{ 
  //某些操作 
}) 

//map
arr = [1,2,3,4]
var b = arr.map((item,index,array)=>{
return item*2
})
//b = [2, 4, 6, 8]

//filter
arr = [1,2,3,4]
var d = arr.filter((item,index,array)=>{
return item > 3
})
//d = [4]

//every
arr = [1,2,3,4]
var e = arr.every((item,index,array)=>{
return item > 3
})
//e = false

//some
arr = [1,2,3,4]
var f = arr.some((item,index,array)=>{
return item > 3
})
//some = true

复制代码

6,归并方法

reduce()从数组第一项开始向后逐个遍历数组,返回给定函数执行结果

reduceRight()从数组第一项开始向后逐个遍历数组,返回给定函数执行结果

该方法接受两个参数,1,每一项调用的函数;2,可选的作为归并基础的初始值;传给此方法的函数接受4个参数,前一个值,当前值,索引项和数组对象,这个函数返回的任何值都会作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项,因此第一个入参是数组的第一项,第二个入参是数组的第二项。

复制代码
var arr = [1,2,3,4,5] 
var b = arr.reduce((prev,cur,index,array)=>{ 
  return prev + cur 
}) 
// b = 15 

var arr = [1,2,3,4,5]
var b = arr.reduce((prev,cur,index,array)=>{
return prev + cur
},
4)
//b = 19

复制代码

ES6常见的方法

1,form():将类数组的对象(array-like object)和可遍历(iterable)的对象转换为真正的数组

复制代码
let arrayLike = { 
    '0': 'a', 
    '1': 'b', 
    '2': 'c', 
    length: 3 
}; 

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

复制代码

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

Array.from('hello') 
// ['h', 'e', 'l', 'l', 'o'] 
 
let namesSet = new Set(['a', 'b']) 
Array.from(namesSet) // ['a', 'b']

值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。

复制代码
// arguments对象 
function foo() { 
  var args = [...arguments]; 
} 

// NodeList对象
[...document.querySelectorAll('div')]

复制代码

扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代。

const toArray = (() => 
  Array.from ? Array.from : obj => [].slice.call(obj) 
)();

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]

复制代码

2,of()将一组值转换为数组

复制代码
Array.of(3, 11, 8) // [3,11,8] 
Array.of(3) // [3] 
Array.of(3).length // 1 
 
Array() // [] 
Array(3) // [, , ,] 
Array(3, 11, 8) // [3, 11, 8] 

//Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于2个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。

//Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

复制代码

Array.of方法可以用下面的代码模拟实现。

function ArrayOf(){ 
  return [].slice.call(arguments); 
}

3,数组实列的方法:copyWith()在当前数组内部,将指定的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,这个方法会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

他接受三个参数:

  • target(必需):从该位置开始替换数据。
  • start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
复制代码
[1, 2, 3, 4, 5].copyWithin(0, 3) 
// [4, 5, 3, 4, 5] 
// 将3号位复制到0号位 
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) 
// [4, 2, 3, 4, 5] 

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束,复制到0号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(
0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 对于没有部署TypedArray的copyWithin方法的平台
//
需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

复制代码

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

find()用于找出第一个符合条件的数组成员,它的参数是一个回调函数,所有的成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

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

find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

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

5,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)
// ['a', 7, 'c']

复制代码

6,entries()keys()values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

复制代码
for (let index of ['a', 'b'].keys()) { 
  console.log(index); 
} 
// 0 
// 1 

for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
//
'b'

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
//
1 "b"

//如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

let letter
= ['a', 'b', 'c'];
let entries
= letter.entries();
console.log(entries.next().value);
// [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

复制代码

 7,includes()返回一个布尔值,表示某个数组是否包含给定的值

复制代码
[1, 2, 3].includes(2);     // true 
[1, 2, 3].includes(4);     // false 
[1, 2, NaN].includes(NaN); // true 

//该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

复制代码

8,数组的空位

  • forEach()filter()every() 和some()都会跳过空位。
  • map()会跳过空位,但会保留这个值
  • join()toString()会将空位视为undefined,而undefinednull会被处理成空字符串
  • undefined不是空位
出处:https://www.cnblogs.com/liuxf27340/p/14007840.html

评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

关于setTimeout是同步还是异步的问题到详谈Event Loop