前端工程化15-邂逅ES6的语法规范

已于 2024-08-11 16:17:19 修改
阅读量227 收藏 3
点赞数 2
文章标签： 前端 es6 ecmascript
于 2024-08-11 15:51:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45052183/article/details/141106727
版权

4、ES6邂逅

3.1、什么是ECMA

image-20240810191809621

ECMA（European Computer Manufacturers Association）中文名为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1

994年后该组织改名为Ecma国际。

3.2、什么是ECMAScript

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

3.3、什么是ECMA-262

Ecma国际制定了许多标准，而ECMA-262只是其中的一个，所有标准列表查看

http://www.ecma-international.org/publications/standards/Standard.htm

3.4、ECMA262历史

ECMA-262（ECMAScript）历史版本查看网址

第1版1997年制定了语言的基本语法
第2版1998年较小改动
第3版1999年引入正则、异常处理、格式化输出等。IE开始支持
第4版2007年过于激进，未发布
第5版2009年引入严格模式、JSON，扩展对象、数组、原型、字符串、日期方法
第6版2015年模块化、面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等
第7版2016年幂运算符、数组扩展、Async/await关键字
第8版2017年Async/await、字符串扩展
第9版2018年对象解构赋值、正则扩展
第10版2019年扩展对象、数组方法
ES.next动态指向下一个版本

注：从ES6开始，每年发布一个版本，版本号比年份最后一位大1

3.5、谁在维护ECMA262

TC39（Technical Committee 39）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期召开会议，会议由会员公司的代表与特邀专家出席

3.6、为什么要学习ES6

ES6的版本变动内容最多，具有里程碑意义

ES6加入许多新的语法特性，编程实现更简单、高效

ES6是前端发展趋势，就业必备技能

3.8、ES6兼容性

https://compat-table.github.io/compat-table/es6/ 可查看兼容性

image-20240810192712430

3.9、ES6的Let关键字

let关键字用来声明变量，使用let声明的变量有几个特点：

  • 不允许重复声明
  • 块儿级作用域
  • 不存在变量提升

应用场景：以后声明变量使用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>
        //let 声明变量
        let a;          //字母数字下划线, 首字母不能为数字, 严格区分大小写, 不能使用关键字   驼峰
        let b = 100;
        let c,d,e;
        let f=100,g=200,h=300;

        //let 声明特点
        //1. 不允许重复声明
        // let star = '罗志祥';
        // let star = '小猪';
        
        //2. 块儿级作用域  if(){}  else {}  for(){}   {}   function(){}
        // if(true){
        //     let girlFriend = '周扬青';
        // }
        // console.log(girlFriend);

        //3. 不存在变量提升
        // console.log(song);
        // let song = '狐狸精';

        //4. 不影响作用域链
        // function fn(){
        //     let dance = '精武门';
        //     function b(){
        //         console.log(dance);
        //     }
        //     b();
        // }
        // fn();
        
    </script>
</body>
</html>

3.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>
    <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>
        //获取元素对象
        let items = document.querySelectorAll('.item');

        //用this实现
        // for(var i=0;i<items.length;i++){
        //     //绑定事件
        //     items[i].onclick = function(){
        //         //
        //         this.style.background = 'pink';
        //     }
        // }

        //遍历并绑定事件
        // for(let i=0;i<items.length;i++){
        //     //绑定事件
        //     items[i].onclick = function(){
        //         //
        //         items[i].style.background = 'pink';
        //     }
        // }

        // ES5 模拟实现
        for(var i=0;i<items.length;i++){
            (function(i){
                //绑定事件
                items[i].onclick = function(){
                    //
                    items[i].style.background = 'pink';
                }
            })(i)
        }
    </script>
</body>

</html>

3.4、ES6的const关键字

const 关键字用来声明常量，const声明有以下特点

  • 声明一定要赋初始值

  • 不允许重复声明

  • 值不允许修改

  • 块儿级作用域

注意:对象属性修改和数组元素变化不会出发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 用来声明一个常量(值不变) let a
        //0. 格式
        // const a = 100;  
        //1. 声明的时候一定要赋初始值
        const PLAYER = 'UZI';
        //2. 常量的名称一般为 『大写』  潜规则
        const RESOLVED = 'resolved';
        //3. 不能修改常量的值
        // PLAYER = '小狗';
        //4. 不允许重复声明
        // const PLAYER = 'abc';
        //5. 块儿级作用域
        // {
        //     const A = 100;
        // }
        // console.log(A);
        //6. 关于数组和对象的元素的修改
        // const TEAM = ['UZI','MLXG','LETME'];
        // TEAM.push('XIYE');
        // console.log(TEAM);
        // const BIN = {
        //     name: 'BIN'
        // }
        // BIN.name = '阿斌';
        // console.log(BIN);
    </script>
</body>
</html>

3.5、ES6变量的结构赋值

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>
        //解构赋值
        // const arr = ['宋小宝','刘能','赵四','小沈阳'];
        // let [song, liu, zhao, xiao] = arr;
        // console.log(song, liu, zhao, xiao);

        //对象解构赋值
        const star = {
            name: '于谦',
            tags: ['抽烟','喝酒','烫头'],
            say: function(){
                console.log('我可以说相声');
            }
        };
        let {name, tags:[chou,he,tang], say} = star;

        // console.log(name);
        // console.log(tags);
        // console.log(say);

        console.log(chou)
        console.log(he)
        console.log(tang)

        
    </script>
</body>

</html>

3.6、模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，

特点：

  • 字符串中可以出现换行符
  • 可以使用 ${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>
        //1. 直接使用换行符
        let str = `<ul>
                <li>沈腾</li>
                <li>马丽</li>
                <li>艾伦</li>
                <li>魏翔</li>
            </ul>`;
            
        //2. 字符串中进行变量拼接
        let star = '魏翔';
        let str2 = `我特别喜欢 ${star}, 搞笑风格诡异`;

        console.log(str2);
    </script>
</body>
</html>

3.7、简化对象写法

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>
        let name = '茂昌';
        let pos = '邯郸';
        let change = function(){
            console.log('改变');
        }
        
        //简写前
        const renOne = {
            name:name,
            pos:pos,
            change:change,
            improve:function(){
                console.log('提升');
            }
        }
        //简写后 
        const renTwo = {
            name,
            pos,
            change,
            improve(){
                console.log('提升');
            }
        }
        console.log(renOne)
        console.log(renTwo)

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

3.8、箭头函数

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. 声明格式 
        // let add = (a,b,c) => {
        //     let result = a + b + c;
        //     return result;
        // };
        //2. 函数调用
        // console.log(add(1,2,3));
        // console.log(add.call({}, 1,2,3));
        // console.log(add.apply({}, [1,2,3]));

        // 箭头函数特点 
        // 1. this 的值是静态的. (指向声明时所在作用域下this的值)
        // let getName2 = () => {
        //     console.log(this);
        // }
        // getName2.call({}); 外层作用域下的this值

        // 2. 不能作为构造函数使用
        // const Person = () => {}
        // let me = new Person();

        // 3. 不能使用 arguments 
        // const fn = () => {
        //     console.log(arguments);
        // }
        // fn(1,3,5,8,10);

        // 4. 箭头函数简写
        // 一 不写小括号, 当形参有且只有一个的时候
        // 二 不写花括号, 当代码体只有一条语句的时候, 并且语句的执行结果为函数返回值的 (如果不写花括号的话, return 也不能写)
        // let pow = num =>  num * num * num;
        let rand = (m,n) => Math.ceil(Math.random() * (n-m+1)) + m-1;

        // console.log(pow(9));
        console.log(rand(1,100));
    </script>
</body>
</html>

箭头函数的注意点:

  • 箭头函数this指向声明时所在作用域下 this 的值

  • 箭头函数不能作为构造函数实例化

  • 箭头函数内没有arguments

  • 如果形参只有一个，则小括号可以省略

  • 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

3.9、箭头函数的最佳实现

<!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 后颜色变成「粉色」
        const ad = document.getElementById('ad');
        //绑定事件
        ad.onclick = function(){
            //保存 this 的值  that  self  _this
            // let that = this
            // setTimeout(function(){
            //     that.style.background = 'pink';
            // }, 2000);

            setTimeout(() => {
                this.style.background = 'pink';
            }, 2000)
        }

        //需求-2  从数组中返回偶数的元素
        const arr = [1,2,31,2,321,41,24,12,51,24,12,43,145,1,51,5,43,5,43,6,436];

        //遍历  filter 过滤
        // 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);

        //如果回调与this的值是相关的, 则不能使用箭头函数
        //1. 事件的回调
        // ad.onclick = () => {
        //     console.log(this);
        // }
        //2. 对象的方法
        // let f = () => {
        //     console.log(this);
        // };
        // var obj = {
        //     run: function(){
        //         console.log(this);
        //     },
        //     run2: f
        // }
        // // obj.run();
        // obj.run2();

        //如果回调与 this 是无关的
        //1. 定时器
        //2. 数组方法回调  filter  forEach  map

    </script>
</body>

</html>

3.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>
        //ES6 允许给函数参数赋值初始值
        //1. 参数直接设置默认值  具有默认值的参数, 位置一般要靠后(潜规则)  ---很重要
        function add(a,b=10,c){
            console.log(a + b + c);
        }
        // add(1,2,4);
        // add(1,2);

        //2. 与解构赋值结合使用   结构赋值的形式先后顺序不影响
        function connect({host="127.0.0.1", port, pass, dbname}){
            console.log(host);
            console.log(port);
            console.log(pass);
            console.log(dbname);
        }

        connect({
            port: 27017,
            pass: 'root',
            dbname: 'project'
        });
        
    </script>
</body>
</html>

3.2、rest参数

主要是用来替代arguments获取实参的

注意事项，出现a,b,…args写到最后,

什么时候用rest参数：出现不定个数参数的函数比如求最大值最小值，你也不知道传递多少个参数进来，那我们就用rest参数来接收

<!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>
        //arguments
        function main(...args){
            //1. 使用 arguments 获取实参
            console.log(arguments); //对象
            //2. rest 参数
            console.log(args); //数组
        }
        main(1,5,10,20,25);// 1,5,10,20,25  => ...[1,5,10,20,25] => 1,5,10,20,25

        //2. 如果有多个参数,rest参数必须放到最后
        // function fn(a,b,...args){
        //     console.log(a);
        //     console.log(b);
        //     console.log(args);
        // }
        // fn(1,2,3,4,5,6,7);
    </script>
</body>
</html>

3.3、spread扩展运算符

<!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 arr = ['王源','易烊千玺','王俊凯'];
        function fn(){
            console.log(arguments);
        }
        fn(...arr);// ...arr  => ...['王源','易烊千玺','王俊凯']  =>  '王源','易烊千玺','王俊凯'
        //fn('王源','易烊千玺','王俊凯');

        //对象的展开   ...skillOne =>  q:'天音波'
        // const skillOne = {
        //     q: '天音波',
        //     f:'闪现'
        // };
        // const skillTwo = {
        //     w: '金钟罩'
        // };
        // const skillThree = {
        //     e: '天雷破'
        // };
        // const skillFour = {
        //     r: '猛龙摆尾',
        //     q: 'xxx'
        // };
        
        //把对象的属性加入到一个新对象中    
        //const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};

       // console.log(mangseng);
        
    </script>
    
</body>
</html>

3.4、spread扩展运算符应用

<!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 chuanqi = ['曾毅','玲花'];
        // const zuhe = [...kuaizi, ...chuanqi];
        // console.log(zuhe);
        //2. 新数组克隆
        // const jinhua = ['e','g','m'];//
        // const s = [...jinhua,'x','y','z'];
        // console.log(s);
        //3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        //
        const result = [...divs];

        console.log(result);
    </script>
</body>
</html>

3.5、symbol

ES6中的数据类型总共有七中

1、boolean（布尔型）2、null（空类型）3、undefined（未赋值类型）

4、number（数值类型）5、string（字符串类型）6、symbol（独一无二类型）7、object（对象类型）。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol特点

  • Symbol的值是唯一的，用来解决命名冲突的问题
  • Symbol值不能与其他数据进行运算
<!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>
        //ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值
        
        //1. 创建 Symbol
        let s1 = Symbol();
        console.log(s1, typeof s1);
        //2. 创建 Symbol
        // let s2 = Symbol('品牌');
        // let s3 = Symbol('品牌');
        // console.log(s2 === s3);
        //3. 创建 Symbol ----函数对象
        let s4 = Symbol.for('200826');
        let s5 = Symbol.for('200826');
        console.log(s4 === s5);

       // symbol 不能与其他类型数据进行运算
        // const result = s1 + 123;

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

3.6、symbol的使用场景

注意：Symbol类型唯一合理的用法是用变量存储 symbol的值，然后使用存储的值创建对象属性

<!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 method = {
            up: Symbol(),
            down: Symbol()
        }
        let str = 'run';

        //未知的对象，直接添加方法会有风险，因为可能已经存在了对应的方法
        //直接添加会造成属性的冲突和覆盖
        let game = {
            name:'俄罗斯方块' ,
            up: function(){

            },
            //内部添加方法
            [str]: function(){
                
            },
            //内部添加方法用up
            [method.up]: function(){
                console.log('UP UP UP');
            }
        };

        // console.log(game);
        game[method.up]();

        

        //添加 up 方法
        // game[method.up] = function(){
        //     console.log('向上移动');
        // }
        // game[method.up]();

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

3.7、Symbol内置属性

<!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.replace
        let obj = {
            [Symbol.replace]: function(){
                console.log('我被replace方法调用了');
            }
        }
        //声明字符串
        let str = 'i love you';
        //调用 replace 方法
        let result = str.replace(obj, 'xxx');
    </script>
</body>
</html>

被动调用的、我没有进行手动的触发

Symbol.hasInstance当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable对象的Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。
Symbol. unscopables该对象指定了使用with关键字时，哪些属性会被with环境排除。
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.species创建衍生对象时，会使用该属性

3.8、迭代器

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

  • ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费
  • 原生具备iterator接口的数据(可用for of遍历)
    • Array
    • Arguments
    • Set
    • Map
    • String
    • TypedArray
    • NodeList
  • 工作原理
    • 创建一个指针对象，指向当前数据结构的起始位置
    • 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
    • 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
    • 每调用next方法返回一个包含value和done属性的对象

注意: 需要自定义遍历数据的时候，要想到迭代器。

ctrl+shift+i 打开控制台

<!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 arr = ['刘德华','黎明','郭富城','张学友'];

        //for...of 遍历
        for(let v of arr) {
            console.log(v);
        }

        //得到 iterator     
        const iterator = arr[Symbol.iterator]();

        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

        // {value: '', done: true}

        // for(let i in arr){
        //     console.log(i);
        // }
        
    </script>
</body>
</html>

for of 和for in的区别 前置拿到的是值，后者拿到的是下标

3.9、迭代器自定义遍历数据

<!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 team = {
            name: '终极一班',
            members: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            //添加 Symbol.iterator
            [Symbol.iterator]: function(){
                let index = 0;
                return {
                    next: () => {
                        //声明对象
                        const result = {value: this.members[index], done: false};
                        //判断下标 修改 『done』 属性的值
                        if(index >= this.members.length){
                            result.done = true;
                        }
                        //下标自增
                        index++;
                        //返回结果
                        return result;
                    }
                }
            }
        }
        
        //需求
        for(let v of team){
            console.log(v);
        }

        //可以
        for(let v of team.members){}

        //可以--为啥要费劲的去实现这个需求  -->面向对象编程思想--满足
        team.members.forEach();
        
    </script>
</body>

</html>

4.1、set集合

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

集合的属性和方法：

  • size 返回集合的元素个数
  • add 增加一个新元素，返回当前集合
  • delete 删除元素，返回boolean 值
  • has 检测集合中是否包含某个元素，返回boolean值
  • 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>
        //声明集合
        // const s = new Set();
        const s2 = new Set([1,5,9,13,17,1,5]);

        //1. 元素个数
        // console.log(s2.size);
        //2. 添加
        // s2.add(21);
        //3. 删除
        // s2.delete(5);
        //4. 检测集合中是否包含某个元素  has  有
        // console.log(s2.has(90));
        //5. clear 清空
        // s2.clear();

        // console.log(s2);
        //6. for...of 遍历
        // for(let v of s2){
        //     console.log(v);
        // }
    </script>
</body>
</html>

4.2、set集合实战

<!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. 数组去重  
        const arr = ['大事儿','小事儿','好事儿','坏事儿','小事儿'];
        //集合
        // const s = new Set(arr);
        // const result = [...s];
        // console.log(result);

        //2. 交集
        const arr1 = [1,2,3,4,5,1,2];
        const arr2 = [3,4,5,4,5,6];

        // const result = [...new Set(arr1)].filter(item => {
        //     return (new Set(arr2)).has(item);
        // });
        // console.log(result);

        //3. 并集
        // const result = [...new Set([...new Set(arr1),...new Set(arr2)])];

        //4. 差集
        const result = [...new Set(arr1)].filter(item => {
            return !(new Set(arr2)).has(item);
        });
        console.log(result);

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

4.3、Map集合

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

Map的属性和方法：

  • size 返回Map的元素个数
  • set 增加一个新元素，返回当前Map
  • get 返回键名对象的键值
  • has 检测Map中是否包含某个元素，返回boolean值
  • 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>
        //缓存--->比如搜索栏存第一次的推荐搜索数据
        //声明 Map    m.name = 'xiaohua';
        const m = new Map();
        //添加元素
        let key = {};
        m.set('mei', '小橙子');
        m.set(key, 'atguigu');
        //获取元素
        // console.log(m.get('mei'));
        // console.log(m.get(key));
        //删除元素
        // m.delete('mei');
        //检测
        // console.log(m.has('meix'));
        //元素个数
        // console.log(m.size);
        //清空
        // m.clear();
        // console.log(m);
    </script>
</body>
</html>

4.4、class介绍与类创建

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

<!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>
        //创建对象的方式 new Object  {}  工厂函数  构造函数  Object.create
        // function Phone(brand, price){
        //     this.brand = brand;
        //     this.price = price;
        // }
        // //添加方法
        // Phone.prototype.call = function(someone){
        //     console.log(`我可以给 ${someone} 打电话`);
        // }
        // Phone.prototype.sendMessage = function(someone){
        //     console.log(`我可以给 ${someone} 发送短信`);
        // }

        // //实例化对象
        // const nokia = new Phone('诺基亚', 223);

        //语法
        class Phone {
            //构造方法--名字必须为这个
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //方法
            call(someone){
                console.log(`我可以给 ${someone} 打电话`);
            }
            sendMessage(someone){
                console.log(`我可以给 ${someone} 发送短信`);
            }
        }

        const jinli = new Phone('金立', 599);
        console.log(jinli);


        
        //1.构造方法不是必须的
        class A{
            //2. 构造方法只能有一个
            constructor(){}
            constructor(){}
        }

        let a = new A();

        console.log(a);

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

4.5、对象的静态属性和方法

<!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){
        //     //为实例对象添加属性
        //     this.brand = brand;
        // }
        // //为函数对象添加属性
        // Phone.name = '手机';//又称之为 静态成员
        // Phone.change = function(){
        //     console.log('改变了世界');
        // }
        // //
        // let nokia = new Phone('诺基亚');
        // console.log(nokia);
        // console.dir(Phone);

        class Phone{
            //static 静态的
            static name = '手机';
            static change(){
                console.log("我改变了世界");
            }
        }

        console.log(Phone.name);
        Phone.change();

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

4.6、ES5中如何实现继承

<!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(someone){
            console.log(`我可以给 ${someone} 打电话`);
        }
        //添加原型方法
        Phone.prototype.sendMessage = function(someone){
            console.log(`我可以给 ${someone} 发送短信`);
        }

        //小手机
        function SmartPhone(brand, price, storage, pixel){
            //调用父类的函数  属性的初始化
            Phone.call(this, brand, price);
            //初始化
            this.storage = storage;
            this.pixel = pixel;
        }
        //子类的prototype应该等于父类的示例
        SmartPhone.prototype = new Phone;
        //添加子类自己的构造方法
        SmartPhone.prototype.constructor = SmartPhone;
        //添加子类特有的方法
        SmartPhone.prototype.playGame = function(){
            console.log('我可以用来玩游戏');
        }
        SmartPhone.prototype.takePhoto = function(){
            console.log('可以拍照');
        }
        //实例化
        const mate4 = new SmartPhone('华为', 7000, '256G','2000w');
        console.log(mate4);



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

4.7、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>
        class Phone {
            //构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //方法
            call(someone){
                console.log(`我可以给 ${someone} 打电话`);
            }
            sendMessage(someone){
                console.log(`我可以给 ${someone} 发送短信`);
            }
        }

        //子类  extends 继承  多态
        class SmartPhone extends Phone{
            //构造方法
            constructor(brand, price, storage, pixel){
                //调用父类的构造方法 属性初始化
                super(brand, price);//super 超级
                this.storage = storage;
                this.pixel = pixel;
            }
            //子类对象的方法
            playGame(){
                console.log('我可以用来玩游戏');
            }
            takePhoto(){
                console.log('可以拍照');
            }
        }

        //实例化对象
        const onePlus = new SmartPhone('小米10', 4299, '128G','一个亿');

        console.log(onePlus);
        // onePlus.call('孙俪');
    
    </script>
</body>
</html>

4.8、ES6对象的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>
        class Phone{
            get price(){
                // console.log('我被获取了');
                return 2999;
            }

            set price(v){
                this.jiage = v;
            }   

            static get size(){
                return '5.5inch';
            }

            static set size(value){
                this.chicun = value;
            }

        }
        let chuizi = new Phone();
        //属性的获取
        // console.log(chuizi.price);
        //属性的设置
        // chuizi.price = 1599;
        //属性的获取
        // let res = Phone.size;
        // console.log(res);
        //静态属性的设置
        Phone.size = '6inch';
        console.dir(Phone);

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

4.9、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>
        //1. 二进制和八进制    4 (16)  8(256)   16(65536)
        // let n = 0b1111;// 
        // let n2 = 0o666;
        // let n3 = 1024;// 顶  赞
        // let n4 = 0xff;
        // console.log(n4);

        //2. Number.isFinite  检测一个数值是否为有限数
        // console.log(Number.isFinite(10));
        // console.log(Number.isFinite(Math.PI));
        // console.log(Number.isFinite(1/0));
        
        //3. Number.isNaN 检测一个数值是否为 NaN  isNaN
        // console.log(Number.isNaN(NaN));

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

        //5. Math.trunc 将数字的小数部分抹掉 
        // console.log(Math.trunc(3.1415926));

        //6. Number.isInteger 判断一个数是否为整数 is 是否 integer 整型
        // console.log(Number.isInteger(3.2));
        // console.log(Number.isInteger(3));

        //7. 幂运算  (ES7)    Math.pow()
        console.log(3 ** 10);

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

4.1、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>
        //1. 判断两个值是否完全相等  ===  Object.is
        // let n = 100;
        // let n2 = 200;
        // console.log(Object.is(n, n2));
        // console.log(Object.is(NaN, NaN));// NaN === NaN

        //2. Object.assign 对象的合并
        // const A = {
        //     name: 'lsy'
        // }

        // const B = {
        //     pos: ["北京",'上海','深圳'],
        //     name: '后茂昌'
        // }

        // const C = {
        //     name: 'hmc'
        // }

        // const res = Object.assign(A, B, C);
        // console.log(res === A);
        // console.log(A);

        //3. 直接修改 __proto__ 设置原型
        // const A = {
        //     name: '父级'
        // }
        // const B = {
        //     test: '测试'
        // }
        // B.__proto__ = A;

        // console.log(B);
       
    </script>
</body>
</html>

4.2、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>
        //拷贝 就是 复制   对象和数组
        //1. 直接复制
        // let arr = [1,2,3,4];
        // const newArr = arr;
        // //测试
        // newArr[0] = 521;
        // console.log(arr);
        // console.log(newArr);
        //2. 数组  
            let arr = [{name:'atguigu'},2,3,4];
            // 1> concat
            // let newArr = [].concat(arr);
            // newArr[0].name = '尚硅谷';
            // console.log(arr)
            // console.log(newArr)
            // 2> slice 
            // let newArr = arr.slice(0);
            // newArr[0].name = '尚硅谷';
            // console.log(arr)
            // console.log(newArr)
            // 3> 扩展运算符
            // let newArr = [...arr];
            // newArr[0].name = '尚硅谷';
            // console.log(arr)
            // console.log(newArr)
        //3. 对象
            //使用 assign 方法创建对象 (assign 对象的合并)
            const school = {
                name: "尚硅谷",
                pos: ['北京','上海','深圳']
            }

            const newSchool = Object.assign({}, school);

            // newSchool.name = 'atguigu';
            newSchool.pos[0] = 'beijing';

            console.log(school);
            console.log(newSchool);
    </script>
</body>
</html>

4.3、深拷贝-JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深拷贝-JSON</title>
</head>
<body>
    <script>
        //JSON 实现深拷贝
        // * stringify 将 JS 对象转化为 JSON 格式的字符串
        // * parse    将 JSON 格式的字符串转化为 JS 对象
        //缺陷: 不能复制方法
        const school = {
            name: '朱岗子',
            pos: ['北京','上海','深圳'],
            founder: {
                name: 'lsy'
            },
            change: function(){
                console.log('改变');
            }
        }

        //将 对象转为 JSON 格式的字符串
        let str = JSON.stringify(school);
        //将对象转为JS对象
        let newSchool = JSON.parse(str);

        //测试
        newSchool.pos[0] = 'beijing';

        console.log(school);
        console.log(newSchool);
        // console.log(str);
        // console.log(typeof str);



    </script>
</body>

</html>

4.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>    
        const school = {
            name: '尚硅谷',
            pos: ['北京','上海','深圳'],
            founder: 
            {
                name: '刚哥'
            },
            change: function(){
                console.log('改变');
            }
        }

        //创建数据容器
        const newSchool = {};
        //name
        newSchool.name = school.name;
        //pos
        newSchool.pos = school.pos;
        newSchool.pos = [];
        newSchool.pos[0] = school.pos[0];
        newSchool.pos[1] = school.pos[1];
        newSchool.pos[2] = school.pos[2];
        //founder
        newSchool.founder = {};
        newSchool.founder.name = school.founder.name;
        //方法
        newSchool.change = school.change.bind(newSchool);

        newSchool.pos[0] = 'beijing';

        console.log(school);
        console.log(newSchool);

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

4.5、封装实现递归深拷贝

<!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 deepClone(data){
            //创建一个容器  typeof
            // console.log(typeof data);
            let container;
            //判断
            let type = getDataType(data);// Object Array
            if(type === 'Object'){
                container = {};
            }
            if(type === 'Array'){
                container = [];
            }
            //遍历数据  for...in
            for(let i in data){
                //获取键值的类型
                let type = getDataType(data[i]);// Array
                //判断
                if(type === 'Array' || type==='Object'){
                    //????  递归调用 deepClone 即可
                    container[i] = deepClone(data[i]);
                }else{
                    //如果键值为非引用类型数据  则『直接复制』
                    container[i] = data[i];
                }
            }
            //container
            return container;
        }
        
        //待克隆的数据
        const school = {
            name: '尚硅谷',
            pos: ['北京','上海','深圳'],
            founder: {
                name: '刚哥'
            },
            change: function(){
                console.log('改变');
            }
        }
        //调用函数完成深拷贝
        const newSchool = deepClone(school);

        newSchool.pos[0] = 'beijing';
        console.log(school);
        console.log(newSchool);



        //封装一个函数 用来获取数据的类型
        function getDataType(data){
            return Object.prototype.toString.call(data).slice(8, -1);
        }

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

4.6、ES11的可选链操作符号

<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 main(config){
       // const dbHost=config&&config.db&&config.db.host;

        const dbHost=config?.db?.host; //避免做层层判断
        console.log(dbHost);
      }
   
      main({
            db:{
                host:'127.0.0.1',
                username:"root"
            },
            caches:{
                host:'127.0.0.1',
                username:"admin"
            }  
        }
      )
    </script>
</body>
</html>

世之奇伟瑰丽，非常之观，常在于险远，只有难才能不断突破进步

都是数据而已
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js学习笔记 更新完毕 2022 coderwhyWEB前端体系课
专注于 前端开发 知识分享
09-16 1012
Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境模块化开发最终的目的是将程序划分成一个个小的结构;这个结构中编写属于自己的逻辑代码有自己的作用域定义变量名称时不会影响到其他的结构这个结构可以将自己希望暴露的变量 函数 对象 等导出给其他 结构使用也可以通过某种方式导入另外结构中的变量 函数对象 等上面提到的结构就是模块按照这种结构划分开发程序的过程 就是模块化开发的过程pnpm:理解为 performant npm 缩写;
vue笔记详解
weixin_51261234的博客
12-01 5265
vue 文章目录vue第一篇：邂逅vue为什么学习Vuejs？简单的认识一下Vue.jsVue.js安装Vue的初体验Vue中的MVVM创建Vue实例传入的optionsVue的生命周期第二篇：基础语法插值操作1.Mustache2.v-once3.v-html4.v-text5.v-pre6.v-clock绑定属性：1.v-bind介绍和使用v-bind基础v-bind绑定class绑定方式：对象语法绑定方式：数组语法v-bind绑定style绑定方式一：对象语法绑定方式二：数组语法计算属性1.什么是计算
前端工程化(三)邂逅Webpack和打包过程
m0_69551472的博客
03-19 445
◼ 那么如果我们在window上使用 \ 来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢？ 在Mac OS、Linux的Unix操作系统上使用 / 来作为文件路径的分隔符； 所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块； window上会使用 \或者 \ 来作为文件路径的分隔符，当然目前也支持 /；◼ 我们知道在Mac OS、Linux和window上的路径时不一样的。 Linux和Mac OS都实现了POSIX接口；
前端修炼记
weixin_60291486的博客
10-19 382
前端虚构小说，娱乐读者，通过阅读了解学习路线。
webpack深入解析(适合初学者，每一步都很详细)-----coderwhy
weixin_42662753的博客
01-11 1343
webpack学习，适合刚学webpack
vue3学习之旅-Vue-CLI及其原理&尤大大新宠Vite-下一代前端开发构建工具Vite:拿来吧你!
听雨少年的博客
08-04 855
文章目录Vue-CLI和ViteVue-CLIVue CLI脚手架Vue CLI 安装和使用安装Vue CLI（4.x）升级Vue CLI脚手架的使用vue create 项目的过程项目的目录结构配置详解适配浏览器的配置git忽略文件babel配置文件vue-cli源码Vite认识Vite什么是viteVite的构造vite前景浏览器原生支持模块化lodash-es的使用弊端Vite的安装和使用vite对第三方的支持1. Vite对css的支持2. Vite对TypeScript的支持3. Vite对vue
Vue3+Ts（coderwhy）超详细学习笔记（一）邂逅Vue3和TypeScript
coderYYY的博客
01-04 8292
本笔记基于coderwhy大神新课程-vue3+ts所作，原版课程地址指路—深入Vue3+TypeScript技术栈-coderwhy大神新课，请大家尽量支持正版哈 本笔记集视频、课件、代码而成，较为详细，建议收藏关注，持续更新中，也可以看coderwhy公众号发的文章一起学习 Vue3+TS系统学习一 - 邂逅Vue3和TypeScript 之前那个Vue2的笔记我把课件搞成文字太费时间了，这里直接放图了 一、邂逅Vue3开发 （一）为什么要学习Vue？ 1.认识Vue 2.目前Vue在前端处
WebPack5.0 快速入门
最新发布
Java.慈祥
07-15 1684
Webpack是一个强大的静态模块打包工具🧰主要用于现代JavaScript应用程序，它从一个或多个入口点开始，构建一个依赖图，然后将项目中所需的每个模块打包成一个或多个bundle，这些bundle是静态资源，用于展示你的内容；指的是编写代码过程中，htmlcssjs图片、文件🖺等固定内容的资源；把静态模块内容，压缩，整合，转译等…🧊前端工程化；WebPack支持多种模块标准语法把less/sass转成css代码把ES6+降级成ES5Webpack是一个强大的静态模块打包工具🧰主要用于现代。
前端开源库-grunt-es6-transpiler
08-30
`grunt-es6-transpiler`正是这样一个工具，它是基于Grunt的任务插件，用于将ES6语法编译为ES5，确保代码能在各种环境下正常运行。 Grunt是JavaScript任务运行器，它允许开发者定义和运行自动化任务，如代码编译、...
前端开源库-es6-promise-pool
08-29
const PromisePool = require('es6-promise-pool'); // 假设我们有100个需要下载的文件 const filesToDownload = Array.from({ length: 100 }, (_, i) => `file${i + 1}.txt`); // 每个文件的下载是一个返回...
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
ES6引入了箭头函数，其语法简洁明了，降低了创建函数的复杂性。箭头函数的关键特点在于它们没有自己的`this`值，而是继承自父作用域。这解决了回调函数中`this`指向问题，如： ```javascript let person = { name:...
babel6.26.0.js----es6语法转化为es5语法--2积分
04-23
Babel是一个广泛使用的工具，它能够将ES6（ECMAScript 2015）及更高版本的现代JavaScript语法转换为ES5，一个在更广泛范围内支持的旧版本。这个过程被称为“转译”或“编译”，目的是为了让代码能在不支持新语法特性...
cesium-navigation-es6 Cesium指南针，import的方式
08-25
在ES6中，`import`关键字是用来导入模块的，这是现代JavaScript中模块化的一个关键特性。相比传统的`require`方式，`import`更具有可读性和静态性，能够进行静态分析，有助于代码的优化和构建过程。 为了在项目中...
前端开源库-gulp-es6-transpiler
08-29
"前端开源库-gulp-es6-transpiler"正是这样一个工具，它结合了Gulp工作流与Babel转译器，帮助开发者轻松地将ES6代码转换为可兼容的ES5代码。 **Gulp简介** Gulp是基于Node.js的自动化构建工具，它允许开发者通过...
前端开源库-promisify-es6
08-29
总之，Promisify-es6 是一个优秀的前端开源库，它简化了将回调函数转化为 Promise 的过程，使得异步编程更加优雅。通过理解和熟练使用 Promisify-es6，开发者可以更好地应对现代前端开发中的异步挑战。
前端大厂最新面试题-es6.docx
06-06
* ES6中也引入了新的数组特性，例如类型化数组。 函数 * ES6中引入了新的函数特性，例如块级函数和箭头函数。 * 箭头函数可以简化函数的定义，避免了this指向问题。 类 * ES6中引入了新的类特性，可以使用class...
ES6语法规范.docx
08-14
ES6语法规范 ES6（ECMAScript 6）是一种新的JavaScript语法规范，相比于之前的ES5，ES6带来了许多新的特性和改进。下面将对ES6中的let命令、const命令、解构赋值、Symbol、Set等知识点进行详细的介绍。 一、let...
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值