ES5與ES6經常使用語法教程之 ②解構語法糖、聲明變量異同

js經常使用語法系列教程以下

• es5與es6經常使用語法教程(1)
• es5與es6經常使用語法教程(2)
• es5與es6經常使用語法教程(3)
• es5與es6經常使用語法教程(4)
• es5與es6經常使用語法教程(5)
• es5與es6經常使用語法教程(6)
• es5與es6經常使用語法教程(7)

這部分教程咱們主要講解如下幾個經常使用語法

• 如何建立對象，如何給對象添加屬性和方法
• var 與 let 申明變量時的異同點
• 解構對象
• 解構數組
• 解構函數參數

如何建立對象，如何給對象添加屬性和方法

 1 componentDidMount() {
 2 
 3     // 建立一個小明對象
 4     let xiaoming = {}
 5 
 6     // 給小明這個對象添加屬於他的屬性
 7     xiaoming.name = 'XiaoMing'
 8     xiaoming.age = 20
 9     xiaoming.height = 180
10 
11     // 給小明這個對象添加屬於他的方法
12     xiaoming.eat = () => {console.log('eat')}
13     xiaoming.learn = () => {console.log('learn RN')}
14 
15     // 獲取小明的名字
16     console.log(xiaoming.name)
17 
18     // 調用小明本身的方法
19     xiaoming.eat()
20     xiaoming.learn()
21 
22     // 打印小明對象看看效果吧
23     console.log(xiaoming)
24   }

 

日誌

 

obj

 

var 與 let 申明變量時的區別

• 只申明變量不賦值，表現相同

1 (function() {
2   var varVariable
3   let letVariable
4   console.log(varVariable) // 輸出 undefined
5   console.log(letVariable) // 輸出 undefined
6 }())

 

• 使用未聲明的變量時，表現相同

1 (function() {
2   console.log(varTest) // 輸出 undefined
3   console.log(letTest) // 輸出 undefined
4 
5   var varTest = 'varTest'
6   let letTest = 'varTest'
7 }())

 

• 重複聲明同一個變量時，表現不一樣

 1 (function() {
 2 
 3   var varTest = 'test var OK.'
 4   let letTest = 'test let OK.'
 5 
 6   var varTest = 'varTest changed.'
 7   let letTest = 'letTest changed.' // 直接報錯：SyntaxError:Identifier 'letTest' has already been declared
 8   
 9   console.log(varTest) // 輸出 varTest changed，覆蓋掉了以前的值：test
10   // var OK.
11   console.log(letTest)   
12 }())

 

• 變量做用域，表現不一樣

 1 var xx
 2 
 3 const test = () => {
 4   var aa // 聲明一
 5   let bb //聲明二
 6   this.cc //聲明三
 7 
 8   // 聲明一局部代碼塊
 9   {
10     let dd //聲明四
11   }
12 }

 

區別

• let 聲明的變量做用域爲某個代碼塊。而代碼塊的長度可大可小。也就是說，當按聲明二的方式聲明一個變量時，該變量的做用範圍於爲整個function語句。當按聲明四方式聲明一個變量時，該變量的做用範圍爲局部的代碼塊。
• var 聲明的變量做用域爲整個函數體(當按聲明一的方式聲明變量時)；當var變量聲明在函數外，該var變量的做用域爲整個js文件週期（全局做用域）。

那麼，用this聲明的變量呢？

• 簡單地說，用this聲明的變量做用域也是全局的。若是實例化test函數 var p=new test() 那麼用p能訪問test函數內的哪些變量呢？答案是隻有cc 。實際上this聲明的變量是做用於上下文的。

任何函數中的this表明調用該函數的對象，若是沒有任何對象調用該函數（直接讓函數執行），那麼就至關因而window對象調用該函數執行（其中的this就表明window對象）

 

var 與 let 總結

• 使用 var 申明的變量，能夠重複申明，只是後申明的會覆蓋前面申明的
• 使用 let 申明的變量，不可以重複申明，重複申明直接報錯
• 使用 let 聲明變量，該變量的做用範圍限於聲明它的代碼塊中
• 若是未在 var \ let 語句中初始化變量，則將自動爲其分配 JavaScript 值 undefined

解構對象

1 const breakfast = () => {
2   return {dessert: '🎂', drink: '🍵', fruit: '🍎'}
3 }
4 
5 let {dessert: dessert, drink: drink,  fruit: fruit} = breakfast()
6 
7 console.log(dessert) // 輸入 🎂
8 console.log(drink) // 輸入 🍵
9 console.log(fruit) // 輸入 🍎

 

咱們能夠將上面的解構對象簡化

1 const breakfast = () => {
2   return {dessert: '🎂', drink: '🍵', fruit: '🍎'}
3 }
4 
5 let {dessert, drink, fruit} = breakfast()
6 
7 console.log(dessert) // 輸入 🎂
8 console.log(drink) // 輸入 🍵
9 console.log(fruit) // 輸入 🍎

 

解構數組

• 常規數組取值方法

 1 const breakfast = () => {
 2   return [🎂, 🍵, 🍎]
 3 }
 4 
 5 var tmpArr =  breakfast()
 6 dessert = tmpArr [0]
 7 drink = tmpArr [1]
 8 fruit  = tmpArr [2]
 9 
10 console.log(dessert) // 輸出 🎂
11 console.log(drink) // 輸出 🍵
12 console.log(fruit) // 輸出 🍎

 

• 使用解構語法

1 const breakfast = () => {
2   return [🎂, 🍵, 🍎]
3 }
4 let [dessert, drink, fruit] = breakfast()
5 
6 console.log(dessert) // 輸出 🎂
7 console.log(drink) // 輸出 🍵
8 console.log(fruit) // 輸出 🍎

 

解構函數參數

1 const breakfast = (dessert, drink,  {locaiotn, restaurant} = {}) => {
2   console.log(dessert, drink, locaiotn, restaurant) // 輸出：🍰 🍺 濟南 星巴克
3 }
4 
5 breakfast ('🍰', '🍺', {locaiotn: '濟南', restaurant: '星巴克'})

解構參數必須傳參

解構參數與通常的參數不一樣點在於，它是一個必需要傳值的參數，若是不傳，則會引起程序報錯：

function setCookie(name, value, {secure, path, domain, expires}) {
    console.log(expires);
    //其餘代碼
}

setCookie('type', 'js'); // Uncaught TypeError: Cannot destructure property `secure` of 'undefined' or 'null'.

 

緣由是爲何呢？是由於解構參數存在的函數，當咱們在調用setCookie()的時候，函數內部實際上是這樣的：

function setCookie(name, value, options) {

    let {secure, path, domain, expires} = options; //這是引擎背後作的

    console.log(expires);
    //其餘代碼
}

用於結果的對象若是是null或者undefined，則程序會報錯，因此當咱們不給解構參數傳值的時候，會引起了程序報錯。
爲了解決以上問題，咱們須要在定義函數的時候，給解構參數提供默認值：

function setCookie(name, value, {secure, path, domain, expires} = {}) {} setCookie('id', 'mike'); //有了默認值，便不會報錯 {} 爲解構參數的默認值

 

給解構參數屬性設置默認值

let defaultOptions = {
    secure: true,
    path: '/example',
    domain: 'test',
    expires: 60
};

function setCookie(name, value, {
    secure = defaultOptions.secure,
    path = defaultOptions.path,
    domain = defaultOptions.domain,
    expires = defaultOptions.expires
} = defaultOptions) {
    console.log(secure); //true
    console.log(path); //example
    console.log(domain);//test
    console.log(expires);//30
}

setCookie('id', 'mike', {path: '/example', domain: 'test', expires: 30});

給解構參數的屬性設置默認值和通常對象的解構設置默認值是同樣的，也是在用等號=給屬性賦值。
這裏特別要注意的是，若是隻是單純地給解構參數的屬性設置默認值，而不給整個解構參數設置默認值，依然不能解決相似於setCookie('id', 'mike')這樣不傳參所引起的代碼報錯問題，因此不要忘了給整個解構參數設置默認值（也就是這個例子裏面的
= defaultOptions)。