成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

帶你入門 JavaScript ES6 (二)

chanthuang / 2344人閱讀

摘要：上一篇學(xué)習(xí)下一代語(yǔ)法一，我們學(xué)習(xí)了關(guān)于塊作用域變量或常量聲明和語(yǔ)法新的字符串拼接語(yǔ)法模版字面量數(shù)組元素或?qū)ο笤氐慕鈽?gòu)賦值和對(duì)象字面量簡(jiǎn)寫(xiě)的相關(guān)知識(shí)。這便是擴(kuò)展運(yùn)算符的用途之一。

本文同步 帶你入門 JavaScript ES6 (二)，轉(zhuǎn)載請(qǐng)注明出處。

上一篇學(xué)習(xí)下一代 JavaScript 語(yǔ)法: ES6 (一)，我們學(xué)習(xí)了關(guān)于塊作用域變量或常量聲明 let 和 const 語(yǔ)法、新的字符串拼接語(yǔ)法模版字面量、數(shù)組元素或?qū)ο笤氐慕鈽?gòu)賦值和對(duì)象字面量簡(jiǎn)寫(xiě)的相關(guān)知識(shí)。

這一章我們將學(xué)習(xí)

for of 迭代語(yǔ)法

神奇的擴(kuò)展語(yǔ)法(...：展開(kāi)運(yùn)算符、剩余參數(shù))

一、for of 迭代語(yǔ)法

先讓我們看看 ES6 之前的對(duì)象變量迭代(遍歷)方式：

1.1 for 語(yǔ)句

for 語(yǔ)句

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

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

for 語(yǔ)法: 在變量對(duì)象時(shí)，需要定義計(jì)數(shù)器(i)進(jìn)行循環(huán)跟蹤和訪問(wèn)數(shù)據(jù)中的值；循環(huán)退出條件(i < numeric.length)

為了解決這個(gè)問(wèn)題，就有了 for in 語(yǔ)句

1.2 for in 語(yǔ)句

for in 語(yǔ)句

它解決了 for 語(yǔ)句 的計(jì)數(shù)器和推出條件

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

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

但是 for in 語(yǔ)句依然需要定義 index，作為訪問(wèn)數(shù)據(jù)的索引

1.3 for of 語(yǔ)句

現(xiàn)在在 ES6 中，只要是可迭代對(duì)象都可以使用 for of進(jìn)行迭代訪問(wèn)數(shù)據(jù)元素。

for of 語(yǔ)法 同 for in 語(yǔ)法 類似，只是將 in 替換成了 of

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

for (let numeric in numerics) {
    console.log(numeric)
}
二、 擴(kuò)展語(yǔ)法

擴(kuò)展語(yǔ)法

剩余參數(shù)

擴(kuò)展語(yǔ)法運(yùn)算符是 ...，在上一篇學(xué)習(xí)下一代 JavaScript 語(yǔ)法: ES6 (一)的「3.1」節(jié)中我們使用了將數(shù)組中剩余元素解構(gòu)賦值到一個(gè)變量。這便是擴(kuò)展運(yùn)算符的用途之一。

現(xiàn)在我們學(xué)習(xí)更多擴(kuò)展運(yùn)算符的語(yǔ)法知識(shí)

2.1 作為展開(kāi)運(yùn)算符使用

先來(lái)了解如何使用展開(kāi)運(yùn)算符

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

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

上例中，使用 ...languages 對(duì)數(shù)組內(nèi)的所有元素作為多帶帶的變量輸出

2.1.1 展開(kāi)運(yùn)算符實(shí)現(xiàn)數(shù)組的連接

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

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

2.1.2 concat 方法實(shí)現(xiàn)數(shù)組的拼接

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

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

相較于使用展開(kāi)運(yùn)算符 langs.concat 在實(shí)現(xiàn)上稍微復(fù)雜一些

2.2 作為剩余參數(shù)運(yùn)算符使用

在上一篇[學(xué)習(xí)下一代 JavaScript 語(yǔ)法: ES6 (一)]()的 3.1 節(jié)中我們已經(jīng)使用了該用法，再來(lái)看下

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 作為可變參數(shù)運(yùn)算符使用

可變參數(shù)函數(shù) 是接受不定數(shù)量參數(shù)的函數(shù)

// 一般定義函數(shù)方法
function sum(a, b, c) {
    return a + b + c
}

// 使用可變參數(shù)運(yùn)算符定義采納數(shù)方法
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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90462.html

相關(guān)文章

  • 帶你入門 JavaScript ES6 (五) 集合

    摘要：一概述集合是引入的新的內(nèi)置對(duì)象類型，其特點(diǎn)同數(shù)學(xué)意義的集合，即集合內(nèi)所有元素不重復(fù)元素唯一。數(shù)組集合對(duì)比數(shù)組和集合，數(shù)組可以加入重復(fù)數(shù)據(jù)，而集合的所有元素是唯一的不允許重復(fù)。因此，適合臨時(shí)存放一組對(duì)象，以及存放跟對(duì)象綁定的信息。 本文同步帶你入門 帶你入門 JavaScript ES6 (五) 集合，轉(zhuǎn)載請(qǐng)注明出處。 前面我們學(xué)習(xí)了： for of 變量和擴(kuò)展語(yǔ)法 塊作用域變量和解構(gòu)...

    BetaRabbit 評(píng)論0 收藏0

  • 帶你入門 JavaScript ES6 (四)

    摘要：方法如示例中定義的方法靜態(tài)方法使用關(guān)鍵字修飾的方法，允許通過(guò)類名直接調(diào)用靜態(tài)方法而無(wú)需實(shí)例化。 本文同步帶你入門 JavaScript ES6 (四)，轉(zhuǎn)載請(qǐng)注明出處。 前面我們學(xué)習(xí)了： for of 變量和擴(kuò)展語(yǔ)法 塊作用域變量和解構(gòu) 箭頭函數(shù) 本章我們將學(xué)習(xí) ES6 中的 類，了解類基本定義和繼承相關(guān)知識(shí) 一、概述 ES6 中的 類 是基于原型的繼承語(yǔ)法糖，本質(zhì)上它是一個(gè) fu...

    he_xd 評(píng)論0 收藏0

  • 帶你入門 JavaScript ES6 (一)

    摘要：是國(guó)際組織于年月日發(fā)布的第六版，正式名為通常被成為或。二模版字面量提供一種簡(jiǎn)單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作，簡(jiǎn)而言之就是能夠以簡(jiǎn)單的方法實(shí)現(xiàn)字符串拼接操作。 本文同步 帶你入門 JavaScript ES6 (一)，轉(zhuǎn)載請(qǐng)注明出處。 ES6: 是 ECMA國(guó)際組織于 2015 年 6 月 17 日發(fā)布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

    lindroid 評(píng)論0 收藏0

  • 帶你入門 JavaScript ES6 (三)

    摘要：上一章我們學(xué)習(xí)了遍歷和擴(kuò)展字符語(yǔ)法。本章我們主要學(xué)習(xí)中的箭頭函數(shù)箭頭函數(shù)更準(zhǔn)確來(lái)說(shuō)叫箭頭函數(shù)表達(dá)式。箭頭函數(shù)余普通函數(shù)功能相同，但語(yǔ)法差別比較大。 帶你入門 JavaScript ES6 (三) 本文同步帶你入門 JavaScript ES6 (三)，轉(zhuǎn)載請(qǐng)注明出處。 上一章我們學(xué)習(xí)了 for of 遍歷和擴(kuò)展字符語(yǔ)法。本章我們主要學(xué)習(xí) ES6 中的箭頭函數(shù) 箭頭函數(shù) 更準(zhǔn)確來(lái)說(shuō)叫 箭...

    劉福 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn) JavaScript ES6 (六) - Map 映射

    摘要：初始化申明一個(gè)設(shè)置和獲取值使用設(shè)置新值或更新值申明設(shè)置值張三豐張三豐重復(fù)設(shè)置值如果鍵值存在則新值替換舊值張三豐使用獲取值，如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內(nèi)。 本文同步帶你入門 帶你玩轉(zhuǎn) JavaScript ES6 (六) - Map 映射，轉(zhuǎn)載請(qǐng)注明出處。 本章我們講學(xué)習(xí) ES6 中的 Map(映射)。上一章節(jié)我們學(xué)習(xí)了 [Set(集合)]()的相關(guān)...

    acrazing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<