ES6学习与实践

最新推荐文章于 2024-11-08 21:12:18 发布
最新推荐文章于 2024-11-08 21:12:18 发布
阅读量1.1k 收藏 19
点赞数 25
分类专栏： 前端 学习与实践 文章标签： es6 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinayangju/article/details/134761555
版权

文章目录

学习资料

尚硅谷Web前端ES6教程，涵盖ES6-ES11-哔哩哔哩

ES介绍

在这里插入图片描述
ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性

为什么要学习新特性？
在这里插入图片描述

  1. 语法简洁，功能丰富
  2. 框架开发应用
  3. 前端开发职位要求

let 声明变量

可以同时声明一个或多个

在这里插入图片描述

不能重复声明

在这里插入图片描述

块级作用域

块级作用域只能在代码块中有效
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不存在变量提升

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不影响作用链

在这里插入图片描述
在这里插入图片描述

const 定义常量

声明常量

在这里插入图片描述

注意事项

  1. 一定要赋初始值
  2. 一般常量使用大写（潜规则）
  3. 常量的值不能修改
  4. 块级作用域
  5. 对于数组和对象的元素修改，不算做对常量的修改，不会报错，因为引用地址没有发生改变，如果修改整个数组让其引用地址发生改变则会报错

变量的解构赋值

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

数组解构赋值

在这里插入图片描述

在这里插入图片描述

对象解构赋值

在这里插入图片描述
在这里插入图片描述

模板字符串

ES6 引入新的声明字符串的方式 `` "" ''

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>
<body>
    <script>
        // ES6 引入新的声明字符串的方式 `` '' ""

        // 1. 声明
        let str = `我是一个字符串哦！`;
        console.log(str,typeof str)

        // 2. 内容可以直接出现换行符
        let hh = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                </ul>`;

        // 3. 变量拼接
        let lovest = '沈腾';
        let out = `${lovest}是我心中最搞笑的演员！`;
        console.log(out)
    </script>
</body>
</html>

在这里插入图片描述

简化对象写法

<!DOCTYPE html>
<html lang="zh-CN">
<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 lowSchool = {
            name: name,
            change: change,
            improve: function(){
                console.log(`我们可以提高你的技能`)
            }
        }

        // 简化写法
        const newSchool = {
            name,
            change,
            improve(){
                console.log(`我们可以提高你的技能`)
            }
        }

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

在这里插入图片描述

箭头函数

  • 注意事项：
    • this 是静态的，this始终指向函数声明时所在作用域下的 this的值
    • 不能作为构造实例化对象
    • 不能使用arguments变量
    • 箭头函数的简写，当形参且只有一个的时候可以省略小括号；当代码体只有一条语句的时候可以省略花括号并且此时return必须省略，语句的执行结果就是函数的返回值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>
    <script>
        // ES6 允许使用 箭头（ => ）定义函数
        // 声明一个函数
        // let fn = function(){

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

        // 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. 不能作为构造实例化对象
        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let me = new Person('xiao',30);
        console.log(me)

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

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

函数参数默认值设置

<!DOCTYPE html>
<html lang="zh-CN">
<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);

        // 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
        })
    </script>
</body>
</html>

在这里插入图片描述

rest参数 …args

<!DOCTYPE html>
<html lang="zh-CN">
<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(`白芷`,`阿娇`,`思慧`);

        // rest 参数
        function dateRest(...args){
            console.log(args);
        }
        dateRest(`白芷`,`阿娇`,`思慧`);

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

在这里插入图片描述

扩展运算符

<!DOCTYPE html>
<html lang="zh-CN">
<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('易烊千玺',王源',王俊凯')
    </script>
</body>
</html>

在这里插入图片描述

Symbol 独一无二的值

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

  • Symbol 特点
    • Symbol的值是唯一的，用来解决命名冲突的问题
    • Symbol值不能与其他数据进行运算
    • Symbol定义的对象属性不能使用for...in遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
<!DOCTYPE html>
<html lang="zh-CN">
<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);
        let s2 = Symbol('尚硅谷');
        let s3 = Symbol('尚硅谷');
        // Symbol.for 创建
        let s4 = System.for('尚硅谷');
        let s5 = Symbol.for('尚硅谷');

        // 不能与其他数据进行运算
        // let result = s + 100;
        // let result = s > 100;
        // let result = s + s;

        // USONB you·are·so·niubility
        // u undefined
        // s string symbol
        // o object
        // n null number
        // b boolean
    </script>
</body>
</html>

生成器函数

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

生成器函数声明与调用

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

        // 分布执行，并返回结果，调用next()则执行一步，yield就是执行完返回的结果
        let iterator = gen();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

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

在这里插入图片描述

生成器函数的参数传递

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数参数传递</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');
        console.log(iterator.next());
        // next方法可以传入实参，并且将会作为yield的返回结果
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
    </script>
</body>
</html>

在这里插入图片描述

Promise 构造函数

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

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

基本语法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise基本语法</title>
</head>
<body>
    <script>
        // 实例化 Promise 对象
        const p = new Promise(function(resolve,reject){
            setTimeout(() => {
                // let data = '数据库中的用户数据';
                // resolve(data);
                
                let err = '数据读取失败';
                reject(err);
            }, 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="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-then方法</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 'iloveyou';
        //     // 2. 是 promise 对象
        //     // return new Promise((resolve,reject) => {
        //     //     // resolve('ok');
        //     //     reject('error')
        //     // })
        //     // 3. 抛出错误
        //     // throw new Error('出错了！');
        //     throw '出错了！';
        // }, reeason => {
        //     console.warn(reeason);
        // });
        // console.log(result);

        // 链式调用
        p.then(value => {

        }).then(value => {
            
        })
    </script>
</body>
</html>

Promise.prototype.catch 方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-catch方法</title>
</head>
<body>
    <script>
        const p = new Promise((resolve,reject) => {
            setTimeout(() => {
                // 设置 p 对象的状态为失败，并设置失败的值
                reject('出错了！');
            }, 1000);
        })

        // p.then(function(value){},function(reason){
        //     console.error(reason)
        // })

        // catch是一个语法糖，可以在 then 方法的基础上省略第一个参数
        p.catch(function(reason){
            console.warn(reason)
        })
    </script>
</body>
</html>

class

class介绍与初体验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class介绍与初体验</title>
</head>
<body>
    <script>
        class Shouji {
            // 构造方法，名字不能修改
            constructor(brand,price){
                this.brand = brand;
                this.price = price;
            }

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

        let onePlus = new Shouji("1+",1999);
        console.log(onePlus);
    </script>
</body>
</html>

在这里插入图片描述

class类的静态成员

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class类的静态成员</title>
</head>
<body>
    <script>
        class Phone {
            // 静态属性
            static name = '手机';
            static change(){
                console.log('我可以改变世界');
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name);
    </script>
</body>
</html>

在这里插入图片描述

class类继承

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class类继承</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);
                this.color = color;
                this.size = size;
            }

            photo(){
                console.log('拍照');
            }
            playGame(){
                console.log('玩游戏');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();
    </script>
</body>
</html>

在这里插入图片描述

class的get和set

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

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

        // 实例化对象
        let s = new Phone();
        console.log(s.price);
        s.price = 'free';
    </script>
</body>
</html>

在这里插入图片描述

数值扩展

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数值扩展</title>
</head>
<body>
    <script>
        // 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    ',0.1 + 0.2 === 0.3)
        console.log('equal(0.1 + 0.2,0.3)   ',equal(0.1 + 0.2,0.3))

        // Number.isFinite 检测一个数值是否为有限数
        console.log('Number.isFinite(100)   ',Number.isFinite(100));
        console.log('Number.isFinite(100/0)   ',Number.isFinite(100/0));
        console.log('Number.isFinite(Infinity)   ',Number.isFinite(Infinity));

        // Number.isNaN 检测一个数值是否为 NaN
        console.log('Number.isNaN(123)   ',Number.isNaN(123));

        // Number.parseInt Number.parseFloat字符串转整数
        console.log(`Number.parseInt('521314love')   `,Number.parseInt('521314love'))
        console.log(`Number.parseFloat('3.1415926神奇')   `,Number.parseFloat('3.1415926神奇'))

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

        // Math.trunc 将数字的小数部分抹掉
        console.log('Math.trunc(3.5)   ',Math.trunc(3.5));
        
        // Math.sign 判断一个数到底为正数 负数 还是零
        console.log('Math.sign(100)   ',Math.sign(100))
        console.log('Math.sign(0)   ',Math.sign(0))
        console.log('Math.sign(-20000)   ',Math.sign(-20000))
    </script>
</body>
</html>

在这里插入图片描述

对象方法扩展

<!DOCTYPE html>
<html lang="zh-CN">
<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

        // 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));

        // 3. Object.setPrototypeOf 设置原型对象 与 Object.getPrototypeOf 获取原型对象
        const school = {
            name: '尚硅谷'
        }
        const cities = {
            xiaoqu: ['北京','上海','深圳']
        }
        Object.setPrototypeOf(school,cities);
        console.log(Object.getPrototypeOf(school))
        console.log(school)
    </script>
</body>
</html>

在这里插入图片描述

模块化语法

模块功能主要由两个命令构成：export和import。

  • export命令用于规定模块的对外接口。
  • import命令用于输入其他模块提供的功能。

m1.js

// 分别暴露
export let school = '尚硅谷';

export function teach() {
    console.log('我们可以教给你开发技能')
}

m2.js

// 统一暴露
let school = '尚硅谷';

function findJob(){
    console.log('我们可以帮你找工作');
}

export {school,findJob};

m3.js

// 默认暴露
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log('我们可以改变你！');
    }
}

app.js

// 入口文件

// 1. 通用的导入方式
// 引入 m1.js 模块内容
import * as m1 from './m1.js';
console.log(m1);

// 引入 m2.js 模块内容
import * as m2 from './m2.js';
console.log(m2);

// 引入 m3.js 模块内容
import * as m3 from './m3.js';
console.log(m3);
m3.default.change();


// 2. 解构赋值形式
import {school, teach} from './m1.js';
console.log(school);
console.log(teach);

import {school as guigu, findJob} from './m2.js';
console.log(guigu);
console.log(findJob);


// 3. 简便形式 针对默认暴露
import defaultM3 from './m3.js';
console.log(defaultM3);

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化</title>
</head>
<body>
    <script src="./app.js" type="module"></script>
</body>
</html>

在这里插入图片描述

技术人生-小草
关注
专栏目录
ES6学习——箭头函数
qq_46328930的博客
07-09 456
箭头函数
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
本学习笔记将聚焦于与ES5的区别，帮助初学者快速掌握ES6的核心概念。** 1. **变量声明：let和const** - `let`替代了`var`进行块级作用域的变量声明，解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
手把手带你学习 JavaScript 的 ES6 ~ ESn
程序边界
11-15 6771
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
ES6-ES11学习入门
2401_84097883的博客
04-19 637
判断数组中是否包含某元素，语法：arr.includes(元素值)；2、指数操作符幂运算的简化写法，例如：2的10次方：2**10；1、async 和 await简化异步函数的写法；2、对象方法扩展对象方法扩展；
ES6语法的学习与实践
weixin_39037804的博客
10-01 85
　　ES6是JavaScript语言的新一代标准，是ECMAScript的第六个版本，加入了很多新的功能和语法，在很多框架，如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的，下面对...
ES6学习笔记(一)
2401_84150154的博客
04-19 465
模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：字符串中可以出现换行符；可以使用 ${xxx} 形式引用变量ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；ES允许给函数的参数赋初始值；ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
es6学习笔记
weixin_51109349的博客
06-07 1644
声明一个只读变量，一般用于全局变量，只能被赋值一次 const一旦声明变量，就必须立即初始化，不能留到以后赋值 const obj={ a:1 } obj.b=2; console.log(obj);//{a:1 ，b:2} 注： const实质，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。 对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。 作用域 作用域 ES5：全局作用域、局部（函数）作用域 ES6：全局作用域、局部（函数）作
ES6学习笔记（九）——class（类）
weixin_56370772的博客
08-18 789
传统面向对象的编程序语言都是【类】的概念，对象都是由类创建出来，然而早期 JavaScript 中是没有类的，面向对象大多都是基于构造函数和原型实现的，但是 ECMAScript 6 规范开始增加了【类】相关的语法，使得 JavaScript 中的面向对象实现方式更加标准。class（类）是 ECMAScript 6 中新增的关键字，专门用于创建类的，类可被用于实现逻辑的封装。
ES6之Promise学习与实践
weixin_30314631的博客
12-23 110
1.前言 　　在平时的业务开发中，前端通常需要请求后台获取数据，或者NodeJs读取文件等等一系列的异步操作，我们通常需要利用异步操作的结果或者对异步操作的结果进行处理。通常我们的解决方案是：在异步操作成功或者失败的回调函数里面写方法，在异步操作比较简单的时候这样写代码还是比较好理解的，当业务逐渐趋于复杂，这就形成了回调地狱，代码嵌套层数太多并且难以理解。不过，办法总是有的，可以使用ES6的新特...
ES6新特性学习笔记
zt的博客
07-12 622
不存在变量提升 不影响作用域链 2.const关键字 const关键字总结： 4.模板字符串 模板字符串总结： 6.箭头函数 箭头函数总结： 8.rest参数 rest参数总结： 10.Symbol数据类型 ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。 对象添加Symbol类型的属性 11.迭代器 ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费原生具备 iterator 接口的数据(可用 f...
ES6实践练习代码
08-12
**ES6实践练习代码** ...在实践中学习是掌握新技术的最佳途径，每个文件都可能是一个独立的示例或练习，涉及特定的ES6特性。通过分析和理解这些代码，你可以深化对ES6的理解，并将其应用到实际项目中。
ES6学习教程之对象字面量详解
08-29
而在ES6中，如果属性名与变量名相同，我们可以直接写变量名，省略冒号和值。例如： ```javascript function createPeople(name, age) { return { name, // 在ES6中，这等同于 name: name age // 这等同于 age: ...
前端javaScript es6语法学习 demo
12-25
与Map类似，Set提供了增删查改的方法，如`add`, `delete`, `clear`等。Set在处理去重、并集、交集等场景下十分有用。 6. **箭头函数**：箭头函数提供了一种更简洁的函数定义方式，如`(params) => expression`。它...
前端学习之ES6+
qq_56101688的博客
11-08 529
let、const 与 var 的区别
【ES6】
椰子的职场成长记录
10-31 664
箭头函数提供了一种更简洁的语法来定义函数，并且不会创建自己的 this 上下文，而是从周围的作用域继承 this 值。如 .find(), .findIndex(), .includes() 等，这些方法简化了对数组元素的搜索和操作。Promise 代表了未来可能完成也可能失败的操作，提供了更好的错误处理机制和链式调用的能力。Map 是一种键值对的集合，类似于其他语言中的字典或哈希表。剩余参数则相反，它可以将不定数量的参数收集为一个数组。Set 是一种存储唯一值的集合，不允许重复的数据。
ES6标准-Promise对象
最新发布
zheshiyangyang的博客
11-08 530
随后，我们调用promise.thn()回调函数，这是一个。构造函数接受一个函数作为参数，该函数的两个参数分别是。可以接收两个回调函数作为参数，第一个回调函数是。是异步编程的一种解决方案，比传统解决方案(这时，前一个回调函数，有可能返回的还是一个。函数，那么它们的参数会被传递给回调函数。，可以指定一组按照次序调用的回调函数。”的消息，用来演示异步操作的滞后性。，并不一定要提供，两个函数都接收。对象的状态发生变化，才会被调用。状态的回调函数，第二个参数是。状态后，再抛出错误，也不会被。
ES6代理和反射新特性，详细讲解
Esther_liew的博客
11-08 696
ES6代理和反射新特性，详细讲解
一篇文章学会ES6 Promise
qq_41765777的博客
11-08 483
回调函数 (Callbacks)PromisesJavaScript 通过回调函数、Promises 和提供了不同的异步处理机制，这些机制都依赖于事件循环来协调异步操作的执行。这些工具和技术让你能够编写更为流畅的异步代码，从而有效地处理复杂的应用逻辑。当然！在 TypeScript 中，Promise的使用可以涉及多个方面，包括基础用法、类型系统、异步操作的错误处理以及高级用法等。下面我会详细讲解这些内容。TypeScript 中的Promise提供了一种强大的方式来处理异步操作。
JavaScript学习资源与实践示例
学习并掌握ES6的新特性，能让你的JavaScript编程更上一层楼。 除此之外，异步编程是JavaScript中的重要概念，尤其是Promise和async/await的使用，它们解决了回调地狱的问题，使异步代码更加清晰。同时，了解模块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值