[暑假]ES6基本概述＜快速入门＞

1.介绍ES

        ES全称 EcmaScript, 是脚本语言的规范, 平时编写的 JavaScript仅仅是EcmaScript的一种实现, 所以ES新特性其实指的是 JavaScript的新特性

2.为什么要学习新的特性?

        1) 语法更简洁, 功能更丰富

        2) 框架中运用了大量的新的特性

3.什么是ECMA?

ECMA(European Computer Manufactures Association)  中文名称为 欧洲计算机制造商协会, 这个组织的目标是评估, 开发和认可电信和计算机标准. 1994年后这个组织改名为 Ecma 国际

4 什么是ECMAScript?

ECMAScript 是由Ecma国际通过 ECMA-262标准化的脚本程序设计语言

5.什么是ECMA-262?

Ecma国际制定了许多标准, 而ECMA-262只是其中一个

6.为什么要学习ES6?

ES6的版本变动内容最多

ES6加入了新的语法特性

7.对象的解构

作用是可以减少代码的书写

<!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>
    <script>
        // 对象的解构
        const zhao = {
            name: '小赵',
            age: '18',
            eat: function () {
                console.log('喜欢吃西瓜');
            }
        }
        // 一般调用
        // zhao.eat();

        // ES6
        let {eat} = zhao;
        eat();
    </script>
    
</body>
</html>

8.模板字符串

ES6 引入新的声明字符串的方式 [``]

        1) 内容可以直接出现换行符

        2) 变量拼接

<!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>
    <script>
    // 1.内容可以直接出现换行符等元素 
        let str = `<ul><li>企业家</li></ul>`
    // 2.变量拼接
    let lovest = '世界';
    let out = `${lovest}我知道他很残酷 但是我害怕吗?`
    console.log(out);
    </script>
    
</body>
</html>

9. 简化对象的写法

<!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>
    <script>
        // ES6 允许写在大括号里面, 直接写入变量和函数, 作为对象的属性和方法.
        let name = '企业家';
        let change = function () {
            console.log('就从今天开始');
        }
        const school = {
            name,
            change,
            improve: function () {
                
            }
        }
    </script>
    
</body>
</html>

什么叫做实例化?

创建对象的过程就叫实例化.  有时候也将对象叫做一个类的实例

10.[敲黑板敲黑板~~~]  箭头函数

<!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>
    <script>
    //    ES6 允许使用[箭头] => 定义函数
    //1. 声明一个函数
    // let fn = function () {

    // }
    // let fn = () => {

    // }

    // // 2.this是静态的 this 始终指向函数声明时所在作用域下的 this的值
    //     function getName() {
    //         console.log(this.name);
    //     }
    //     let getName2 = () => {
    //         console.log(this.name);
    //     }
    //     // 设置 window 对象的 name属性
    //     window.name = '今天是优秀的 即将开始的一天';
    //     const school = {
    //         name: "8888"
    //     }

    //     getName.call(school);
    //     getName2.call(school);

        // //   3.不能作为构造函数去实例化对象  
        // let Person = (name, age) => {
        //     this.name = name;
        //     this.age = age;
        // }
        // let me = new Person('xiao', 18);
        // console.log(me);

            // 4.箭头函数中 不能使用 arguments变量(arguments本身是用来保存实参的, 并且每个函数里面都有)
                // 为什么不能使用arguments?
                // 因为箭头函数中没有自己的 arguments
            // let fn = () => {
            //     console.log(arguments);
            // }
            // fn(1, 2, 3);

            // 5. 箭头函数的简写
            //     1) 省略小括号, 当形参有且只有一个的时候
            //         let add = (n) => {
            //             return a + b;
            //         }
            //         console.log(add(9));
            //     2) 省略花括号, 当代码体只有一条语句的时候,
            //             此时 return 必须省略, 而且语句的执行结果就是函数的返回值
            //     let pow = (n) => {
            //         return n*n;
            //     }
            //     ⬇⬇⬇⬇⬇⬇⬇⬇  可以简写为
            //     let pow = (n) => n*n;
            //     console.log(pow(1, 2));
 </script>

    
</body>
</html>

11.  ...   为扩展运算符

<!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>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // // 1. 数组的合并 
        //     const a = ['喜羊羊', '灰太狼'];
        //     const b = ['葫芦娃', '小金刚'];
        //     // const text1 = a.concat(b);
        //     // console.log(text1);
        //     const text2 = [...a, ...b];
        //     console.log(text2);

        // // 2.数组的克隆
        //     const text1 = ['A', 'B', 'C'];
        //     const ans = [...text1];
        //     console.log(ans);

        // 3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);
    </script>
</body>
</html>

12.Symbol(ES6新增数据类型)

 添加唯一的值

        不能与其他数据进行运算

                JS中的数据类型:

                        USONB

                                        undefined

                                         String, Symbol

                                        object

                                        null number

                                        Boolean

<!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>
    <script>
        let s = Symbol();
        let s2 = Symbol('坚持');
        let s3 = Symbol('坚持');
        //Symbol.for 创建
        let s4 = Symbol.for('坚持');
        let s5 = Symbol.for('坚持');
        
    </script>
</body>
</html>

使用案例

                

<!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>
    <script>
       let youxi = {
            name:'狼人杀',
            [Symbol('say')]: function() {
                console.log('我可以发言');
            },
            [Symbol('zibao')]: function() {
                console.log('我可以自爆');
            }
       }

    </script>
</body>
</html>

13. 解释生成器

生成器其实就是一个特殊的函数

function * 函数名 () {

}

14.