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)。