第3章 ES6语法简介（读书笔记）

3.1 块作用域构造let和const

块级声明用于声明在指定块的作用域之外无法访问的变量
块级作用域存在于：

• 内部函数
• 块中 （字符{}之间的区域）

3.1.1 let声明

• JS的变量提升机制：var 声明的变量，无论在哪里声明，都会被当成在当前作用域顶部声明的变量
• let 声明的变量不会被提升，可以把变量的作用域限制在当前代码块中
• 同一作用域内，不能使用let重复定义已经存在的标识符，如果在不同的作用域下则是可以的

3.1.2 const声明

• 声明常量关键字const，必须在声明常量的时候同时进行初始化
• 在同一作用域下用const声明已经存在的标识符也会导致语法错误，无论该标识符是使用var还是let声明的
• const声明对象，对象本身的绑定不能修改，但对象的属性和值是可以修改的

const person = { 
	name :"zhangsan" 
};
person.name="lisi";
person.age=20;

//error
person ={
	name="xxx"
	};

3.1.3 全局块作用域绑定

• 在全局作用域中使用var声明的变量或对象，将作为浏览器环境中的window对象的属性，这意味着使用var很可能会无意中覆盖一个已经存在的全局属性
• 如果在全局作用域下使用let 或const，则会在全局作用域下创建一个新的绑定，但该绑定不会成为window对象的属性
• 如果不想为全局window创建属性，或者为了避免覆盖window对象的属性，则应该使用let和const来声明变量

3.2模板字面量

ES6引入了模板字面量，对字符串的操作进行了增强方式：

• 多行字符串
• 字符串占位

3.2.1多行字符串
模板字面量的基础语法就是用反引号（`）来替换字符串的单双引号如果想要在字符串中使用反引号，只要加一个\转义即可
在ES5中，如果要多行书写，需要在行末加\或者使用+，换行则需要使用换行符
但是在ES6中，直接换行即可，（与平时打字差不多）

注意：在反引号中的所有空白字符（包括但不限于空格、换行、制表符）都属于字符串的一部分

3.2.2字符串占位符
在一个模板字面量中，可将JS变量或者任何合法的JS表达式嵌入占位符中并将其作为字符串的一部分输出到结果中。
占位符： $ { 变量或者JS表达}
模板字面量本身也是JS表达式，因此也可以在一个模板字面量中嵌入另一个模板字面量

3.3默认参数

ES5中为参数指定默认值的时候需要在前面加上括号内容（typeof url !='undefined'）？timeout：3000，否则当参数传进来是0时，timeout依旧会被赋予3000
ES6中可以直接在参数列表中为形参指定默认值
funtion make(url='/home', timeout = 30000)

若有函数如下
funtion make(url='/home', timeout = 30000，callback){ }
则有

//使用默认值
make();
//使用默认值
make(undefined,undefined,function(){});
//使用timeout的默认值
make("/login");
//使用url的默认值，为一个具有默认值的参数传值null是合法的
make("/login",null,function(){});

3.4rest参数（还不是很懂）

在函数命名参数前添加三个点（…），就表明这是一个rest参数，用于获取函数的多余参数，rest参数是一个数组，包含着自他之后传入的所有参数
注：每个函数最多只能声明一个rest参数，并且它只能是最后一个参数

3.5展开运算符

展开运算符也是三个点（…）,可以将一个数组转化为各个独立的参数，也可用于取出对象的所有可遍历属性
rest则是指定多个独立参数，并通过整合后的数组来访问
在需要复制一个新的数组对象时，可以使用展开运算符来便捷地实现（单纯的=，是会关联改变的）

展开运算符也可以用来合并数组

let arr1 =['a'];
let arr2 =['b','c'];
console.log([..arr1,...arr2])//['a','b','c']

展开运算符还可以用于取出对象的所有可遍历属性，复制到当前对象中

let book ={
	title:"hello",
	price:99
}
let book1 = {...book,desc:"a good book"}

3.6对象字面量语法扩展

3.6.1属性初始值的简写
当一个对象的属性与本地变量同名时，可以不用写冒号和值，简单地只写属性名即可
let name="zhangsan" let age =18; var person = {name,age};

3.6.2对象方法的简写
ES6中定义对象方法时可以省略冒号和function关键字

var car ={
	color:"red",
	doors:4,
	showColor（）{

	}
}

car.showColor.name其值为圆括号前面的名称，在本例中name的属性值为showColor

3.6.3可计算的属性名
在JS中，访问对象的属性可以通过点号或者方括号，如果属性名包含了特殊字符或者中文，亦或需要通过计算得到属性名，则只能使用方括号。

let suffix = "name";
let  person = { };
person[""first name"]= "san";
person["last "+suffix]="zhang";
person.age=20;

采用对象字面量的语法来定义对象，在ES6中则可以使用代有表达式的属性名

let suffix = "name";
let person ={
	["first"+suffix]= "san";
	age =20
}

3.7解构赋值

3.7.1对象解构

let book ={
	title:"ok",
	price:30
}
let {title,price} = book;//这句话就会赋相应的值
let {}右边必须提供值，否则会报错

如果变量是已经声明过的，那么要用圆括号哦

let book ={
 title:"ok",
 price:30
}
let title,price;
({title,price} = book);
原因是JS引擎将一对开放的花括号视为一个代码块，
但是语法规定，代码块语句不允许出现在赋值语句的左侧
添加圆括号后可以转化成一个表达式

给变量赋值并且向函数传参

let book ={
 title:"ok",
 price:30
}
function a(book){
}

a({title,price} = book);
//给title、isbn变量赋值后，因解构表达式的值是“=”右侧的值，
//所以此处向a()函数传递的参数是book对象

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined，所以可以考虑为该变量定义一个默认值

如果希望在使用解构赋值时，使用与对象属性名不同的局部变量名字，那么可以采用“属性名：局部变量名”的语法形式

let book ={
 title:"ok",
 price:30
}
let {title：bookTitle,price} = book；
注意：bookTitle是局部变量名
title：bookTitle的含义是：取title的属性并将其值存储到变量bookTitle中

嵌套的情况呢

let book ={
 title:"ok",
 price:30，
 category：{
 	id:1,
 	name:"web前端"
 }
}
let {title：bookTitle,price，category:{name:category}} = book；
注意：category:{name:category}被赋值的是第二个category

也可以和展开符一起用（有点懒，不想写了）

也就是let {...newObject} = person;

3.7.2数组解构

let arr = [1,2,3];
let [a,b,c] = arr;

在数组解构语法中，变量值是根据数组中元素的顺序进行选取的，如果要获取指定位置的数组元素值，可以只为该位置的元素提供变量名。

let arr = [1,2,3];
let [,,c] = arr;

与对象解构不同，已经声明过的变量进行数组解构赋值不需要圆括号

let arr = [1,2,3];
let a,b,c;
[a,b,c] = arr;

（这里偷懒了！有些没写，下次回来补）

3.8箭头函数

3.8.1箭头函数的语法
函数没有参数

let welcome = () =>"welcome you";
function welcome(){
 return "welcome you";
}
`

单一的参数、函数体只有一条语句的箭头函数定义如下

let welcome = msg =>msg;

function welcome(msg){
	return msg;
}