帶你入門 JavaScript ES6 (二)

chanthuang 發布于2019-08-21 18:26 / 2336人閱讀

摘要：上一篇學習下一代語法一，我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。

本文同步 帶你入門 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教程入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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