ES6 记录
不懂前端的后端不是好后端，现在 Github 上的项目是前后端分离的，有时需要看前端传值逻辑
1. 变量
var 是全局作用域，往windows里面写入，可先使用后声明，也可重复定义不建议使用
console.log(a); // undefined
var a = 10;
var a = 100;let 是块级作用域，只能先定义后使用（没有变量提升），类似于 java 的变量定义，建议使用
// 在初始化时不会收集变量
let a = 10;
console.log(a);const 声明常量，一定要赋予初始值，也是块级作用域，不可变值指向可不变，内容可变，比如数组和对象内的属性
const A = '100';
console.log(A);变量的解构赋值，按照一定模式从数组和对象中取值并对变量赋值
let arr = ['1', '2', '3'];
let [a, b, c] = arr;
console.log(a);
let person = {
name: 'Howl',
email: 'xxx@163.com',
prin: function() {
console.log(name + email);
}
}
let {name, email, prin} = person;
console.log(name);2. 模板字符串
// 可以换行
let a = `Hello
World`;
console.log(a);
// 解析变量
let b = 'Howl';
let c = `Hello ${b}`;
console.log(c);3. 简化对象写法
let name = 'Howl';
let prin = function() {
console.log('this is a function');
}
// 原始写法
let person = {
name: name,
prin: prin,
foo: foo() {
console.log('this is foo function');
}
}
// 简化写法
let person = {
name,
prin,
foo() {
console.log('this is foo function');
}
}4. 箭头函数 =>
let fn = function(a,b) {
console.log('this is normal function')
};
// 类似于 java 的 lambda 写法
let fnc = (a,b) => {
console.log('this is normal function')
}
// 箭头函数不能作为构造器实例化对象5. 参数默认值
需要默认值的形参放最后面
function sum(a, b = 10) {
return a + b;
}
let rs1 = sum(1, 2);
let rs2 = sum(1);
console.log(rs1);
console.log(rs2);6. rest参数
形参会放入函数内的 arguments 数组对象里，这个对象是函数内部自有的
// ES5
function foo() {
console.log(arguments);
}
// ES6
function fooo(...args) {
console.log(args);
}
foo();
fooo();7. 迭代器
Iterator （for ... of）
let arr = ['a', 'b', 'c', 'd'];
// 键名 0,1,2,3
for (let value in arr) {
console.log(value);
}
// 键值 a,b,c,d
for (let value of arr) {
console.log(value);
}8. 生成器
生成器其实是个特殊的函数，能够异步编程（JS 是单线程的），不像以前 ajax 的回调使用
// 函数声明的时候加个 `*` 符号
// yield 将函数内部分段，iterator 分段遍历
// next 也可以传参，是作为 yield 的返回值
// 用于解决回调地狱
function* gen(arg) {
console.log(arg);
console.log('111');
let one = yield 'one';
console.log(one);
console.log('222');
let two = yield 'two';
console.log(two);
console.log('333');
}
let iterator = gen('AAA');
iterator.next();
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));9. Promise
let p = new Promise(function(resolve, reject) {
// 这里进行异步逻辑操作，用 setTimeout 模拟
// 若成功则调用 resolve 函数
// 失败则调用 reject 函数
setTimeout(function() {
// resolve('调用成功');
reject('调用失败');
});
});
// 异步操作之后
// 成功则走 value 函数
// 失败则走 reson 函数
// then 方法返回的也是一个 promise 对象
let result = p.then(function(value) {
console.log(value);
}, function(reson) {
console.log(reson);
})10. 集合
和 Java 的集合类似，ES6 提供了两种集合，Map 和 Set
let set = new Set();
let map = new Map();
set.add('a');
set.delete('b')
set.has('a');
set.clear();
map.set();
map.get();
map.delete();
map.entries();
for (const iterator of set) {
console.log(iterator);
}
// 去重
let arr = [1, 2, 3, 4, 5];
let distinct = [...new Set(arr)];11. Class 类
ES6 的 Class 类是一个语法糖，新写法只是让对象原型的写法更加清晰、更像面向对象
class Person {
// 构造函数固定写法
constructor(name, email) {
this.name = name;
this.email = email;
}
toString() {
console.log(name + ' ' + email);
}
get getter() {
return this.name;
}
set setter(name) {
this.name = name;
}
}
let person = new Person('Howl', 'xxx@163.com');
// 注意调用方式是属性，不是方法
person.setter = 'Howlet';
let newName = person.getter;
console.log(newName);12. 数值扩展
// Number.EPSILON 能表示的最小精度
function equalFloat(a, b) {
if (Math.abs(a - b) < Number.EPSILON) {
return true;
}
return false;
}
console.log(equalFloat(0.1 + 0.2, 0.3))
// 进制
let b = 0b101;
let o = 0o777;
let d = 100;
let x = 0xff;13. 模块化
ES6 之前社区自己推出了模块化规范：
- CommonJS ———— Node.js（默认使用 npm 包管理工具）
- AMD ———— requireJS
- CMD ———— seaJS
// 其他 js 文件导出接口
export let name = 'Howl';
export function foo() {
console.log('Howlet');
}
export {name, foo}// 需要的地方引用
import * as min from "min.js";
import {name as Hname, foo} from "min.js";
// 引用 npm 包
import $ from 'jquery';14. async、await
二者结合的语法让异步代码像同步一样
// async 返回 promise 对象
// await 接收 promise 对象返回成功的值，报错需 try catch 捕获
let promise = new Promise((resolve, reject) => {
resolve("成功的返回值");
});
async function foo() {
try {
let rs = await promise;
} catch (error) {
console.log(error);
}
return rs;
}
foo();本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-05-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录