关于javascript:想看懂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人后必须由群成员拉入)