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

你可能感兴趣的:(javascript,前端)