知识点总结 JS（ES6）

一、新增数据类型Symbol

　　概念：

　　　　Symbol代表独一无二的

　　　　Symbol类型的值通过Symbol函数来生成，同时Symbol函数返回的值的唯一的

　　　　Symbol函数可以接收字符串作为参数，但是即使相同参数返回的值也是唯一的

　　作用：

　　　　属性私有化

　　　　数据保护

        //没有参数的情况

        var s1=Symbol();

        var s2=Symbol();

        s1===s2;    //false

        //有参数的情况

        var s1=Symbol("foo");

        var s2=Symbol("foo");

        s1===s2;    //false

        var mySymbol=Symbol();

        //第一种写法

        var a={};

        a[mySymbol]="Hello!";

        //第二种写法

        var a={

            [mySymbol]:"Hello!"

        };

        //第三种写法

        var a={};

        Object.defineProperty(a,mySymbol,{value:"Hello!"});

        //枚举symbol的key值

        Object.getOwnPropertySymbols(obj);

        //注意：Symbol作为对象的key值不能被fon in进行遍历

二、块级作用域

　　概念：在ES6中，凡是{}包裹的代码都是块级作用域，凡是在块级作用域中用let const声明的变量都在有一个暂时性死区。

        {

            let a=20;

        }

        console.log(a);//报错

三、var let const声明变量

　　var

　　　　支持变量声明与解析

　　　　不支持块级作用域

　　　　允许重复声明

　　let

　　　　不支持变量声明与解析

　　　　支持块级作用域

　　　　不允许重复声明

　　　　用let声明的变量或者方法只会在代码块中生效

　　　　{

　　　　　　let a=10;

　　　　　　var b=20;

　　　　}

　　　　console.log(a);　　//报错

　　const

　　　　不支持变量声明与解析

　　　　支持块级作用域

　　　　不允许重复声明

　　　　声明常量，一旦声明不可修改

　　　　声明常量必须赋值，不能和var一样声明后再定义

四、解构赋值

　　概念：允许按照一定的格式，从对象和数组中提取值

        //数组解构

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

        //对象解构---对象解构时，key值必须要一一对应

        let {name,age}={name:"孙艺珍",age:20};

        //对象解构+别名

        let {name:_name,age:_age}={naem:"孙艺珍",age:20};

        //多重解构

        let {obj:{name},arr:[a,b]}={obj:{name:"孙艺珍",arr:[10,20]}};

        //案例

        let {left:l,top:t}=document.getElementById("box");

五、扩展运算符

　　概念：将数组或对象转换成参数序列，使用逗号分隔的序列。

　　作用：

　　　　1、数组、对象的合并

　　　　2、函数剩余参数

　　　　3、替代arguments

        //数组合并

        var arr1=[10,20,30];

        var arr2=[40,50,60];

        var newArr=[...arr1,...arr2];

        //展开数组

        console.log(Math.max(...arr));

        //对象合并

        var obj1={width:100,height:100};

        var obj2={left:100,top:100};

        var newObj={...obj1,...obj2};

六、字符串模板

　　1、字符串太长需要换行怎么办？

        //常规解决方案

        var a="<div>"+

                "<span>"+num+"</span>"+

            "<div>";

        //ES6神器

        var a=`

            <div>

                <span></span>

            </div>

        `;

　　2、字符串拼接太麻烦怎么办？

        //ES6神器-----使用 `` 代替 "" 或 '' ,使用${phone}实现变量拼接

        var phone=15200000000;

        var intro=`my name is wql,my phone id ${phone}`;

　　3、includes字符串搜索

        //ES6神器----includes方法：str.includes(内容)   
　　　　　　找到了返回true，找不到返回false

        var str="good method!";

        str.includes("method");

　　4、判断首尾startsWith endsWith

        /*

            startsWith判断是否位于头部

            endsWith判断是否位于尾部

            这两个方法是includes的扩展

        */

        let str="how are you?";

        str.startsWith("how");//true

        str.endsWith("?");//true

　　5、repeat字符串重复（懒人福利）

        //str.repeat(n);    将字符串重复n次（n为整数）

        let str="money";

        str.repeat(2);//"moneymoney"

七、对象新增的方法

　　1、对象的简写

        var a=10;

        var obj={a};

        //等价于

        var obj={a:10};

        //当key值与value值一样的时候我们可以写一个

　　2、Object.is

        //判断两个对象是否指向同一个内存地址

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

        var obj2=obj1;

        Object.is(obj1,obj2);//true

　　3、Object.assign

        //合并对象

        var obj1={name:"孙艺珍",age:20};

        var obj2={sex:"女"};

        var newObj=Object.assign(obj1,obj2);

        console.log(newObj);//{name:"孙艺珍",age:20,sex:"女"}

八、数组中新增的方法

　　1、Array.of()

        //将一组值转换为数组

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

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

　　2、Array.from()

        //将伪数组转换为数组

        var aLi=Array.from(document.getElementsByTagName("li"));

        console.log(aLi instanceof Array);//instanceof判断某对象是否属于某类的实例

　　3、Array.find()

        //通过条件查找数据，返回第一个符合条件的数据

        var arr=[1,2,3,4];

        var n=arr.find(function(item,index,array){

            return item>3;

        })

        console.log(n)

　　4、Array.findIndex()

        //查找数组中符合条件的数据的下标，如果没有查找到则返回undefined

        var arr=[1,2,3,4];

        var n=arr.findIndex(function(item,index,array){

            return item>3;

        })

        console.log(n)

　　5、Array.fill()

        //对数组进行填充    语法：arr.fill("内容",开始下标,结束下标)

        var arr=[1,2,3,4];

        arr.fill("wql",1,3);//[1,3)

        console.log(arr)//[1, "wql", "wql", 4]

九、for of　　&&　　for in

        /*

            1、for of是ES6的，fon in是ES5的

            2、for of遍历的是值，for in遍历的是键

            3、for of不能遍历对象，for in既可以遍历数组也可以遍历对象

            4、for of遍历数组的时候，如果有未定义的项，遍历出来是undefined，for in遍历不到

            5、for of不能遍历到原型上定义的属性（自定义属性），for in可以遍历到
　　　　　　　 6、for of的兼容性不是很好，移动端安卓微信浏览器不支持，Safari支持

        */

        Array.prototype.hehe="呵呵";

        var arr=[1,2,3,,4];

        for(let item of arr){

            console.log(item)//1 2 3 undefined 4

        }

        for(let prop in arr){

            console.log(prop)//0 1 2 4 hehe

        }

        var obj={

            name:"孙艺珍",

            age:20

        };

        for(let item of obj){//报错

            console.log(item)

        }

        for(let prop in obj){

            console.log(prop)//name age

        }

十、函数

　　1、函数参数默认值

        //ES6之前函数如何设置默认值

        function fn(x){

            var x=x||10;

        }

        //ES6函数默认值，等价于上面的写法，如果没有传递参数，就用默认值10

        function fn(x=10){

        }

　　2、剩余参数

        //fn函数中a接收实参1，...rest接收剩余参数为一个数组

        function fn(a,...rest){

            console.log(rest)//[2,3,4,5]

        }

        fn(1,2,3,4,5)

　　3、箭头函数

        //语法一    function 换成了 ()=>

        var fn=(a)=>{

            console.log(a)

        }

        fn(10)

        //语法二    不写{}默认表示return，当前函数意思是返回a这个值

        var fn=a=>a;

        fn(10)

        //语法三    不写{}表示retur，当前函数意思是返回一个对象

        var fn=a=>({a:1});

        fn()

        /*

            箭头函数特点：

                1、this指向离自己最近的外层作用域的对象

                2、不能当做构造函数使用（箭头函数是匿名函数，没有函数名字，没办法new）

                3、没有arguments这个参数（ES6已经取消arguments了）

                4、不能当做generator函数

        */

十一、Set集合

        /*

            Set：集合

                1、类似于数组，但成员的值是唯一的，没有重复的值，并且是无序的

                2、Set是一个构造函数

                3、Set每次执行完毕后都会返回一个Set，因此可以进行链式调用

        */

        let s=new Set();

        //添加  add()

        s.add("a").add("b");

        console.log(s)//Set(2) {"a", "b"}

        //删除  返回值是一个布尔值

        s.delete("a");//true

        //判断a是不是Set的成员  返回布尔值

        s.has("a")

        //清除所有  没有返回值

        s.clear()

        //返回所有键名

        s.keys()

        //返回所有value值

        s.values()

        //返回所有键值对

        s.entries()

        //可以通过for of遍历每一个值

        for(let item of s){

            console.log(s)

        }

十二、Map字典类型结构

        /*

            1、字典：用来存储不重复key的hash结构，不同于Set集合，字典使用[键,值]的形式来存储

            2、Map执行完毕后都会返回一个Map，可以进行链式调用

            3、特点：普通对象只能通过字符串来当做key值，但是Map可以用任意值来当做key值

        */

        //创建Map对象

        let map=new Map([

            ["a",1],

            ["b",2]

        ])

        console.log(map)//Map(2) {"a" => 1, "b" => 2}

        //获取map长度

        map.size

        //添加数组

        map.set("c",3)

        //获取map值

        map.get("a")

        //删除数据  删除成功返回true

        map.delete("a")

        //检测map中是否含有某个值   返回布尔值

        map.has("a")

        //清除所有数据

        map.clear()

        //获取所有key值

        map.keys() //{"b", "c"}

        //获取所有value值

        map.values() //{2, 3}

        //获取所有键值对

        map.entries()

        //遍历map对象   index在前，item在后（数组中item在前）

        map.forEach((index,item)=>{

            console.log(index,item)

        })

十三、Proxy介绍

　　概念：Proxy是ES6中新增的一个特性。

　　作用：在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写，很类似于设计模式中的代理模式。

　　基本用法：

        let p=new Proxy(target,handler);

　　　　参数：

　　　　　　target：用Proxy包装被代理的对象（可以是任意类型的对象，包括原生数组、函数、甚至是另一个代理）

　　　　　　handler：是一个对象，其声明了代理target的一些操作，其属性是当执行一个操作时定义代理的行为的函数

　　　　特点：

　　　　　　①可以劫持整个对象，并返回一个新对象

　　　　　　②有13种劫持操作

　　　　　　③handler代理的一些常用的方法：

　　　　　　　　get　　读取

　　　　　　　　set　　修改

　　　　　　　　has　　判断对象是否有该属性

　　　　　　　　construct　　构造函数

　　　　　　　　apply　　当目标对象是一个函数的时候

　　　　　　　　deletePrototy　　用于拦截delete操作

十四、get/set方法

        var target={

            name:"孙艺珍",

            age:20,

            sex:"女"

        }

        var p=new Proxy(target,{

            get(obj,attr){

                console.log("属性被访问了")

            },

            set(obj,attr,value){

                console.log("属性被设置了")

            }

        })

        p.name;

        p.name="小王";

　　get函数：当访问target对象身上的一些属性的时候就会触发get函数，get函数接收2个参数

　　　　参数一：代理的对象，也就是target

　　　　参数二：访问的属性

　　set函数：当设置target对象身上的一些属性的时候就会触发set函数，set函数接收3个参数

　　　　参数一：代理的对象

　　　　参数二：设置对象的属性

　　　　参数三：设置对象属性的值

　　使用场景：

　　　　1、虚拟属性

        var target = {

            firstName: "张",

            lastName: "小凡"

        }

        var p = new Proxy(target, {

            get(obj, attr) {

                if (attr == "fullName") {

                    return [obj.firstName, obj.lastName].join("");

                }

                return obj[attr]

            },

            set(obj, attr, value) {

                if (attr == "fullName") {

                    var fullNameInfo = value.split(" ");

                    obj.firstName = fullNameInfo[0];

                    obj.lastName = fullNameInfo[1];

                } else {

                    obj[attr] = value;

                }

            }

        })

        console.log(p.fullName);//张小凡

        p.fullName = "小 甜甜";

        console.log(p.firstName);//小

        console.log(p.lastName);//甜甜

　　　　2、私有属性

        //把_开头的变量都认为私有变量

        var target = {

            name: "张三",

            age: 19,

            _sex: "女"

        }

        var p = new Proxy(target, {

            get(obj, attr) {

                if (attr.startsWith("_")) {

                    console.log("私有属性不允许被访问");

                    return false;

                }

                return obj[attr];

            },

            set(obj, attr, value) {

                if (attr.startsWith("_")) {

                    console.log("私有属性不允许被设置");

                    return false;

                }

                obj[attr] = value;

            },

            has(obj, attr) {

                if (attr.startsWith("_")) {

                    return false;

                }

                return (attr in obj);

            }

        })

十五、函数拦截

　　apply：当目标对象是一个函数，且它被调用时，就是被apply方法拦截

　　　　参数：apply(target,context,arguments){}

　　　　　　　target：目标对象

　　　　　　　context：目标对象的上下文对象（this）

　　　　　　　arguments：目标对象的参数数组

　　construct：用于拦截new命令，意思就是你在new目标对象的时候，会走construct(){}

　　　　参数：construct(target,arguments){}

　　　　　　　target：目标对象

　　　　　　　arguments：构造函数的参数对象

        function fn(a, b) { }

        var handler = {

            apply: function (target, context, args) {

                console.log(target, context, args)

                return args[0];

            },

            construct: function (target, args) {

                return { value: args[1] };

            }

        };

        var p = new Proxy(fn, handler);

        console.log(p(1, 2)) //

        console.log(new p(1, 2)) // {value:2}

巴特西

知识点总结 JS（ES6）

最新文章

热门文章