想看懂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); } }

更多

在这里我只是给大家讲解了几个常用的语法, 更多请参考阮一峰老师的教程

🔥 vue3入门教程

课程从0基础开始, 帮助大家一步一步深入学习, 现已完成vue3基础课程部分, 每一课都带视频(暂只录制3课, 还在继续录制中), 内容每周不断更新.

https://www.yuque.com/books/s...

typescript

建议大家学完vue3基础后使用typescript开发,这应该是未来vue3的主流开发语言, 这里提供一些typescript的入门文章.

第一课, 体验typescript

第二课, 基础类型和入门高级类型

第三课, 泛型

第四课, 解读高级类型

第五课, 命名空间(namespace)是什么

特别篇, 在vue3🔥源码中学会typescript🦕 - "is"

第六课, 什么是声明文件(declare)? 🦕 - 全局声明篇

typescript - 实战篇, 实现浏览器全屏(59行)

微信群

感谢大家的阅读, 如有疑问可以加我微信, 我拉你进入微信群(由于腾讯对微信群的100人限制, 超过100人后必须由群成员拉入)