起因
最近在做 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 人后必须由群成员拉入)
来源: https://segmentfault.com/a/1190000040355621