2021-03-21 ES6-全部笔记

ES6

声明与表达式

let

作用域在块里面

var

全局

注意 函数有自己的作用域

const

常量

常量的值 是不能被更改的

可以使用const 来做预定义 处理

应用场景

1.私有协议

即时通讯

与硬件通讯

2.预定义数据值

网络接口

解构赋值

定义

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取

数组格式的解构赋值

基本

let [a,b] = [2,3];

let [username,age] = ["小明",2]

可嵌套

let [username,[boy,girl],age] = ["小明",["小猫","小花"],12];

可省略

  /*

    * 可以省略部分变量名

    * */

    let [a,,,b] = [1,3,5,6];

    console.log(a)

    console.log(b)

不完全解构

如果有变量 不需要初始化值 就可以使用不完全解构

let [view = document.createElement("div"),timer] = [];

剩余运算符

var [timer,...views] = [0,[document.createElement("div"),document.createElement("div")]]

    console.log(views[0][0]);

字符串

let [a, b, c, d, e] = 'hello';

// a = 'h'

// b = 'e'

// c = 'l'

// d = 'l'

// e = 'o'

对象模型的解构（Object）

基本

let { foo, bar } = { foo: "哈哈哈", bar: 'bbb' };

    console.log(foo,bar);

可嵌套

{

        let {a:[b,c]} = {a:[22,33]}

        console.log(b)

        console.log(c)

        let {key:[name1,name2]} = {key:["属性1的值","属性2的值"]}

        console.log(name1)

        console.log(name2)

        let {

            listener:[

                click,

                dlclick,

                tapstart

            ],

            event:[ce,de,te]

        } = {

            listener:[

                function () {

                    console.log("click")

                },

                function () {

                    console.log("dlclick")

                }

            ],

            event:[{name:"点击"},{name:"双击"}]

        }

        click();

        console.log(ce)

        /*

        * 定义接口文件 http

        *

        * 主机地址 host:"api.bianmazhe.com"

        * 测试环境 evn:true

        * api:

        *  login:"/login"

        *  register:"/register"

        * */

        let {http:[host,evn,api]} = {

            http:["api.bianmazhe.com",false,{login:"/login",register:"/register"}]

        }

        console.log(api.login)

        let {http:[host1,evn1,[login,register]]} = {

            http:["api.bianmazhe.com",false,["/login","/register"]]

        }

        console.log(login);

    }

可省略

let {key:[]} = {key:[2,3]}

        let {key:[]} = {key:[2,3],key2:"dfk"}

        let {} = {key:[2,3]}

不完全解构

let obj = {p: [{y: 'world'}] };

let {p: [{ y }, x ] } = obj;

// x = undefined

// y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

// a = 10

// b = 20

// rest = {c: 30, d: 40}

Symbol

用于定义一个独一无二的属性

通过Symbol创建出来的两个属性是不相同的

    let n1 = Symbol(2);

    let n2 = Symbol(2);

    console.log(n1 === n2);

数据类型

string

模板字符串

`

`

允许换行

    var container = document.querySelector(".container");

    container.innerHTML  = `

    <div>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    `;

支持嵌入变量

    var item = "标题";

    var container = document.querySelector(".container");

    container.innerHTML  = `

    <div>

        <ul>

            <li>${item}</li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    `;

新增方法

includes()：返回布尔值，判断是否找到参数字符串。

startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

字符串重复

repeat

console.log("Hello,".repeat(2));  // "Hello,Hello,"

字符串补全

padStart

padEnd

console.log("h".padStart(5,"o"));  // "ooooh"

console.log("h".padEnd(5,"o"));    // "hoooo"

console.log("h".padStart(5));      // "    h"

array

创建数组

Array.of()

Array.from()

查找符合的元素

find

    var arr = [33,4,2,99];

    var v = arr.find(function (item) {

        return item<10;

    });

    console.log(v);

查找符合元素的下标

findIndex()

    var index = arr.findIndex(function (item) {

        return item < 10;

    })

    console.log(index);

填充

fill(要填充的值，填充的位置，可选（填充结束的位置）) 

返回一个填充好的数组

let arr = Array.of(1, 2, 3, 4);

// 参数1：用来填充的值

// 参数2：被填充的起始索引

// 参数3(可选)：被填充的结束索引，默认为数组末尾

console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

嵌套数组（多维）转一维数组

flat

    var arr5 = [[[[1,4,5]],[55,77]],[3,9]]

    //Infinity 无穷数

    var arr6 = arr5.flat(Infinity);

    console.log(arr6);

合并数组

    var arr7 = [3,4,88];

    console.log([1,...arr7]);

set

类似数组

set里面的数据 都是唯一的

初始化

new Set()

存取值

存值

add();

数组去重

    var arr7 = [77,55,77,99,55];

    var set2 = new Set(arr7);

    console.log(set2);

map

类似Object

一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。

Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。

Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

初始化

new Map()

存取之

存

set(key,value)

取

get(key)

长度

size

遍历

for in

    for (let key in map){

        console.log(map.get(key));

    }

for of

    for ( let [key,value] of map){

        console.log(key,value);

    }

forEach

    map.forEach(function (item,key) {

        console.log(item,key)

    })

函数

可以给函数的形参 添加默认值

    function f(a=1,b=3) {

    }

箭头函数

作用

语法简洁

var fun2 = function () {

        console.log("...");

    }

    var fun2 = ()=>{

        console.log("....");

    }

    fun2();

    //传参数 简化写法

    var fun3 = a => {

        console.log(a);

    }

    var fun4 = (a,b) => {

        console.log(a,b);

    }

    //函数体比较简单 省略花括号

    var sum = (a,b) => a+b;

    var sum = function (a,b) {

        return a+b;

    }

无需在箭头函数中 再去设置this指向

  function View() {

        this.title = "标题";

        var self = this;

        this.dom = document.querySelector(".container");

        this.dom.onclick = function () {

            alert(self.title)

        }

        this.dom.onclick =  ()=> {

            alert(this.title)

        }

    }

    new View();

对象

简写

属性

var obj = {uname,uage};

方法

var obj = {

        run(){}

    }

使用...合并对象

var obj1 = {a:1,b:3}

var obj2 = {...obj1};

is

类方法（静态方法）

    var obj3 = {};

    var obj4 = {};

    var obj5 = obj3;

    console.log(Object.is(obj3,obj4));

    console.log(Object.is(obj3,obj5));

assign

浅拷贝 是一个静态方法

    var tObj = {}

    var sObj = {a:1,b:2};

    Object.assign(tObj,sObj);

    console.log(tObj);

类

class关键字

定义类

  /*

    * class 关键字 创建类

    * */

    class Person{}

constructor

构造函数

注意：

1.构造函数 是一个特殊的函数

在实例化对象（new）的时候 就会自动调用这个函数

2.不一定必须实现构造函数->可以省略

如

  /*

    * class 关键字 创建类

    * */

    class Person{}

    /*

    * ES6 构造函数

    * */

    class Animation{

        constructor(...args) {

            console.log(args);

        }

    }

    new Animation(1,2);

    new Person();

属性

原型属性

实例属性

  class ImageView{

        //原型属性

        path = "";

        constructor() {

            this.ttt = "实例属性"

        }


    }

set get 方法

防止类中的set get方法的递归调用

        get hname(){

            return this.hname;

        }

        set hname(_name){

            console.log(_name);

            this.hname = _name;

        }

注意 使用set get方法的属性名前 添加_

  class Hero {

        constructor(_name) {

            this.hname = _name;

        }

        get hname(){

            return this._hname;

        }

        set hname(_name){

            console.log(_name);

            this._hname = _name;

        }

    }

静态属性 静态方法

需要使用 static 关键字

  class Weapon{

        static type = "魔法装";

        static att(){

            console.log("攻击")

        }

    }

    console.log(Weapon.type);

    Weapon.att();

继承

使用extends 实现继承

super

调用父类的构造函数

如

    class Student{

        constructor() {

            console.log("我要学到很多知识");

        }

        study(){console.log("好好学习")}

    }

    //extends 关键字  可用于继承

    class TangZhi extends Student{

        constructor() {

            //使用父类的构造函数

            super();

            console.log("我得学好了 找个合心的工作");

        }

    }

    let haoXueSheng = new TangZhi();

    haoXueSheng.study();

模块

把具有相同功能的代码 组织到一起 ->这一块 代码 就可以看成一个模块

ES6

1.引入js 需要添加type属性 属性值是module

<script src="StringTool.js" type="module"></script>

2.导出模块 导入模块

导出模块

export

1.

export {obj999，obj777} 可以同时导出多个 对象

2.导出一个模块

export default StringTool;

导入模块

import

1.    import {obj999,obj777} from "./StringTool.js"  可以同时导入多个对象

    console.log(obj999)

2.导入一个模块

import StringTool from "./StringTool.js";

as 给模块 重命名

export {StringTool as ST}

import {ST} from "./StringTool";

异步编程

Promise

允诺 承诺

完成

then

出现意外

catch

创建

new Promise(function(success,fail){})

new Promise((success,fail)=>{})

async

异步 函数

会得到一个promise对象

await

可以让修饰的部分 等待执行（必须与异步函数配合使用）

如果promise对象有结果的时候 再执行

    function fun() {

        return new Promise(success=>setTimeout(()=>success(111),1000))

    }

    async function fun2() {

        let a = await fun();

        console.log(a);

        console.log("fun2")

    }

    fun2()

如果等待的是promise对象，先等待promise有回应了 并且解析要传递出来的数据 才会继续执行

js实现同步

Generator 函数

定义

一是在 function 后面，函数名之前有个 * ；

就可以定义成 一个生成器类型的函数

函数内部有 yield 表达式。

调用

使用生成器里面的每一个模块

let f = fun();//得到生成器对象

f.next();//可以执行通过yield分成的模块

f.next();

f.next();//如果f.next();done：true已经执行完所有的模块

注意：

不要每一次调用next函数 都是用一个新的生成器对象调用

这样执行的永远都是第一个模块的内容

fun().next();//可以执行通过yield分成的模块

fun().next();

fun().next();//如果f.next();done：true已经执行完所有的模块

next会返回一个对象

value

done

迭代器

核心概念

迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。

迭代器是用于遍历数据结构元素的指针（如数据库中的游标

如

    let arr = [1,2,3,45,7,5];

    let it = arr[Symbol.iterator]();

    console.log(it.next());

代理、映射

代理

帮别人干某些事

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作

如

    //想找代理的人

    let xiaoMao = {

        username:"小毛",

        age:18

    }

    //帮忙干事的人（做代理的人）

    let handler = {

        get(target,key){

            console.log("收100元");

            //...

            return target[key];

        },

        set(target,key,value){

            console.log("收500元");

            //..

            target[key] = value;

        }

    };

    //组织两人关系的地方

    let py = new Proxy(xiaoMao,handler);

    console.log(py.username);

    py.age = 30;

映射 反射 Reflect

Reflect.get(target, name, receiver)

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,176评论 5赞 469
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,190评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,232评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,953评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,879评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,177评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,626评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,295评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,436评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,096评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,685评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2赞 341

推荐阅读更多精彩内容