es6语法总结

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】箭头函数

箭头函数和普通匿名函数有哪些不同？

1. 函数体内的this对象，指向所在的对象。
2. 不可以当作构造函数
3. 不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数代替
4. 不可以使用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 之类的工具类函数集，或者全站统一变量等。

1. export 后面不可以是表达式，因为表达式只有值，没有名字。
2. 每个模块包含任意数量的导出。

// 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 关键字即可。

1. 每个模块最多只能有一个默认导出；
2. 默认导出可以视为名字是default的模块输出变量；
3. 默认导出后面可以是表达式，因为它只需要值。

导出一个值：

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】时不需要 { } 包裹；