ES6 记录

2022-05-09 21:18:18 浏览数 (1)

不懂前端的后端不是好后端,现在 Github 上的项目是前后端分离的,有时需要看前端传值逻辑

1. 变量

var 是全局作用域,往windows里面写入,可先使用后声明,也可重复定义不建议使用

代码语言:javascript复制
console.log(a);		// undefined
var a = 10;
var a = 100;

let 是块级作用域,只能先定义后使用(没有变量提升),类似于 java 的变量定义,建议使用

代码语言:javascript复制
// 在初始化时不会收集变量
let a = 10;
console.log(a);

const 声明常量,一定要赋予初始值,也是块级作用域,不可变值指向可不变,内容可变,比如数组和对象内的属性

代码语言:javascript复制
const A = '100';
console.log(A);

变量的解构赋值,按照一定模式从数组和对象中取值并对变量赋值

代码语言:javascript复制
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. 模板字符串

代码语言:javascript复制
// 可以换行
let a = `Hello
          World`;
console.log(a);



// 解析变量
let b = 'Howl';
let c = `Hello ${b}`;
console.log(c);

3. 简化对象写法

代码语言:javascript复制
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. 箭头函数 =>

代码语言:javascript复制
let fn = function(a,b) {
    console.log('this is normal function')
};


// 类似于 java 的 lambda 写法
let fnc = (a,b) => {
    console.log('this is normal function')
}


// 箭头函数不能作为构造器实例化对象

5. 参数默认值

需要默认值的形参放最后面

代码语言:javascript复制
 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 数组对象里,这个对象是函数内部自有的

代码语言:javascript复制
// ES5
function foo() {
    console.log(arguments);
}

// ES6
function fooo(...args) {
    console.log(args);
}

foo();
fooo();

7. 迭代器

Iterator (for ... of)

代码语言:javascript复制
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 的回调使用

代码语言:javascript复制
// 函数声明的时候加个 `*` 符号
// 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

代码语言:javascript复制
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

代码语言:javascript复制
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 类是一个语法糖,新写法只是让对象原型的写法更加清晰、更像面向对象

代码语言:javascript复制
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. 数值扩展

代码语言:javascript复制
// 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
代码语言:javascript复制
// 其他 js 文件导出接口
export let name = 'Howl';

export function foo() {
    console.log('Howlet');
}

export {name, foo}
代码语言:javascript复制
// 需要的地方引用
import * as min from "min.js";

import {name as Hname, foo} from "min.js";

// 引用 npm 包
import $ from 'jquery';

14. async、await

二者结合的语法让异步代码像同步一样

代码语言:javascript复制
// 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();

0 人点赞