ES6基础新特性

一、ES6简介

ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商
协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本
程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且
从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。
它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

每年一个新版本。

二、ES6新特性

2.1 变量声明

• 关键字var与let

    <script>

        /* 
        1. var声明变量可以跨作用域访问，let只能在作用域内进行访问。
        */

        {
            var varDefined = 1;
            let letDefined = 2;
        }

        // 打印结果。
        console.log(" var defined= " + varDefined);
        // var defined= 1 

        console.log(" let defined= " + letDefined);
        // Uncaught ReferenceError: letDefined is not defined

    </script>


    <script>

        /* 
        2. 相同变量名，var可以多次声明，let只能声明一次。
        */

        var a = 1;
        var a = 2;
        console.log(a);
        // 2


        let b = 3;
        let b = 4;
        console.log(b);
        // Uncaught SyntaxError: Identifier 'b' has already been declared

    </script>
    

• 关键字const

    <script>

        /*
        1. const声明的变量是只读常量。
        2. 声明时必须初始化且声明之后不允许改变。
        */

        const c = 1;
        c = 3;
        console.log(c);
        // Uncaught TypeError: Assignment to constant variable.

    </script>

2.2 解构表达式

    <script>

        /* 
        1. 数组解构。
        */

        let arry = [1, 2, 3];
        const [x, y, z] = arry;
        console.log(x, y, z);
        // 1 2 3

    </script>


    <script>

        /* 
        1. 对象解构。
        */

        const User = {
            name: "zhangSan",
            age: 18
        };

        const { name, age } = User;
        console.log(name);
        // zhangSan

        console.log(age);
        // 18

    </script>

2.3 字符串

    <script>

        /*
        1. 字符串操作。
        2. startsWith()：表示要参数子串是否在字符串头部。
        3. endsWith()：表示要参数子串是否在字符串尾部。
        4. includes()：表示参数子串是否被包含在字符串中。
         */

        let str = "hello world.js";
        console.log(str.startsWith("hello"));
        // true
        console.log(str.endsWith(".js"));
        // true
        console.log(str.includes("world"));
        // true
        console.log(str.includes(".vue"));
        // false



        // 5.1 模板字符串：用反引号 ` str ` 表示，可以定义多行字符串。
        let str1 = `
                    <div>
                        <span></span>
                    </div>
                    `;
        console.log(str1);
        /* 
                     <div>
                        <span></span>
                    </div>
         */

        // 5.2 模板字符串：可以在字符串中加入变量和表达式。
        let userName = "zhangSan";
        let userAge = 18;
        let info = `我叫${userName},今年${userAge}岁了。`;
        console.log(info);
        // 我叫zhangSan,今年18岁了。

        // 5.3. 模板字符串：可以在字符串中调用函数。
        function getWorldStr() {
            return "world";
        }
        let str2 = `hello  ${getWorldStr()}`;
        console.log(str2);
        // hello  world

    </script>

2.4 函数

    <script>

        /* 
        1. 函数技巧。
        */

        // 2. 设置参数默认值。
        function add(num1, num2 = 1) {
            return num1 + num2;
        }
        // 若没传num2，则使用默认值1。
        console.log(add(1));
        // 2



        // 3. 不定参数：表示不确定的参数个数，由 ... 参数标识符 组成。
        //             注意：具名参数只能放在参数列表最后，且只能有一个不定参数。
        function getLength(...param) {
            console.log(param.length);
        }
        getLength(1);
        // 1
        getLength(1, 2);
        // 2
        getLength(1, 2, 3);
        // 3



        // 4.1 箭头函数：在单个参数下的使用。
        var print = str => console.log(str);
        print("hi");
        // hi

        // 4.2 箭头函数：在多个参数下的使用。
        var print1 = (str1, str2) => console.log(str1 + " " + str2);
        print1("hello", "world");
        // hello world

        // 4.3 箭头函数：当需要多行代码时可以用 { } 括起来。
        var print2 = (str1, str2) => {
            str3 = str1 + " " + str2;
            console.log(str3);
        }
        print2("hello", "js");
        // hello js

        // 4.4 练习：使用箭头函数进行对象解构，获取指定变量值。 
        var Dog = {
            dogName: "jack",
            dogAge: 1
        };

        var getDogName = ({ dogName }) => { return "dogName = " + dogName };
        console.log(getDogName(Dog));
        // dogName = jack

    </script>
    

2.5 对象方法

    <script>

        /* 
        1. 使用Object的方法，对对象属性进行元素枚举。
         */
      
        var Person = {
            name: "liSi",
            age: 20
        };

        console.log(Object.keys(Person));
        // [ "name","age" ]
        console.log(Object.values(Person));
        // [ "liSi",20 ]
        console.log(Object.entries(Person));
        // [ 'name', 'liSi' ] [ 'age', 20 ]


        /* 
        2. 定义并调用对象的函数属性。
        */

        var Person = {
            name: "jan",
            sing(music) {
                console.log(this.name + " 在唱 " + music);
            }
        }
        Person.sing("love story");
        // jan 在唱 love story

    </script>
    

2.6 数组方法

    <script>
        
        /* 
        1.map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        */
      
        let arry = [1, 2, 3, 4];
        console.log(arry);
        // 1, 2, 3, 4

        arry = arry.map(
            (items) => {
                return items * 3;
            }
        );
        console.log(arry);
        // 3, 6, 9, 12



        /* 
        2.reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。
        */

        let arry1 = [1, 2, 3, 4];
        arry1 = arry1.reduce(
            (num1, num2) => {
                console.log(" 上一次回调的返回值是: " + num1);
                console.log(" 当前元素值是: " + num2);
                return num1 + num2;
            }
        );
        // 上一次回调的返回值是: 1
        //  当前元素值是: 2
        //  上一次回调的返回值是: 3
        //  当前元素值是: 3
        //  上一次回调的返回值是: 6
        //  当前元素值是: 4

        console.log(" 执行完结果为: " + arry1);
        // 执行完结果为: 10

    </script>

三、结束语

---

“-------怕什么真理无穷,进一寸有一寸的欢喜。”

微信公众号搜索：饺子泡牛奶。