ES6全

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!-- <script>
    window.onload = function () {
        var a = 10;
        let b = 20;
        const c = 30;

        // ES5 预解析 变量提升  var function    结果 undefined 
        console.log(x);
        var x = 11;
        // ES6 中 直接报错
        //---------------------------------------------------------------------
        var aa = 11;
        var aa = 22;
        console.log(aa);  // ES5不报错  aa=22;

        let bb = 22;
        //let bb=33;   //ES6直接报错了,同一个作用域 不能出现相同的变量名称
        //-----------------------------------------------------------------------
        //ES6出现块级作用域

        function ff() {
            var cc = 111;
            if (true) {

                var cc = 999;
            }
            console.log(cc)  //999
        }
        function fff() {
            let cc = 111;
            if (true) {
                let cc = 999;
                console.log(cc)  //999
            }
            console.log(cc)  //111
        }
        //-------------------------------------------------
        function ddd1(i) {
            var i = 1000;
            console.log(i) // 1000   参数名 和变量名重了  var可以  let不行
        }
        ddd1(88);
        function ddd(i) {
            // let i = 1000;
            console.log(i) // Identifier 'i' has already been declared   参数名 和变量名重了
        }
        ddd(99);


        ff();
        fff();
        //-----------------------------------------------

        for (var i = 0; i < 5; i++) { }
        console.log(i)   // 5    var 把i 提升为全局变量了 相当于var i=1 ; var i=2... var i=5;
        for (let i = 0; i < 5; i++) { }
        console.log(i)   //     Identifier 'i' not fund  

        var arr = [];
        for (let i = 0; i < 5; i++) {
            arr[i] = (() => {
                console.log(i)
            })
        }
        arr[3]()     // var 都为5     改为let 则为对应的数字
        arr[1]()
    }

</script> -->

<!-- <script>
    // const 声明一个只读的常量, 只能读取——基本类型 初始化的时候必须给值   (另一种是引用类型)   栈里
    const abc = 111;
    // abc = 222; // 报错
    const abcarray = {
        name: 'kkk',

    }
    abcarray.name = 'req'  //这是可行的   引用类型     堆里
    //-----------------------------箭头=> 不能当做 构造函数 不能new 没有原型对象 不能用arguments-----------------------------------
    let f1 = function (v) {

        return v;
    }
    f1(1234);
    let f2 = v => v;
    f2(2345);

    //   let ice1 = new f2('ice', 10);   //:  报错 f2 is not a constructor   不能当做 构造函数
    function f3(name, age) {
        this.name = name;
        this.age = age;

    }   //构造函数用来生成对象的模板

    f3.prototype.sex = '1';                      //没有原型对象
    let ice = new f3('ice', 10);
    let jb = new f3('jb', 20);
    console.log(ice)

    function f4() {
        console.log(arguments)   //  不能用arguments  参数集合
        console.log(arguments[1])
    }
    f4(1, 2, 3, 4, 5, 6);

    let f5 = (a, b, ...c) => {
        console.log(c)     //3,4,5
    };             //箭头函数  用rest

    f5(1, 2, 3, 4, 5);
    //..............................................扩展运算符
    function f6(...item) {
        console.log(item)    //0,1,2,3,4,5,6
    }
    let arr10 = [1, 2, 3];
    let arr20 = [3, 4, 5];
    f6(0, ...arr10, ...arr20, ...[6]);
    //等价f6(0,1,2,3,4,5,6)
    let arr12 = [...arr10, ...arr20];
    let o1 = {
        id: 1,
        name: 'abc'
    }
    let o2 = {
        ...o1,
        sex: 0
    }
    //等价
    // let o2 = {
    //     id: 1,
    //     name: 'abc',
    //     sex: 0
    // }

    var str = 'global';
    var obj = {
        str: 'private',
        getstr: function () {
            console.log(this.str)   //private
        }
    }
    var obj1 = {
        str: 'private',
        getstr: () => {
            console.log(this.str)    //箭头函数本身是没有this的,他会去上下文寻找,obj1的上下文找到的是 global  严格模式报错
        }
    }
    obj.getstr();
    obj1.getstr();

</script> -->

<script>
    window.onload = function () {
        // ---------------------------------------数组解构-----------------
        let [x, y, z] = [true, [1, 2, 3], { id: 1 }];
        //等价
        // x=true;
        // y=[1,2,3];
        // z={id:1};
        let arr = [10, 20];
        if (arr[0]) {
            let x2 = arr[0]
        } else {
            let x2 = 1;
        }
        //简写
        let x2 = arr[0] || 1;
        //es6
        let [x3 = 1, x4 = 1] = arr;

        let [xx3 = 1, xxx4 = 1] = [undefined, null];   //xxx3=1,xxx4=null   undefined默认值生效  
        //对象解构

        let obj1 = {
            id: 999,
            name: 'kk',
            data: {
                name: 'bb',
                title: 'tt'
            },
            res: {
                data: {
                    act: '888act',
                    func: '999func'
                }
            }
        }
        // let id = obj1.id;
        // let act = obj1.res.data.act;
        //等价于  ES6
        let { id: _id = 1, act: _act = 'actdefault' } = obj1;     //:改的别名 = 给的默认值  es6更方便
        console.log(obj1);
        console.log(_id);
        //--------------------------------------------------------------------------------------------------------
        let arrk = [1, 2, 3, 4, 5, 6, 7, 1, 2, 5, 6, 7, 9, 10];
        const arrs = new Set();
        arrs.add(1).add(2).add(3).add(2); console.log(arrs);  //  {1,2,3}
        arrs.add(1).add(2).add(3).add('2'); console.log(arrs);  //  {1,2,3,'2'}  进行的是类型匹配

        const arr3 = new Set();
        arr3.add(arrk);
        console.log(arr3);    //这样没去重,相当于把arrk 作为一个对象添加进去了

        var arrs4 = new Set(arrk); console.log(arrs4);    //去重后的arrk   但不是数组了

        arrk.forEach((i) => {
            arrs.add(i);
        })
        console.log(arrs);

        let obj3 = new Object();
        obj3.id = 1;
        obj3['msg'] = 'no data';    //这添加的是属性
        //   obj3[msg] = 'nodata';       //msg 这只是一个变量  

        Array.from(arrs4);  //{}对象转数组
        [...arrs4];   //{}对象转数组


        // Array.from(arrs4((i) => {
        //     i > 5
        // }));

        console.log("//////////////////")
        console.log(Array.from(new Set(arrk.filter(i => i > 5))))    //去重排序

        const arr6 = [{ value: 30 }, { value: 10 }, { value: 3 }, { value: 60 }, { value: 30 }, { value: 30 }, { value: 30 }, { value: 30 },]  //去掉含3的

        let kk = arr6.filter(i => (i.value / 3 == 0));
        console.log([...(new Set(arr6.filter(i => ((i.value / 3) != 0))))])
    }

</script>

</html>

 

posted @ 2022-09-19 11:45  wolfsocket  阅读(7)  评论(0编辑  收藏  举报