【Vue.js 知识量化】ES6 语法积累

矫情吗；* 2023-01-24 02:18 5阅读 0赞

### ES6 语法 ###

*  let / var
 *  const 的使用
 *  class、extends、super
 *  箭头函数（arrow function）
 *  模版字符串（template string）
 *  结构（destructuring）
 *  default、rest
 *  ES6 module
 *   *  import、export
     *  其他语法
 *  Promise
 *  参考

不定时更新，慢慢积累…

# let / var #

> 事实上 var 的设计可以看成 JavaScript 语言设计上的错误，这种错误多半不能修复和移除，因为需要向后兼容
> 
>  *  大概十年前，Brendan Eich 就决定修复这个问题。于是他添加了一个新的关键字 let
>  *  我们可以将 let 看成更完美的 var

**块级作用域**：

*  JS 中使用 var 来声明一个变量时，变量的作用域主要是和函数的定义有关
 *  针对于其他块定义来说是没有作用域的，比如 if / for 等，这在开发中往往会引起一些问题

以前解决 **块级作用域** 问题的方法：

ES6 解决 **块级作用域** 问题的方法：

const btns = document.getElementsByTagName('button')
 for (let i = 0; i < btns.length; i++) { 
 btns[i].addEventListener('click', function () { 
 console.log('第' + i + '个按钮被点击');
 })
 }

# const 的使用 #

> 在很多语言中已经存在，比如 C/C++ 中，主要的作用是**将某个变量修饰为常量**

在 JavaScript 中也是如此，使用 const 修饰的标识符为常量。不可以再次赋值

什么时候使用 const 呢?

*  当我们修饰的标识符不会被再次赋值时，就可以使用 const 来保证数据的安全性

**建议：在 ES6 开发中，优先使用 const，只有需要改变某一个标识符的时候才使用 let**

const 注意点：

*  const 注意一：const 修饰的变量不可修改值
    
        const a = 20;
        a = 30; // 错误,不可以修改
 *  const 注意二：const 修饰的变量必须赋初值
    
        const name; // 错误,cons修饰的变量必须赋初值

const 有一个很好的应用场景，就是当我们引用第三方库时声明的变量，用 const 来声明可以避免未来不小心重命名而导致出现 bug：

const monent = require('moment')

# class、extends、super #

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念。新的 class 写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

class Animal { 
        constructor(){ 
            this.type = 'animal'
        }
        says(say){ 
            console.log(this.type + ' says ' + say)
        }
    }
     
    let animal = new Animal()
    animal.says('hello') //animal says hello
     
    class Cat extends Animal { 
        constructor(){ 
            super()
            this.type = 'cat'
        }
    }
     
    let cat = new Cat()
    cat.says('hello') //cat says hello

# 箭头函数（arrow function） #

ES6 最常用的特性之一，用它写 function 比原来的写法简洁清晰很多。

function(i){  
    	return i + 1; 
    } //ES5

i => i + 1 //ES6 或一个参数时省略为 i=>i+1

如果函数比较复杂，则需要用 `{}` 把代码包起来：

function(x, y) {  
        x++;
        y--;
        return x + y;
    }

(x, y) => { 
    	x++; 
    	y--; 
    	return x+y
    }

--------------------

JavaScript 语言的 this 对象一直是一个令人头痛的问题，在对象方法中使用 this，必须非常小心：

class Animal { 
        constructor(){ 
            this.type = 'animal'
        }
        says(say){ 
            setTimeout(function(){ 
                console.log(this.type + ' says ' + say)
            }, 1000)
        }
    }
     
    var animal = new Animal()
    animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为 setTimeout 中的 this 指向的是全局对象（闭包中的未定义变量，默认指向全局作用域）。所以为了让它能够正确的运行，传统的解决方法有两种：

1.  **将 this 传给 self，再用 self 来指代 this**

says(say){ 
    	var self = this;
    	setTimeout(function(){ 
    		console.log(self.type + ' says ' + say)
    	}, 1000)

1.  **使用 `bind(this)`**

says(say){ 
    	setTimeout(function(){ 
    		console.log(this.type + ' says ' + say)
    	}.bind(this), 1000)

现在有了箭头函数，就不需要这么麻烦了：

class Animal { 
        constructor(){ 
            this.type = 'animal'
        }
        says(say){ 
            setTimeout( () => { 
                console.log(this.type + ' says ' + say)
            }, 1000)
        }
    }
    var animal = new Animal()
    animal.says('hi')  //animal says hi

使用箭头函数时，函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象；原因是**箭头函数根本没有自己的 this，它的 this 是继承外面的，因此内部的 this 就是外层代码块的this**。

# 模版字符串（template string） #

传统的使用 `+` 和 `"` 字符串拼接：

$("#result").append(
 "There are " + basket.count + " " +
 "items in your basket, " +
 "" + basket.onSale +
 " are on sale!"

ES6 的新特性模板字符串：使用 `${}` 来引用变量

$("#result").append(` There are ${ basket.count} items in your basket, ${ basket.onSale} are on sale! `);

# 结构（destructuring） #

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 **解构**

ES5 的写法：

let cat = 'ken'
    let dog = 'lili'
    let zoo = { cat: cat, dog: dog}
    console.log(zoo)  //Object {cat: "ken", dog: "lili"}

**ES6 ：属性简写**

let cat = 'ken'
    let dog = 'lili'
    let zoo = { cat, dog}
    console.log(zoo)  //Object {cat: "ken", dog: "lili"}

**ES6：解构赋值**

let dog = { type: 'animal', many: 2}
    let {  type, many} = dog   //import { validateUserName } from '@/utils/validate'
    console.log(type, many)   //animal 2

# default、rest #

ES5 指定默认值：

function animal(type){ 
        type = type || 'cat'  
        console.log(type)
    }
    animal()

ES6 指定默认值：

function animal(type = 'cat'){ 
    	console.log(type)
    }
    animal()

ES6 的 rest 语法：

function animals(...types){ 
        console.log(types)
    }
    animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

> 如果不用 ES6 的话，我们则得使用 ES5 的 arguments

# ES6 module #

## import、export ##

ES6 之前为解决 JavaScript 的模块化问题，常常利用一些第三方方案，主要有 **CommonJS**（服务器端）、**AMD**（浏览器端，如 require.js）

ES6 的 module 实现非常简单，可以成为服务器和浏览器通用的模块解决方案。

require.js 解决方案：

//content.js
    define('content.js', function(){ 
        return 'A cat';
    })
    
    //index.js
    require(['./content.js'], function(animal){ 
        console.log(animal);   //A cat
    })

CommonJS 解决方案：

//index.js
    var animal = require('./content.js')
     
    //content.js
    module.exports = 'A cat'

ES6 的写法：

//index.js
    import animal from './content'
     
    //content.js
    export default 'A cat'

## 其他语法 ##

export 命令除了输出变量，还可以输出函数，甚至是类：

//content.js
    export default 'A cat'    
    export function say(){ 
        return 'Hello!'
    }    
    export const type = 'dog'

import：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同

*  如果还希望输入 content.js 中输出的**默认值（default）**，可以写在大括号外面

//index.js 
    import animal, {  say, type } from './content'  
    let says = say()
    console.log(`The ${ type} says ${ says} to ${ animal}`)  
    //The dog says Hello to A cat

ES6 中可以用 `as` 实现**修改变量名**：

//index.js
    import animal, {  say, type as animalType } from './content'  
    let says = say()
    console.log(`The ${ animalType} says ${ says} to ${ animal}`)  
    //The dog says Hello to A cat

ES6 用 `*` 实现模块的**整体加载**（将所有输出值加载到一个对象上）且可以和 `as` 一起使用：

//index.js
    import animal, * as content from './content'  
    let says = content.say()
    console.log(`The ${ content.type} says ${ says} to ${ animal}`)  
    //The dog says Hello to A cat

# Promise #

参考 [【Vue.js 知识量化】Promise][Vue.js _Promise]

# 参考 #

*  [30分钟掌握ES6/ES2015核心内容][30_ES6_ES2015]

[Vue.js _Promise]: https://blog.csdn.net/weixin_43734095/article/details/118967996
[30_ES6_ES2015]: https://www.jianshu.com/p/ebfeb687eb70