带你入门 JavaScript ES6 (二)

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了带你入门 JavaScript ES6 (二)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文同步 带你入门 JavaScript ES6 (二)转载请注明出处。

上一篇学习下一代 JavaScript 语法: ES6 (一),我们学习了关于块作用域变量或常量声明 letconst 语法、新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。

这一章我们将学习

  • for of 迭代语法
  • 神奇的扩展语法(...:展开运算符、剩余参数)

一、for of 迭代语法

先让我们看看 ES6 之前的对象变量迭代(遍历)方式:

1.1 for 语句

for 语句

let numerics = [0, 1, 2, 3]

for (let i = 0; i < numerics.length; i++) {
    console.LOG(numerics[i])
}@H_126_51@

for 语法: 在变量对象时,需要定义计数器(i)进行循环跟踪和访问数据中的值;循环退出条件(i < numeric.length)

了解决这个问题,就有了 for in 语句

1.2 for in 语句

for in 语句

它解决了 for 语句 的计数器和推出条件

let numerics = [0, 1, 2, 3]

for (let index in numerics) {
    console.log(numerics[index])
}

但是 for in 语句依然需要定义 index,作为访问数据的索引

1.3 for of 语句

现在在 ES6 中,只要是可迭代对象都可以使用 for of进行迭代访问数据元素。

for of 语法for in 语法 类似,只是将 in 替换成了 of

let numerics = [0, 1, 2, 3]

for (let numeric in numerics) {
    console.log(numeric)
}

二、 扩展语法

扩展语法

剩余参数

扩展语法运算符是 ...,在上一篇学习下一代 JavaScript 语法: ES6 (一)的「3.1」节中我们使用了将数组中剩余元素解构赋值到一个变量。这便是扩展运算符用途之一。

现在我们学习更多扩展运算符的语法知识

2.1 作为展开运算符使用

先来了解如何使用展开运算符

let languages = ['php', 'javascript', 'python', 'c++']

console.log(...languages)// php javascript python c++
console.log(languages)// ["php", "javascript", "python", "c++"]

上例中,使用 ...languages 对数组内的所有元素作为单独的变量输出

2.1.1 展开运算符实现数组的连接

let langs = ['php', 'javascipt']
let langs2 = ['c++', 'python']

console.log([...langs, ...langs2])// ["php", "javascipt", "c++", "python"]

2.1.2 concat 方法实现数组的拼接

let langs = ['php', 'javascipt']
let langs2 = ['c++', 'python']

console.log(langs.concat(langs2))// ["php", "javascipt", "c++", "python"]

相较于使用展开运算符 langs.concat 在实现上稍微复杂一些

2.2 作为剩余参数运算符使用

在上一篇[学习下一代 JavaScript 语法: ES6 (一)]()的 3.1 节中我们已经使用了该用法,再来看下

let seasons = ['SPRing', 'Summer', 'Autumn', 'Winter']
let [spring, summer, ...autumnAndWinter] = seasons

console.log(spring)//Spring
console.log(summer)// Summer
console.log(autumnAndWinter)// ['Autumn', 'Winter']

2.3 作为可变参数运算符使用

可变参数函数 是接受不定数量参数的函数

// 一般定义函数方法
function sum(a, b, c) {
    return a + b + c
}

// 使用可变参数运算符定义采纳数方法
function sumPro(...nums) {
    let sum = 0
    for (let num of nums) {
        sum += num
    }

    return sum
}

console.log(sum(1, 2, 3))

console.log(sumPro(1, 2))
console.log(sumPro(1, 2, 3))
console.log(sumPro(1, 2, 3, 4))

参考资料:
MDN

脚本宝典总结

以上是脚本宝典为你收集整理的带你入门 JavaScript ES6 (二)全部内容,希望文章能够帮你解决带你入门 JavaScript ES6 (二)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。