ES6 入坑筆記：說說一些新概念

scq000 發布于2019-08-20 10:21 / 2042人閱讀

摘要：雖然現在還需要借助的力量但未來一定是屬于。將類引入了，大大簡化了原先復雜的工作從前要實現繼承得多麻煩工廠模式無法解決對象識別，構造函數模式內存浪費，原型模式私有方法還要結合構造模式定義實例實現類的繼承，我要用到繼承類可以重寫父類的方法

雖然現在還需要借助babel的力量但未來一定是屬于ES6。（那ES7？-_-|||）

let

在ES6之前javascript只有兩種作用域，即全局作用域和函數作用域，let的出現彌補JS了沒有塊作用域的痛點

let的塊作用域

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

讓我們和var做一下對比

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

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

如上由于var不產生塊作用域所以if語句中的var mew = "..."相當于覆蓋了函數中第一個mew（即函數作用域中的）所以在次輸出mew是"..."

應用

上述例子中，通過let的使用可以避免變量被不必要地覆蓋
讓我們再看一個栗子：

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

為了輸出3，通常會使用閉包來處理

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

這不僅使代碼變得冗長了不少，而且的外層可以訪問到i（說明i在使用完并未被清除，內存泄漏）

使用let聲明只在塊級作用域內有效

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

一些需要注意的點 暫時性死區

在var 聲明前使用變量，會得到undefined

console.log(abc) //undefined
var abc

但在let 聲明前使用變量，會報錯

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

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

重復聲明

在塊級作用域中重復聲明會報錯

{
var color = "black"
let color = "white"
}
//  報錯
{
let color = "black"
var color = "white"
}
//  報錯
{
let color = "black"
let color = "white"
}
//  報錯

箭頭函數

箭頭函數的使用可以使書寫更為簡練

計算數組各項平方

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

使用箭頭函數可以簡化書寫

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

更進一步可以省略括號（多個參數不能省略括號）

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

函數可以進一步簡化成：

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

模板字符串

模版字符串是對字符串拼接的改進，以往輸出帶有變量的語句時，我們采用字符串拼接的方式，而模板字符串可以在字符串中直接使用變量，即簡化書寫同時也降低出錯的風險

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

模板字符串使用反引號 ( ) 來代替普通字符串中的用雙引號和單引號；

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

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

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

可以直接顯示計算結果

let a = 1
let b = 2
console.log(`${a} + ${b} = ${ 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

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

延展操作符可以用于數組拼接：

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

Classes（類）與繼承

總所周知，js的原型鏈繼承向來以難以理解外加坑多著稱
（構造函數，原型對象，實例對象它們之間剪不斷理還亂的關系，如果再加上繼承，prototype和[[prototype]]的指向@_@說多了都是淚啊）
由于JS中沒有類的概念，許多初學者都掉坑原型鏈之中。
ES6將類引入了，大大簡化了原先復雜的工作（從前要實現繼承得多麻煩：工廠模式無法解決對象識別，構造函數模式內存浪費，原型模式私有方法還要結合構造模式...）

定義

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

實現類的繼承，我要用到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"

繼承類可以重寫父類的方法：

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

GPU云服務器云服務器入坑篇小入坑入坑到放入坑指北

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80101.html

JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
2017-06-23 前端日報

摘要：前端日報精選大前端公共知識梳理這些知識你都掌握了嗎以及在項目中的實踐深入貫徹閉包思想，全面理解閉包形成過程重溫核心概念和基本用法前端學習筆記自定義元素教程阮一峰的網絡日志中文譯回調是什么鬼掘金譯年，一個開發者的好習慣知乎專 2017-06-23 前端日報精選大前端公共知識梳理：這些知識你都掌握了嗎？Immutable.js 以及在 react+redux 項目中的實踐深入貫徹閉包思...

Vixb 2019-08-20 17:28 評論0 收藏0
流程控制： jQ Deferred 與 ES6 Promise 使用新手向入坑！

摘要：謝謝大大指出的關于中用的不到位的錯誤，貼上大大推薦的文章中的菜鳥和高階錯誤，文章很詳細說明了一些使用中的錯誤和指導。另外更正內容在后面補充。從開始說到異步流程控制，之前用的比較多的是的。 showImg(https://segmentfault.com/img/remote/1460000006771934); 謝謝n?i?g?h?t?i?r?e?大大指出的關于Promise中catc...

tomlingtm 2019-08-19 18:16 評論0 收藏0
前端入坑體驗與分享

摘要：同源策略同源策略是一種約定，由公司年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到等攻擊。一、Vue變化檢測背景初始化對象，屬性未知；某些事件觸發時，對象改變（新增屬性），Vue監聽不到原因 Vue.js 不能檢測到對象屬性的添加或刪除，因為Vue.js 在初始化實例時將屬性轉為 getter/setter，所以屬性必須在 dat...

hss01248 2019-08-22 18:09 評論0 收藏0
vue入坑筆記（持續更新）

摘要：如果我們能把不同路由對應的組件分割成不同的代碼塊，只在路由被訪問的時候才加載對應的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。一、代碼分割,讓頁面按需加載，加快首屏速率 vue.js構建單頁應用雖然能通過路由來實現多頁面效果，但是實際上打包后所有的代碼都只有一個入口文件app.bundle.js,當項目變得十分龐大的時候，app.bun...

tanglijun 2019-08-21 18:28 評論0 收藏0