前端笔记：ES6

发表于 分类于 本文字数： 2.6k 阅读时长 ≈ 2 分钟
ES6的笔记

# ES 基础知识

# let 和 const

# symbol

  • Symbol 是 ES6 中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。它是 JavaScript 中的第七种数据类型
1
2
3
4
const a = Symbol();
console.log(a);  //Symbol()

const a = new Symbol();//报错，Symbol is not a constructor，因为Symbol是基本数据类型，而不是对象，不能 new 。

# class

# 字符串新特性

# 模板字符串

  • 使用反引号 `` 和 ${} 来引用变量

# 字符串新方法

  • includes () 判断字符串是否包含参数字符串，返回 boolean 值。
  • startsWith () /endsWith ()，判断字符串是否以参数字符串开头或结尾。返回 boolean 值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置
  • repeat () 方法按指定次数返回一个新的字符串。
1
console.log("hello".repeat(2)//"hellohello"
  • padStart ()/padEnd ()，用参数字符串按给定长度从前面或后面补全字符串，返回新字符串。

# 数组新方法

Array.from () 是内置对象 Array 的方法，实例数组不能调用
includes () 参数：数值 -------- 返回值：true/false
map ()、filter () 参数：函数 -------- 返回值：数组
forEach () 参数：函数 -------- 返回值：undefined
find () 参数：函数 -------- 返回值：数值
some ()、every () 参数：函数 -------- 返回值：true/false

# object 新方法

  • Object.is()
  • Object.assign()
  • Object.keys()
  • Object.values()
  • Object.entries()

# 对象扩展符

# 拷贝

1
2
3
4
5
let obj = {name: "xiaoming", age: 18};
let obj1 = {...obj};
console.log(obj1 === obj);//false
obj1.name = "xiaohong";
console.log(obj.name);//xiaoming

# 合并

1
2
3
4
let obj = {name: "xiaoming", age: 18};
let obj1 = {sex: "male"};
let obj2 = {...obj, ...obj1};
console.log(obj2);//{name: "xiaoming", age: 18, sex: "male"}

# 箭头函数

  • 箭头函数实现了一种更加简洁的书写方式。箭头函数内部没有 arguments，也没有 prototype 属性，所以不能用 new 关键字调用箭头函数
  • 箭头函数和普通函数最大的区别在于其内部 this 永远指向其父级对象的 this。(重点)

# 解构赋值

- 解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
字符串、以及 ES6 新增的 Map 和 Set 都可以使用解构表达式

1
2
3
4
5
6
7
let [a, b, c, d, e] = "Hello";// 字符串解构
let { name, age, sex } = { name: "xiaoming", age: 18, sex: "male" };// 对象解构

let [a,b,c] = [1,2,3]; // 数组解构
let [a,..b] = [1,2,3];  //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]
let [foo, [[bar], baz]] = [1, [[2], 3]]; // 嵌套数组解构

# Promise

# async/await 语法糖

# 模块化

# 新增对象

# Set

  • 可以理解为后端的 Set 集合对象 (ArrayList)
  • Set 对象和 Map 对象类似，但它存储不是键值对。类似数组，但它的每个元素都是唯一的。
  • WeakSet
1
2
3
4
let set = new Set([1,2,3]);
set.add(4);
set.delete(1);
set.has(2); // true

# Map

  • Map 对象用于保存键值对，任何值 JavaScript 支持的值都可以作为一个键（key）或者一个值（value）。与对象不同的是：

  • object 的键只能是字符串或 ES6 的 symbol 值，而 Map 可以是任何值。

  • Map 对象有一个 size 属性，存储了键值对的个数，而 object 对象没有类似属性。

  • WeakMap

1
2
3
4
5
6
7
8
9
10
let map = new Map();
map.set("name", "xiaoming");
map.set("age", 18);
map.set("sex", "male");
map.get("name"); // "xiaoming"
map.has("name"); // true
map.delete("name"); // true
map.has("name"); // false
console.log(map.size); // 3
map.clear(); // 清空map

# for…of

  • for…of 循环是 ES6 引入的一种新的循环机制，用于遍历可迭代对象（如数组、字符串等）的元素。在字符串上使用 for…of 可以方便地遍历字符串中的每个字符。
1
2
3
4
et str = "Hello";
for (let char of str) {
    console.log(char);
}

# for…in

(阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版)[https://www.bookstack.cn/read/es6-3rd/sidebar.md]