前端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）之后的每年版本都有所更新的样子 (╯‵□′)╯︵┻━┻ **