二十三、ES10 新特性

(一)对象方法扩展 —— Object.fromEntries()

  • 创建一个对象,方法参数可以是一个二维数组,也可以是一个 Map 对象

1.二维数组

const res1 = Object.fromEntries([
  ["name", "ikuko"],
  ["skill", "前端, PHP"],
]);
console.log(res1);
// {name: 'ikuko', skill: '前端, PHP'}

郁子大约 1 分钟笔记ECMAScript尚硅谷李强
二十四、ES11 新特性

(一)私有属性

  • 变量名前加 #
class Person {
  //  公有属性
  name;

  // 私有属性
  #age;
  #weight;

  // 构造方法
  constructor(name, age, weight) {
    this.name = name;
    this.#age = age;
    this.#weight = weight;
  }

  // 类内部调用
  intro() {
    console.log(girl.name);
    console.log(girl.#age);
    console.log(girl.#weight);
  }
}

//  实例化
const girl = new Person("ikuko", 24, "62kg");
console.log(girl);
// Person {name: 'ikuko', #age: 24, #weight: '62kg'}

// 类外部调用:无法访问私有属性
console.log(girl.name);
// ikuko
console.log(girl.#age);
// Private field '#age' must be declared in an enclosing class

// 类内部调用:可以访问
girl.intro();
// ikuko
// 24
// 62kg

郁子大约 3 分钟笔记ECMAScript尚硅谷李强
八、Rest参数
  • ES6 引入 rest 参数,用于获取函数的实参
  • 用来代替 arguments

(一)ES5 获取实参的方式

  • 返回一个对象
function date() {
  console.log(arguments);
}
date("a", "b", "c");
// Arguments(3) ['a', 'b', 'c', callee: ƒ, Symbol(Symbol.iterator): ƒ]

郁子小于 1 分钟笔记ECMAScript尚硅谷李强
九、扩展运算符
  • 扩展运算符 ... 能将数组转换为逗号分隔的参数序列

(一)... 运算符

  • rest 参数是放在函数声明时 形参 的位置
  • ... 扩展运算符是放在调用函数时 实参 的位置
// 声明一个数组
const comic = ["恶役", "恋爱", "大女主"];
// 使用 ... 转换为 '恶役', '恋爱', '大女主'
// 声明一个函数
function cartoon() {
  console.log(arguments);
}
cartoon(comic);
// Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]

cartoon(...comic);
// 相当于cartoon('恶役', '恋爱', '大女主');
// Arguments(3) ['恶役', '恋爱', '大女主', callee: ƒ, Symbol(Symbol.iterator): ƒ]

郁子大约 1 分钟笔记ECMAScript尚硅谷李强
十、Symbol数据类型

(一)Symbol 简介

  • JS 的第七种数据类型,表示独一无二的值
    • Symbol 值唯一,用于解决命名冲突的问题
    • Symbol 值不能与其他数据进行运算【四则运算、字符串拼接、大小比较等】
    • Symbol 定义的对象属性不能使用 for...in 循环遍历,但是可以使用 Reflect.ownKeys 来获取对象的所有键名
  • JS 所有数据类型:USONB => you are so nubility
    • U: undefined
    • S: stringsymbol
    • O: object
    • N: nullnumber
    • B: boolean

郁子大约 4 分钟笔记ECMAScript尚硅谷李强
十一、Iterator迭代器

(一)Iterator 简介

  • Iterator 是一种接口【即对象的属性】
    • 为各种不同的数据结构提供统一的访问机制
    • 任何数据结构只要部署 iterator 接口就可以完成遍历操作
  • ES6创造了一种新的遍历命令 for...of 循环
    • iterator 主要供 for...of 消费
  • 原生具备 iterator 接口的数据(即可用 for...of 遍历)
    • Array
    • Arguments
    • Set
    • Map
    • String
    • TypeArray
    • NodeList
  • 需要自定义遍历数据的时候,要想到迭代器

郁子大约 2 分钟笔记ECMAScript尚硅谷李强
十二、生成器

(一)生成器简介

  • ES5 异步编程使用纯回调函数
    • node
    • fs
    • ajax
    • mongodb
    • 一层套一层,形成回调地狱
  • 生成器是一个函数,是 ES6 提供的一种异步编程解决方案
    • 语法行为与传统函数完全不同

1.声明生成器函数


郁子大约 3 分钟笔记ECMAScript尚硅谷李强
十三、Promise

(一)基本语法

  • PromiseES6 引入的异步编程的新解决方案
    • 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果
  • Promise 构造函数: Promise (excutor) {}
  • Promise.prototype.then 方法
  • Promise.prototype.catch 方法
// 实例化Promise对象
const p = new Promise(function (resolve, reject) {
  setTimeout(function () {
    // 获得一个数据
    let data = "数据库中的用户数据";

    // // 调用resolve后p对象状态变为“成功”
    // resolve(data);

    // 调用reject后p对象状态变为“失败”
    reject(data);
  }, 1000);
});

// 调用Promise对象的then方法
p.then(
  function (value) {
    // p为成功时执行
    console.log(value);
  },
  function (reason) {
    // p为失败时指向
    console.error(reason);
  },
);

郁子大约 4 分钟笔记ECMAScript尚硅谷李强
十四、Set集合

(一)简介

  • ES6 提供了新的数据结构 Set (集合)
    • 类似于数组,但成员的值都是唯一的
    • 自动去重
  • 实现了 iterator 接口
    • 所以可以使用扩展运算符 ...for...of 遍历

1.属性和方法

属性/方法 说明
size 返回集合的元素个数
add 增加一个新元素,返回当前集合
delete 删除元素,返回 boolean
has 检测集合中是否包含某个元素,返回 boolean

郁子大约 1 分钟笔记ECMAScript尚硅谷李强
十五、Map映射

(一)简介

  • ES6 提供了 Map 数据结构
    • 类似于对象,也是键值对的集合
    • 但是键的范围不局限于字符串,各种类型的值(包括对象)都可以作为键
  • 实现了 iterator 接口
    • 所以可以使用扩展运算符 ...for...of 遍历

1.属性和方法

属性/方法 说明
size 返回 Map 的元素个数
set 增加一个新元素,返回当前 Map
get 返回键名对象的键值
has 检测 Map 中是否包含某个元素,返回 boolean
clear 清空映射,返回 undefined

郁子大约 1 分钟笔记ECMAScript尚硅谷李强
2
3