ES6 常用语法

目录

1. 声明变量: let 和 const(无变量提升,块级作用域,不可重复声明)

2. 箭头函数

3. 模板字符串`,${}

4. 解构赋值

5. 默认参数

6. 展开运算符

7. 类和继承

8. Promise 对象


1. 声明变量: let 和 const(无变量提升,块级作用域,不可重复声明)

let 声明的变量可以被修改;const 声明的变量是常量,不可被修改。

let x = 10;
const PI = 3.14;

2. 箭头函数

更简洁,绑定了词法作用域的 this 值。不会创建自己的 this,而是继承了上下文中的 this , this 始终指向定义时所在的作用域。

// 传统函数定义
function add(a, b) {
    return a + b;
}

// 箭头函数定义
const add = (a, b) => a + b;

// 词法作用域绑定
function Person() {
    this.age = 0;
    setInterval(() => {
        this.age++; // this 指向 Person 对象
    }, 1000);
}

// 隐式返回,可省略 return 关键字
const add = (a, b) => a + b;

// 适用于回调函数
const arr = [1, 2, 3];
const doubled = arr.map(num => num * 2);

3. 模板字符串`,${}

使用反引号 \` ${} 来插入变量或表达式,使字符串拼接更简洁。

const name = 'Alice';
console.log(`Hello, ${name}!`);

4. 解构赋值

允许按照一定模式从数组或对象中提取值,然后赋值给变量

const [x, y] = [1, 2];
const {name, age} = {name: 'Alice', age: 30};

5. 默认参数

函数参数可以指定默认值,当调用函数时没有传入对应参数时,使用默认值。

function greet(name = 'World') {
    console.log(`Hello, ${name}!`);
}

6. 展开运算符

展开运算符(`...`)可以将数组或对象展开为独立的元素,或者将多个参数合并为数组。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};

7. 类和继承

ES6 引入了类(class)和继承的语法糖,更易于面向对象编程。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Spot');
dog.speak(); // Spot barks.

8. Promise 对象

Promise 是一种用于异步编程的对象,用于表示一个异步操作的最终完成或失败及其结果值。

Promise 对象的特点:

  1. 状态pending(进行中)、fulfilled(已成功)和 rejected(已失败)。状态一旦改变,就不会再变,从 pending 到 fulfilled 或者从 pending 到 rejected。

  2. 状态转换只能由 pending 转换为 fulfilled 或者 rejected,并且一旦状态确定就不可再改变。

  3. 结果值:状态变为 fulfilled 时,会传递一个结果值;状态变为 rejected 时,会传递一个拒绝原因(错误信息)。

const promise = new Promise((resolve, reject) => {
    // 执行异步操作
    setTimeout(() => {
        // 异步操作成功,调用 resolve 并传递结果值
        resolve('Success!');
        // 异步操作失败,调用 reject 并传递拒绝原因
        // reject('Error!');
    }, 1000);
});

promise.then(
    // 成功时执行的回调函数
    result => {
        console.log(result); // 'Success!'
    },
    // 失败时执行的回调函数
    error => {
        console.error(error); // 'Error!'
    }
);

相关推荐

  1. ES6 语法

    2024-04-20 11:02:10       14 阅读
  2. 003-ES6语法

    2024-04-20 11:02:10       24 阅读
  3. ES6基本语法方法

    2024-04-20 11:02:10       21 阅读
  4. ES6 数组方法

    2024-04-20 11:02:10       20 阅读
  5. ES6+对象方法

    2024-04-20 11:02:10       18 阅读
  6. ES6 知识点英文单词总结

    2024-04-20 11:02:10       18 阅读
  7. ES标准

    2024-04-20 11:02:10       18 阅读
  8. ES6基础语法

    2024-04-20 11:02:10       40 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-20 11:02:10       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-20 11:02:10       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-20 11:02:10       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-20 11:02:10       18 阅读

热门阅读

  1. iOS 控制每个vc横竖屏

    2024-04-20 11:02:10       16 阅读
  2. Rust 语言使用 SQLite 数据库

    2024-04-20 11:02:10       13 阅读
  3. PgSQL的登录相关(Ubuntu22.04)

    2024-04-20 11:02:10       15 阅读
  4. es6 常用的object归纳总结和部分数组纠结总结

    2024-04-20 11:02:10       13 阅读
  5. Ribbon负载均衡

    2024-04-20 11:02:10       12 阅读
  6. 【Node.js】child_process 子进程

    2024-04-20 11:02:10       13 阅读
  7. tensorflow list_files需要注意的点

    2024-04-20 11:02:10       11 阅读
  8. Create2024百度AI开发者大会记录

    2024-04-20 11:02:10       14 阅读
  9. Remote access minikube cluster远程访问minikube k8s集群

    2024-04-20 11:02:10       13 阅读
  10. 学习基于pytorch的VGG图像分类 day4

    2024-04-20 11:02:10       12 阅读
  11. 独孤思维:副业赚钱的课程被盗了

    2024-04-20 11:02:10       14 阅读
  12. 1.8、数位DP(算法提高课)

    2024-04-20 11:02:10       12 阅读