带你入门 JavaScript ES6 (二)

chanthuang 发布于2019-08-21 18:26 / 2309人阅读

摘要：上一篇学习下一代语法一，我们学习了关于块作用域变量或常量声明和语法新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。这便是扩展运算符的用途之一。

本文同步 带你入门 JavaScript ES6 (二)，转载请注明出处。

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

这一章我们将学习

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])
}

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

GPU云服务器云服务器 ES6入门 javascript入门带你学c带你飞 javascript教程入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90462.html

带你入门 JavaScript ES6 (五) 集合

摘要：一概述集合是引入的新的内置对象类型，其特点同数学意义的集合，即集合内所有元素不重复元素唯一。数组集合对比数组和集合，数组可以加入重复数据，而集合的所有元素是唯一的不允许重复。因此，适合临时存放一组对象，以及存放跟对象绑定的信息。本文同步带你入门带你入门 JavaScript ES6 (五) 集合，转载请注明出处。前面我们学习了： for of 变量和扩展语法块作用域变量和解构...

BetaRabbit 2019-08-26 17:04 评论0 收藏0
带你入门 JavaScript ES6 (四)

摘要：方法如示例中定义的方法静态方法使用关键字修饰的方法，允许通过类名直接调用静态方法而无需实例化。本文同步带你入门 JavaScript ES6 (四)，转载请注明出处。前面我们学习了： for of 变量和扩展语法块作用域变量和解构箭头函数本章我们将学习 ES6 中的类，了解类基本定义和继承相关知识一、概述 ES6 中的类是基于原型的继承语法糖，本质上它是一个 fu...

he_xd 2019-08-21 18:40 评论0 收藏0
带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0
带你入门 JavaScript ES6 (三)

摘要：上一章我们学习了遍历和扩展字符语法。本章我们主要学习中的箭头函数箭头函数更准确来说叫箭头函数表达式。箭头函数余普通函数功能相同，但语法差别比较大。带你入门 JavaScript ES6 (三) 本文同步带你入门 JavaScript ES6 (三)，转载请注明出处。上一章我们学习了 for of 遍历和扩展字符语法。本章我们主要学习 ES6 中的箭头函数箭头函数更准确来说叫箭...

刘福 2019-08-21 18:35 评论0 收藏0
带你玩转 JavaScript ES6 (六) - Map 映射

摘要：初始化申明一个设置和获取值使用设置新值或更新值申明设置值张三丰张三丰重复设置值如果键值存在则新值替换旧值张三丰使用获取值，如果获取的不存在返回分别获取判断是否存在使用判断给定是否存在映射内。本文同步带你入门带你玩转 JavaScript ES6 (六) - Map 映射，转载请注明出处。本章我们讲学习 ES6 中的 Map(映射)。上一章节我们学习了 [Set(集合)]()的相关...

acrazing 2019-08-22 14:02 评论0 收藏0