ES6常用语法总结
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。
【1】let和const
let定义变量
const定义函数
var以后尽量少用
# 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。
# ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束
# "暂时性死区"（Temporal Dead Zone，简称 TDZ）是指在 ES6 中使用 let 或 const 声明变量时，变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。
# 在 JavaScript 中，使用 var 声明的变量在其声明语句之前就可以被访问，这种行为称为"变量提升"。而在使用 let 或 const 声明变量时，变量虽然存在于作用域中，但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。
# 暂时性死区的产生原因是，let 和 const 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化
let
for(let i = 0; i < 10; i++) {
}
console.log(i) // 报错
// 上面用let定义的i只会在for循环体有效，在循坏体外应用就会报错，let具有块级作用域的。var不存在块级作用域问题，具有全局变量提示的问题存在，
const
const a = 10；
a = 20；
console.log(a) //TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。
const用于声名一个只读的常量，常量的值不支持改变
【2】箭头函数
箭头函数和普通匿名函数有哪些不同？
- 函数体内的this对象，指向所在的对象。
- 不可以当作构造函数
- 不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数代替
- 不可以使用yield命令
ES6 允许使用“箭头”（=>）定义函数。
场景：用于替换匿名函数
基本用法
//匿名函数
div.onclick=function(){
console.log("你好")
}
//箭头函数
div.onclick=()=>{
console.log("你好")
}
有一个参数的箭头函数
var fn=(a)=>{
console.log("abc");
}
//等价于：
var fn=a=>{
console.log("abc");
}
返回值只有一行的箭头函数
var fn=a=>a+'nb'
有2个及更多参数的箭头函数
var f=(a,b,c)=>{
console.log("abc")
}
var p={
age:18,
//es6中对象方法的箭头函数表示形式
run:()=>{
setTimeout(()=>{
//this:window
console.log(this);//this是window
},100)
},
travel:function(){
//this:p
setTimeout(()=>{
console.log(this);//this是p
},100)
},
//推荐使用的方式☆☆☆：es6中对象方法的简写形式
say(){
console.log("say方法中的this：",this);
setTimeout(()=>{
console.log("say内部的延迟函数：",this);//this是p
},100)
},
}
p.run();
p.travel();
p.say();
【3】模板字符串
语法
let a=`我的名字是:${name}`
字符串和变量拼接
let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;
字符串换行
var box =`<div>
<p>
<span>123</span>
</p>
<p>${a1}</p>
</div>`;
【4】解构赋值
解构赋值允许从数组或对象中提取数据，并将其赋值给变量。
解构赋值可以方便地交换变量的值，同时还支持默认值
对象结构赋值
var obj ={ name:"abc",age:18 };
//用解构赋值的方式获取name、age
let { name } = obj; //创建了一个变量name，值=obj.name
console.log(name); //"abc"
let { age } =obj;
console.log(age); //18
函数参数结构赋值
function f1(obj){
console.log(obj.age);
console.log(obj.height)
}
//等价于
function f1({ age,height }){
console.log(age);
console.log(height)
}
f1({age:5,height:180})
【5】展开运算
展开运算符...可以将可迭代对象宅开为多个元素
// 案例1
let a={age:19,hobby:'抽烟'}
let user={name:'green',age:21,...a}
console.log(user) //{ name: 'lqz', age: 19, hobby: '抽烟' }
// 案例2
let l=[1,2,3]
let l1=[44,55,66,...l]
console.log(l1) // [ 44, 55, 66, 1, 2, 3 ]
// 案例3
# 案例3
function demo01(a,...b){
console.log(a)
console.log(b)
}
demo01(1,2,34,4)
let l=[44,5,66,7]
demo01(...l)
【6】导入导出
在创建JavaScript模块时，export 用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import使用它们。
被导出的绑定值依然可以在本地进行修改。
在使用import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。
exports
ES6模块只支持静态导出，只可以在模块的最外层作用域使用export，不可在条件语句与函数作用域中使用。
Named exports (命名导出)
这种方式主要用于导出多个函数或者变量, 明确知道导出的变量名称。
使用：只需要在变量或函数前面加 export 关键字即可。
使用场景：比如 utils、tools、common 之类的工具类函数集，或者全站统一变量等。
- export 后面不可以是表达式，因为表达式只有值，没有名字。
- 每个模块包含任意数量的导出。
// 1 命名导出
export let name='green'
export function add(a,b){
return a+b
}
export const age=100
// 2 导入
// 2.1 命名导出的导入
import {add,age} from './green/utils.js'
console.log(add(8,9))
console.log(age)
// 2.2 命名导出的导入
<script type="module">
import * as xx from './green/utils.js'
console.log(xx.add(8,9))
console.log(xx.age)
</script>
// 2.3 命名导出的导入
<script type="module">
// 命名导出的导入
import {add as myadd} from './lqz/utils.js'
console.log(myadd(8,9))
</script>
Default exports (默认导出)
这种方式主要用于导出类文件或一个功能比较单一的函数文件；
使用：只需要在变量或函数前面加 export default 关键字即可。
- 每个模块最多只能有一个默认导出；
- 默认导出可以视为名字是
default的模块输出变量； - 默认导出后面可以是表达式，因为它只需要值。
导出一个值：
export default 123;
导出一个函数：
// myFunc.js
export default function () { ... };
// index.js
import myFunc from 'myFunc';
myFunc();
导出一个类：
// MyClass.js
class MyClass{
constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };
// index.js
import MyClass from 'MyClass';
export default 与 export 的区别：
- 不需要知道导出的具体变量名；
- 导入【import】时不需要 { } 包裹；