3.（ECMAScript）es6完全解读（2）

最新推荐文章于 2021-02-18 16:52:24 发布

溜_x_i_a_o_迪

最新推荐文章于 2021-02-18 16:52:24 发布

阅读量170

点赞数

分类专栏： # ECMScript 文章标签： es6 es5 js 数组方法所有数组遍历方式对比 es6数组常用方法对比差异 es6数组扩展方法优势劣势类数组伪数组差别原理

本文链接：https://blog.csdn.net/u013946061/article/details/112611723

版权

ECMScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1. 重点提炼

ES5中数组的各种遍历方式及常用方法
ES6中数组遍历方式及常用方法
ES6中数组的扩展方法
ES5与ES6中数组的方法对比、优势、劣势等

2. ES5中数组的各种遍历方式

for循环
forEach()：没有返回值，只是针对每个元素调用func
map()：返回新的Array，每个元素为调用func的结果
filter()：返回符合func条件的元素数组
some()：返回boolean，判断是否有元素是否符合func条件
every()：返回boolean，判断每个元素是否符合func条件
reduce()：接收一个函数作为累加器
for in ???

2.1 for循环遍历数组

es-demo\src\1-4.js

let arr = [1, 2, 3]

// for
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a0.95
Branch： branch02

commit description：a0.95（for循环遍历数组）

tag：a0.95

2.2 foreach遍历数组

forEach中传入回调函数，回调函数 =>

第一个参数：当前正在遍历的元素

第一个参数：当前正在遍历的元素对应的索引

第一个参数：当前正在遍历的数组本身

forEach() 没有返回值，只是针对每个元素调用func

这个语法看起来要简洁很多，不需要通过索引去访问数组项，然而它的缺点也是很明显，不支持 break、continue等。

// forEach
arr.forEach(function(elem, index, array){
    console.log(elem, index)
})

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a0.96
Branch： branch02

commit description：a0.96（foreach遍历数组）

tag：a0.96

2.3 for循环与foreach的差别

实际在循环中还有两个比较重要的关键字 => break 和 continue

break => 直接跳出循环

let arr = [1, 2, 3, 2, 4]

// for
for (let i = 0; i < arr.length; i++) {
    if(arr[i] == 2){
        break;
    }
    console.log(arr[i])
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a0.97
Branch： branch02

commit description：a0.97（for循环与foreach的差别——for…break）

tag：a0.97

let arr = [1, 2, 3, 2, 4]

// forEach
arr.forEach(function(elem, index, array){
    if(arr[i] == 2){
        break;
    }
    console.log(elem, index)
})

报错 =>

forEach 不允许 break关键字

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a0.98
Branch： branch02

commit description：a0.98（for循环与foreach的差别——forEach 不允许 break关键字）

tag：a0.98

continue => 结束本次循环

let arr = [1, 2, 3, 2, 4]

// for
for (let i = 0; i < arr.length; i++) {
    if(arr[i] == 2){
        continue;
    }
    console.log(arr[i])
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a0.99
Branch： branch02

commit description：a0.99（for循环与foreach的差别——for…continue）

tag：a0.99

let arr = [1, 2, 3, 2, 4]
// forEach
arr.forEach(function(elem, index, array){
    if(arr[i] == 2){
        continue;
    }
    console.log(elem, index)
})

报错 =>

forEach 不允许 continue关键字

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.01
Branch： branch02

commit description：a1.01（for循环与foreach的差别——forEach 不允许 continue关键字）

tag：a1.01

综上可以看出区别了 => foreach 循环中不能跳出循环，因为它不支持break，也不支持continue。

[1, 2, 3, 4, 5].forEach(function(i) {
    if (i === 2) {
        return;
    } else {
        console.log(i)
    }
})

这段代码的"本意"是从第一个元素开始遍历，遇到数组项 2 之后就结束遍历，不然打印出所遍历过的数值项。可是，事实让你大跌眼镜，因为它的输出是 1, 3, 4, 5。

2.4 map

map() 返回新的数组，每个元素为调用func的结果

let arr = [1, 2, 3, 2, 4]
// map
arr.map(function(value){
   console.log(value)
})

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.02
Branch： branch02

commit description：a1.02（map——基本使用）

tag：a1.02

2.5 map 与 foreach 的差别

foreach实际只是简单的循环，而map会遍历其中每一个元素，根据回调函数执行后的返回值生成一个新的数组，注意map函数并不会改变原有数组的值。

let arr = [1, 2, 3, 2, 4]
// map
let result = arr.map(function(value){
   value += 1
   return value
})
console.log(arr, result)

新数组每个元素加1。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.03
Branch： branch02

commit description：a1.03（map 与 foreach 的差别）

tag：a1.03

2.6 filter

filter() 返回符合func条件的元素数组

let arr = [1, 2, 3, 2, 4]
// filter
arr.filter(function (value) {
    console.log(value)
})

filter同样也可进行遍历。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.04
Branch： branch02

commit description：a1.04（filter——基本使用）

tag：a1.04

同样filter也有自己的特点，会返回一个新的数组，新的数组是经过filter筛选过后的元素。注意filter不会改变原数组。

let arr = [1, 2, 3, 2, 4]
// filter
let result = arr.filter(function (value) {
    return value == 2
})
console.log(arr, result)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.05
Branch： branch02

commit description：a1.05（filter——过滤特性）

tag：a1.05

2.7 some

let arr = [1, 2, 3, 2, 4]
// some
arr.some(function (value) {
    console.log(value)
})

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.06
Branch： branch02

commit description：a1.06（some——基本使用）

tag：a1.06

some实际遍历数组当中是否有符合条件的元素（只有有一个符合即返回true）存在，返回boolean类型。

let arr = [1, 2, 3, 2, 4]
// some
let result = arr.some(function (value) {
    return value == 4
})
console.log(arr, result)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.07
Branch： branch02

commit description：a1.07（some——遍历数组当中是否有符合条件的元素）

tag：a1.07

2.8 every

与some相对

let arr = [1, 2, 3, 2, 4]
// every
arr.every(function (value) {
    console.log(value)
})

不会遍历所有元素的，实际只要有一个元素不符合条件，就直接返回false了。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.08
Branch： branch02

commit description：a1.08（every——基本使用）

tag：a1.08

检测数组中的每个元素是否都符合当前的条件，每一个元素都符合才会返回true。

let arr = [1, 2, 3, 2, 4]
let result = arr.every(function (value) {
    return value == 2
})
console.log(arr, result)

使用 every遍历就可以做到 break那样的效果，简单的说return false 等同于 break，return true等同于 continue。如果不写，默认是return false。

注意

every的代码块中不能使用 break、continue，它会抛出异常。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.09
Branch： branch02

commit description：a1.09（every——检测数组中的每个元素是否都符合当前的条件）

tag：a1.09

2.9 reduce

接收一个函数作为累加器 =>

第一个参数 => 回调函数
- 回调函数第一个参数 pre=> 上一次调用回调的返回值，或initialValue
- 回调函数第二个参数 cur => 当前正在处理的数组中的元素
- 回调函数第三个参数 index=> 当前正在处理的数组中的元素的索引
- 回调函数第四个参数 array=> 原数组
第二个参数 initialValue => 累加时的初始值

回调函数第一次执行时，pre 和cur的取值有两种情况：如果调用reduce()时提供了initialValue，pre取值为initialValue，cur取数组中的第一个值；如果没有提供 initialValue，那么 pre取数组中的第一个值，currentValue取数组中的第二个值。

**注意：**如果没有提供initialValue，reduce会从索引1的地方开始执行 callback方法，跳过第一个索引。如果提供initialValue，从索引0开始。

实现求和 =>

let arr = [1, 2, 3, 2, 4]
let sum = arr.reduce(function(prev, cur, index, array){
    return prev + cur
}, 0)
console.log(sum)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.10
Branch： branch02

commit description：a1.10（reduce——实现求和）

tag：a1.10

实现找到数组中最大的值 =>

let arr = [1, 2, 3, 2, 4]
let max = arr.reduce(function(prev, cur){
    return Math.max(prev, cur)
})
console.log(max)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.11
Branch： branch02

commit description：a1.11（reduce——实现找到数组中最大的值）

tag：a1.11

实现数组去重 => 形成一个新数组，所以把初始值定义为一个空数组。会将其赋值给prev。

let arr = [1, 2, 3, 2, 4]
let res = arr.reduce(function(prev, cur){
    prev.indexOf(cur) == -1 && prev.push(cur)
    return prev
}, [])
console.log(res)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.12
Branch： branch02

commit description：a1.12（reduce——实现数组去重）

tag：a1.12

2.10 for…in

let arr = [1, 2, 3, 2, 4]
for(let index in arr){
    console.log(index, arr[index])
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.13
Branch： branch02

commit description：a1.13（for…in——基本使用）

tag：a1.13

for…in可以遍历数组，但是如果在数组原型下定义一个方法。

let arr = [1, 2, 3, 2, 4]
Array.prototype.foo = function(){
    console.log('foo')
}
for(let index in arr){
    console.log(index, arr[index])
}

发现for…in不仅可以遍历数组，还可遍历在数组原型下自定义的方法。

因此for…in在遍历数组是有问题，如果以后自定义了方法，就会把方法也遍历出来。

综上，在开发中不应该使用for…in去遍历数组。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.14
Branch： branch02

commit description：a1.14（for…in——不应该使用for…in去遍历数组）

tag：a1.14

注意

for…in不能用于遍历数组。
for…in代码块中不能有 return，不然会抛出异常。

3. ES6中数组遍历方式

find()=> 返回第一个通过测试的元素
findIndex() => 返回的值为该通过测试第一个元素的索引
for…of => 遍历数组
values() => 配合for…of遍历value
keys() => 配合for…of遍历key
entries() => 配合for…of遍历key和value

3.1 find

find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

语法：arr.find(callback[, thisArg])

参数	含义	必选
callback	在数组每一项上执行的函数，接收 3 个参数，element、index、array	Y
thisArg	执行回调时用作 this 的对象	N

let arr = [1, 2, 3, 2, 4]
let res = arr.find(function (value) {
    return value == 2
})
console.log(arr, res)

返回第一个通过测试的元素，即这里返回的是第一个2（值而不是索引）。

let arr = [1, 2, 3, 2, 4]
let res = arr.find(function (value) {
    return value == 8
})
console.log(arr, res)

如果没有找到元素，则返回undefined。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.15
Branch： branch02

commit description：a1.15（find——基本使用）

tag：a1.15

3.2 findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

语法：arr.findIndex(callback[, thisArg])

参数	含义	必选
callback	在数组每一项上执行的函数，接收 3 个参数，element、index、array	Y
thisArg	执行回调时用作 this 的对象	N

let arr = [1, 2, 3, 2, 4]
// findIndex
let res = arr.findIndex(function (value) {
    return value == 2
})
console.log(arr, res)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.16
Branch： branch02

commit description：a1.16（findIndex——基本使用）

tag：a1.16

3.3 for…of

let arr = [1, 2, 3, 2, 4]
// for of
for(let item of arr){
    console.log(item)
}

let arr = [1, 2, 3, 2, 4]
// for of
Array.prototype.foo = function(){
    console.log('foo')
}
for(let item of arr){
    console.log(item)
}

for…of不会遍历自定义的方法。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.17
Branch： branch02

commit description：a1.17（for…of——基本使用）

tag：a1.17

上述代码中轻松实现了数组的遍历，乍一看没有绝对它有非常强大之处。我们不得不强调下，for...of的来历和作用。

for (variable of iterable) {

}

看下这个伪代码，of后面是 iterable既不是 for循环规定的 array，也不是 for...in规定的 Object，而是 iterable。如果查查 iterable的含义就很直观的感受到for...of遍历的是一切可遍历的元素（数组、对象、集合）等，不要小瞧这个功能，因为在 ES6中允许开发者自定义遍历，换句话说任何数据结构都可以自定义一个遍历，这个遍历是不能被for、for...in理解和实现的。很抽象吧？Iterator是如何实现的这是ES6的新增语法，后面再说。

let arr = [1, 2, 3, 2, 4]
for(let item of arr.values()){
    console.log(item)
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.18
Branch： branch02

commit description：a1.18（for…of——遍历arr.values()）

tag：a1.18

遍历下标 =>

let arr = [1, 2, 3, 2, 4]
for(let item of arr.keys()){
    console.log(item)
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.19
Branch： branch02

commit description：a1.19（for…of——遍历索引值）

tag：a1.19

遍历下标及内容 => arr.entries()返回的包括索引及下标

let arr = [1, 2, 3, 2, 4]
for(let [index, item] of arr.entries()){
    console.log(index, item)
}

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.20
Branch： branch02

commit description：a1.20（for…of——遍历下标及内容）

tag：a1.20

4. ES6中数组的扩展方法

类数组 / 伪数组
Array.from() => 将类数组转成数组
Array.of() => 初始化数组
copyWithin() => 用数组的某些元素替换数组的另外一些元素
fill() => 填充数组
includes() => 检测数组是否包含某个元素

js操作dom，返回的dom数据类型是HTMLCollection

// DOM
let divs = document.getElementsByTagName('div')
console.log(divs) // HTMLCollection

// DOM
let divs = document.getElementsByTagName('div')
console.log(divs) // HTMLCollection

let divs2 = document.getElementsByClassName('xx')
console.log(divs2) // HTMLCollection

// DOM
let divs = document.getElementsByTagName('div')
console.log(divs) // HTMLCollection

let divs2 = document.getElementsByClassName('xx')
console.log(divs2) // HTMLCollection

let divs3 = document.querySelectorAll('.xx')
console.log(divs3) // NodeList

querySelectorAll返回的数据类型是NodeList

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.21
Branch： branch02

commit description：a1.21（HTMLCollection和NodeList）

tag：a1.21

综上通过dom操作获取的dom集合并不是一个array

=> 如何判断一个元素是否为数组？

let divs3 = document.querySelectorAll('.xx')
console.log(divs3 instanceof Array) // NodeList

false

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.22
Branch： branch02

commit description：a1.22（如何判断一个元素是否为数组？）

tag：a1.22

尝试使用数组的方法，报错 =>

let divs3 = document.querySelectorAll('.xx')
console.log(divs3 instanceof Array) // NodeList
divs3.push(123)

Uncaught TypeError: divs3.push is not a function

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.23
Branch： branch02

commit description：a1.23（尝试使用数组的方法，报错）

tag：a1.23

因为push这个方法，是array数组下面的，但是无论是NodeList还是HTMLCollection并不是真正意味上的数组，尽管通过for与length进行循环。

通常把这种数据类型称为 => 类数组 / 伪数组

4.1 类数组 / 伪数组转为数组 => slice

slice => 从已有的数组中返回选定的元素

let divs3 = document.querySelectorAll('.xx')
console.log(divs3 instanceof Array) // NodeList

// slice
let arr = Array.prototype.slice.call(divs3)
console.log(arr)
arr.push(123)
console.log(arr)

false
[]
[123]

或

let args = [].slice.call(arguments);
let imgs = [].slice.call(document.querySelectorAll('img'));

基本原理是使用 call将数组的 api应用在新的对象上，换句话说是利用改变函数的上下文来间接使用数组的 api。在 ES6中提供了新的 api来解决这个问题，就是 Array.from。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.24
Branch： branch02

commit description：a1.24（es5 类数组 / 伪数组转为数组 => slice）

tag：a1.24

note:

TIP

伪数组具备两个特征，1. 按索引方式储存数据 2. 具有length属性；如：
let arrLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}

除此之外，还有类数组，如=>

function foo(){
    console.log(arguments)
    console.log(arguments instanceof Array)
}
foo(1, 'abc', true)

函数接收参数的arguments也是类数组。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.25
Branch： branch02

commit description：a1.25（函数接收参数的arguments也是类数组）

tag：a1.25

es6中将类数组转成数组 => Array.from

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数	含义	必选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	Y
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数	N
thisArg	可选参数，执行回调函数 mapFn 时 this 对象	N

let arrayLike = {
    0: 'es6',
    1: 'es7',
    2: 'es8',
    length: 3
}
let arr = Array.from(arrayLike)
arr.push('es9')
console.log(arr)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.26
Branch： branch02

commit description：a1.26（es6中将类数组转成数组）

tag：a1.26

看了这几个参数至少能看到 Array.from还具备 map的功能，比如我们想初始化一个长度为 5的数组，每个数组元素默认为1，之前的做法是这样的：

首先有6个元素的数组，将每个元素用空格连接成完整字符串，需要5个空格，5个空格组成的字符串分割成长度为5的数组，再将其赋值为1。

let arr = Array(6).join(' ').split('').map(item => 1)
// [1,1,1,1,1]

这样写虽然也能实现，但是用起来比较繁琐，使用 Array.from就会简洁很多。

Array.from({
    length: 5
}, function() {
    return 1
})

4.2 Array.of

let arr = new Array(1, 2)
console.log(arr)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.27
Branch： branch02

commit description：a1.27（new Array用法）

tag：a1.27

let arr = new Array(3)
console.log(arr)

new Array 只传一个参数 => 数字表示数组的长度

因此 new Array 根据参数个数的不同，导致构造出来的数组不太一样。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.28
Branch： branch02

commit description：a1.28（new Array 只传一个参数 => 数字表示数组的长度）

tag：a1.28

但是如果就传一个参数，来表示数组的值 => Array.of

Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

语法：Array.of(element0[, element1[, ...[, elementN]]])

参数	含义	必选
elementN	任意个参数，将按顺序成为返回数组中的元素	Y

let arr = Array.of(1, 2)
console.log(arr)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.29
Branch： branch02

commit description：a1.29（Array.of使用）

tag：a1.29

let arr = Array.of(3)
console.log(arr)

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.30
Branch： branch02

commit description：a1.30（Array.of使用——传一个参数，来表示数组的值）

tag：a1.30

因此一定要注意new Array这个坑，只有Array.of不管参数传几个，都是构造数组的值。

现在把一堆不一样的值组成数组 =>

let arr = Array.of(1, true, 'abc', [1, 2, 3], {
    name: 'zhangsan'
})
console.log(arr)

Array.of 可以把不同类型的变量拼接成数组。

应用 => 从后端获取到不同类型的数据，如果需要拼接成数组，则使用Array.of

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.31
Branch： branch02

commit description：a1.31（Array.of 可以把不同类型的变量拼接成数组。）

tag：a1.31

4.3 copyWithin

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

语法：arr.copyWithin(target, start = 0, end = this.length)

参数	含义	必选
target	从该位置开始替换数据。如果为负值，表示倒数	Y
start	从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算	N
end	到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算	N

copyWithin => 利用数组中某些元素替换数组当中的另外一些元素。

第一个参数start （必选）=> 从数组什么位置开始替换元素

第二个参数（可选）=> 表示从该位置开始读取元素

第三个参数（可选）=> 表示从该位置停止读取元素，没传代表到末尾停止读取元素

let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3))

从第1的位置开始替换，即从第二个元素（2）开始（下标0开始）替换为下标是3的元素（4）一直到末尾（两个元素4、5）放到1的位置（2）替换两个元素。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.32
Branch： branch02

commit description：a1.32（copyWithin => 利用数组中某些元素替换数组当中的另外一些元素。）

tag：a1.32

4.4 fill

fill => 填充数组的空余位置。

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

note： fill不具备遍历的功能，它是通过指定要操作的索引范围来进行，通过这道题目可以看出不指定索引会对所有元素进行操作

语法：arr.fill(value[, start[, end]])

参数	含义	必选
value	用来填充数组元素的值	Y
start	起始索引，默认值为0	N
end	终止索引，默认值为 this.length	N

let arr = new Array(3).fill(7)
console.log(arr)

new Array(3) => 初始化了3个空位置，然后填充为7。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.33
Branch： branch02

commit description：a1.33（fill => 填充数组的空余位置。）

tag：a1.33

另外一个应用场景 =>

fill实际有三个参数 =>

第1个参数，填充的元素

第2个参数，数组下标开始的位置

第3个参数，数组下标结束的位置（不包含在内）

let arr = [1, 2, 3, 4, 5]
arr.fill('abc', 1, 3)
console.log(arr)

下标为1和2的位置，被替换成了abc

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.34
Branch： branch02

commit description：a1.34（fill => 填充数组设定的位置。）

tag：a1.34

let arr = [1, 2, 3, 4, 5]
arr.fill(0)
console.log(arr)

将数组全部替换（重置）为0。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.35
Branch： branch02

commit description：a1.35（fill => 将数组全部重。）

tag：a1.35

4.5 includes(es7)

在 ES7 之前想判断数组中是否包含一个元素，基本可以这样写：

console.log(array1.find(function(item) {
    return item === 2
}))

或者

console.log(array1.filter(function(item) {
    return item === 2
}).length > 0)

或者使用数组方法indexOf

es5中有一个数组方法indexOf => 检查数组中是否有参数中的元素。

如果包含则返回当前对应元素的下标（索引）。

如找不到则返回-1。

let arr = [1, 2, 3, NaN]
console.log(arr.indexOf(1))

console.log(arr.indexOf(2))

console.log(arr.indexOf(5))

但是NaN是一个特殊的值，在数组哪怕存在，arr.indexOf也返回-1。

因此indexOf不能监测NaN。

let arr = [1, 2, 3, NaN]
console.log(arr.indexOf(NaN))

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.36
Branch： branch02

commit description：a1.36（indexOf使用）

tag：a1.36

ES7引入的Array.prototype.includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

console.log(NaN == NaN)
console.log(arr.includes(NaN))

注意js在设计的时候，NaN与NaN并不相等。

注意但是在es6中数组的新方法includes也是判断数组中是否包含某一个元素，它可以找到NaN。

因此indexOf和includes都检查数组中是否包含目标元素，但是indexOf返回如果找到则返回对应元素的索引，否则返回-1，然而includes返回的是boolean类型。存在一个区别则是includes不能检测是否包含NaN，但是includes可以。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a1.37
Branch： branch02

commit description：a1.37（includes使用）

tag：a1.37

接收俩个参数

要搜索的值和搜索的开始索引。第二个参数可选。从该索引处开始查找 searchElement。如果为负值，

const arr = ['es6', 'es7', 'es8']
console.log(arr.includes('es7', 1)) // true
console.log(arr.includes('es7', 2)) // false
console.log(arr.includes('es7', -1)) // false
console.log(arr.includes('es7', -2)) // true

注意

只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的.

const arr = [1, [2, 3], 4]
arr.includes([2, 3]) //false
arr.indexOf([2, 3]) //-1

（后续待补充）

溜_x_i_a_o_迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.（ECMAScript）es6完全解读（2）

文章目录1. 重点提炼2. ES5中数组的各种遍历方式2.1 for循环遍历数组2.2 foreach遍历数组2.3 for循环与foreach的差别2.4 map2.5 map 与 foreach 的差别2.6 filter2.7 some2.8 every2.9 reduce2.10 for…in3. ES6中数组遍历方式3.1 find3.2 findIndex3.3 for…of4. ES6中数组的扩展方法4.1 类数组 / 伪数组转为数组 => slice4.2 Array.of4.
复制链接

扫一扫