ES6基礎

BigTomato 發布于2019-08-23 16:57 / 839人閱讀

一、塊級作用域 1. var

首先看看ES5中得變量聲明方式

if (true) {
    var a = 2
}
console.log(a) // 2

以上代碼等同于

var a
if (true) {
    a = 2
}
console.log(a)

以上可知：

在塊內部定義變量變量提升，到函數最頂部

通過var聲明的變量，無論在何處聲明，均為全局作用域

2.let 和 const

再來看看ES6中的let和const

let

if (true) {
    let b = 2
}
console.log(b) // b is not defined

此時在{} 外部訪問b 將會報錯，因為 let 的作用域僅為 { } 的內部，及塊級作用域

const

if (true) {
    const c = 2
}
console.log(c) // c is not defined

從上面可知 const 也是也僅為塊級作用域const的作用域與let作用域相同：只在聲明所在的塊級作用域內有效

讓我們看看const 更多的特性：

const 表示常量：

const d = 2
d = 3 // Assignment to constant variable.

此時，當 d 為 基本數據類型的時候，改變其值，將會報錯！！！

但是它的常量僅僅表示的是地址常量對象的成員可以改變值

看看下面的例子：

const people = {name: "張三", age: 23}
people.age = 25
console.log(people) // {name: "張三", age: 25}

看看此時 people已經被改變了

why?

對象是復雜的數據類型 它的地址保存在 棧里面， 值保存在堆里面cosnt僅僅是保證這個地址不改變，至于地址對應的數據，是可以進行改變的
基本類型值在內存中占據固定大小的空間 因此被保存在棧內存中。比如 const a = 1 ; 這時候其直接保存在棧里面

二、字符串 1. 字符串拼接 ES5中字符串拼接

// ES5 
var name = "Hunter"
console.log("hello " + name)

ES6中字符串拼接

// ES6
let name = "Hunter"
console.log(`hello ${name}`) // hello Hunter

注意：用 ${}來拼接字符串，注意此時要使用 ` `（反單引號）; 如下所示：單引號將無法將其轉義

console.log("hello ${name}") // hello ${name}

ES6的字符串換行

// ES5
    var template = " 
                        hello world 
                    "
// ES6
    let template2 = ` 
                        hello world
                    
`

ES5中需要用反斜杠來進行多行字符串拼接，ES6直接使用  ` `(反單引號）

2. 字符串方法 padStart() 和 padEnd()

ES6 引入了字符串補全長度的功能，如果某個字符串不夠指定長度，會在頭部或者尾部補全。

padStart() 用于頭部補全；

padEnd() 用于尾部補全。

如下一個例子：例子來源

 setInterval(() => {
        const now = new Date()
        const hours = now.getHours().toString()
        const minutes = now.getMinutes().toString()
        const seconds = now.getSeconds().toString()
        console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
    }, 1000)

先不管箭頭函數

看看其中的hours.padStart(2,0) , 表示當小時不夠兩位數時，在前面補0，如8，補充成 08

后面遇到更多的字符串函數會補充

三、變量的解構賦值

// ES5
let a = 1;
let b = 2;
let c = 3;

?1.ES6數組解構賦值

let [a,b,c] = [1,2,3];
console.log(`${a} ${b} ${c}`) // 1 2 3

默認值?

let [d = 2, e] = [undefined, 3];
console.log(`$jtxb5hj ${e}`) // 2 3

當賦值為undefined時取默認值 當賦值為其他的有效值或者null時 取所賦值的值

let [f = 2, g = 3] = [null, 4];
console.log(`${f} ${g}`) // null 4

2.對象解構賦值

數組按照順序解構 對象按照key值進行解構

let {foo, bar} = {foo: "hi", bar: "hello"} //可以調換位置
console.log(`${foo} ${bar}`) *// hi hello

注意：先定義再解構需要在解構語句那塊加上圓括號

let soso;
// { soso } = { soso: "hi"}; // 錯誤
({ soso } = { soso: "hi"}); //得加上圓括號 ()
console.log(soso) // hi

3.字符串的解構賦值

const [h,i,j,k,l] = "hello";
console.log(`${h} ${i} ${j} ${k} ${l}`)

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

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

前端基礎進階（十四）：es6常用基礎合集

摘要：在繼承的構造函數中，我們必須如上面的例子那么調用一次方法，它表示構造函數的繼承，與中利用繼承構造函數是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實際開發中，ES6已經非常普及了。掌握ES6的知識變成了一種必須。盡管我們在使用時仍然需要經過babel編譯。 ES6徹底改變了前端的編碼風格，...

Ryan_Li 2019-08-21 18:31 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

摘要：下載地址安裝一個好用的命令行工具在環境下，系統默認的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

Lowky 2019-08-21 18:31 評論0 收藏0
ES6零基礎教學_解析彩票項目-學習筆記（一）

摘要：彩票項目實戰學習記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業務邏輯，自動構建系統，模擬數據和真實數據接口處理。彩票項目實戰學習記錄（一）完整走了一遍課程，覺得還不錯。總結: es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。完整還原了項目開發的代碼設計和開發過...

blastz 2019-08-22 13:52 評論0 收藏0
es6基礎0x010：增強的對象字面量

摘要：概述在中，對象字面量的語法被增強了更短的屬性聲明如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略之前更短的函數聲明如果屬性的屬性名和屬性值函數的函數名一致或者屬性值函數沒有函數名，可以省略關鍵字和屬性名之前可動態計算的屬性名屬性名可以 0x000 概述在es6中，對象字面量的語法被增強了 0x001 更短的屬性聲明如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略 let...

fox_soyoung 2019-08-23 13:09 評論0 收藏0
【前端】ES6入門基礎知識

摘要：關于的入門了解新增模板字符串為提供了簡單的字符串插值功能箭頭函數操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值。將對象納入規范，提供了原生的對象。增加了和命令，用來聲明變量。關于ES6的入門了解新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數（操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 評論0 收藏0