ES6 入坑筆記：說(shuō)說(shuō)一些新概念

scq000 發(fā)布于2019-08-20 10:21 / 2136人閱讀

摘要：雖然現(xiàn)在還需要借助的力量但未來(lái)一定是屬于。將類(lèi)引入了，大大簡(jiǎn)化了原先復(fù)雜的工作從前要實(shí)現(xiàn)繼承得多麻煩工廠(chǎng)模式無(wú)法解決對(duì)象識(shí)別，構(gòu)造函數(shù)模式內(nèi)存浪費(fèi)，原型模式私有方法還要結(jié)合構(gòu)造模式定義實(shí)例實(shí)現(xiàn)類(lèi)的繼承，我要用到繼承類(lèi)可以重寫(xiě)父類(lèi)的方法

雖然現(xiàn)在還需要借助babel的力量但未來(lái)一定是屬于ES6。（那ES7？-_-|||）

let

在ES6之前javascript只有兩種作用域，即全局作用域和函數(shù)作用域，let的出現(xiàn)彌補(bǔ)JS了沒(méi)有塊作用域的痛點(diǎn)

let的塊作用域

function cat(){
    let mew = "喵"
    let angry = true
    console.log(mew)
    if(angry){
        let mew = "..."  //外層{}成為塊作用域
        console.log(mew)
    }
    console.log(mew)
}
cat()
//喵
//...
//喵

讓我們和var做一下對(duì)比

function cat(){
    var mew = "喵"
    var angry = true
    console.log(mew)
    if(angry){
        var mew = "..."  //外層 mew 被覆蓋
        console.log(mew)
    }
    console.log(mew)
}
cat()
//喵
//...
//...

而let由于產(chǎn)生了塊作用域似的mew = "..." 只在塊作用域內(nèi)被使用，所以第三次輸出mew是"喵"

如上由于var不產(chǎn)生塊作用域所以if語(yǔ)句中的var mew = "..."相當(dāng)于覆蓋了函數(shù)中第一個(gè)mew（即函數(shù)作用域中的）所以在次輸出mew是"..."

應(yīng)用

上述例子中，通過(guò)let的使用可以避免變量被不必要地覆蓋
讓我們?cè)倏匆粋€(gè)栗子：

var a = []
for (var i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[3]()  // 5

為了輸出3，通常會(huì)使用閉包來(lái)處理

var a = []
for (var i = 0; i < 5; i++) {
  a[i] = (function(i){
      var j = i
      return function () {
          console.log(j)
      }
  })(i)
}
a[3]()  //3

這不僅使代碼變得冗長(zhǎng)了不少，而且的外層可以訪(fǎng)問(wèn)到i（說(shuō)明i在使用完并未被清除，內(nèi)存泄漏）

使用let聲明只在塊級(jí)作用域內(nèi)有效

var a = []
for (let i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[3]()  // 3

一些需要注意的點(diǎn) 暫時(shí)性死區(qū)

在var 聲明前使用變量，會(huì)得到undefined

console.log(abc) //undefined
var abc

但在let 聲明前使用變量，會(huì)報(bào)錯(cuò)

console.log(abc)  //錯(cuò)誤
var abc

這是由于在let的作用域中，let申明之前會(huì)形成暫時(shí)性死區(qū)，在變量定義之前，使該變量都是不可用的。

重復(fù)聲明

在塊級(jí)作用域中重復(fù)聲明會(huì)報(bào)錯(cuò)

{
var color = "black"
let color = "white"
}
//  報(bào)錯(cuò)
{
let color = "black"
var color = "white"
}
//  報(bào)錯(cuò)
{
let color = "black"
let color = "white"
}
//  報(bào)錯(cuò)

箭頭函數(shù)

箭頭函數(shù)的使用可以使書(shū)寫(xiě)更為簡(jiǎn)練

計(jì)算數(shù)組各項(xiàng)平方

let ary = [1,2,3,5]
let res = ary.map(function(item){return item*item}) //[1, 4, 9, 25]

使用箭頭函數(shù)可以簡(jiǎn)化書(shū)寫(xiě)

let ary = [1,2,3,5]
let res = ary.map((item) => {return item*item}) //[1, 4, 9, 25]

更進(jìn)一步可以省略括號(hào)（多個(gè)參數(shù)不能省略括號(hào)）

let ary = [1,2,3,5]
let res = ary.map(item => {return item*item}) //[1, 4, 9, 25]

函數(shù)可以進(jìn)一步簡(jiǎn)化成：

let ary = [1,2,3,5]
let res = ary.map(item => item * item )  //[1, 4, 9, 25]

模板字符串

模版字符串是對(duì)字符串拼接的改進(jìn)，以往輸出帶有變量的語(yǔ)句時(shí)，我們采用字符串拼接的方式，而模板字符串可以在字符串中直接使用變量，即簡(jiǎn)化書(shū)寫(xiě)同時(shí)也降低出錯(cuò)的風(fēng)險(xiǎn)

let name = "Yoda"
console.log("My name is " + name) //
console.log(`My name is ${name}`) //模板字符串

模板字符串使用反引號(hào) ( ) 來(lái)代替普通字符串中的用雙引號(hào)和單引號(hào)；

模板字符串使用包含特定語(yǔ)法(${expression})的占位符；

模板字符串可以不需換行符直接使用換行：

let name = "Yoda"
console.log(`My name is ${name}
what‘s your name`) 
// My name is Yoda
// what‘s your name

可以直接顯示計(jì)算結(jié)果

let a = 1
let b = 2
console.log(`${a} + $ = ${ a + b }) 
// 1 + 2 = 3

延展操作符

let cuboid  = [2,3,4]
let cuboidVolume = (a,b,c) => {console.log(a*b*c)}
cuboidVolume(cuboid[0], cuboid[1], cuboid[2])  //24
//延展操作符
cuboidVolume(...cuboid)
// 24

延展操作符可以將數(shù)組拆分傳作為參數(shù)入函數(shù)

延展操作符可以用于數(shù)組拼接：

let fruit  = ["orange","apple","banana"]
let meat = ["beef"]
let breakfast = [...fruit, ...meat , "bread"]
// ["orange", "apple", "banana", "beef", "bread"]

Classes（類(lèi)）與繼承

總所周知，js的原型鏈繼承向來(lái)以難以理解外加坑多著稱(chēng)
（構(gòu)造函數(shù)，原型對(duì)象，實(shí)例對(duì)象它們之間剪不斷理還亂的關(guān)系，如果再加上繼承，prototype和[[prototype]]的指向@_@說(shuō)多了都是淚?。?br>由于JS中沒(méi)有類(lèi)的概念，許多初學(xué)者都掉坑原型鏈之中。
ES6將類(lèi)引入了，大大簡(jiǎn)化了原先復(fù)雜的工作（從前要實(shí)現(xiàn)繼承得多麻煩：工廠(chǎng)模式無(wú)法解決對(duì)象識(shí)別，構(gòu)造函數(shù)模式內(nèi)存浪費(fèi)，原型模式私有方法還要結(jié)合構(gòu)造模式...）

定義

class Person {
    constructor(name,age){
        this.name = name
        this.age = age
    }
    say(){
        console.log(`Hello my name is ${this.name}`)
    }
}
//person 實(shí)例
let person = new Person("Yoda",2000)
person.name  //"Yoda"
person.say() //Hello my name is Yoda

實(shí)現(xiàn)類(lèi)的繼承，我要用到extend：

class Programmer extends Person{
    constructor(name,age, language){
        super(name,age)
        this.language = language
    }
}
let javaProgrammer = new Programmer("Jack",22,"java")
javaProgrammer.language //"java"

繼承類(lèi)可以重寫(xiě)父類(lèi)的方法：

class Programmer extends Person{
    constructor(name,age, language){
        super(name,age)
        this.language = language
    }
    say(){
        console.log(`I am a programmer using ${this.language}`)
    }
}
let javaProgrammer = new Programmer("Jack",22,"java")
javaProgrammer.say() //I am a programmer using java

云服務(wù)器 GPU云服務(wù)器入坑篇小入坑入坑到放入坑指北

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

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

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

登陸后可評(píng)論

0條評(píng)論

scq000

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SBT30100VDC-ASEMI低壓降肖特基二極管SBT30100VDC

閱讀 2570·2021-11-11 16:54
python-mqtt自動(dòng)化測(cè)試

閱讀 2810·2021-09-26 09:47
周文康的大一Python學(xué)習(xí)心得體會(huì)

閱讀 4082·2021-09-08 09:36
JimCloud-五一大促，香港美國(guó)物理機(jī)五折優(yōu)惠！400/月起 JimCloud云主機(jī)五折起!35

閱讀 2851·2021-07-25 21:37
WebWork（在主線(xiàn)程創(chuàng)建子進(jìn)程）

閱讀 1001·2019-08-30 15:54
被遺忘的CSS

閱讀 2616·2019-08-30 14:22
教你實(shí)現(xiàn)首行及首列固定 Table

閱讀 3358·2019-08-30 13:57
如何解決滾動(dòng)條scrollbar出現(xiàn)造成的頁(yè)面寬度被擠壓的問(wèn)題？

閱讀 2918·2019-08-29 17:17

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6 入坑筆記：說(shuō)說(shuō)一些新概念

相關(guān)文章

JS筆記

2017-06-23 前端日?qǐng)?bào)

**流程控制： jQ Deferred 與 ES6 Promise 使用新手向入坑！**

前端入坑體驗(yàn)與分享

vue入坑筆記（持續(xù)更新）

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

0條評(píng)論

scq000

男|高級(jí)講師

TA的文章

SBT30100VDC-ASEMI低壓降肖特基二極管SBT30100VDC

python-mqtt自動(dòng)化測(cè)試

周文康的大一Python學(xué)習(xí)心得體會(huì)

JimCloud-五一大促，香港美國(guó)物理機(jī)五折優(yōu)惠！400/月起 JimCloud云主機(jī)五折起!35

WebWork（在主線(xiàn)程創(chuàng)建子進(jìn)程）

被遺忘的CSS

教你實(shí)現(xiàn)首行及首列固定 Table

如何解決滾動(dòng)條scrollbar出現(xiàn)造成的頁(yè)面寬度被擠壓的問(wèn)題？

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6 入坑筆記：說(shuō)說(shuō)一些新概念

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！