Web前端自学记录（二十二） ES6新特性

最新推荐文章于 2024-07-16 09:20:11 发布
最新推荐文章于 2024-07-16 09:20:11 发布
阅读量324 收藏
点赞数
文章标签： es6 node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqc382750716/article/details/116736972
版权

ES6新特性

1.let

<!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 a,b,c,d;
        let e = 100;
        let f = 100, g = 200;

        //1.变量不能重复声明
        //2.块级作用域  全局，函数，eval
        // {
        //     let a = 100；
        //     // 在外部无法读取
        // }
        //3.不存在变量提升
        //4.不影响作用域链
    </script>
</body>
</html>

2.const

<!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 SCHOOL = "尚硅谷";
        // 1.一定要赋初始值
        // 2.一般常量使用大写
        // 3.常量的值不能修改
        // 4.块级作用域
        // 5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
        
    </script>
</body>
</html>

3.变量的解构赋值

<!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.数组的解构
        const F4 = ["小沈阳","刘能","赵四","宋小宝"];
        let [xiao,liu,zhao,song] = F4;
        // 2.对象的解构
        const zhao ={
            name: "赵本山",
            age:"不详",
            xiaopin: function() {
                console.log("我可以演小品");
            }
        };

        let{name,age,xiaopin} = zhao;
    </script>
</body>
</html>

4.模板字符串

<!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 str = `我是一个字符串`;
        // 2.内容中可以直接出现换行符
        let str1 = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    </ul>`;
        // 3.变量拼接
        let lovest = `魏翔`;
        let out = `${lovest}是我心目中最搞笑的演员`;
    </script>
</body>
</html>

5.简化对象写法

<!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(){
                console.log("我们可以提高你的技能")
            }
        }
    </script>
</body>
</html>

6.箭头函数

<!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 fn = (a,b) =>{
            return a + b;
        }
        // 调用函数
        fn(1,2);
        // 1.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);

        // 2.不能作为构造函数实例化对象
        // 3.不能使用arguments变量
        // 4.箭头函数的简写
            // 1) 省略小括号，当形参有且只有一个的时候
            // 2) 省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
            let pow = n => n*n;
        // 箭头函数适合与this无关的回调，定时器，数组的方法回调
        // 箭头函数不适合于this有关的回调，事件回调，对象的方法
            
    </script>
</body>
</html>

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>
        // ES6 允许给函数参数赋值默认值
        // 1.形参的初始值 具有默认值的参数，一般位置要靠后
        // 2.默认值可以与解构赋值结合
        function add(a,b,c=10) {
            return a + b + c;
        }
        function connect({host="127.0.0.1",username,password,port}) {
            console.los(host);
        }
        connect({
            host:"localhost",
            username:"root",
            password:"root",
            port:3306
        })
    </script>
</body>
</html>

8.rest参数

<!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引入rest参数，用于获取函数的实参，用来代替arguments
        // ES5获取实参的方式
        // function date() {
        //     console.log(arguments);
        // }
        // date("a","b","c");
        // rest 参数
        function date(...args) {
            console.log(args);
        }
        date("a","b","c");
        // rest 参数必须要放到参数的最后
    </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>
        // "..." 扩展运算符，能将数组转换为逗号分隔的参数序列
        // 声明一个数组
        const tfboys = ['易烊千玺','王俊凯','王源'];// =>'易烊千玺','王俊凯','王源'
        // 声明一个函数
        function chunwan() {
            console.log(arguments);
        }
        chunwan(...tfboys);

        // 数组的合并
        const arr1 = ['a','b'];
        const arr2 = ['c','d'];
        const hebing =[...arr1,...arr2];
        // 数组的克隆
        const arr3 = ['e','f'];
        const arr4 = [...arr3];
        // 将伪数组转为真正的数组
    </script>
</body>
</html>

10.Symbol对象

<!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>
        // Symbol对象 唯一值，用于防止属性名冲突
        // 创建Symbol
        let s = Symbol();
        // console.log(s,typeof s);
        let s2 = Symbol("a");
        let s3 = Symbol("a");
        console.log(s2 === s3);//false
        // Symbol.for创建
        let s4 = Symbol.for("b");
        let s5 = Symbol.for("b");
        console.log(s4 === s5);//true

        // 不能与其他数据进行运算
    </script>
</body>
</html>

Symbol创建对象属性

<!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>
        // 向对象中添加方法 up down
        let game ={}

        // 声明一个对象
        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("我可以发言")
            }
        }
    </script>
</body>
</html>

Symbol的内置值

<!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>
        class Person{
            static [Symbol.hasInstance](param){
                console.log(param);
                console.log("我被用来检测类型了");
            }
        }
        let o = {};
        console.log(o instanceof Person)

        const arr = [1,2,3]
        const arr2 = [4,5,6]
        arr2[Symbol.isConcatSpreadable] = false;
    </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>
    <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);
        }


        // // 使用for...of遍历数组
        // for(let v of xiyou){
        //     console.log(v);
        // }
        // // 
    </script>
</body>
</html>

12.生成器

<!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>
        // 生成器其实就是一个特殊的函数
        // 异步编程 纯回调函数
        // yield 函数代码的分隔符
        function * gen() {
            yield 'a';
            yield 'b';
            yield 'c';
        }
        // let iterator = gen();
        // iterator.next();
        // iterator.next();
        // iterator.next();
        // iterator.next();

        // 遍历
        for(let v of gen()){
            console.log(v);
        }
    </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>
        function * gen(arg) {
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three =yield 333;
            console.log(three);
        }
        // 执行获取迭代器对象
        let iterator = gen("AAA");
        // next方法可以传入实参
        console.log(iterator.next());
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
    </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>
        // 异步编程 文件操作 网络操作(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();
    </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>
        // 模拟录取 用户数据 订单数据 商品数据
        function getUsers() {
            setTimeout(()=>{
                let data = '用户数据'
                // 调用next方法，并且将数据传入
                iterator.next(data);
            },1000)
        }
        function getOrders() {
            setTimeout(()=>{
                let data = '订单数据'
                iterator.next(data);
            },1000)
        }
        function getGoods() {
            setTimeout(()=>{
                let data = '商品数据'
                iterator.next(data);
            },1000)
        }
        function * gen(){
            let users = yield getUsers();
            console.log(users);
            let orders = yield getOrders();
            console.log(orders);
            let goods = yield getGoods();
            console.log(goods);
        }
        let iterator = gen();
        iterator.next();
    </script>
</body>
</html>

13.Promise

<!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>
        // 实例化promise对象
        const p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                // 
                let data = '数据库中的用户数据';
                // resolve
                resolve(data);
            },1000)
        });
        // 调用 promise 对象的 then方法
        p.then(function(value) {
            console.log(value);
        },function (reason) {
            console.error(reason);
        })
    </script>
</body>
</html>

Promise.prototype.then

<!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>
        // 创建promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("用户数据");
            },1000)
        });

        // 调用then方法 then方法的返回结果是promise对象，对象状态由回调函数的执行结果决定
        // 1.如果回调函数中返回的结果是 非promise类型的属性，状态为成功，返回值为对象的成功值

        // const result = p.then(value =>{
        //     console.log(value);
        //     // 1.非promise类型的属性
        //     // return 'aaa'
        //     // 2.是promise对象
        //     // return new Promise((resolve,reject)=>{
        //     //     resolve('ok')
        //     // })
        //     // 3.抛出错误
        //     throw new Error('出错了')
        // },reason=>{
        //     console.warn(reason);
        // });
        p.then(value=>{

        },reason=>{

        }).then(value=>{

        },reason=>{

        })

        console.log(result);


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

promise-catch

<!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 p =  new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // 设置p对象的状态为失败，并设置失败的值
                reject("出错了")
            },1000);
        });

        p.catch(function(reason) {
            console.warn(reason);
        });
    </script>
</body>
</html>

14.set

<!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>
        // 声明一个 set
        let s = new Set();
        let s2 = new Set(['a','b','c','d','a'])

        // 元素个数
        console.log(s2.size);
        // 添加新的元素
        s2.add('e')
        // 删除元素
        s2.delete('e')
        // 检测
        s2.has('a')
        // 清空
        s2.clear();

        for(let v of s2){
            console.log(v);
        }
    </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 arr = [1,2,3,4,5,4,3,2,1];
        // 1.数组去重
        // let result = [...new Set(arr)]
        // console.log(result);
        // 2.交集
        // let arr2 = [4,5,6,5,6];
        // let result = [...new Set(arr).filter(item=>{
        //     let s2 = new Set(arr2);
        //     if(s2.has(item)){
        //         return true;
        //     }else{
        //         return false
        //     }
        // })]
        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        // 3.并集
        // let union = [...new Set([...arr,...arr2])];
        // console.log(union);
        // 4.差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);
    </script>
</body>
</html>

15.map

<!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>
        // 声明map
        let m = new Map();

        // 添加元素
        m.set('name','aaa')
        m.set('change',function () {
            console.log('改变');
        });
        let key = {
            username : 'eee'
        };
        m.set(key,['bbb','ccc','ddd'])
        // 删除
        m.delete('name')
        // 获取
        console.log(m.get('change'));
        // 清空
        m.clear()
        // 遍历
        for(let v of m){
            console.log(v);
        }
    </script>
</body>
</html>

16.class

<!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>
        // // 手机
        // function Phone(brand,price) {
        //     this.brand = brand;
        //     this.price = price;
        // }
        // // 添加方法
        // Phone.prototype.call = function () {
        //     console.log('我可以打电话');
        // }
        // // 实例化对象
        // let Huawei = new Phone("华为",9999);

        // class
        class Phone{
            // 构造方法 名字不能修改
            constructor(brand,price){
                this.brand = brand;
                this.price = price;
            }
            // 方法必须使用该语法，不能使用ES5的对象完整形式
            call(){
                console.log('我可以打电话');
            }
        }
        let onePlus = new Phone('1+',1999)
        onePlus.call()
    </script>
</body>
</html>

class静态成员

<!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>
        // function Phone() {
            
        // }
        // Phone.name = '手机'
        // Phone.change = function () {
        //     console.log('我可以改变世界');
        // }
        // let nokia = new Phone();
        
        class Phone{
            // 静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }
    </script>
</body>
</html>

17.ES6构造函数继承

<!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>
        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('我可以拍照');
        }

        const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch')
        
    </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>
        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('拍照');
            }
            // 对父类方法的重写
            call(){
                console.log("视频通话");
            }
        }
        const xiaomi = new SmartPhone('小米',799,'白色','4.7inch')
    </script>
</body>
</html>

18.get和set

<!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>
        // get 和 set
        class Phone{
            get price(){
                console.log('价格属性被读取了')
                return '价格';
            }
            set price(newVal){
                console.log('价格属性被修改了');
                return 'jiage'
            }
        }
        // 实例化对象
        let s = new Phone();

        console.log(s.price);
        s.price = 'free';
    </script>
</body>
</html>

19.数值扩展

<!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>
        // 0. Number.EPSILON是JavaScript表示的最小精度
        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 = 0b0110;
        let o = 0o777;
        // 2.Nubmer.isFinite 检测一个数值是否为有限数
        console.log(Number.isFinite(100));
        // 3.Number.isNaN 检测一个数是否为Nan
        console.log(Number.isNaN(123));
        // 4.Number.parseInt Number.parseFloat字符串转整数/浮点数
        console.log(Number.parseInt('123aaa'));
        // 5.Number.isInteger 判断一个数是否为整数
        console.log(Number.isInteger(123));
        // 6.Math.trunc 将数字的小数部分抹掉
        console.log(Math.trunc(3.5));
        // 7.Math.sign 判断一个数到底为整数、负数还是零
        console.log(Math.sign(100));
    </script>
</body>
</html>

20.对象方法扩展

<!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.Object.is 判断两个值是否完全相等
        console.log(Object.is(120,120));
        console.log(Object.is(NaN,NaN));//true
        // 2.Object.assign对象的合并
        const config1 ={
            port:123,
            test:'test'
        }
        const config2 ={
            port:456
        }
        Object.assign(config1.config2)
        // 3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
        const school = {
            name : 'a'
        }
        const cities = {
            xiaoqu:['北京','上海']
        }
        Object.setPrototypeOf(school,cities)
        console.log(Object.getPrototypeOf(school));
    </script>
</body>
</html>

21.模块化

<!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>
        /* 
            模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

            优势
                防止命名冲突
                代码复用
                高维护性

            产品
                CommonJS => Node.js Browerify
                AMD => requireJS
                CMD => seaJS
        */
    </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 type="module">
        // // 引入30.m1.js模块内容 通用的导入方式
        // import * as m1 from "./m1.js";
        // console.log(m1);

        // // 2.解构赋值的形式
        // import{school,teach} from "./m1.js";
        // import{school as aaa,findJob} from "./m2.js"
        // import{default as m3} from "./m3.js"

        // // 简便形式
        // import m3 from "./m3.js"
    </script>

    <script src="./js/app.js" type="module"></script>
</body>
</html>

m1

/* 
    export命令用于规定模块的对外接口
    import命令用于输入其他模块提供的功能
*/
// 分别暴露
export let school = 'aaa'
export function teach() {
    console.log('teach');
}

m2

// 统一暴露
let school = 'aaa'
function findJob() {
    console.log('找工作');
}
// 
export{school,findJob};

m3

// 默认暴露
export default{
    school:'aaa',
    change:function () {
        console.log('gaibian');
    }
}

22.ES7新特性

<!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>
        // includes
        const word = ['a','b','c','d']
        console.log(word.includes('a'));

        // **幂运算
        console.log(2**10);//Math.pow(2,10)
    </script>
</body>
</html>

23.async函数

<!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>
        // async函数
        async function fn() {
            // 返回的是一个promise对象
            // return 'a'
            // 返回的结果不是一个Promise类型的对象，返回的就是一个成功的Promise
            // 抛出错误，返回的结果是一个失败的Promise
            // throw new Error('出错了')
            // 返回的结果如果是一个Promise对象
            return new Promise((resolve,reject)=>{
                resolve('成功的数据')
            })
        }
        const result = fn();
        // 调用then方法
        result.then(value =>{
            console.log(value);
        },reason=>{
            console.warn(reason);
        })
    </script>
</body>
</html>

24.await表达式

<!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>
        /* 
            await必须写在async函数中
            await右侧的表达式一般为promise对象
            await返回的是promise成功的值
            await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
        */
    //    创建promise对象
    const p = new Promise((resolve,reject)=>{
        // resolve('成功的值')
        reject("失败啦");
    })

        async function main() {
            try{
                let result = await p;
                console.log(result);
            }catch(e){
                console.log(e);
            }
        }
        main()
    </script>
</body>
</html>

async和await结合读取文件

// 引入fs模块
const fs = require('fs')

function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./为学.md", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data)
        })
    })
}
function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./插秧诗.md", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data)
        })
    })
}
function readGuanShuYouGan() {
    return new Promise((resolve, reject) => {
        fs.readFile("./观书有感.md", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data)
        })
    })
}
async function main() {
    // 获取为学内容
    let weixue = await readWeiXue()
    let chayang = await readChaYangShi()
    let guanshuyougan = await readGuanShuYouGan()

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshuyougan.toString());
}
main()

async和await结合发送Ajax请求

<!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>
        // 发送AJAX请求，返回的结果是Promise对象
        function sendAJAX(url) {

            return new Promise((resolve, reject) => {
                // 1.创建对象
                const x = new XMLHttpRequest;
                // 2.初始化
                x.open('GET', url);
                // 3.发送
                x.send();
                // 4.事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            // 成功
                            resolve(x.response);
                        }else{
                            // 失败
                            reject(x.status);
                        }
                    }
                }
            })
        }
        // async与await测试
        async function main() {
            // 发送ajax请求
            let result = await sendAJAX("https://api.apiopen.top/getJoke");
            console.log(result);
        };

        main();
    </script>
</body>

</html>

25.ES8对象方法扩展

<!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 school = {
            name:'aaa',
            cities:['北京','上海'],
            xueke:['前端','java']
        }
        // 获取对象所有的键
        console.log(Object.keys(school));
        // 获取对象所有的值
        console.log(Object.values(school));
        // entries
        // console.log(Object.entries(school));
        // 创建map
        const m = new Map(Object.entries(school));
        console.log(m);
        // 对象属性的描述对象
        console.log(Object.getOwnPropertyDescriptors(school));
    </script>
</body>
</html>

26.ES9扩展运算符与rest参数

<!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>
    <!-- 
        Rest参数与spread扩展运算符在ES6中已经引入，不过ES6中只针对于数组，
        在ES9中为对象提供了像数组一样的rest参数和扩展运算符
     -->
     <script>
        //  function connect(host,port,...user) {
        //      console.log(host);
        //      console.log(port);
        //      console.log(username);
        //      console.log(password);
        //  }

        //  connect({
        //      host:"127.0.0.1",
        //      port:3386,
        //      username:'root',
        //      password:'root',
        //      type:"master"
        //  });
        const skillOne = {
            q:"天音波"
        }
        const skillTwo = {
            w:"金钟罩"
        }
        const mangseng ={...skillOne,...skillTwo}
        // ...skillOne => q:"天音波",w:"金钟罩"

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

27.正则扩展

命名捕获分组

<!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 str = '<a href="http://www.atguigu.com">尚硅谷</a>'

        // // 提取url与标签文本
        // const reg = /<a href="(.*)">(.*)<\/a>/;
        // // 执行
        // const result = reg.exec(str);

        // console.log(result[1]);
        // console.log(result[2]);
        let str = '<a href="http://www.atguigu.com">尚硅谷</a>'
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result = reg.exec(str);
        console.log(result);
    </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 str = 'JS5211314你知道么555啦啦啦'
        // 正向断言
        // const reg = /\d+(?=啦)/;
        // const result = reg.exec(str)
        // 反向断言
        const reg = /(?<=么)\d+/
        const result = reg.exec(str);
    </script>
</body>
</html>

dotAll模式

<!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>
        // dot . 元字符  除换行符以外的任意单个字符
        let str = `
        <ul>
            <li>
                <a>肖申克的救赎</a>
                <P>上映日期：1994-09-18</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期：1994-07-06</p>
            </li>
        </ul>`;
        const reg = /<li>.*?<a>(.*?)<\/a>.*<p>(.*?)<\/p>/gs
        let result
        let data = []
        while(result = reg.exec(str)){
            console.log(result);
            data.push({title:result[1],time:result[2]})
        }
        console.log(data);
    </script>
</body>
</html>

28.ES10对象扩展方法

<!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 result = Object.fromEntries([
            ['name','尚硅谷'],
            ['xueke','Java,大数据,前端']
        ]);
        console.log(result);

        // Map
        const m = new Map()
        m.set('name','atguigu')

        const result = Object.fromEntries(m)
    </script>
</body>
</html>

29.ES10字符串扩展方法

<!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>
        // trim 清除空白
        // trimStart 清除字符串左侧空白
        // trimEnd 清除字符串右侧空白
    </script>
</body>
</html>

30.数组方法扩展

<!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>
        // flat
        // 将多维数组转化为低维数组
        // const arr = [1,2,3,4,[5,6]];
        // console.log(arr.flat);
        // const arr = [1,2,3,4,[5,6[7,8,9]]]
        // 参数为深度 是一个数字
        // console.log(arr.flat(2));

        // flatMap
        const arr = [1,2,3,4];
        const result = arr.flatMap(item=>[item * 10]);
        console.log(result);
    </script>
</body>
</html>

31.ES10-Symbol.prototype.description

<!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>
        // 创建Symbol
        let s = Symbol('尚硅谷')

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

32.ES11私有属性

<!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>
        class Person{
            // 公有属性
            name;
            // 私有属性
            #name;
            #weight;
            // 构造方法
            constructor(name,age,weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
        }
        // 实例化
        const girl = new Person('小红',18,'45kg')
        console.log(girl.name);
        console.log(girl.#age);//访问不到
        console.log(girl.#weight);
    </script>
</body>
</html>

33.Promise.allSettled方法

<!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>
        // 声明两个promise
        const p1 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("商品数据 - 1");
            },1000)
        });

        const p2 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("商品数据 - 2");
            },1000)
        });

        // 调用allsettled方法
        const result = Promise.allSettled([p1,p2]);
        console.log(result);
    </script>
</body>
</html>

34.string.prototype.matchAll

<!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 str = `
        <ul>
            <li>
                <a>肖申克的救赎</a>
                <P>上映日期：1994-09-18</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期：1994-07-06</p>
            </li>
        </ul>`;

        // 声明正则
        const reg =/<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
        
        // 调用方法
        const result = str.matchAll(reg);

        for(let v of result){
            console.log(v);
        }
    </script>
</body>
</html>

35.可选链操作符

<!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>
        // 可选的链接运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
        function main(config) {
            // const dbHost = config && config.db && config.db.host;
            const dbHost = config?.db?.host;

            console.log(dbHost);
        }
        main({
            db:{
                host:'192.168.1.100',
                username:"root"
            },
            cache:{
                host:'192.168.1.200',
                username:"admin"
            }
        })
    </script>
</body>
</html>

36.动态import

<!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>
    <button id="btn">点击</button>
    <script src=".app1.js" type="module"></script>
</body>
</html>

app1.js

// 获取元素
const btn = document.getElementById('btn');

btn.onclick = function () {
    import('./hello.js').then(module => {
        module.hello()
    });
};

hello.js

export function hello() {
    alert('hello')
}

37.BigInt类型

<!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 n = 521n

        // 函数
        let n =123;
        console.log(BigInt(n));
    </script>
</body>
</html>

38.绝对全局对象

<!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>
        console.log(globalThis);
    </script>
</body>
</html>

39.将ES6代码转换为可识别的ES5代码

<!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>
    <!-- 
        1.安装工具 babel-cli bable-preset-env browserify(webpack)
        2.npx babel src/js -d dist/js
        3.打包 npx browserify dist/js/app.js -o dist/bundle.js
     -->
     <script src="./js/app.js" type="module"></script>
</body>
</html>

后续会持续更新

淡水鳗鱼的梦Z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端必做笔记之一：let, var, const的区别
qq_42302014的博客
10-24 2809
Web前端必做笔记之一：let, var, const的区别 <script> //var //没有块级作用域，只有函数作用域，支持变量提升 console.log(a); var a = 10; //这样输出会报undefined //var声明变量时，会在上面先声明一个a但是没有赋值，这时就输出undefined //let 这也是用
2024年Web前端最全webpack ES6转ES5的babel配置，web应用系统开发
2401_84435138的博客
05-04 669
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
JavaScript的Let用法
stujike123456的博客
09-14 954
https://www.cnblogs.com/mikeCao/p/8992453.html
前端进阶——ES6
qq_43427354的博客
09-27 662
es6新特性
2024年Web前端最全JavaScript进阶（二十九）： 走近 es6 之 new，web开发入门
2401_84438160的博客
05-04 301
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】["es2015"]经过实践发现，build阶段依旧报错。故采用第二套解决方案，使用es5语法重写es6。
2024最全前端面试系列（ES6）（ES6你不得不知道的新特性
2401_83945851的博客
04-01 436
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了前端开发知识点，真正体系化！**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
ES6主要新特性
2401_84150206的博客
04-19 726
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-f5v00Vsl-1713484705662)]正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取。
web前端自学都要学什么？
webzixue的博客
12-02 723
web前端自学都要学什么？ 第一阶段：HTML+CSS+JS基础 （1） HTML+CSS: HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发 （2） JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 （3） JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件 、滚差视图。 程序猿的生活：前端只需要掌握这些，你也能拿8K！（
ES6新增语法(二)——函数和参数
2401_84091938的博客
05-05 667
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
ES6学习笔记(二)，2024前端面试真题精选干货整理
m0_61044466的博客
04-21 778
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
猛男表白案例——自学web前端
11-29
ES6的新特性也是必须要掌握的，如箭头函数、模板字符串和Promise等。 当掌握了基础知识后，可以进一步学习前端框架，如React、Vue或Angular。这些框架大大简化了开发流程，提高了开发效率。React以其组件化思想著称...
web前端视频大全学习资源，内涵css，html等零基础视频
06-15
此外，HTML5引入了许多新特性，如`<canvas>`用于图形绘制，`<video>`和`<audio>`支持多媒体播放，`<form>`表单元素的增强等，这些都是现代网页开发不可或缺的部分。 二、CSS（层叠样式表） CSS则是用来美化HTML元素...
zengxiaodai#Web#01-2019年Web前端入门自学路线1
07-25
一、HTML、CSS基础、JavaScript语法基础 二、JavaScript语法进阶 三、jQuery、Ajax等 四、ES6语法 五、HTML5和CSS3
2020年Web前端入门,自学路线的13条建议.docx
10-25
遵循这13条建议，你可以构建一个全面的Web前端自学计划，逐步成为熟练的前端开发者。记住，实践是检验学习成果的最好方式，尝试制作实际项目将巩固你的知识。同时，保持对新技术的关注和学习，适应不断变化的前端...
web前端开发课设.zip
01-06
你需要学习变量、数据类型、函数、对象、DOM操作、事件处理等基础，以及现代JavaScript特性如ES6+的新语法、Promise、async/await等。 4. **前端框架与库**：压缩包可能包含了如React、Vue.js或Angular等流行的前端...
ES6 对象的扩展（十五）
qq_35876316的博客
07-16 321
特性：在对象字面量中，可以直接使用方法定义，而不需要使用 function 关键字。用法：简化对象中方法的书写。');// 输出：Hello!
ES6 数组的扩展（十六）
最新发布
qq_35876316的博客
07-16 288
返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。：返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。：用一个固定值填充数组中从起始索引到终止索引（不包括）的所有元素。：从类数组对象或可迭代对象中创建一个新的数组实例。：找出数组中满足条件的第一个元素的索引。：将数组的一部分复制到数组的另一个位置。：将数组中一段区域的元素替换为特定值。：找出数组中满足条件的第一个元素。：创建一个包含多个参数的数组。
ES6 Symbol （十三）
qq_35876316的博客
07-15 473
内置Symbol：使用 ES6 内置的 Symbol，如 Symbol.iterator 来实现自定义迭代器。创建Symbol：使用 Symbol() 创建一个新的 Symbol 值。作为属性键：使用 Symbol 作为对象属性的键，确保属性的唯一性。
ES6常用功能/新特性
闻人放歌的三寸青草园圃
07-15 239
es6模块化，在浏览器中需要通过webpack/rollup打包。这里我们也可以比较下两者打包结果的区别。查看打包后的代码，webpack有很多自己缝状的辅助函数，而rollup除了定义的amd/umd标准函数外，其他都是自己的逻辑代码。以下例子可以看出es6中class的本质就是js构造函数的语法糖。但是使用class写法，语意更加清晰、简洁。箭头函数可以改变js函数烦人的this指向window问题，将this指向最近一层。promise用来解决js中的callback hell。
前端周考：事件处理与ES6新特性实战
2. **ES6新特性**: 一道题目考查了JavaScript ES6的新功能，区分了`assign`、`Array.from`和`for...of`循环，明确指出`forEach`是ES5中的原生方法，而不是ES6新增的。 3. **浏览器行为与方法**: 提到阻止浏览器默认...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值