ES6特性

转载

mob604756fc844f 2021-08-18 17:10:00

容易的就不讲，讲难理解一点的

1、解构

// 用于数组, 会将等号后面的值和等号前面的一一对应放入变量，和位置相关
let a = 1;
let b = 2;

let [a, b] = [b, a];

console.log(a);  // 2
console.log(b); // 1


// 用于对象，会将等号后面的值赋给等号前面相同变量的值，和名称相关
let {name, age'} = {age: 20, name: '张三'}
// name = 张三
// age = 20

2、模块化 export 和 import 是配合使用的，用于导入或导出函数、变量或类等

// export

// 写法一
export function a() {
    console.log('我是a函数')
}
export function b() {
  console.log('我是b函数')  
}

export const name = '张三'；

export const age = 20;

// 写法二
function a() {
    console.log('我是a函数')
}
function b() {
    console.log('我是b函数')  
}

let name = '张三';
let age = 20;

// 导出时可以用as 取别名
export {a as fa, b, name, age};


// 一个文件模块中可以有一个default, 并且最多只能有一个
export default function () {
    console.log('我是默认函数')
}

// import

// 这样会将所有函数、变量等都导出到all这变量上
import all from 'common.js';

// 可以选择性导出, 名称要和export导出的名称相同
import {a, name} from 'common.js';

// 导出时可以取别名
import {a as fa, name} from 'common.js';

3、箭头函数

// 箭头函数其实就是一个没有函数名称的匿名函数，特点是：1、没有自己this指向，普通函数this指向运行时对象，箭头函数this指向上级作用域，即window  2、没有构造方法，也就是不能使用new

// 没有参数
() => {
  console.log('我是没有参数的箭头函数')      
}

// 只有一个参数，可以省略小括号
e => {
     console.log('只有一个参数的箭头函数')    
}

// 函数主体只有一条语句可以省略大括号
e => console.log('只有一条语句')