学习笔记（13）ES6新特性

1，let和const

let声明的变量是块级作用域，作用域仅在当前的代码块中。

if (5>3) {
	let a =10;
}
// console.log(a);// a is not defined
1
2
3
4

const：常量声明，声明之后只能被赋值一次。

2，字符串模板

使用反撇号（``）声明字符串插值模板，在字符串插值模板中可以使用${}插入一个变量的值,可以直接输入回车和双引号等特殊字符。

let name='king';
let age =21;
let str1 =`我叫${name},今年${age}岁`;
console.log(str1);  //=我叫king,今年21岁
1
2
3
4

3，解构赋值

3.1，对象解构赋值

对象的解构赋值，可以将对象中的属性赋值给若干个变量。

let obj = {
    date: '2021',
    address: '郑州',
    people: 'king'
}

/* 解构赋值 */
let {people,time,address} =obj;
console.log(people);//king
1
2
3
4
5
6
7
8
9

3.2，数组解构赋值

let arr =['苹果','香蕉','橘子'];

/* 解构赋值 */
let [a,b,o] =arr;
console.log(a)  //苹果
1
2
3
4
5

3.3，函数参数解构赋值

函数参数进行结构赋值，当函数的参数是一个对象时，可以直接在形参列表中进行解构,并且可以设置某个参数的默认值。

function f1({ a, b, c = 10, d }) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
};

f1({ a: 1, b: 5, d: 4 })   //1,5，10，4
1
2
3
4
5
6
7
8

4，Symbol

表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

5， 箭头函数

不需要function关键字来创建函数，省略 return 关键字，this始终指向函数申明时所在作用域下的this值。

//es5
var fun = function() {

}

//es6，箭头函数
var fn = () => {

}
1
2
3
4
5
6
7
8
9

6，for of

for of遍历的是键值对中的值

let arr = ['a','b','c','d','e','f']
for (let item of arr){
    console.log(item)   //'a','b','c','d','e','f'
}
1
2
3
4

for in遍历的是键值对中的键

let obj = {
    name:'king',
    status:'200',
    hegiht:'175',
    hue:'balck',
}
for (let item in obj){
    console.log(item)   //name,status,hegiht,hue
}
1
2
3
4
5
6
7
8
9

7，class类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

class Car{
  constructor() {
    console.log("this is a car");
  }
 
  color() {
    console.log('black');
  }
 
  state() {
    console.log("It's moving now");
  }
}
 
console.log(typeof Car); // function
let HQ = new Car(); 
HQ.color(); // "black"
HQ.state(); // "It's moving now"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

8，模块导入、导出

8.1，导入

es6使用import 导入模块（文件），两种方式：

//1
import ‘自定义名字’ from ‘模块名字/路径’；

//2
import  ‘路径’；
1
2
3
4
5

通过 import xxx from xxx的方式引入模块，自定义名字相当于定义一个变量，用来接收即将导入的模块。

import Vue from 'vue'
1

路径可以有很多方式，既可以是绝对路径，也可以是相对路径，甚至只是一个简单的模块名称，更甚至连文件后缀都不需要。当你使用该命令时，系统会自动从配置文件中指定的路径中去寻找并加载正确的文件。

import './styles/element-variables.scss'

import '@/styles/index.scss'
1
2
3

8.2，导出

ES6 通过 export 和export default 导出（变量、函数和对象）。
在一个文件中通过 import 导入另一个文件，通过变量即可以接收到导出的数据。

let name = 'ren',age = 12;

//注意：变量需要用大括号包裹，然后才能向外导出
export { 
  name,
  age
};
1
2
3
4
5
6
7

总结：使用 export 向外输出成员时，可以同时输出多个，并且必须用‘｛｝’大括号包裹，在其他地方使用 import 导入时，接收成员的变量名必须和这里输出的名称一致，同时，可以根据实际情况，仅接收实际需要的的成员（接收的时候也要用大括号包裹）。

9，Promise

点击前往Promise笔记页面

10，async/await

比promise更好的解决了回调地狱。

async function() {
  awiat fn()
}
1
2
3