精华内容
下载资源
问答
  • ES6新标准

    2020-10-26 19:31:38
    1. 块级作用域绑定 1.1 let变量声明及声明特性 变量不可以重复定义 (var可以) 块级作用域 还有全局 函数 eval ...ES6允许按照一定的模式从数组和对象中提取值,对变量进行赋值 数组结构 对象的解析 ...

    1. 块级作用域绑定

    1.1 let变量声明及声明特性

    1. 变量不可以重复定义 (var可以)
    2. 块级作用域 还有全局 函数 eval
    3. 不存在变量的提升
    4. 不影响作用域链
      在这里插入图片描述小练习:
      在这里插入图片描述

    1.2 const

    注意:

    • 一定要赋值
    • 一般常量使用大写
    • 常量的值不能修改下
    • 也是块级作用域
    • 对于数组和对象的元素的修改,不算是对常量的修改 不会报错
      a. 声明常量
      const SCHOOL=“西安”;

    1.3 解构赋值

    ES6允许按照一定的模式从数组和对象中提取值,对变量进行赋值

    • 数组结构
      在这里插入图片描述
    • 对象的解析
      在这里插入图片描述

    2.模板字符串

    ES6引入新的声明字符串的方式,[``] ’ ’ " "
    模板字符串的特点:

    1. 内容中可以直接出现换行符
    2. 变量拼接
    /*ES6引入新的声明字符串的方式 【``】 ' '  "   "
        */
    /*1. 声明:*/
         let str=`我是一个字符串哦`;
           console.log(str,typeof  str);
    
    /**
     * 特性:
     * 1. 内容中可以直接出现换行符
     * 2. 变量拼接
     */
    let kk =`<ul><li>沈腾</li><li>玛丽</li><li>艾伦</li><li>费翔</li></ul>`
        let man=`kunkun`;
        let things=`${man}真厉害`;
        console.log(things);
    
    

    3.对象的简化写法

    1. ES6允许大括号里面,直接写入变量和函数,作为对象的属性和方法
    2.ES6声明函数变简单了 取消了function

    在这里插入图片描述

    ES6以前:
    const abc={
    up:function(){
       }
    }
    
    
    ES6:
    const abc={
    up(){
           }
      }
    
    

    4.箭头函数

    ES6允许使用箭头函数:(=>)来定义函数

    ES6之前:
    声明一个函数:
    let fn=function(){
    
    }
    
    ES6:
    let fn =(形参列表)=>{
    函数的实体
    }
    调用函数:
    let result=fn(实参);
    
    1. this是静态的,this始终指向函数声明时,所在作用域下的this的值(很重要)
    并无自己的this
    2.  不能作为构造函数实例化对象
    3. 不能使用arguments变量
       let fn=()=>{
       console.log(arguments)}
    4.箭头函数的简写
       a.  省略小括号:当形参有且仅有1个
        let add=(n)=>{
        return n+n;
     }
    可以换成:   let add=n=>{
        return n+n;
    }
    b.省略花括号:当代码只有一条语句的时候可以省略,此时return 必须省略 ,而且语句的执行结果就是函数的返回值
    let pow=(n)=>n*n;
    console.log(pow(8));
    

    4.1 箭头函数的实践

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>箭头函数</title>
        <style type="text/css">
            div{
                width:200px;
                height: 200px;
                background-color: chartreuse;
            }
    
        </style>
    </head>
    <body>
        <div id="ad">
    
    </div>
    <script  >
    /*需求:点击 div后两秒将颜色切换为粉色
        */
    //1. 获取元素
        let ad=document.getElementById("ad");
        /*绑定事件*/
        ad.addEventListener("click",function(){
    //定时器:
            setTimeout( () =>  {
                //修改背景颜色
                this.style.backgroundColor="pink";
            },2000)
    });
    
        //2.从数组中返回是偶数的元素
        const str=[100,200,201,206,205];
        const result=str.filter(function (arr) {
            if(arr%2===0){
                return true;
            }else {
                return false;
            }
        });
        console.log(result);
    
        const results=str.filter(item=>item%2===0
    );
        console.log(results);
    /**
     * 箭头函数适合与this无关的问题,定时器,数组的方法回调
     * 箭头函数不适合与this有关的回调,事件回调,对象的方法
     */
    
    </script>
    </body>
    </html>
    

    箭头函数适合与this无关的问题,定时器,数组的方法回调 箭头函数不适合与this有关的回调,事件回调,对象的方法

    5.函数参数的默认值

    ES6允许给函数参数赋值初始值

    1. 形参初始值: 具有默认值的参数,一般位置要靠后(潜规则)
    2. 与结构赋值结合使用
    //与结构赋值结合:
        function connect({host='127.0.0.1',username,password,prot}) {
            console.log(host);
            console.log(username);
            console.log(password);
            console.log(prot);
        }
        connect({
            host:'localhost',
            username:'kunkun',
            password:"tjk",
            prot:3306
        })
    

    6. rest参数

    ES6 引入rest参数,用于获取函数的实参,用来代替arguments

    <body>
    <script  >
    //获取实参的方式:
        function date() {
            console.log(arguments);
        }
        date('kunkun','tjk','田甲坤');
        date1('kunkun','tjk','田甲坤');
        function date1(...args) {
            console.log(args);
        }
    </script>
    </body>
    

    在这里插入图片描述
    区别:arguments 获取的数据是object类型的数据
    rest参数是数组类型的==可以使用数据的api
    rest参数必须放在参数之后

    7.扩展运算符

    ...扩展 运算符能将数组转化为逗号分隔的参数序列

    <script  >
    const tfbosys=['易烊千玺','王元','王俊凯'];
    function chunwan() {
       console.log(arguments)
    };
    chunwan(tfbosys);
    chunwan(...tfbosys);
    
    </script>
    

    在这里插入图片描述

    7.1 扩展运运算符的应用-数组的合并

    //1. 数组的合并
        const kuaizi=['王太利','小样'];
        const fenghuangchuanqi=['增益','零花'];
        const result=[...kuaizi,...fenghuangchuanqi];
        console.log(result);
    
    

    在这里插入图片描述

    7.2 扩展运算符的应用-数组的克隆

    <script  >
    //数组的克隆
    const sanzhihua=['B','G','M'];
    const sanyecao=[...sanzhihua];
    console.log(sanyecao);
    
    </script
    

    在这里插入图片描述

    7.3将伪数组转化为数组

    <body>
    <div></div>
    <div></div>
    <div></div>
    <script  >
    //将伪数组转化为数组
        const divs=document.querySelectorAll("div");
        console.log(divs);
        const  divss=[...divs];
    
        console.log(divss);
    
    </script>
    

    在这里插入图片描述

    8.symbol 的介绍与创新

    8.1 Symbol对象的创建

    ES6引入一种新的数据类型symbol,表示独一无二的值,是一种类似与字符串的数据类型

    • 特点:
    1. Symbol的值是唯一的,用来解决命名冲突问题
    2. Symbol的值不能与其他数据类型相运算
    3. Symbol定义的对象属性,不能使用for in循环遍历,但可以使用Relect.ownKeys来获取对象的所有键名
    <script  >
    //symbole的介绍
        //(1)创建Symbol
        let s= Symbol();
        console.log(s ,typeof  s);
       //(2)创建Symbol
        let s2=Symbol("tjk");
        let s3=Symbol("Kunkun");   //加入参数只是对该Symbol对象进行描述.无实际作用
        console.log(s2===s3);
        //(3)创建Symbol  此方法创建了一个symbol对象  描述具有实际作用,用以确定对象一致
        let s4=Symbol.for("kunkun");
        let  s5=Symbol.for("kunkun");
        console.log(s4===s5);
        console.log(s4,typeof s4);
    
    /**
     * 注意事项:
     * 1. 不能与其他数据进行运算
     * 2. 那么js的数据类型有USONB   
     */
    </script>
    

    在这里插入图片描述

    8.2 对象添加symbol类型的属性

    8.2.1:第一种:

    <script  >
    //symbole向对象中添加方法   up down
        let game={
            name:"tjk",
            up:function (){},
            down:function () {}
    
        }
          //声明一个对象:
        let methods={
            up:Symbol(),
            down:Symbol()
        };
    game[methods.up]=function () {
        console.log("我可以改变形状");
    };
    
    game[methods.down]=function () {
            console.log("我可以快速的下降");
        };
        console.log(game)
    </script>
    

    在这里插入图片描述

    8.2.2 第二种:

    //第二种:
        let youxi={
            name:"狼人杀",
            [Symbol('say')]:function () {
                console.log("我可以发言");
            },
            [Symbol("自爆")]:function () {
                console.log("zibaol ");
            }
        }
        console.log(youxi);
    

    在这里插入图片描述

    8.3 Symbol的内置属性

    除了定义自己使用的 Symbol 值以外, ES6 还提供了 还提供了 11个内置的 Symbol值指向语言内部使用的方法。 可以称这些方法为魔术,因它们会在特定的场景下自动执行。

    Symbol.hasInstance 当其他对象使用 instanceof运算符,判断是否为该对对象的实例,会调用这个方法
    Symbol.isConcatSpreadable 对象的 Symbol.isConcatSpreadable属性等于的是一个 布尔值,表示该对象用于 Array.prototype.concat()时, 是否可以展开。 是否可以展开。
    Symbol.species 创建衍生对象时,会使用该属性
    Symbol.match 当执行 str.match(myObject) 时,如果该属性存在会调用他,返回该方法的值。
    Symbol.replace 当该对象被 当该对象被 str.replace(myObject)方法调用时,会返回该方法的返回值
    Symbol.search 当该对象被 当该对象被 str. search (myObject)方法调用时,会返回该方法的返回值。
    Symbol.split 当该对象被 str. split (myObject)方法调用时,会返回该方法的返回值。
    Symbol.iterator 对象进行 for…of循环时,会调用 Symbol.iterator方法, 返回该对象的默认遍历器
    Symbol.toPrimitive 该对象被转为原始类型的值时,会调用这个方法,返回该对象应的原始类型值。
    Symbol. toStringTag 在该对象上面调用返回该方法的返回值
    Symbol. unscopables 该对象指定了使用 with关键字时,哪些属性会被 with环境排除。

    9.迭代器

    9.1 迭代器的基本知识

    迭代器(iterator) 是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署iterator接口,就可以完成遍历操作
    1)ES6 创造了一种新的遍历命令 for…of,iterator主要供for…of消费
    2)原生具备iterator接口的数据
    array,Arguments,set,map,string,TypedArray,nodeList
    3)工作原理:
    创建一个指针对象,指向当前的 数据结构的起始位置
    第一个调用对象的next方法,指针自动指向数据结构的第一个成员
    接下来不断调用next方法,指针一直往后移,直到最后一个对象
    每调用next方法返回一个包含value和done属性的对象
    注意:需要自定义遍历数据的时候,要想到迭代器

    for in
    在这里插入图片描述
    在这里插入图片描述
    for of
    在这里插入图片描述
    在这里插入图片描述

    9.2 自定义迭代器遍历数据

    <script  >
    const stu={
        name:"kunkun",
        stus:[
            "xiaoming",
            "xiaohong",
            "xiaoliang",
            "xaiozhang"
        ],
        //增加迭代器接口
        [Symbol.iterator](){
            let index=0;
         //   let _this=this;
            return {
            //指针函数用以方便this的指定
                next:() =>{
                    if (index<this.stus.length){
                        const result={value:this.stus[index],done:false};
                        index++;
                        return result;
                    }else{
                        return {value:undefined,done:true};
                    }}}}}
    //使用迭代器遍历数据
    for (let v of stu){
        console.log(v);
    }
    </script>
    
    

    10. 生成器

    10.1 生成器的基础

    <script  >
    //生成器其实就是一个特殊的函数
        //异步编程 纯回调函数
    
        function *gen() {
            console.log("111");
            yield '11111111';    //函数代码的分隔符
            console.log("222");
            yield '22222222';
            console.log("333");
            yield '33333333';
            console.log("444");
            yield '44444444';
        }
        let  iterator=gen();//调用后并没执行
        iterator.next();//执行了
        iterator.next();
        iterator.next();
        iterator.next();
    
    </script>
    

    生成器函数声明的时候必须在function后加* ,调用的时候直接调用不会执行,调用必须用next函数才可执行,并且执行一次只能在一块代码分割符中的代码

    10.2 生成器的参数

    <script  >
    //生成器其实就是一个特殊的函数
        //异步编程 纯回调函数
        function *gen(args) {
            console.log(args);
          let one= yield '11111111';    //函数代码的分隔符
           console.log(one);
           let  two=yield '22222222';
            console.log(two);
            let  three=   yield '33333333';
            console.log(three);
            let  four=    yield '44444444';
            console.log(four);
        }
        //执行获取迭代器对象
        let  iterator=gen('AAA');//调用后并没执行
    //next 方法可以传入实参
        console.log(iterator.next());
        console.log(iterator.next("bbb"));//第二次调用next语句,传入的实参是作为第一个yield整体的返回结果
        console.log(iterator.next('ccc'));
        console.log(iterator.next('ddd'));
    </script>
    

    第二次调用next 的方法,传入的参数是作为第一个yeild的语句的返回值结果

    10.3 生成器的实例

    <script  >
    //异步编程:文件操作  数据库操作 网络操作  (ajax request)
        //1s后控制台输出111 2s后控制台输出222 3s后红纸太输出333
    --第一种:
    /*    setTimeout(()=>{
            console.log("111");
            setTimeout(()=>{
                console.log("222");
                setTimeout(()=>{
                    console.log("333");   //地狱回调
    
                },3000)
            },2000)
    },1000)*/
    --第二种
    //用生成器函数
    function one(){
        setTimeout(()=>{
            console.log("111");
            iter.next();
        },1000)
    }
    function two(){
        setTimeout(()=>{
            console.log("222");
            iter.next();
        },2000)
    }
    function three(){
        setTimeout(()=>{
            console.log("333");
        },3000)
    }
    
    function  *iterator() {
        yield one();
        yield two();
        yield  three();
    }
    
    let iter=iterator();
    iter.next();//这样做可以避免地狱回调
    </script>
    

    10.4生成器实例2

    <script  >
    //模拟获取, 用户数据 订单数据 商品数据
        function  getUser() {
            setTimeout(()=>{
                let data='用户数据';
                 iterator.next(data);
            },1000);
        }
    function  getOrder() {
        setTimeout(()=>{
            let data='订单数据';
            iterator.next(data);
        },1000);
    }
    function  getGoods() {
        setTimeout(()=>{
            let data='商品数据';
            iterator.next(data);
        },1000);
    }
    function *gen() {
      let user=  yield getUser();
      console.log(user);
       let order=yield getOrder();
        console.log(order);
      let goods=  yield getGoods();
        console.log(goods);
    }
    //调用生成器函数
        let iterator=gen();
        iterator.next();
    </script>
    

    在这里插入图片描述

    11.Promise

    11.1 介绍和基本使用

    promise是ES6引入的异步编程的新解决方案,语法上promise是一个构造函数,用来封装异步操作,并可以获得其成功和失败的结果

    • promise构造函数:Promise(excutor){}
    • Promise.prototype.then方法
    • Promise.prototype.catch方法
    <script>
    //实例化promise对象
        const p=new Promise(function (resolve ,reject) {
            setTimeout(function () {
                let data='数据库中的数据';
                //resolve//表示成功
              //  resolve(data);
               let error='数据抽取失败';
                reject(error);//表示失败了
            },1000)
        });
        //调用promise对象的then方法
        p.then(function (value) {
            //成功的参数是value
            console.log(value);
        },function (reason) {
            //失败的参数是reason
            console.error(reason);
        })
    </script>
    

    在这里插入图片描述

    11.2 promise-ajax

    <script>
        const  p=new Promise((resolve,reject)=>{
            //创建对象
            const xhr=new XMLHttpRequest();
            //初始化
            xhr.open('GET','https://api.apiopen.top/getJoke');
            //发送
            xhr.send();
            //绑定事件
            xhr.onreadystatechange=function () {
                //判断
                if (xhr.readyState===4){
                    //判断响应状态
                    if(xhr.status>=200&&xhr.status<300){
                        //表示成功
                        resolve(xhr.response);
                    }else{
                        reject(xhr.status);
                    }
                }
            }
        });
        p.then(function (value) {
            console.log(value);
        },function (reason) {
            console.error(reason);
        })
    </script>
    

    11.3 Promise.then 的返回值

    调用then方法,then方法的返回结果是promise对象,对象状态由回调函数的执行结果决定

    1. 如果回调函数中返回结果是非promise类型的属性,状态为成功,返回值为对象的成功
    2. 返回值类型还可以是promise 类型的
    3. 还可以链式调用

    在这里插入图片描述
    catch方法:

    <script>
    const p=new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //设置p对象的状态为失败,并设置失败的值
            reject("出错了!");
        },1000);
    });
    p.catch((reason)=>{
        console.warn("出错了");
    })
    </script>
    

    12 集合

    12.1 set集合

    <script>
        const s1=new Set();
        const s2=new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);//会自动清除重复的数据
        console.log(s2);
        s2.add('tjk');//添加数据
        s2.delete('小事儿');//删除数据
       console.log( s2.has('大事儿'));//查看数据是否存在
        //清空
        s2.clear();
        console.log(s2);
        //for .. of循环遍历
        for (let ss2 of s2){
            console.log(ss2);
        }
    
    </script>
    

    12.2 Set集合实践

    <script>
    let arr=[1,2,2,3,4,5,6,4,5,6,7,8,9];
    //1.数组去重
        let result=new Set(arr);
        console.log(result);
    //2.交集
        let arr2=[2,3,5,6];
        let result2=[...new Set(arr)].filter(item=>{
            let s2=new Set(arr2);
            if(s2.has(item)){
                return true;
            }else{
                return false;
            }
        })
        console.log(result2);
        //3.并集
        let union=[...arr,...arr2];
        console.log(union);
        let result3=new Set(union);
        console.log(result3);
        //4.差集
        let diff=[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));
        console.log(diff);
    </script>
    

    在这里插入图片描述

    12.3 map集合

    ES6提供了Map数据结构。它类似于对象, 也是键值对集合

    <script>
       //声明Map
       let m=new  Map();
       //添加元素
       m.set("name",'tjk');
       console.log(m);
       m.set('key',['中国','陕西','韩城']);
       //删除
       m.delete('name');
       console.log(m);
       //获取
       console.log(m.get('key'));
       //for of
       for (let mm of m){
           console.log(mm);
       }
       //清空
       m.clear();
    
    </script>
    

    13 Class

    引入class类的概念是为了将ES6表现得更像传统语言的写法,使对象的原型更加清晰,更像是面向对象编程
    ES5利用构造方法来实现实例化对象

    <script>
        //手机
        function Phone(brand,price) {
            this.brand=brand;
            this.price=price;
    
        }
        //添加方法
        Phone.prototype.call=function () {
            console.log("我可以打电话");
        }
    
        //实例化对象
        let huawie=new Phone('华为','5999');
        huawie.call();
        console.log(huawie);
    </script>
    

    ES6

    class Phone{
        //构造方法,名字不能重复
        constructor(brand,price){
            this.brand=brand;
            this.price=price;
        }
        //方法必须使用该语法
        call(){
          console.log("我可以打电话");
        }
    }
    
    let huawei=new Phone("1+",'59999');
    huawei.call();
    console.log(huawei);
    

    13.1 Class静态变量

    <script>
    class Phone{
        //构造方法,名字不能重复
        static name='手机';//是属于类的name  不是实例化对象的name
        static change(){
            console.log("是吗,是的");
        }
    
    }
        let  nokia=new Phone();
        console.log(nokia.name);
        console.log(Phone.name);
    </script>
    

    在这里插入图片描述类中的静态变量和方法,是属于类的,重新实例化以后不属于实例化对象

    13.2 ES5的构造函数和继承

    <script>
    
        //手机
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }
    
        Phone.prototype.call = function(){
            console.log("我可以打电话");
        }
    
        //智能手机
        function SmartPhone(brand, price, color, size){
            Phone.call(this, brand, price);
            this.color = color;
            this.size = size;
        }
    
        //设置子级构造函数的原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor = SmartPhone;
    
        //声明子类的方法
        SmartPhone.prototype.photo = function(){
            console.log("我可以拍照")
        }
    
        SmartPhone.prototype.playGame = function(){
            console.log("我可以玩游戏");
        }
    
        const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');
    
        console.log(chuizi);
    
    
    </script>
    

    13.3 ES6类的继承

    <script>
    class phone{
        //构造函数
        constructor (brand,price){
            this.brand=brand;
            this.price=price;
    
        }
    
        //成员属性
        call(){
            console.log("我可以打电话");
        }
    }
    //子类
    class smartPhone extends phone{
        constructor(brand,price,color,size){
            super(brand,price);
            this.color=color;
            this.size=size;
        }
        puoto(){
            console.log("我可ui拍照");
        }
        palyGanme(){
            console.log("我可以玩游戏");
        }
    }
    const  xiaomi=new smartPhone("小米",'3444','heise','5.99' );
    console.log(xiaomi);
    xiaomi.palyGanme();
    xiaomi.puoto();
    </script>
    

    在这里插入图片描述

    13.4 Get 和Set

    <script>
            // get 和 set  
            class Phone{
                get price(){
                    console.log("价格属性被读取了");
                    return 'iloveyou';
                }
    
                set price(newVal){
                    console.log('价格属性被修改了');
                }
            }
    
            //实例化对象
            let s = new Phone();
    
            // console.log(s.price);
            s.price = 'free';
        </script>
    

    14.其余细节

    14.1 数值扩展

        <script>
            //0. Number.EPSILON 是 JavaScript 表示的最小精度
            //EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
             function equal(a, b){
                 if(Math.abs(a-b) < Number.EPSILON){
                     return true;
                 }else{
                     return false;
                 }
             }
             console.log(0.1 + 0.2 === 0.3);
             console.log(equal(0.1 + 0.2, 0.3))
    
            //1. 二进制和八进制
             let b = 0b1010;
             let o = 0o777;
             let d = 100;
             let x = 0xff;
             console.log(x);
    
            //2. Number.isFinite  检测一个数值是否为有限数
             console.log(Number.isFinite(100));
             console.log(Number.isFinite(100/0));
             console.log(Number.isFinite(Infinity));
            
            //3. Number.isNaN 检测一个数值是否为 NaN 
             console.log(Number.isNaN(123)); 
    
            //4. Number.parseInt Number.parseFloat字符串转整数
             console.log(Number.parseInt('5211314love'));
             console.log(Number.parseFloat('3.1415926神奇'));
    
            //5. Number.isInteger 判断一个数是否为整数
             console.log(Number.isInteger(5));
             console.log(Number.isInteger(2.5));
    
            //6. Math.trunc 将数字的小数部分抹掉  
             console.log(Math.trunc(3.5));
    
            //7. Math.sign 判断一个数到底为正数 负数 还是零
            console.log(Math.sign(100));
            console.log(Math.sign(0));
            console.log(Math.sign(-20000));
    
        </script>
    

    14.2 对象的扩展

    <script>
    //1.Object is判断两个值是否完全相等
        console.log(Object.is(200,200));//从一定程度上可以认为是===
        console.log(Object.is(NaN,NaN));//从一定程度上可以认为是===
        console.log(NaN===NaN);
    //2.Object.assign对象合并
        const config1={
            host:'localhost',
            port2:'3306',
            name:"tjk",
            password:'tjk',
            test1:'test1'
    
        };
        const config2={
        host:'127.0.0.1',
        port1:'33060',
        name:"tjktzz",
        password:'tjktzz',
        test1:'test2'
    }
    console.log(Object.assign(config2,config1));
    
        //3. Object.setPrototypeOf();//设置原型对象   Object.getPrototypeOf();
        const school={
            name:'西安',
            age:'10086',
            pass:'100788'
    }
    const  classRoom={
            name:10099,
            location:'xian'
    }
    console.log(Object.setPrototypeOf(school,classRoom));
    </script>
    

    在这里插入图片描述
    Object.assign()介绍

    14.3 模块化

    模块化是指将一个很大的程序文件,拆分成许多小的文件,然后将小文件组合起来

    • 模块化的好处:
    1. 防止命名冲突
    2. 代码复用
    3. 高维护性
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述还可以这样进行暴露:
      export{Object1,Object2}
      默认暴露
      exprot default{
      Object1,Object2
      }
    • 引入:
      在这里插入图片描述简便形式的引入只能针对于默认暴露
    展开全文
  • // 有时候单行也可以 ,但是会碰见换行的...es6给我们新增了一些 的操作方式 1.首先是字符串 我们可以通过 for of 进行遍历 for(var item of hello){ console.log(item); // 输出 h e l l o } 2.同时 es5中提供
  • es6新标准

    2019-09-17 18:54:36
    块级作用域是es6新增内容,作用是将模块化的内容独立开,可以配合let使用,块级内的内容可以不受其他块级的影响,let是的声明方法,类似于var,但是let申明的变量只在块级作用域内有效 var a = []; for (var i =...

    一、关于let和const以及块作用域

       块级作用域是es6新增内容,作用是将模块化的内容独立开,可以配合let使用,块级内的内容可以不受其他块级的影响,let是新的声明方法,类似于var,但是let申明的变量只在块级作用域内有效

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    console.log(a[6]()); // 10
    
    
    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    console.log(a[6]()); // 6

    这里的输出是不同的,前者for循环里的i用全局变量定义,每一次的循环,都会改变i值, 这里的i是同一个,二后者的i使用let定义,只在当前块级(当前循环)有效,可以这么理解,这里的i有10个,并且都会被记录,这种新的定义方式,在某些时候会非常有效,比如,因为全局变量会引起堆栈,如果大量使用,会造成性能上的“硬伤”。

    const就类似于其他语言的“常量”,一旦定义就不能被改变,并且也只在块级作用域内有效。

    二、解构赋值

        解构赋值,是一种新的赋值方式,可以简化原有的赋值方式

    //es5
    var a=1;
    var b=2;
    var c=3;
    
    //es6
    var [a,b,c] = [1,2,3]

    这种赋值可以大大简化代码,并且提高可读率;解构赋值的核心就是“匹配模式”,等号两边的模式必须相等,否者会出现错误。

    解构赋值常用语对数组、对象、函数返回多个值得情况,具体如下:

    //数组
    var arr=[1,2,3,4];
    
    var [f,s,t] = arr;//f=1,s=2,t=3
    
    //对象
     
    var Person  ={
    	name:"aaa",
    	age:"12",
    };
    		
    function add({name,age}){
    	console.log(name,age);
    };
    add(Person);//aaa 12
    //使用这种方法,可以返回多个参数是对象的成员
    
    
    //如果函数返回多个值,优先使用对象的解构赋值
    
    function sum() {
    	return [1,2,3,4];
    };
    var [a,b,c,d] = sum();
    console.log(a,b,c,d);

    三、数组的扩展

    数组在es6,加了不少东西,比如可以直接将类数组直接转换为数组的方法,以前只能使用数组的原型方法:Array.prototype.slice.call(),但是现在可以直接使用Array.form()方法,以及将一组值转换成数组Array.of(),find()/findIndex(),是新增的筛选方法.

    我认为最重要的还是扩展运算符(...),他的作用是可以将数组转成一个个独立的值

    var arr = [1,2,3,"a","b","c"];
    console.log(...arr);//1 2 3 "a" "b" "c"

    扩展运算符主要用于函数的调用和传参

    function push(arr,...items){
    	arr.push(...items);
    	console.log(arr);
    };
    var p =[];
    push(p,1,2,3,4);
    
    function add(x,y){
    	return x+y;
    };
    var number = [14,15];
    add(...number);
    console.log(add(...number));

    四、函数的扩展

    比较复杂,暂时不写!

    转载于:https://my.oschina.net/u/3470995/blog/1538394

    展开全文
  • ES6新标准 提要

    2016-11-17 15:07:52
    1.增加局部变量 关键字: let 常量:const 2.class  3.函数写法: save = (i)=> i+1 4.js中html  `` 5.解构
    1.增加局部变量 关键字: let   常量:const
    2.class 
    3.函数新写法: save = (i)=> i+1
    4.js中html  ``
    5.解构
    详细内容参见ES6入门
    展开全文
  • ES6新标准:Proxy的讲解

    2020-07-22 20:44:30
    今天它来了,proxy 是es6新增加的一个东西 翻译过来就是代理意思。 在js中有一种设计模式叫做代理模式,为一个目标对象添加一个 中间层 不让直接访问和修改目标对象 代理模式是一种对程序对象进行控制性访问的一类...

    随着vue3.0离我们越来越近了,无意中听到的一句话,在学习3.0之前最好把es6的 Map和Set数据结构,Proxy和Reflect。
    今天它来了,proxy 是es6新增加的一个东西 翻译过来就是代理意思。
    在js中有一种设计模式叫做代理模式,为一个目标对象添加一个 中间层 不让直接访问和修改目标对象
    代理模式是一种对程序对象进行控制性访问的一类解决方案。
    不过这个代理模式并不是 我们今天说的 重点,只是Proxy 所实现就是代理模式
    你可以把Proxy 理解成在目标对象前面加了一个"拦截"层,外界想要访问目标对象必须先过一下这个拦截。大家都知道vue2.0 使用的拦截是 Object.definedProperty() 但是3.0很大的改写就是 用了 proxy 做了拦截
    这里举一个小例子吧

    var obj=new Proxy({},{
    	get:function(){
    		console.log('想要获取对象数值,先从我这里过!');
    	},
    	set:function(){
    		console.log('想要设置对象数值,也先从我这里过!');
    	}
    })
    console.log(obj.name); // 获取数值
    obj.name="zhangsan"  // 设置数值
    

    下面是输出的结果
    在这里插入图片描述
    从上面可以看出和 确实实现了拦截 我们想要获取和设置对象数值的时候,都出现了我们设置的拦截打印信息
    有的童鞋可能纳闷 都拦截了 我们怎么获取对象的属性值呢
    这还不容易当然是 把拦截去掉不就行了
    又有点废话了 那要这个Proxy 有啥用 至于怎么获取 属性值 之后的 Reflect 中会进行详细讲解 今天 只是讲一讲拦截层
    不过上面的却不是 玩笑话 你把拦截内容设置为空他就直接访问到 源对象了

    var obj={
    	name:"zhangsan"
    }
    var proxy=new Proxy(obj,{})
    console.log(proxy.name); // 输出 张三
    

    当然要想使 拦截生成 必须是 由 proxy 实例化生成对象才可以哦 比如上面的proxy

    工作中我们会把他们分开进行书写
    正确格式是

    var target={} // 目标对象 
    var handler={} //进行拦截的内容
    var proxy=new Proxy(target,handler); // 代理对象
    

    下面我们正式进入详细讲解
    其实上面的 get 和set方法 里面还可以传入参数

    var obj={
    	name:"zhangsan"
    }
    var proxy=new Proxy(obj,{
    	get:function(target,key,receiver){
    		console.log(target); // 目标对象
    		console.log(key);   // 访问的目标 属性
    		console.log(receiver);  // proxy 代理对象
    		console.log('------------get--------------')
    	},
    	set:function(target,key,value,receiver){
    		console.log(target);
    		console.log(key);
    		console.log(value);  // 要设置的 value值
    		console.log(receiver);
    	}
    })
    proxy.name;  // 获取  get
    proxy.age=18; // 设置  set
    

    在这里插入图片描述
    以后继续 更新 关注我

    展开全文
  • es6中有一种的变量赋值的方式,允许按照一定的模式从数组和对象中提取值,然后进行变量的赋值,这被称为结构。 1.在以前的时候我们的赋值方法是下面的这种 // 依次赋值 let a=1; let b=2; let c=3; // 要不就是 var...
  • es6中关于对象的扩展,在工作中是非常常用的,提供了很多的便利性。 下面就进行一一的讲解说明。 1.对象的简洁表示法 以前我们要给对象的一个属性赋值成一个变量的时候 let name="zhangsan"; var obj={ name:name }...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,216
精华内容 11,286
关键字:

es6新标准