ES6 新特性

232 阅读3分钟

ES6 新特性

1、支持 let 和 const

let a = 1;
cont b = 2;

这样就避免了使用 var 声明变量引发的变量提升等问题

2、支持了模块化

//导出 main.js
export let name = 'zzz';
export function fun(arg) {
    return arg;
} 
//导入
import {name, sixuetang} from 'main.js'

将需要导出的函数或变量前面加 export代表导出,import 代表导入,上面的示例是从 mian.js的文件中导入 name变量和 fun函数

3、支持解构

// 从数组中取值
const arr = [1, 2, 3, 4, 5];
let [a, b] = arr;//取到了第一项和第二项的值
let [a, , , b] = arr; //取到 第一项和第四项的值
// 从对像中取值
const obj = {
    a: 1,
    b: 2,
    c: 3
}
let {a, b, c} = obj; //将对象的key值和对应的变量名称一一对应起来
//交换两个变量的值
let a = 1;
let b = 2;
[a, b] = [b, a]; //将a和b交换位置后放置到原始的数组中

4、支持扩展运算符

// 拷贝数组
let arr = [1, 2, 3];
let arr1 = [1,...arr];// 将arr 放到 arr1 中得到 [1, 1, 2, 3]
// 合并数组
let arr2 = [1, 2, 3];
let arr3 = [4, 5, 6];
let arr4 = [...arr2,...arr3];
// 将数组扩展为函数参数
function zzz(x, y, z) {
    return x + y + z;
}
const numbers = [1, 2, 3];
zzz(...numbers);// 传入数组的扩展作为参数
// 克隆对象、合并对象
let obj = {name: 'zzz', age: 18};
let obj1 = {city: 'ja'};
let obj2 = {...obj, ...obj1};
// 排除一些对象属性
let params = {
    name: 'zzz',
    age: 18,
    type: 1
}
let {type, ...other} = params;
console.log(other); //输出 { name: 'zzz', age: 18 } other可以写任意命名比如 nameAge

5、支持直接在参数上赋值

function fun(name = 'zzz', age = 18){}

6、支持对象属性的简写

const name = 'zzz', age =18, city = 'ja';
const userInfo = {
    name: name;
    age: age;
    city: city;
}

7、支持 async 、await异步调用方式

async function fun(params) {
    let res = await getList(params) 
    if(res.code === 1) {
            
    }
}

8、支持 includes 方法

let arr = [1, 2, 3];
if(arr.includes(2)){
    // ...
}//判断arr中是否包含 2 ,如果包含就返回true

9、指数操作符

2**10 //1024

10、支持Object.keys、Object.values、Object.entries

// Object.keys
const obj = {a: 1, b: 2,c: 3};
const keys = Object.keys(obj); // [ 'a', 'b', 'c' ] 对象的键的集合
//Object.values
const values = Object.values(obj); //[ 1, 2, 3 ] 值的集合
// Object.entries
const entries = Object.entries(obj); // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ] 键值对的集合 
entries:entry复数 条目;入境次数;记录

11、null传导运算符 ?. null判断运算符 ??

// null传到运算符
const obj = {a: 1, b: 2,c: 3}; 
let num = (obj && obj.a) || 'null'; //这里返回1
let num = obj?.a?.b || 'null'; // 安全的找到对象obj中a的值,如果没找到则返回 null,从左往右如果有一个找不到则返回undefined , 这里 a 里面是没有 b 的所以返回 undefined ,但我这里又设置了 短路 或|| 所以返回 null
//null 判断运算符??
let num = obj.a ?? null; //这里返回 a 的值 1;当obj中没有属性a时,就会返回 null

12、模板字符串

// ${变量名}
const name = 'zzz';
const age = 18;
const myInfo = `myname is ${name},my age is ${age}.`; //返回 myname is zzz,my age is 18.
// 变量的运算
const result = `${name} ${age > 18 ? '成年了' : '未成年'}`; //返回 zzz 未成年结束

I don't want to fail, so I fight on.

因为我不甘失败所以要奋斗。