首页 > 其他分享 >ES6全

ES6全

时间:2022-09-19 11:57:26浏览次数:49  
标签:function ES6 console log ... let var

<!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>

 

标签:function,ES6,console,log,...,let,var
From: https://www.cnblogs.com/soulice/p/16707247.html

相关文章

  • ES6 对String做的常用升级优化
    ES61.let有什么用,为什么有了var还要使用let在ES6之前,声明变量只能用var,var声明变量有很多不合理的点,准确的说是因为ES5中没有块级作用域是很不合理的,甚至可以说是一门语......
  • ES6 let关键字和var关键字的区别
    建议:在默认情况下使用const,而只有在你知道变量值需要被修改的情况下使用let......
  • Es6 模块化规范(import)
    index.js文件://第1种导出方式exportletaddress="cz";exportletobj={b:2};//import/export输出的是值的引用address="河北省沧州市"//当前文件执行完......
  • 了解 ES6 中 var、let 和 const 的范围
    了解ES6中var、let和const的范围了解ES6中的全局、本地和块级作用域发病前ES2015(ES6),这曾是statement是在JavaScript中声明变量的唯一选项。然而,由于......
  • new Set()的基础用法(ES6)
    1、什么是Set()Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。Set本身是一个构造函数,用来生成Set数据结构2、......
  • 学习现代 JavaScript (ES6+) 的基础知识
    学习现代JavaScript(ES6+)的基础知识您应该在代码中开始使用的10个现代功能您可能已经知道JavaScript是一种功能丰富的编程语言,每次更新都会不断增强。有很多事......
  • es6中箭头函数
    箭头函数相当于匿名函数,简化了函数定义。 箭头函数有两种写法,当函数体是单条语句的时候可以省略{}和return。另一种是包含多条语句,不可以省略{}和return。 特点箭......
  • ES6 关键字 let 和 ES5 及以前关键字 var 的区别
    var在ES5及以前,通过var在块级作用域中声明的变量,外边也可以访问。块级作用域就是一对{}的作用域;块级作用域可以是控制语句的作用域,也就是非函数的作用域。functionf()......
  • 对比es6class类和构造函数
    构造函数  在原来class类这个语法糖没有出来之前我们一般会把方法挂在prototype上为了防止过多的开辟内存1//构造函数-------------------------------......
  • ES6模块化和CommonJS模块化
    我之前学习模块化的时候,曾在node中使用过,它采用的时CommonJS模块化标准,源自于JavaScript社区自发产生。CommonJS使用方法为:导入:require('模块名')模块对外共享成员使用m......