ES6学习

Guiyyyyy

已于 2022-11-23 10:45:57 修改

阅读量202

点赞数

文章标签： es6 学习 javascript

于 2022-11-23 10:44:43 首次发布

本文链接：https://blog.csdn.net/Guiyyyyy/article/details/127995906

版权

ES6

let：声明变量

块级作用域
不存在变量提升（var存在变量提升）
不允许重复声明（var可重复声明但会覆盖掉之前的声明）

const：声明只读常量

声明时必须赋值
块级作用域

解构赋值

数组的解构赋值：

允许指定默认值

允许不完全解构

/*不完全解构*/
let [a,[b],c] = [1,[2,3],4];
//a 为 1; b 为 2; c 为 4

/*指定默认值*/
let [f = true] = [];
//f 默认为true

对象的解构赋值：

变量必须与属性名相同

允许指定默认值 需为undefined

let {bar, foo} = {foo:'aaa' , bar:'bbb' };
//bar 为 "bbb" ;foo 为 "aaa"

/*匹配模式：变量*/
let {foo: baz} = {foo: 'aaa'};
//baz 为 "aaa" ,foo为匹配模式不是变量

/*设置有效默认值*/
let {x = 3} = {x: undefined};
let {x = 3} = {};

字符串的解构赋值：

类似数组

具有length属性

let {length : len} = 'hello';

数值和布尔值的解构赋值：

将数值和布尔值转为对象

undefined和null无法转为对象

let {toString: s} = 123;

let {toString: s} = true;

函数参数的解构赋值

[[1, 2], [3, 4]].map(([a, b]) => a + b);

可以使用圆括号的情况：赋值语句的非模式部分

模板字符串

反引号：`` 内容中可以直接出现换行符

let str = `<ul>
            <li>张三</li>
           </ul>`;
           
/*字符串拼接*/
let animal = '青蛙';
let str = `${animal}是一种动物！`;

箭头函数

this是静态的，始终指向函数声明时所在作用域下的this值

不能作为构造实例化对象

不能使用arguments 变量

/*声明*/
let fn = (a, b) => {
    return a+b;
}

/*箭头函数简写*/
//省略小括号，当形参只有一个的时候
let add = n => {
  return n + n;
}
//省略花括号，当代码体只有一条语句的时候，同时需省略return
let pow = (n) => n * n;

rest参数

rest参数必须放到参数最后

function date(...args){
    console.log(args);
}
date('小李','小左','小然');

function fn (a, b, ...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1,2,3,4,5,6,7);

扩展运算符 ...

能将数组转换为逗号分隔的 参数序列

迭代器：

任何数据结构只要部署了Iterator接口，就可以使用for…of 来遍历.

生成器

特殊的函数

需要调用.next(); 生效

可以使用yield语句(yield 语句将函数分隔)

/*声明*/
function * gen(){
    console.log("aaa");
    yield "bbb";
}
let iterator = gen();
iterator = gen.next();

Promise

异步编程的新解决方案，语法上是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

集合Set

set本身实现了iterator接口，可以使用for ... of遍历以及【扩展运算符】

/*声明*/
let s = new Set();
let s2 = new Set(["Raven","Libra","Adjudicator","King","miHoYo"]);

//元素个数
let size = s2.size;
//增加元素
s2.add("Rose");
//删除元素
s2.delete("miHoYo");
//检测元素
s2.has("Yoimiya");   //不存在则返回值为false，存在则返回true
//清空集合
s.clear();


//for ... of遍历
for(let v of s2){
    console.log(v);
}

Map

Map本身实现了iterator接口，可以使用for ... of遍历以及【扩展运算符】

类似于对象，是键值对的集合，"键"不局限于字符串。

/*声明*/
let m = new Map();

//添加键值对
m.set("key", value);
//Map大小
m.size;
//获取
m.get("key");

Class类（类比JavaScript和Java, 就不再写了）

数值扩展

Numbe.ESPILON 是JavaScript表示的最小精度，值接近于 2.220446E-16
进制：0b(二进制) 0o（八进制） 0x（十六进制）
Number.isFinite 检测是否为有限数
Number.parseInt Number.parseFloat 字符串转数字
Math.trunc 抹掉小数
Math.sign 判断正数（1）、负数（-1）、0（0）

对象方法扩展

Object.is (a,b) 判断两个值是否完全相等
Object.assign(a,b) 对象的合并，且后者b会覆盖前者a相同属性部分
Object.setPrototypeOf(a,b) Object.getPrototypeOf 设置/获取a原型对象b

模块化

export 规定模块的对外接口
import 输入其他模块提供的功能

//m1.js  分别暴露
export let school = "nxx";

//m.html

<script type = "module">
    //通用引入方法
    import * as m1 from "./m1.js";
    //解构赋值形式
    import {school} from "./m1.js";
    //import {default as m3} from "./m3.js";
    //简便形式  针对默认包里
    import m3 from "./m3.js";
</script>

//m2.js  统一暴露
let school = 'PAX';
function fn(){
    console.log("PAX!!!");
}

export {school,fn}

//m3.js   默认暴露

export default{
    school : "Temis";
}

ES8 新特性 async await

async

async function fn(){
    //返回一个字符串或者返回的结果不死一个Promise对象，那么返回的结果就是成功的Promise对象
    return ;
    //抛出错误，返回的结果是一个失败的Promise对象
    throw new Error("出错了");
    //返回的结果是一个Promise对象
    return new Promise((resolve, reject)=>{
        //成功
        resolve("成功");
        //失败
        reject("失败");
    });
}

await 必须要放在async函数中，返回的位promise成功的值，失败需要用try-catch捕获异常

let p = new Promise((resolve,reject)=>{
    resolve("恭喜！");
});
async function fn(){
    try{
        let result = await p;
    }catch(e){
        consloe.log(e);
    }

}