刘流的博客

ES6. 2.Array

ES6
Word count: 1.2kReading time: 6 min
2020/08/28 Share

1.数组的遍历

1.1.ES5中的遍历方式

1. for 循环

1
2
3
4
5
6
let array = [1,2,3,"a","b","c"]
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);    
}

// 1 2 3 a b c

在 for 循环中使用 break 语句

1
2
3
4
5
6
7
8
9
10
let array = [1,2,3,"a","b","c"]
// 在 for 循环中使用 break 和 countinue
for (let i = 0; i < array.length; i++) {
    if (array[i] % 2 === 0 ) {
        console.log(array[i]);
        break
    }
}

// 2

在 for 循环中使用 continue 语句

1
2
3
4
5
6
7
8
9
let array = [1,2,3,4,5,6,7,8,9]
for (let i = 0; i < array.length; i++) {
    if (array[i] % 2 === 0 ) {
        console.log(array[i]);
        continue
    }
}

// 2 4 6 8

2. forEach

1
2
3
4
5
let array = [1,2,3,"a","b","c"]

array.forEach((item)=>{
    console.log(item)
})

forEach 里面无法使用 break 和 continue 语句

3. every

使用 every 遍历进行遍历数组，如果回调函数没有返回值或者返回值为 false 的话，默认只遍历数组中的第一个元素。

1
2
3
4
5
6
7
let array = [1,2,3,"a","b","c"]
array.every((item)=>{
    console.log(item);
    // return false
})

// 1

当回调函数的返回值为 true 时，返回所有遍历元素

1
2
3
4
5
6
7
let array = [1,2,3,"a","b","c"]
array.every((item)=>{
    console.log(item);
    return true
})

// 1 2 3 a b c

在 every 语句里面也无法直接使用 break 以及 continue 语句，但是我们可以借助回调函数的返回值来实现 break

和 continue 的特性。

1
2
3
4
5
6
7
8
9
10
11
let array = [1,2,3,"a","b","c"]
array.every((item)=>{
    if (item === 2) {
        
    }else {
        console.log(item);
    }
    return true
})

// 1 3 a b c

4. for in

1
2
3
4
5
let array = [1,2,3,"a","b","c"]

for (const key in array) {
    console.log(array[key]);
}

for in（为 object 设计的遍历）遍历数组会有点瑕疵。

数组也是对象 console.log(typeof array);// object 如果我们不小心向数组上面添加了某个属性就会导致我们预计的结果不正确。

1
2
3
4
5
6
7
let array = [1,2,3,"a","b","c"]
array.a = '91'
for (const key in array) {
    console.log(array[key]);
}

// 1 2 3 a b c 91

1.2.ES6 中新增的遍历方式

ES6 中允许自定义数据结构去遍历，这个自定义的数据结构只能用 for of 去遍历。

1
2
3
4
5
6
7
let array = [1,2,3,"a","b","c"]

for (const iterator of array) {
    console.log(iterator);
}

// 1 2 3 a b c

2.转换

2.1 什么是伪数组？

伪数组：arguments，nodeList。

这些伪数组无法调用数组的API，如调用不了 splice。

为什么将他们称之为伪数组，因为他们具有数组的特新。比如数组的长度，

伪数组具备两个特征：

    1. 以索引的方式储存数据的，
    2. 具备一个 length 属性
1
{ 0 :'a',1:'b',length: 5}

2.2 ES5 中将伪数组转换成数组的方法

1
2
let args = [].slice.call(arguments) // collection
let imgs = [].slice.call(document.querySelectorAll('img')) // NodeList

2.3 ES6 中将伪数组转换成数组的方法

1
2
3
4
5
6
// Array.prototype.from()
let args = Array.from(arguments)
let imgs =Array.from(document.querySelectorAll('img'))

// 被转换之后的伪数组可以调用数组的 API
imgs.forEach()

2.4 练习

生成一个长度为 5 的数组，同时将数组中的长度全部设为 1 。

2.4.1 ES 5 的做法

1
2
3
4
5
6
let array = Array(5)
for(var i = 0;i<array.length;i++){
    array[i] = 1
}

console.log(array); // [ 1, 1, 1, 1, 1 ]

上述的做法稍微麻烦点。

2.4.2 ES6 的做法

Array.prototype.from() 接收三个参数：from(arrayLike, mapFn, thisArg)

第一个参数是一个伪数组，第二个参数是回调函数，第三个参数是 执行回调函数 mapFn 时 this 对象。

1
2
3
let array = Array.from({length:5}, function(){return 7})

console.log(array) // [ 7, 7, 7, 7, 7 ]

3.生成

3.1 ES5 中生成数组的方式

1
2
3
4
5
// 生成数组的两种方法
// 实例一个数组
let array = Array(5)
// 使用字面量的方式生成数组
let array = [1,2,3]

3.2 ES6 中生成数组的方式

3.2.1 Array.prototype.of

1
2
let array = Array.of(1,1,2,3,4)
console.log(array); // [ 1, 1, 2, 3, 4 ]

3.2.2 Array.prototype.fill

1
2
let array = Array(5).fill(6)
console.log(array); //[ 6, 6, 6, 6, 6 ]

3.2.3 使用 fill() 方法替换掉数组中的元素

1
2
3
4
// Array.fill(value,start,end)

let array = [1,2,3,4,5]
console.log(array.fill(8,2,4)) //[ 1, 2, 8, 8, 5 ]

4.查找

4.1 ES5 中查找数组中元素的方法

1
2
3
4
5
6
7
8
9
10
11
12
// Array.prototype.filter

let array = [1,2,3,4,5]
let find = array.filter(function (item) {
     return item === 3 
 })

 let findNum = array.filter(function (item) {
     return item %2 === 0 
 })
 console.log(find); // [3]
 console.log(findNum); // [2,4]

ES6 中查找数组中元素的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
// Array.prototype.find

let array = [1,2,3,4,5]
let find = array.find(function (item) {
    return item % 2 === 0
})
console.log(find); // 2

// Array.prototype.findIndex
let findIndex = array.findIndex(function (item) {
    return item % 2 === 0
})
console.log(findIndex); // 1

5. 练习

  1. JavaScript 世界里有哪些元素是可遍历的？
  2. 如何给数据结构自定义遍历?
  3. find() 和 ES5 的 filter()有什么区别？

Author：John Doe

原文链接：http://example.com/2020/08/28/2020-8-28-ES6-02-Array/

发表日期：August 28th 2020, 12:00:00 am

更新日期：August 30th 2020, 8:45:40 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 1.数组的遍历
    1. 1.1. 1.1.ES5中的遍历方式
      1. 1.1.1. 1. for 循环
      2. 1.1.2. 2. forEach
      3. 1.1.3. 3. every
      4. 1.1.4. 4. for in
    2. 1.2. 1.2.ES6 中新增的遍历方式
  2. 2. 2.转换
    1. 2.1. 2.1 什么是伪数组？
    2. 2.2. 2.2 ES5 中将伪数组转换成数组的方法
    3. 2.3. 2.3 ES6 中将伪数组转换成数组的方法
    4. 2.4. 2.4 练习
  3. 3. 3.生成
    1. 3.1. 3.1 ES5 中生成数组的方式
    2. 3.2. 3.2 ES6 中生成数组的方式
  4. 4. 4.查找
    1. 4.1. 4.1 ES5 中查找数组中元素的方法
    2. 4.2. ES6 中查找数组中元素的方法
  5. 5. 5. 练习
Total : 16
2020
小程序 NodeJS ES6 杂记 HTML CSS JavaScript
CSS 小程序 Node JavaScript 杂记 HTML 前端