ES6的常用语法

心已赠人 2021-11-16 14:52 386阅读 0赞

[转载文章地址][Link 1]

## var ##

之前，js定义变量只有一个关键字：var

var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。

例如这样的一段代码：

for(var i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("循环外：" + i)

你猜下打印的结果是什么？  
![在这里插入图片描述][20190217131801947.png]

## 于是就有了let ##

let所声明的变量，只在let命令所在的代码块内有效。

我们把刚才的var改成let试试：

for(let i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("循环外：" + i)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU1Njk2Mw_size_16_color_FFFFFF_t_70]

## 还有一个常量const ##

const声明的变量是常量，不能被修改  
![在这里插入图片描述][20190217132437531.png]

## 重要的表达式（解构表达式） ##

**数组解构**  
比如有一个数组：

let arr = [1,2,3]

我想获取其中的值，只能通过角标。ES6可以这样：

let [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
    // 然后打印
    console.log(x,y,z);

![在这里插入图片描述][20190217132942331.png]  
**对象解构**  
例如有个person对象：

const person = {
        name:"jack",
        age:21,
        language: ['java','js','css']
    }

我们可以这么做：

// 解构表达式获取值
    const {name,age,language} = person;
    // 打印
    console.log(name);
    console.log(age);
    console.log(language);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU1Njk2Mw_size_16_color_FFFFFF_t_70 1]  
如过想要用其它变量接收，需要额外指定别名：  
![在这里插入图片描述][20190217133130644.png]  
\{name:n\}：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。

## 质的改变（函数优化） ##

**函数参数默认值**  
在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：

function add(a , b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));

现在可以这么写：

function add(a , b = 1) {
        return a + b;
    }
    // 传一个参数
    console.log(add(10));

**箭头函数（类lamada表达式（单）箭头改成双箭头）**  
ES6中定义函数的简写方式：

一个参数时：

var print = function (obj) {
        console.log(obj);
    }  
    function print (obj) {
        console.log(obj);
    }
    // 简写为：
    var print2 = obj => console.log(obj);

多个参数：

// 两个参数的情况：
    var sum = function (a , b) {
        return a + b;
    }
    // 简写为：
    var sum2 = (a,b) => a+b;

代码不止一行，可以用\{\}括起来

var sum3 = (a,b) => {
        return a + b;
    }

**对象的函数属性简写**  
比如一个Person对象，里面有eat方法：

let person = {
        name: "jack",
        // 以前：
        eat: function (food) {
            console.log(this.name + "在吃" + food);
        },
        // 箭头函数版：
        eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
        // 简写版：
        eat3(food){
            console.log(this.name + "在吃" + food);
        }
    }

**箭头函数结合解构表达式**  
比如有一个函数：

const person = {
        name:"jack",
        age:21,
        language: ['java','js','css']
    }

function hello(person) \{  
console.log(“hello,” + [person.name][])  
\}

如果用箭头函数和解构表达式

var hi = ({name}) =>  console.log("hello," + name);

## 模块化 ##

**什么是模块化**

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。

而JS中没有包的概念，换来的是 模块。

模块功能主要由两个命令构成：export和import。

*  export命令用于规定模块的对外接口，
 *  import命令用于导入其他模块提供的功能。

**export**

比如我定义一个js文件:hello.js，里面有一个对象：

const util = {
        sum(a,b){
            return a + b;
        }
    }

我可以使用export将这个对象导出：

const util = {
        sum(a,b){
            return a + b;
        }
    }
    export util;

当然，也可以简写为：

export const util = {
        sum(a,b){
            return a + b;
        }
    }

export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

当要导出多个值时，还可以简写。比如我有一个文件：user.js：

var name = "jack"
    var age = 21
    export {name,age}

省略名称

上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。

因此js提供了default关键字，可以对导出的变量名进行省略

例如：

// 无需声明对象的名字
    export default {
    	sum(a,b){
            return a + b;
        }
    }

这样，当使用者导入时，可以任意起名字

**import**

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

例如我要使用上面导出的util：

// 导入util
    import util from 'hello.js'
    // 调用util中的属性
    util.sum(1,2)

要批量导入前面导出的name和age：

import {name, age} from 'user.js'
    console.log(name + " , 今年"+ age +"岁了")

[Link 1]: https://blog.csdn.net/weixin_41556963/article/details/87530020
[20190217131801947.png]: /images/20211116/e601d6d7f46e4956808c02ffce53d45c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU1Njk2Mw_size_16_color_FFFFFF_t_70]: /images/20211116/0bbd6531c2204ff1a40dc467895e38db.png
[20190217132437531.png]: /images/20211116/221c1029849d45db9abb2f521b1608f9.png
[20190217132942331.png]: /images/20211116/a173128828ad467396ba14b0f3442bc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU1Njk2Mw_size_16_color_FFFFFF_t_70 1]: /images/20211116/1691866e6849412db80c2a14e949e2f2.png
[20190217133130644.png]: /images/20211116/bf50fcebf30c451b86a8c9e20f35c6b8.png
[person.name]: http://person.name