想看懂vue3文档你必须会的几个ES6+语法.

最近在做 vue3入门教程 ,
很多刚入行的小伙伴反馈很多es6基础语法不会,
所以我把一些必须会的es6+语法整理了下, 方便大家查阅.

什么是ES6+

2015 年 6 月正式发布了ECMAScript 6.0语法正式发布了, 简称”ES6”,
他是对原有javascript语法的扩充, 每年都有新的语法扩充进来,
我这里把后续新增的语法统称”ES6+”语法.

let

定义变量, 区别于”var”, 他所声明的变量只在”let”所在的代码块内有效,
总之一句话: “var”就不要用了, 都替换成”let”.

{

let a = 10;

var b = 1;

}

a // 报错: a 没定义.

b // 1

const

定义常量, 定义后的变量不可修改

const PI = 3.1415;

PI // 3.1415

PI = 3;

// 报错: 不能修改变量.

数组解构赋值

let [a, b, c] = [1, 2, 3];

// 等价

let a = 1;

let b = 2;

let c = 3;

对象的解构赋值

let { foo, bar } = { foo: ‘aaa’, bar: ‘bbb’ };

foo // “aaa”

bar // “bbb”

let { x, y, …z } = { x: 1, y: 2, a: 3, b: 4 };

x // 1

y // 2

z // { a: 3, b: 4 }

函数参数的解构赋值

function add([x, y]){

return x + y;

}

add([1, 2]); // 3

function move({x, y} = { x: 0, y: 0 }) {

return [x, y];

}

move({x: 3, y: 8}); // [3, 8]

模板字符串

字符串中可以优雅的插入变量.

const a = ‘你好’;

const b = ${a} Vue;

// b == ‘你好vue’

函数参数默认值

function add(a,b=1){

return a+b;

}

add(3) // 4

箭头函数

function a(){

return ‘你好’

}

// 箭头函数

const a = ()=>{

return ‘你好’;

}

// 还可以更简单

const a = ()=>’你好’

数组的扩展运算符

// 等价于 console.log(1,2,3);

console.log(…[1, 2, 3]);

// 合并数组

const a = [1,2,3];

const b = […a,4,5]; // [1,2,3,4,5]

对象属性的简洁表示法

const a = 1;

const obj = {a: 1};

// 简写

const obj = {a}; // {a: 1}

对象方法的简洁表示法

const obj = {

say:function (){

return ‘你好!’;

}

};

// 简写,可以省略”:function”

const obj = {

say (){

return ‘你好!’;

}

};

对象属性名表达式

对象的属性名可以支持变量.

const a = ‘abc’;

let obj = {};

obj[{a}123] = 1;

console.log(obj) // {abc123:1};

链判断运算符(?)

实现对”?”左边的表达式是否为null或者undefined的判断,
如果是立即停止判断, 返回undefined或null.

const firstName = (message

&& message.body

&& message.body.user

&& message.body.user.firstName);

// 简写

const fristName = message?.body?.user?.firstName;

Null判断运算符(??)

console.log(0 ?? 1); // 0

console.log(false ?? 1); // false

console.log(undefined ?? 1); // 1

console.log(null ?? 1); // 1

很显然只有”??”前面的值是null或undefined才返回”??”后面的值.

Promise

Promise
是异步编程的一种解决方案，比传统的解决方案”回调函数和事件”更合理.

在这里大概了解下即可, 主要是为了讲解后面的”async/await“,
因为在开发中我们使用的第三方插件(比如axios)很多都是封装成Promise格式的,
初期需要自己封装的需求很少.

// 封装代码成Promise格式

const promiseA = ()=> new Promise(function(resolve, reject)
{

// === 你的代码 ===

setTimeout(()=>{

if(0.5 < Math.random()){

resolve(‘成功’);

} else {

reject(‘失败’);

}

},200);

// === 你的代码 ===

});

// 执行

promiseA().then(value=>{

// ‘成功’ == value

console.log(value);

}).catch(error=>{

// ‘失败’ == error

console.log(error);

});

async/await

执行Promise函数”更优雅”. 用上面封装”promiseA函数”为例:

function funA(){

promiseA().then(value=>{

console.log(value);

}).catch(error=>{

console.log(error);

});

}

// 改写, 需要用try/catch来捕获”reject”触发的异常

async function funA(){

try{

const value = await promise();

console.log(value);

} catch(error){

console.log(error);

}

}