前端ES6的语法整理

前端ES6的语法整理

这个东东出很久了，一直没时间完整的学习整理一下。
加上现在前端的更新又特别的快，新的前端框架的东西，都需要用这个语法了，不然很多东西甚至就开始看不懂了。

2022-05-15 小杭

参考资料

• ES6：https://blog.csdn.net/qq_40298902/article/details/107335464
• w3school.：https://www.w3school.com.cn/js/js_es6.asp
• 文档：https://es6.ruanyifeng.com/#docs/destructuring 这个文档相当的官方的
• React ：https://dvajs.com/knowledgemap/ 实际操作可以看这个文档，很实用

---

简介说明

ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6）,已经在2015年6月正式发布了，所以ES6也称为ES2015。

**关于ES6和javascript：**ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。所以ES6是JavaScript的一个实现标准。更准确来说JavaScript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。

---

新语法记录 【仅我觉得可能常用的】

变量 - let和Const

略过了，这个就是尽量使用这两个定义变量。他们是块级作用域

解构赋值 - 点点点 【重点】

官方名称：解构赋值 小名：点点点写法

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

以上的栗子比较的方法的解释，而我们常用的一种就是页面去更新数据表单的写法；

下面这个对比写法，用来更新整个表单对象，避免页面数据没有重新刷新渲染

// 旧的仅更新对象下的一个属性值，不刷新整个对象，页面可能不会重新渲染 
 this.rateTemplateOptions = response.data;
 this.reportForm.rateTemplateId=this.rateTemplateOptions[0].id;

// 使用这个写法，则是重新拼装整个的表单对象，刷新了整个对象，保证页面会重新渲染到。
// 这里，相当于，拆解原始数据之后，后面的参数覆盖了 相同key 的值
 this.depositConfigOptions = response.data;
 const reportForm = this.reportForm;
 this.reportForm = {...reportForm, depositConfigId: this.depositConfigOptions[0].id}

箭头函数 - 各种小箭头

立即执行函数可以写成箭头函数的形式。

(() => {
  console.log('Welcome to the Internet.');
})();

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

那些使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。

// bad
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

支持面向对象

ES6对对象（object）进行了重大升级，本身是JavaScript 最重要的数据结构。

提供的新的内容较多，简单列一下：

• ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
• 支持操作函数name属性，支持属性遍历，支持super关键字。

再其他的，就碰到在去查看文档了。

一些ES6支持的新的扩展方法等

各种的对象多新加了好多的方法，这里稍微整理一下。

• isNaN() 方法 ：如果参数是 NaN，则全局 isNaN() 方法返回 true。否则返回 false：
• isFinite() 方法：如果参数为 Infinity 或 NaN，则全局 isFinite() 方法返回 false。
• 数字Number的方法：
  • Number.isInteger() 方法：如果参数是整数，则 Number.isInteger() 方法返回 true。
  • Number.isSafeInteger() 方法：如果参数是安全整数(双精度数的整数)，则 Number.isSafeInteger() 方法返回 true。
  • 支持2进制，8进制写法；支持数值分割符；
  • Number.parseInt(), Number.parseFloat()，Number.isInteger()
  • 还有各种Math数学方法的扩展。【等等不列举】
• 字符串的扩展
  • 简单说一下：支持遍历，模板字符串，模板编译等
• 数组的扩展
  • 简单说一下：支持复制数组，合并与结构赋值结合，Array.from()，Array.of()，Array.prototype.copyWithin() 等等
  • 新增数据结构 Set 和 Map
• Iterator 和 for…of 循环
• Generator 函数的语法：异步编程解决方案：Promise
• 支持模块化：Module 的语法
• 等等。。。太多了

---

小记一些写法

Promises-处理异步请求

Promise 用于更优雅地处理异步请求。比如发起异步请求：

fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

定义 Promise 。

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log('executed');
});

async - 异步转同步写法

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

---

小结一下吧

简单了解整理了一下东西，发现ES6的官方之后，Javascript基本支持了高级语言的各种东东了。

不论是语法糖，对象作用域，常用数组map等的各种操作支持，函数编程风格，异步同步操作，模块化，面向对象等等。都是妥妥的了。

所以，以后碰到前端的代码的时候，不论是看还是写，都可以边查查各种花里胡哨的写法【高级的写法，不要太局限于很早之前的写法了，老早都过时了】

这个标准，很多React，VUE等的主流框架都是支持的，所以使用这些也是会用到这些的。

**然后在这ES6（2015）之后的每年版本都有所更新的样子 (╯‵□′)╯︵┻━┻ **