ES5及ES6

ES5及ES6

            es表示ECMASCript ，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2

            完全支持es5的（vue3完全支持es6的），react完全支持es6

es5的新特性

        严格模式（对应的相反的称为怪异模式）

            'use strict' //一般用于相关的设计 上面书写一个严格模式底下的代码就需要按照严格模式执行    

            严格模式的特性

                变量必须要带修饰符      

                "use strict";
                a = 10
                console.log(a); //a is not defined    

                函数里面this不能指向window               

                function sayHello(){
                    console.log(this); //undefined
                }
                sayHello()

                不允许在非函数的代码块内声明函数

 

                禁止八进制方法

 

                函数的arguments数组形参是不会变的和实参不同步  

        数组的高阶函数（以函数做的参数的函数 称为高阶函数）

            forEach 遍历的             

                var arr = [1,2,3,4,5]
                //forEach 遍历的 value表示里面的值 index表示里面的下标 
                array表示当前遍历的数组
                var forEachObj = arr.forEach(function(value,index,array){
                    console.log(value); //打印里面的值 1,2,3,4,5
                    console.log(index) // 打印下标 0,1,2,3,4
                    console.log(array) //当前遍历的数组 [1,2,3,4,5]
                })

            map 遍历              

                 //map 遍历的 value表示里面的值 index表示下标 array表示当前的遍历的数组
                var mapObj = arr.map(function(value,index,array){
                    console.log(value); //打印里面的值 1,2,3,4,5
                    console.log(index) // 打印下标 0,1,2,3,4
                    console.log(array) //当前遍历的数组 [1,2,3,4,5]
                    return value+1
                })  

            forEach和map的区别

                forEach没有返回值 里面没有return

 

                map有返回值 所以里面可以使用return关键词 他的返回值是一个数组

            forEach和map的底层实现                

                //forEach方法实现
                function forEach(fn){
                //遍历这个arr
                    for(var i=0;i<arr.length;i++){
                        fn(arr[i],i,arr)
                    }
                }
                // map方法实现
                function map(fn){
                    var res = []
                    //遍历这个arr
                    for(var i=0;i<arr.length;i++){
                        res.push(fn(arr[i],i,arr))
                    }
                    return res
                }      

            reduce 从左到右计算的 reduceRight（从右到左计算）               

                 //pre 前一个值 current 当前值 index 下标 array 数组
                //reduce函数 利用前一个和后面值进行运算的操作 得出对应的值
                var sum = arr.reduce(function(pre,current,index,arr){
                    return pre+current
                })
                console.log(sum);  

            reduce底层实现               

                // 底层实现reduce
                function reduce(fn){
                    //如果只有一个直接返回
                    if(arr.length==1) return arr[0]
                    var res = arr[0]
                    //如果有多个的情况
                    for(var i=1;i<arr.length;i++){
                        res = fn(res,arr[i],i,arr)
                    }
                    return res
                }  

            filter 过滤的                

                 //filter返回的是一个数组 value index arr
                var filterArr = arr.filter(function(value,index,arr){
                    return value>3
                })
                console.log(filterArr);

            filter的底层实现               

                //实现filter函数
                function filter(fn){
                    var res = []
                    //遍历数组
                    for(var i=0;i<arr.length;i++){
                        if(fn(arr[i],i,arr)){
                            res.push(arr[i])
                        }
                    }
                    return res
                }    

            some 有一些满足就返回true 否则返回false                

                //some 一些 every 每一个
                var value = arr.some(function(value,index,arr){
                    return value>4
                })
                console.log(value);//true

            every 每一个满足就返回true 否则返回false               

                var value = arr.every(function(value,index,arr){
                    return value>4
                })
                console.log(value);//false   

            底层实现              

                //底层实现 some
                function some(fn){
                    var isTrue = false
                    for(var i=0;i<arr.length;i++){
                        if(fn(arr[i],i,arr)){
                            isTrue = true
                            break
                        }
                    }
                    return isTrue
                }
                //底层实现 some
                function every(fn){
                    var isTrue = true
                    for(var i=0;i<arr.length;i++){
                        if(!fn(arr[i],i,arr)){
                            isTrue = false
                            break
                        }
                    }
                    return isTrue
                }  

            indexOf 返回对应的下标           

　　　　　　console.log(arr.indexOf(1,2));//从下标开始找 找这个1这个数字第一次出现的位置(左到右)

            lastIndexOf 返回对应的下标               

　　　　　　console.log(arr.lastIndexOf(1,5));//从下标5开始找 找1第一个次出现的位置(右到左)

        字符串加强 （模板字符串 ）           

            var a = 'hello'
            console.log(`${a} world`) //hello world 

        es5新增的改变this指向的方法

            bind （不会自动执行）                

                 function say(){
                    console.log(this) //指向window
                }
                say() //打印window
                //通过函数调用
                var obj = { username:"jack" }
                say.bind(obj)()//打印的this指向obj

            call （自动调用函数）               

                // call 将this指向和某个内容联系在一块 自动调用 传参一个个用,隔开
                say.call(obj,'tom','456')

            apply （自动调用函数）              

                //apply 将this指向重新指向给对应的某个内容 自动调用 数组传递
                say.apply(obj,['刘德华','123'])  

            call和apply的区别

                call传递的参数是一个个的内容，使用,隔开

 

                apply传递的参数是一个整个数组

es6的新特性

            概述：es6对应数组 字符串 对象及函数以及循环,值类型，修饰符等都有加强（es6以后的内容都称为es6的内容）                      

        数组的增强

            find 查找     findIndex 查找下标               

                var li = Array.from(lis).find(function(li){
                    return li.innerText == '5'
                }) //找到对应匹配的元素
                console.log(li);
                //findIndex 查找对应的元素的下标 返回第一个找到的元素下标
                var index = 
                Array.from(lis).findIndex(function(li,index,arr){
                    return li.innerText == '5'
                })
                console.log(index);

            静态方法（使用类名.）

            Array.of() 将一组数据转为数组

            Array.from() 将伪数组转为数组               

                 var array = Array.of(1,2,3,4,5)
                console.log(array);
                //具备某些数组的特性的对象称为伪数组 arguments NodeList 
                HTMLCollection等
                var lis = document.querySelectorAll('li')
                // 伪数组是不具备数组的函数的
                Array.from(lis).forEach(function(li){
                    console.log(li.innerText);
                })    

        字符的增强

            includes 是否包含 （包含返回true 不包含返回false）

            startsWith 是否以这个字符串开头 （是返回true 不是返回false）

            endsWith 是否以这个字符串结尾 （是返回true 不是返回false）

            repeat 重复多次的去平铺对应的字符串               

                // indexOf的基础上增强
                //是否包含 includes
                console.log('abc'.includes('a')); //true
                //endsWith 是否以这个字符串结尾
                console.log('abc'.endsWith('abc'));//true
                console.log('abc'.endsWith('c'));//true
                //startsWith 是否以这个字符串开头
                console.log('abc'.startsWith('a'));//true
                console.log('abc'.startsWith('abc'));//true
                //平铺 repeat 平铺的次数 重复多次的写个字符串
                console.log('abc'.repeat(3));//将abc写3次

        变量修饰符（增强）

            var 关键词修饰的变量是伪全局变量（进行变量提升）

            let 关键词 块状作用域 （变量名不能重复声明 避免变量名污染）

            const 关键词 常量（常量不可变 也不能重复声明 声明一定要赋值（不能二次赋值））               

                var btns = document.querySelectorAll('button')
                // var 关键词声明的伪全局作用域
                for(var i=0;i<btns.length;i++){
                    btns[i].onclick = function(){ //当前的事件是异步操作
                        console.log(i); //3 异步比同步晚执行 var关键词修饰的变量是伪全局变量
                    }
                }
                // let 块级作用域 只在当前的代码块内有用
                for(let i=0;i<btns.length;i++){
                    btns[i].onclick = function(){ //当前的事件是异步操作
                        console.log(i); //3 异步比同步晚执行 var关键词修饰的变量是伪全局变量
                    }
                }
                // let 在同一作用域优点不能重复命名
                let a = 10
                // let a = 20 报错 不能重复声明
                // 当你省略了对应的修饰符 默认就是以var关键词修饰
                // const关键词 声明常量 他同样具备块级作用域 const定义的变量的不能重新赋值
                // 声明的时候 必须要赋值
                const a = 10
                // a = 20 错误的 因为const修饰的变量不允许更改
                // const b 错误的 必须要赋值
                // es6 不是所有浏览器都可以直接解析的 不建议写源码的时候用let const (babel.js 解析es高版本的内容 把变成低版本的)    

        新增的值类型

        旧有值类型

            number , String , boolean , null , undefined

        新增的类型

            symbol 独一无二的值             

               //如果去声明一个Symbol
                var v = Symbol() //独一无二的值
                var s = Symbol('这个值很重要') //里面的参数是一个说明
                var s1 = Symbol('这个值很重要') //里面的参数是一个说明
                console.log(v);
                console.log(s == s1);
                console.log(s.description);//获取里面的详情信息 也可以设置 当前这个详情是一个只读属性
                description
                v.description = 'hello' //没用 他是个只读属性
                //key是独一无二 当作对象的key值
                var obj = {v:'hello'}
                console.log(obj.v);

            bigInt 大的整型              

                 //bigInt 大的整型(存储number存不了的数据) 实现的方式 字符串传入实现
                // 传入字符串
                var str = '123456789123456789'
                console.log( Number(str));
                var bigNumber = BigInt(str)
                console.log(bigNumber); 

   

        对象的增强

        静态方法

            is方法 Object.is() 判断俩个对象是否是一个（true或者false）

               

                // NaN
                console.log(NaN == NaN);//false
                //Object.is 主要解决NaN和NaN的问题
                console.log(Object.is(NaN,NaN));//true NaN是值类型(常量)
                console.log(Object.is({},{}));//false {}对象

 

            Object.assign 将后面对象合并当前前面 返回的是合并的对象

          

                var obj = {sex:'男'}
                //assign 目标对象 来源对象 将后面的合并到前面 返回一个对象 会影响之前的对象
                var res = Object.assign(obj,{name:'张三',age:18})
                console.log(obj);
                console.log(res);
                console.log(Object.is(obj,res));//true 浅拷贝( Object.assign)  

                 

        函数增强

            箭头函数           

                 // //箭头函数一般都是匿名函数
                // var hello = function(){ //之前的写法
                // }
                //箭头函数的写法 ()形参 {}代码块 把function省略了 加了个=>
                var hello = ()=>{
                    console.log('hello')
                }
                //调用
                hello()

            箭头函数的简化

            如果只有一个参数 可以省略()         

   

                // 简化 如果只有一个参数可以省略()
                var say = username => {
                    console.log(username);
                }
                say('jack')  

           

　　　　如果只有一句代码的话 可以省略{}   

         

                //当你只有一句代码的时候 {} 可以省略
                var world = username => console.log(username)
                world('hello')

 

            如果只有一句代码 且你需要返回数据情况下 可以省略对应的 retrun

                

                //当你只有一句代码的时候 且你需要返回值 那么return可以被省略
                var getUserName = username => username+'hello'
                var value = getUserName('张三')
                console.log(value); //张三hello
                //数组的forEach方法
                [1,2,3].forEach(value=>console.log(value))
                // 数组的reduce方法
                var sum = [1,2,3].reduce((pre,current)=>pre+current)
                console.log(sum);    

            箭头函数的特性

            箭头函数里面没有this（根据作用域链向上查找对应的this）

             

                // this谁调用 this指向谁 是在对应的普通函数的情况下
                // document.querySelector('button').onclick = function(){
                // console.log(this);//指向当前按钮
                // }
                //箭头函数
                document.querySelector('button').onclick = ()=>{
                    console.log(this); //箭头函数里面没有this 根据作用域链的情况 向上找 window
                }
                var hello = ()=>{
                    console.log(this);
                }
                hello.call({age:18}) // window 

        默认参数     

            function fn(agr1=value,arg2=value2){
            }          

            // 初始化一个对象 默认值
            function initObj(name,age=18,sex='男'){
                return {
                    name,age,sex
                }
            }
            console.log(initObj('jack'));//没有传参会使用默认值
            console.log(initObj('jack',19,'女'));//传了参会覆盖默认值

        对象里面内容的简化

            属性的简化

            当你的属性值是一个变量的情况下，以及你向使用你的变量作为key的名，这个时候可以省略key

               

                var age = 18
                var username = 'jack'
                //简化 使用变量做键的名 {age:age,username:username}
                var obj = {age,username}

            函数的简写          

                 var obj = {
                    say:function(){
                        console.log('hello')
                    }
                }
                obj.say()
                //简写 省略:和function
                var obj = {
                    say(){
                        console.log('hello')
                    }
                }
                obj.say()  

        循环的加强

            for in 是用于遍历对象的 遍历的是对象的里面key 他也可以遍历数组（数组也是对象）

            for of 是用于遍历数组的 遍历的是数组里面的value 他不可以遍历对象（只有实现了迭代器的对象才可以被遍历 必须具备length或者size属性）

   

        如果要使用对应的for of来遍历对象的话 怎么办！！

        Object的几个方法（静态方法） 可以用来实现对应的遍历

            keys 拿到所有的key

            values 拿到所有的值

            entries 拿到所有的键值对              

                var obj = {age:18,name:'jack',sex:'男'}
                //keys 获取所有的key 作为一个迭代对象
                var k = Object.keys(obj)
                console.log(k);
                //values 获取所有的value
                var v = Object.values(obj)
                //entries 获取所有的key-value对
                var e = Object.entries(obj)

        新增的对应的迭代器类型（实现了迭代器）

            set 元素不重复的一个集合（去重）    

        set声明 (无参)          

　　　　var set = new Set() //空的集合

        将数组作为参数传递         

            var arr = [1,1,2,2,3,3]
            var set = new Set(arr) //传入数组
            console.log(set) //1 2 3

        相关的方法（增删改查）

            add 添加

            delete 删除

            clear 清空

            keys 获取key

            values 获取值

            entries 获取键值对象

            forEach 遍历（三个参数分别是value,key,set）

            has 判断是否存在 （返回的是boolean类型）

        属性

            size 获取对应的长度

               

               //无参的形式
                var set = new Set()
                //添加 add append push...
                set.add(1)
                set.add(2)
                set.add(1)
                //获取对应的set的长度 size
                console.log(set.size);//2
                //删除方法 delete remove
                set.delete(1) //删除1这个value值
                //删除所有 清空
                // set.clear()
                //获取元素
                var key = set.keys() //获取所有key 值既是key 又是值
                var value = set.values() //获取所有的值
                var kv = set.entries() //获取所有的键值对
                console.log(kv);
                console.log(key);
                console.log(value);
                //set里面有一个forEach方法
                // 第一个是值 第二个key 第三个是遍历的set
                set.forEach((v,k,set)=>{
                    console.log(v);
                })
                //has 判断是否存在 返回true和false
                console.log(set.has(2));//true    

        WeakSet 内容存储对应的set（只能存储对象 但并不能完成去重）          

            var weakset = new WeakSet()
            weakset.add({username:"张三"})
            weakset.add({username:"张三"})
            weakset.add({username:"张三"})
            console.log(weakset);//里面还是存在3个