ES6常用规范

let 定义变量


    for(let i = 0;i<5;i++){
        console.log(i); //可使用
    }
    // console.log(i); //不可使用

    //let未定义之前使用 会报错 ReferenceError 而var 只会显示 undefined

    console.log(s);
    var s = 0;

const 定义常量


    /**
     *  常量定义后必须赋值
     *  常量一旦定义就不能被改变, 但是对象除外.如果常量值是一个对象那么常量指向的只是对象的地址,而非对象的值
     *      所以对象值改变后,常量依然不会报错.除非把另一个对象赋值给此常量.这样才会报错
     *
     */
    user = {name:"网易",age:12};

    //定义常量 使用const关键字
    const TIME = user;
    // TIME = 1;   //这样改变常量是错误的
    console.log(TIME);

    //这样改变常量的值只是改变常量指向对象的内容,并不是改变常量指向对象的地址
    user.name = "腾迅";
    user.age = 11;

    console.log(TIME);   //被改变

ES6 变量解构赋值 [数组]

    // ES6之前定义变量
    var a = 1,b = 2,c = 3;  //这样定义做到最简化
    console.log(a ,b ,c);

    // ES6数组的使用 变量的解构
    var [a1,a2,a3] = [1,2,3];   //ES6的定义方式连对号都省略了
    console.log(a1,a2,a3);  //和上边的效果一模一样

    //如果我们想把后边的值全部复制给某个变量,可以使用省略号 ...  这样就把后边的全部值赋值给这个变量作为一个数组
    var [b1,...b2] = [1,2,3,4];
    console.log(b1);
    console.log(b2);//和下边的效果一样

    var s = [1,2,3];
    console.log(s);

    //如果我们想定义变量的时候就定义默认值,如果没有重新赋值则默认 是default 如果赋值则改变默认值
    var [e , d , g = "default" ,p = "default" ] = [1,2,3];
    console.log(e,d,g,p)

赋默认值的两种方式对比 >>>

ES6 变量解构赋值 {对象}

    // 这是一个对象,我们的需求是将对象中的属性抽离出来再赋值给变量
    var obj = {
        a:1,
        b:2,
        c:3
    }
    // 下边使用ES6的对象解构赋值
    var {a , b} = obj;
    console.log(a,b);    //这是打印变量a和b的值,把a和b从对象的a和b属性抽离出来赋值给变量 a 和 b
    console.log(obj.a,obj.b);   //这是打印对象中的a和b属性的值


    // 如果想在赋值的时候重命名变量的值,可以在赋值的时候在变量后边加上冒号
    let {a:A  , b:B ,d ="123"} = obj;   //对象变量赋值也可以赋默认值,当对象中没有这个变量的时候就这样来赋值
    console.log(A,B,d);

    /**
     * 在解构赋值之前 是不能使用led 对这个变量进行赋值的,因为在解构赋值操作过程中也是采取相同的赋值方式进行赋值的
     * 为了避免解构赋值的之前就已经出现这个变量名 而导致的结构赋值报错,可以去掉let的定义
     * 去掉let的定义会导致解析器认为 { }是一个代码块,所以应该在这条语句外部套上一个圆括号来帮助解构赋值
     */
    let c = 1;
    ({c} = obj);
    console.log(c);

    // 深层次解构赋值
    var obj1 = {
        arr:[
            "user",
            {
                p:1
            }
        ]
    };
    let {arr:[Username,{p}]} = obj1;
    console.log(Username,p);

    // 1:真实项目中模拟使用解构赋值
    let res = {
        status:200,
        id:12,
        data:[{name:"腾迅"},{name:"网易"}]
    }
    let {status,id,data} = res;
    console.log(status, id , data);

    // 2:解构函数,将Math类或者Nubmer类解构成指定名称函数,使调用的时候不需要再添加Math前缀
    let{floor:FF,round:RR} = Math;    //解构 向下取整 和 四舍五入两个函数
    let m = 1.5;
    console.log(FF(m))
    console.log(RR(m))

变量的解构赋值 (其他)

        //解构对象的原生属性 如 length
        let {length} = 'abc';
        console.log(length)

        //字符串赋值
        let [a,b,c] = "abc";
        console.log(a,b,c);

        //数组传参解构
        var arr = [1,2];
        function test([a,b]){
            console.log(a,b);
        }
        test(arr);

        //对象传参解构,前后顺序无所谓,不影响赋值,如果传进去的时候没有被赋值,那么则是可以使用定义的默认值的
        var obj = {d:4,c:3};
        function info({c,d,e="默认值"}){
            console.log(c,d,e);
        }
        info(obj);

ES6关于String字符串的新方法

        //查找一个字符串中是否存在指定字符串
        var bools = "ABCD".includes("A");    //返回一个布尔值
        var boolm = "ABCD".includes("E");    //返回一个布尔值
        console.log(bools);  // true
        console.log(boolm);  // false

        //查找一个字符串中是否存以某个字符开头
        var strs = "ABCD".startsWith("A");    //返回一个布尔值
        var strm = "ABCD".startsWith("B");    //返回一个布尔值
        console.log(strs);  // true
        console.log(strm);  // false

        //查找一个字符串中是否存以某个字符结束
        var ends = "ABCD".endsWith("D");    //返回一个布尔值
        var endm = "ABCD".endsWith("A");    //返回一个布尔值
        console.log(ends);  // true
        console.log(endm);  // false

        //返回重复一个字符串后的变量
        var string = "Hello ";
        var strings = string.repeat(5); //重复5次后返回
        console.log(strings)

ES6模板语法

        let title = "保暖内衣";

        // ES6之前的不可以断行,如需要断行中间需要加上加号 + 加号多了以后非常影响页面结构
        let str1 = "<div>" +
                        "<span>" + title+ "</span>" +
                    "</div>";
        console.log(str1);

        //ES6之后可以使用反引号可以断行,页面看起来很简洁,变量使用可以用 ${变量}
        let str2 = `
                        <div>
                            <span> ${title}
                                <span>2016</span>
                            </span>
                        </div>
                    `;
        console.log(str2);

ES6 Symbol类型

        /**
         *  ES6之前有6种数据类型
         *      undefined
         *      null
         *      Boolean
         *      String
         *      Number
         *      Object
         *  ES6之后新增一种数据类型
         *      Symbol
         *
         *
         *  JAVA中有四类八种数据类型 [ byte short int long ] [ float double ] char boolean
         *
         */


        // Symbol
        /**
         * var s1 = Symbol();
         * var s2 = Symbol();
         * s1 === s2 //false
         *
         * Symbol("参数")     //括号内的参数对 Symbol 的值不造成任何影响
         */

        let name = Symbol();
        {
            var person = {};
            person[name] = "File1";
            console.log(person[name]);  // File1
        }
        {
            let name = Symbol();
            person[name] = "File2";
            console.log(person[name]);  // File2
        }
            console.log(person[name]);  // File1

Proxy 

                                                   待定...

Set


        var s = new Set([1,2,3,4,4]);   //set内的值都是不重复的
        var p = new Set(["A","B","B"]);   //set内的值都是不重复的
        console.log(s);
        console.log(p);


        console.log(s.size);    //获取其size属性

        // 添加一个元素方法
        s.add(5);
        console.log(s);

        // 删除一个元素方法
        s.delete(3);
        console.log(s);

        // 检测是否包含这个值
        console.log(s.has(2));

        // 清空这个变量的内容
        s.clear();
        console.log(s);

猜你喜欢

转载自blog.csdn.net/Byte_Dance/article/details/83720578
今日推荐