ES6-个人学习笔记（参考尚硅谷学院视频）

已于 2022-11-25 14:25:49 修改
阅读量498 收藏 14
点赞数 3
分类专栏： 前端 文章标签： javascript 音视频 前端
于 2021-04-17 15:45:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wts563540/article/details/115742423
版权

来自于：ES6-ES11_illion booked-CSDN博客 

第 1 章 ECMASript 6 介绍

1、ES6

ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本），是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如ES2015，就是ES6。ES2016就是ES7。

ECMAScript是规范，JS的规范的具体实现。

第 2 章 ECMASript 6 新特性

2.1、let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：
1) 不允许重复声明
2) 块儿级作用域
3) 不存在变量提升
4) 不影响作用域链

应用场景：以后声明变量使用 let 就对了 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let</title>
</head>
<body>
    <script>
        //0. 声明变量
        let a;
        let b,c,d;
        let e = 100;
        let f = 521, g = 'iloveyou', h = [];

        //1. 变量不能重复声明
        // let star = '罗志祥';
        // let star = '小猪';
        // 结果：Uncaught SyntaxError: Identifier 'star' has already been declared
         

        //2. 块儿级作用域  全局, 函数, eval
        // if else while for 
        // {
        //     let girl = '周扬青';
        // }
        // console.log(girl);
        // 结果：Uncaught ReferenceError: girl is not defined
         
        //3. 不存在变量提升
        // console.log(song);
        // let song = '恋爱达人';
        // 结果：Uncaught ReferenceError: girl is not defined

        //4. 不影响作用域链
        {
            let school = '尚硅谷';
            function fn(){
                console.log(school);
            }
            fn();
        }
        // 结果：尚硅谷

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

2.1.1、 let-实践案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        //1、获取div元素对象
        let items = document.getElementsByClassName('item');

        //2、遍历并绑定事件
        // for (var i = 0; i < items.length; i++) {
        //     items[i].onclick = function () {
        //         //修改当前元素的背景颜色
        //         // this.style.background = 'pink';   // 点击：每个模块变成红色
        //         items[i].style.background = 'pink';  // 点击：不可以每个模块不可以变成粉色
        //     }
        // }
        // console.log("输出结果：" + i) // 3
        // 结果：var声明的变量i为全局变量，遍历完以后i变为3,然后再去点击每个模块，找不到相应的当前元素

        for(let i = 0;i<items.length;i++){
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                // this.style.background = 'pink';
                items[i].style.background = 'pink';
            }
        }
        // 结果：let声明的变量i为局部变量，遍历完以后i变为2，然后再去点击每个模块，可以找到相应的当前元素
    </script>
</body>

</html>

2.2、const 关键字

const 关键字用来声明常量，const 声明有以下特点
1) 声明必须赋初始值
2) 标识符一般为大写
3) 不允许重复声明
4) 值不允许修改
5) 块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const ，非对象类型声明选择 let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const 定义常量</title>
</head>
<body>
    <script>
        //声明常量
        const SCHOOL = '尚硅谷';

        //1. 一定要赋初始值
        // const A;
        // 结果：Uncaught SyntaxError: Missing initializer in const declaration

        //2. 一般常量使用大写(潜规则)
        // const a = 100;

        //3. 常量的值不能修改
        // SCHOOL = 'ATGUIGU';
        // 结果：Uncaught TypeError: Assignment to constant variable.

        //4. 块儿级作用域
        // {
        //     const PLAYER = 'UZI';
        // }
        // console.log(PLAYER);
        // 结果：Uncaught ReferenceError: PLAYER is not defined

        //5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
        const TEAM = ['UZI','MXLG','Ming','Letme'];
        TEAM.push('Meiko');
        console.log(TEAM)
        // 结果： ["UZI", "MXLG", "Ming", "Letme", "Meiko"]

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

2.3、import、export 

import导入模块、export导出模块

// 全部导入
import people from './example'

// 将整个模块当作单一对象进行导入，该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())

// 导入部分，引入非 default 时，使用花括号
import {name, age} from './example'


// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

2.4、变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量的解构赋值</title>
</head>
<body>
    <script>
        //ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，
        //这被称为解构赋值。
        
        //1. 数组的结构
        const F4 = ['小沈阳','刘能','赵四','宋小宝'];
        let [xiao, liu, zhao, song] = F4;
        console.log(xiao);
        console.log(liu);
        console.log(zhao);
        console.log(song);
        /**
         * 结果:  小沈阳 
         *        刘能 
         *        赵四 
         *        宋小宝
         */ 

        //2. 对象的解构
        const wang = {
            name: '王一博',
            age: '不详',
            xiaopin: function(){
                console.log("我可以演小品");
            }
        };

        let {name, age, xiaopin} = wang;
        console.log(name);
        console.log(age);
        console.log(xiaopin);
        xiaopin();
        /**
         * 结果: 王一博
         * 不详
         * ƒ (){
         *    console.log("我可以演小品");
         * }
         * 我可以演小品
         */

        // let {xiaopin} = wang;
        // xiaopin();
        // 结果：我可以演小品


    </script>
</body>

</html>

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

2.5、模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：
1) 字符串中可以出现换行符
2) 可以使用 ${xxx} 形式输出变量

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>

<body>
    <script>
        // ES6 引入新的声明字符串的方式 『``』 '' "" 

        //1. 声明
        let str1 = `我也是一个字符串哦!`;
        console.log(str1, typeof str1);
        // 结果：我也是一个字符串哦! string

        //2. 内容中可以直接出现换行符
        let str2 =  `<ul>
                        <li>沈腾</li>
                        <li>玛丽</li>
                        <li>魏翔</li>
                        <li>艾伦</li>
                    </ul>`;
        console.log(str2)
        /**
         * 结果：   
         *         <ul>
         *             <li>沈腾</li>
         *             <li>玛丽</li>
         *             <li>魏翔</li>
         *             <li>艾伦</li>
         *         </ul>
         */ 

        //3. 变量拼接
        let lovest = '魏翔';
        let out = `${lovest}是我心目中最搞笑的演员!!`;
        console.log(out);
        // 结果：魏翔是我心目中最搞笑的演员!!
    </script>
</body>

</html>

注意：当遇到字符串与变量拼接的情况使用模板字符串

2.6、简化对象写法 

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简化对象写法</title>
</head>
<body>
    <script>
        //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
        //这样的书写更加简洁
        let name = '尚硅谷';
        let change = function(){
            console.log('我们可以改变你!!');
        }

        const school = {
            name,
            change,
            improve(){
                console.log("我们可以提高你的技能");
            }
        }

        console.log(school);
        /**
         * 结果：
         *     change: ƒ ()
         *     improve: ƒ improve()
         *     name: "尚硅谷"
         */ 

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

注意：对象简写形式简化了代码，所以以后用简写就对了 

2.7、箭头函数

ES6 允许使用「箭头」（=>）定义函数。

箭头函数的注意点: 
1) 如果形参只有一个，则小括号可以省略 
2) 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果 
3) 箭头函数 this 指向声明时所在作用域下 this 的值 
4) 箭头函数不能作为构造函数实例化 
5) 不能使用 argument

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>

<body>
    <script>
        // ES6 允许使用「箭头」（=>）定义函数。
        //1、声明一个函数
        let fn1 = function(){
        
        }

        //2. 通用写法
        let fn2 = (arg1, arg2, arg3) => {     
            return arg1 + arg2 + arg3; 
        }

        // 举例
        let fn = (a,b) => {
            return a + b;
        }
        //调用函数
        let result = fn(1, 2);
        console.log(result);
        // 结果：3

        //3. 箭头函数的简写
            //1). 省略小括号, 当形参有且只有一个的时候
            let add = n => {
                return n + n;
            }
            console.log(add(9));
            // 结果：18

            //2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略,而且语句的执行结果就是函数的返回值
            let pow = n => n * n;  
            console.log(pow(8));
            // 结果：64

        //4. this是静态的. this始终指向函数声明时所在作用域下的this的值
        function getName(){
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }
        //设置 window 对象的 name 属性
        window.name = '尚硅谷';
        const school = {
            name: "ATGUIGU"
        }
        

        //直接调用
        getName();
        getName2();
        // 结果：尚硅谷
        // 结果：尚硅谷

        //call 方法调用
        getName.call(school);
        getName2.call(school);
        // 结果：ATGUIGU
        // 结果：尚硅谷

        //2. 不能作为构造实例化对象
        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let me = new Person('xiao',30);
        console.log(me);
        // 结果：Uncaught TypeError: Person is not a constructor

        //3. 不能使用 arguments 变量
        let fn3 = () => {
            console.log(arguments);
        }
        fn(1,2,3);

        

    </script>
</body>

</html>

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适 

2.7.1、箭头函数实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        //需求-1  点击 div 2s 后颜色变成『粉色』
        //获取元素
        let ad = document.getElementById('ad');
        //绑定事件
        ad.addEventListener("click", function(){
            //保存 this 的值
            // let _this = this;
            //定时器
            setTimeout(() => {
                //修改背景颜色 this
                // console.log(this);
                // _this.style.background = 'pink';
                this.style.background = 'pink';
            }, 2000);
        });

        //需求-2  从数组中返回偶数的元素
        const arr = [1,6,9,10,100,25];
        // const result = arr.filter(function(item){
        //     if(item % 2 === 0){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        
        const result = arr.filter(item => item % 2 === 0);
        console.log(result);
        /**
         * 结果：Array(3)
         *          0: 6
         *          1: 10
         *          2: 100
         */ 

        // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
        // 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法

    </script>
</body>

</html>

2.8、rest 参数 

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rest参数</title>
</head>
<body>
    <script>
        // ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
        // ES5 获取实参的方式
        function date(){
            console.log(arguments);
        }
        date('白芷','阿娇','思慧');
        // 结果：["白芷", "阿娇", "思慧"]

        // 1、rest 参数
        function date(...args){
            console.log(args);// filter some every map 
        }
        date('阿娇','柏芝','思慧');
        // 结果：["阿娇", "柏芝", "思慧"]

        // 2、rest 参数必须要放到参数最后
        function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6);
        /**
         * 结果：
         *      1
         *      2
         *      [3, 4, 5, 6]
         */ 

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

注意：rest 参数非常适合不定个数参数函数的场景 

2.9、spread 扩展运算符 

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符</title>
</head>
<body>
    <script>
        // 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
        //声明一个数组 ...
        const tfboys = ['易烊千玺','王源','王俊凯'];
        // => '易烊千玺','王源','王俊凯'

        // 声明一个函数
        function chunwan(){
            console.log(arguments);
        }
        
        chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')
        /**
         * 结果：
         *     Arguments(3)
         *        0: "易烊千玺"
         *        1: "王源"
         *        2: "王俊凯"
         */ 
    </script>
</body>
</html>

2.9.1、扩展运算符应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符应用</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        //1. 数组的合并 情圣  误杀  唐探
        const kuaizi = ['王太利','肖央'];
        const fenghuang = ['曾毅','玲花'];
        // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); // concat() 方法用于连接两个或多个数组。
        const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo);
        /** 结果： Array(4)
         *             0: "王太利"
         *             1: "肖央"
         *             2: "曾毅"
         *             3: "玲花"
         */

        //2. 数组的克隆
        const sanzhihua = ['E','G','M'];
        const sanyecao = [...sanzhihua];//  ['E','G','M']
        console.log(sanyecao);
        /**
         *  结果：Array(3)
         *           0: "E"
         *           1: "G"
         *           2: "M"
         */

        //3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);// arguments
        /**
         * 结果：Array(3)
         *          0: div
         *          1: div
         *          2: div
         */ 
        
    </script>
</body>
</html>

2.10、Symbol 

2.10.1. Symbol 基本使用 

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。 
Symbol 特点 
1) Symbol 的值是唯一的，用来解决命名冲突的问题 
2) Symbol 值不能与其他数据进行运算 
3) Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用
Reflect.ownKeys 来获取对象的所有键名 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>symbol</title>
</head>
<body>
    <script>
        //创建Symbol
        let s = Symbol();
        console.log(s, typeof s);
        // 结果：Symbol() "symbol"

        let s2 = Symbol('尚硅谷'); 
        let s3 = Symbol('尚硅谷'); 
        console.log(s2 === s3)
        // 结果：false

        //Symbol.for 创建
        let s4 = Symbol.for('尚硅谷'); // 创建一个 symbol 并放入 symbol 注册表中，键为 "尚硅谷"
        let s5 = Symbol.for('尚硅谷'); // 从 symbol 注册表中读取键为"尚硅谷"的 symbol
        console.log(s4 === s5)
       
        //不能与其他数据进行运算
        // let result = s + 100;
        // let result = s > 100;
        // let result = s + s;
        //结果：Cannot convert a Symbol value to a number

        // USONB  you are so niubility 
        // u  undefined
        // s  string  symbol
        // o  object
        // n  null number
        // b  boolean

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

注: 遇到唯一性的场景时要想到 Symbol 

 2.10.2. Symbol内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了11个内置的Symbol值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。 

Symbol.hasInstance当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法 
Symbol.isConcatSpreadable 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()时，是否可以展开。 
Symbol.species创建衍生对象时，会使用该属性 
Symbol.match 当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。 
Symbol.replace 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.search 当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。 
Symbol.split 当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator对象进行 for...of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
Symbol.toPrimitive 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag 在该对象上面调用 toString 方法时，返回该方法的返回值 
Symbol. unscopables该对象指定了使用 with 关键字时，哪些属性会被 with环境排除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol内置属性</title>
</head>
<body>
    <script>
        class Person{
            static [Symbol.hasInstance](param){
                console.log(param);
                console.log("我被用来检测类型了");
                return false;
            }
        }

        // let o = {};

        // console.log(o instanceof Person);

        // const arr = [1,2,3];
        // const arr2 = [4,5,6];
        // arr2[Symbol.isConcatSpreadable] = false;
        // console.log(arr.concat(arr2));
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol 创建对象属性</title>
</head>
<body>
    <script>
        //向对象中添加方法 up down
        let game = {
            name:'俄罗斯方块',
            up: function(){},
            down: function(){}
        };
        
        //声明一个对象
        // let methods = {
        //     up: Symbol(),
        //     down: Symbol()
        // };

        // game[methods.up] = function(){
        //     console.log("我可以改变形状");
        // }

        // game[methods.down] = function(){
        //     console.log("我可以快速下降!!");
        // }

        // console.log(game);

        //
        let youxi = {
            name:"狼人杀",
            [Symbol('say')]: function(){
                console.log("我可以发言")
            },
            [Symbol('zibao')]: function(){
                console.log('我可以自爆');
            }
        }

        console.log(youxi)

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

 2.11. 生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器</title>
</head>
<body>
    <script>    
        //生成器其实就是一个特殊的函数
        //异步编程  纯回调函数  node fs  ajax mongodb
        //函数代码的分隔符
        function * gen(){
            // console.log(111);
            yield '一只没有耳朵';
            // console.log(222);
            yield '一只没有尾部';
            // console.log(333);
            yield '真奇怪';
            // console.log(444);
        }

        let iterator = gen();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        /**
         * {value: "一只没有耳朵", done: false}
         * {value: "一只没有尾部", done: false}
         * {value: "真奇怪", done: false}
         */ 
        

        //遍历
        for(let v of gen()){
            console.log(v);
        }
        /**
         * 结果：
         *    一只没有耳朵
         *    一只没有尾部
         *    真奇怪
         */ 

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

代码说明： 
1)、 * 的位置没有限制 
2)、 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值 
3)、 yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码 
4) 、next 方法可以传递实参，作为 yield 语句的返回值 

2.11.1.生成器函数实例-1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数实例</title>
</head>

<body>
    <script>
        // 异步编程  文件操作 网络操作(ajax, request) 数据库操作
        // 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
        // 回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000);
        //     }, 2000);
        // }, 1000);

        function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

        function two(){
            setTimeout(()=>{
                console.log(222);
                iterator.next();
            },2000)
        }

        function three(){
            setTimeout(()=>{
                console.log(333);
                iterator.next();
            },3000)
        }

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

        /**
         * 结果: 111
         *       222
         *       333
         */ 
    </script>
</body>

</html>

2.11.2.生成器函数实例-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数</title>
</head>
<body>
    <script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                console.log(data)
                //调用 next 方法, 并且将数据传入
                iterator.next(data);
            }, 1000);
        }

        function getOrders(){
            setTimeout(()=>{
                let data = '订单数据';
                console.log(data)
                iterator.next(data);
            }, 1000)
        }

        function getGoods(){
            setTimeout(()=>{
                let data = '商品数据';
                console.log(data)
                iterator.next(data);
            }, 1000)
        }

        function * gen(){
            let users = yield getUsers();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();
        /**
         * 结果：
         *    用户数据
         *    订单数据
         *    商品数据
         */ 

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

2.12. Promise 

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。 

  • 1) Promise 构造函数: Promise (excutor) {} 
  • 2) Promise.prototype.then 方法 
  • 3) Promise.prototype.catch 方法 

 2.13、Set 

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法： 

  1. size  返回集合的元素个数 
  2. add  增加一个新元素，返回当前集合 
  3. delete 删除元素，返回 boolean 值 
  4. has  检测集合中是否包含某个元素，返回 boolean 值 
  5. clear 清空集合，返回 undefined 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集合</title>
</head>
<body>
    <script>
        //0、声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //1、遍历每个元素
        for(let v of s2){
            console.log(v);
        }
        /**
         * 结果: 大事儿
         *       小事儿
         *       好事儿
         *       坏事儿
         */

        //2、元素个数（set去重）
        console.log(s2.size);
        // 结果：4

        //3、添加新的元素
        s2.add('喜事儿');
        console.log(s2);
        // 结果：Set(5) {"大事儿", "小事儿", "好事儿", "坏事儿", "喜事儿"}

        //4、删除元素
        s2.delete('坏事儿');
        console.log(s2)
        // 结果：Set(4) {"大事儿", "小事儿", "好事儿", "喜事儿"}

        //5、检测
        console.log(s2.has('糟心事'));
        // 结果：false

        //6、清空
        s2.clear();
        console.log(s2);
        // Set(0) {}
        
    </script>
</body>
</html>

2.13.1、Set集合实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set 实践</title>
</head>
<body>
    <script>
        let arr = [1,2,3,4,5,4,3,2,1];
        //1. 数组去重
        let result1 = [...new Set(arr)];
        console.log(result1);
        // 结果：(5) [1, 2, 3, 4, 5]

        //2. 交集
        let arr2 = [4,5,6,5,6];
        let result2 = [...new Set(arr)].filter(item => {
            let s2 = new Set(arr2);// 4 5 6
            if(s2.has(item)){
                console.log(item)
                return true;
            }else{
                return false;
            }
        });
        /**
         *  结果:  4
         *         5
         */ 
          
        let result3 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        console.log(result3);
        // 结果：(2) [4, 5]

        //3. 并集
        let union = [...new Set([...arr, ...arr2])];
        console.log(union);
        // 结果：[1, 2, 3, 4, 5, 6]

        //4. 差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);
        // 结果：(3) [1, 2, 3]

    </script>
</body>

</html>

2.14、Map 

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法： 

  1. size  返回 Map 的元素个数 
  2. set  增加一个新元素，返回当前 Map 
  3. get  返回键名对象的键值 
  4. has  检测 Map 中是否包含某个元素，返回 boolean 值 
  5. clear 清空集合，返回 undefined 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    <script>
        //0、声明 Map
        let m = new Map();

        //1、添加元素
        m.set('name','尚硅谷');
        m.set('change', function(){
            console.log("我们可以改变你!!");
        });
        let key = {
            school : 'ATGUIGU'
        };
        m.set(key, ['北京','上海','深圳']);

        //2、遍历
        for(let v of m){
            console.log(v);
        }
        /**
         * (2) ["name", "尚硅谷"]
         * (2) ["change", ƒ]
         * (2) [{…}, Array(3)]
         */ 

        //3、size
        console.log(m.size);
        // 结果：3

        //4、删除
        m.delete('name');
        console.log(m)
        /**
         * 结果：
         * Map(2) {"change" => ƒ, {…} => Array(3)}[[Entries]]0: {"change" => function(){
         *                    console.log("我们可以改变你!!");
         *        }}1: {Object => Array(3)}size: (...)__proto__: Map
         * (2) ["change", ƒ]0: "change"1: ƒ ()arguments: nullcaller: nulllength: 0name: ""prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: 20.Map.html:15[[Scopes]]: Scopes[2]length: 2__proto__: Array(0)
         * (2) [{…}, Array(3)]
         */ 

        //5、获取
        console.log(m.get('change'));
        // 结果：(2) ["change", ƒ]
        console.log(m.get(key));
        // 结果：(2) [{…}, Array(3)]

        //6、清空
        m.clear();
        console.log(m);
        // 结果：Map(0) {}
        
    </script>
</body>
</html>

2.15、class 类  

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 
知识点：

  1. class 声明类 
  2. constructor 定义构造函数初始化 
  3. extends 继承父类 
  4. super 调用父级构造方法 
  5. static 定义静态方法和属性 
  6. 父类方法可以重写 

2.15.1、类声明 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类声明</title>
</head>
<body>
    <script>
        //手机
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        //添加方法
        Phone.prototype.call = function(){
            console.log("我可以打电话!!");
        }

        //实例化对象
        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);
        /**
         * 结果： 我可以打电话!!
         *        Phone {brand: "华为", price: 5999}
         */ 

        //class
        class Shouji{
            //构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call(){
                console.log("我可以打电话!!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);
        onePlus.call();
        console.log(onePlus);
        /**
         * 结果：我可以打电话!!!
         * Shouji {brand: "1+", price: 1999}
         */ 

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

2.15.2、get 和 set方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get 和 set</title>
</head>
<body>
    <script>
        // get 和 set  
        class Phone{
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal){
                console.log('价格属性被修改了'+newVal);
            }
        }

        //实例化对象
        let s = new Phone();
        console.log(s.price);
        /**
         * get结果：价格属性被读取了
         * iloveyou
         */  
        s.price = 'free';
        // set结果：价格属性被修改了free

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

2.15.3、静态成员

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态成员</title>
</head>
<body>
    <script>
        function Phone(){

        }
        Phone.name = '手机';
        Phone.change = function(){
            console.log("我可以改变世界");
        }
        Phone.prototype.size = '5.5inch';

        let nokia = new Phone();

        console.log(nokia.name);
        console.log(nokia.change); 
        console.log(nokia.size);
        /**
         * 结果：undefined
         *      undefined
         *      5.5inch
         */ 

        class MobilePhone{
            //静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let iphone = new MobilePhone();
        console.log(iphone.name);
        console.log(MobilePhone.name);
        /**
         * 结果：
         *  undefined
         *  手机
         */ 
    </script>
</body>
</html>

2.15.4、对象继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象继承</title>
</head>
<body>
    <script>
        //手机
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        Phone.prototype.call = function(){
            console.log("我可以打电话");
        }

        //智能手机
        function SmartPhone(brand, price, color, size){
            Phone.call(this, brand, price);
            this.color = color;
            this.size = size;
        }

        //设置子级构造函数的原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor = SmartPhone;

        //声明子类的方法
        SmartPhone.prototype.photo = function(){
            console.log("我可以拍照")
        }

        SmartPhone.prototype.playGame = function(){
            console.log("我可以玩游戏");
        }

        const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');

        console.log(chuizi);

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类继承-2</title>
</head>
<body>
    <script>
        class Phone{
            //构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //父类的成员属性
            call(){
                console.log("我可以打电话!!");
            }
        }

        class SmartPhone extends Phone {
            //构造方法
            constructor(brand, price, color, size){
                super(brand, price);// Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo(){
                console.log("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                console.log('我可以进行视频通话');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();

        /**
         * 结果：SmartPhonebrand: "小米"color: "黑色"price: 799size: "4.7inch"__proto__: Phone
         * 我可以进行视频通话
         * 拍照
         * 玩游戏
         */ 
    </script>
</body>
</html>

2.16、对象继承参数默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数参数默认值</title>
</head>
<body>
    <script>
        //ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        function add(a,b,c=10) {
            return a + b + c;
        }
        let result = add(1,2);
        console.log(result);
        // 结果：13
        
        //2. 与解构赋值结合
        function connect({host="127.0.0.1", username,password, port}){
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            host: 'atguigu.com',
            username: 'root',
            password: 'root',
            port: 3306
        })
        /**
         * 结果：atguigu.com
         *       root
         *       root
         *       3306
         */ 
    </script>
</body>
</html>

2.17、迭代器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迭代器</title>
</head>
<body>
    <script>
        //声明一个数组
        const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

        //使用 for...of 遍历数组
        for(let v of xiyou){
            console.log(v);
        }
        /**
         * 结果：
         *     唐僧
         *     孙悟空
         *     猪八戒
         *     沙僧
         */ 

        let iterator = xiyou[Symbol.iterator]();
        //调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        /**
         * 结果：
         *    {value: "唐僧", done: false}
         *    {value: "孙悟空", done: false}
         *    {value: "猪八戒", done: false}
         *    {value: "沙僧", done: false}
         */ 
    </script>
</body>
</html>

2.18、迭代器自定义遍历对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义遍历数据</title>
</head>

<body>
    <script>
        //声明一个对象
        const banji = {
            name: "终极一班",
            stus: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            [Symbol.iterator]() {
                //索引变量
                let index = 0;
                //
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done: false };
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
                            return {value: undefined, done: true};
                        }
                    }
                };
            }
        }

        //遍历这个对象 
        for (let v of banji) {
            console.log(v);
        }
        /**
         * 结果：xiaoming
         *       xiaoning
         *       xiaotian
         *       knight
         */ 
    </script>
</body>

</html>

2.19、数值扩展 

2.19.1. 二进制和八进制 

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。 

2.19.2. Number.isFinite() 与 Number.isNaN()  

Number.isFinite() 用来检查一个数值是否为有限的 
Number.isNaN() 用来检查一个值是否为 NaN 

2.19.3. Number.parseInt() 与 Number.parseFloat()  

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。 

2.19.4. Math.trunc 

用于去除一个数的小数部分，返回整数部分。 

2.19.5. Number.isInteger 

Number.isInteger() 用来判断一个数值是否为整数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数值扩展</title>
</head>
<body>
    <script>
        //0. Number.EPSILON 是 JavaScript 表示的最小精度
        //EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
        function equal(a, b){
            if(Math.abs(a-b) < Number.EPSILON){
                return true;
            }else{
                return false;
            }
        }
        console.log(0.1 + 0.2 === 0.3);
        // 结果：false
        console.log(equal(0.1 + 0.2, 0.3))
        // 结果：true

        //1. 二进制和八进制
        // let b = 0b1010;
        // let o = 0o777;
        // let d = 100;
        // let x = 0xff;
        // console.log(x);

        //2. Number.isFinite  检测一个数值是否为有限数
        console.log(Number.isFinite(100));      // true
        console.log(Number.isFinite(100/0));    // false
        console.log(Number.isFinite(Infinity)); // false
        
        //3. Number.isNaN 检测一个数值是否为 NaN 
        console.log(Number.isNaN(123)); // false 

        //4. Number.parseInt Number.parseFloat字符串转整数
        console.log(Number.parseInt('5211314love'));      // 5211314
        console.log(Number.parseFloat('3.1415926神奇'));  //  3.1415926

        //5. Number.isInteger 判断一个数是否为整数
        console.log(Number.isInteger(5));   // true
        console.log(Number.isInteger(2.5)); // false

        //6. Math.trunc 将数字的小数部分抹掉  
        console.log(Math.trunc(3.5));  // 3

        //7. Math.sign 判断一个数到底为正数 负数 还是零
        console.log(Math.sign(100));    // 1
        console.log(Math.sign(0));      // 0
        console.log(Math.sign(-20000)); // -1

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

2.20、 对象扩展 

ES6 新增了一些 Object 对象的方法 

  1.  Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
  2.  Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象 
  3.  __proto__、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象方法扩展</title>
</head>
<body>
    <script>
        //1. Object.is 判断两个值是否完全相等 
        console.log(Object.is(120, 120));// ===  true
        console.log(Object.is(NaN, NaN));// ===  true
        console.log(NaN === NaN);// ===  false  NaN和所有值包括自己都不相等

        //2. Object.assign 对象的合并
        const config1 = {
            host: 'localhost',
            port: 3306,
            name: 'root',
            pass: 'root',
            test: 'test'
        };
        const config2 = {
            host: 'http://atguigu.com',
            port: 33060,
            name: 'atguigu.com',
            pass: 'iloveyou',
            test2: 'test2'
        }
        console.log(Object.assign(config1, config2));
        /**
         * 结果:
         *      host: "http://atguigu.com"
         *      name: "atguigu.com"
         *      pass: "iloveyou" 
         *      port: 33060
         *      test: "test"
         *      test2: "test2"
         */ 

        //3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
        const school = {
            name: '尚硅谷'
        }
        const cities = {
            xiaoqu: ['北京','上海','深圳']
        }
        Object.setPrototypeOf(school, cities);
        console.log(Object.getPrototypeOf(school));
        // 结果：xiaoqu: (3) ["北京", "上海", "深圳"]
        console.log(school);
        // {name: "尚硅谷"}


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

2.21、模块化 

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

2.21.1. 模块化的好处 

模块化的优势有以下几点： 

  1.  防止命名冲突 
  2.  代码复用 
  3. 高维护性 

2.21.2. 模块化规范产品 

ES6 之前的模块化规范有： 
1) CommonJS  =>  NodeJS、Browserify 
2) AMD  =>  requireJS 
3) CMD  =>  seaJS 

2.21.3. ES6 模块化语法 

模块功能主要由两个命令构成：export 和 import。 
⚫ export 命令用于规定模块的对外接口 
⚫ import 命令用于输入其他模块提供的功能 

2.22、三个等号和两个等号的区别（“===”和“==”）

1、===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；

2、==：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；

类型转换规则：1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。

                         2）如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等

注意：NaN==NaN  //返回false，NaN和所有值包括自己都不相等。
 

2.22、局部严格模式

严格模式不仅可以用在全局，还能用在局部。
当在严格模式下，this不会指向window

两个简单函数，对比局部严格模式和非严格模式下的两种this指向

function f(){
    console.log(this)
}

function f2(){
    'use strict'
    console.log(this)
}
f();
f2();

执行结果：

在这里插入图片描述

可见：
局部严格模式下的this值为undefined

在ES6的类定义中，类的内部默认是严格模式，即其中函数的this指向默认是undefined,在React类组件状态改变时会涉及函数this的指向问题

        //1.创建组件
        class MyComponent extends React.Component{

            constructor(props){
                super(props)
                this.state={isHot=true}

                //实例方法=原型链上的weatherChange绑定给实例对象得到新的函数（新函数的this指向实例）

                this.change=this.weatherChange.bind(this)
            }

            render(){
                return <h1 onClick="change">The weather is {isHot?'hot':'cold'}</h1>
            }

            //3.修改状态
            weatherChange(){
                const isHot=this.state.isHot
                
                //通过内置的api去更改状态，且更新是合并，不是替换（即原来的属性不变）
                this.setState({isHot:!isHot})
                
                //this.state.isHot=this.state.isHot?false:true
            }

        }
        //2.渲染组件
        ReactDOM.render(<MyComponent/>,getElementById('root'));

代码的知行者
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6笔记大全（最新）
weixin_52342741的博客
07-15 972
为什么要学习ES6ES6的版本变动内容最多，具有里程碑意义；ES6加入许多新的语法特性，编程实现更简单、高效；ES6是前端发展趋势，就业必备技能；
ES6-基础学习笔记
08-24
ES6基础学习笔记，记录基础知识和小demo，与大家分享，欢迎指点。
ES6-learning：学习ES6的笔记
02-05
ES6 《深刻理解ES6》学习笔记 本文用于汇总链接到各个子章节的内容，欢迎大家题issues和PR，如果对你有帮助，也可以给star支持:) ，感谢原作者以及社区里提供翻译人员。 目录 思维导图 第一章块级绑定 第二章弦和正则表达式 第三章函数 第四章扩展的对象功能 第五章解构：更方便的数据访问 第六章符号和符号属性 第七章与地图 第八章迭代器（Iterator）和生成器（Generator） 第九章JavaScript中的类 第十章增强的细分功能 第十一章Promise与异步编程 第十二章代理（Proxy）和反射（Reflection） 第十三章用模块封装代码
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
es6-notes:ES6+ 学习笔记 https
05-07
es6-notes ES下一个学习笔记 数字 大批 目的 功能 班级 象征 放 地图 正则表达式 代理人 反映 承诺 发电机 迭代器 模块 ES2016（ES7） Array.prototype.includes（） 求幂运算符 ES2017（ES8） 细绳 目的 异步等待 尾随逗号 ES2018（ES9） 等待着 正则表达式 细绳 物体静止与散布 Promise.prototype.finally（） ES2019（ES10） String.prototype。{trimStart.trimEnd} Array.prototype。{flat.flatMap} Symbol.prototype.description Object.fromEntries（） Function.prototype.toString（） JSON格式 任选的 ES2020（ES
尚硅谷ES6课程李强老师学习笔记
m0_48038376的博客
01-15 716
块的范围一般包括 if else while for 等。
ES6笔记
小熊软糖的博客
07-28 639
编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。[类型]– 布尔型、数字、字符串、对象等。[原型和继承]内建对象和函数的[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。
ES6新语法
weixin_33688840的博客
04-23 232
个人小总结：1年多没有写博客，感觉很多知识点生疏了，虽然工作上能解决问题，但是当别人问到某个知识点的时候，还是迷迷糊糊的，所以坚持写博客是硬道理的，因为大脑不可能把所有的知识点记住，有可能某一天忘了，但是我们工作上还是会使用，只是理论忘了，所以写博客的好处是可以把之前的东西重新看一遍后会在大脑里面重新浮现起来，特别在面试的时候，别人问你的知识点的时候答不上来那种尴尬，但是平时经常使用到，只...
尚硅谷---ES6
Father_Of_Soft的博客
01-25 477
尚硅谷ES6同步笔记。万字长文，精心笔记，方便您预习复习~
ES6模块化教程
sinat_33255495的博客
12-01 300
ES6-Babel-Browserify使用教程 定义package.json文件 { "name" : "es6-babel-browserify", "version" : "1.0.0" } 安装babel-cli, babel-preset-es2015和browserify npm install babel-cli browserify -g npm install babel-preset-es2015 --save-dev 定义.babelrc文件{ "pres
【ES6】尚硅谷学习总结
老陈的博客
09-22 354
ES 的全称是 ECMAScript ,是JavaScript语言的增强；它是由 Ecma国际 通过 ECMA-262标准化的脚本程序设计语言；ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。
【视频教程】Javascript ES6 教程36—ES6 模块初识
web前端开发
08-28 97
在前面，我们一起学了前35节的内容，今天我们开始第36节的内容《构建一个自己的模块》，希望对你有所帮助。在这里，简单说明一下，这个系列的视频教程视均来源Youtube，一共有54个视频，...
ES6 入门教程 25 Module 的加载实现 25.3 Node.js 的模块加载方法
谢谢你们的关注
11-24 374
ES6 入门教程 25 Module 的加载实现 25.3 Node.js 的模块加载方法
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
enjoy_learning的博客
03-13 634
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
尚硅谷es6新特性笔记
weixin_57599261的博客
08-06 700
尚硅谷es6新特性的简单总结
尚硅谷es6-es11笔记
最新发布
09-10
尚硅谷ES6-ES11笔记是关于ES6到ES11版本的学习笔记。其中包括了ES6引入的类的写法，实际上ES6的Class是一个语法糖，让我们写起来更像传统的类。 此外，ES6还引入了Symbol值，除了可以定义自己使用的Symbol值，还有11...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值