前端 JS 学习笔记（知识点记录）

 

r：菜鸟ES6教程

基本数据类型

Number 、 String 、 Boolean 、 Objec t、 null 和 undefined 

ES6 新增 Symbol

 

基本数据类型 Symbol 

唯一性

?

1 2 3 4 5 6 7

let sy = Symbol("kk"); console.log(sy); //Symbol(kk) typeof(sy);      //"symbol"   //相同参数的 Symbol() 返回的值不相等 let sy1 = Symbol("kk"); sy == sy1;       //false

1、用来定义对象的唯一属性名

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

let sy = Symbol("key1");   //写法1 let syObject = {}; syObject[sy] = "kk"; console.log(syObject);  //{Symbol(key1): "kk"}   //写法2 let syObject = {   [sy]: "kk" }; console.log(syObject);  //{Symbol(key1): "kk"}   //写法3 let syObject = {}; Object.defineProperty(syObject, sy, {value: "kk"}); console.log(syObject);  //{Symbol(key1): "kk"}

Symbol 作为对象属性名时，不能用 . 运算符，要用方括号

?

1 2 3 4 5

let syObject = {}; syObject[sy] = "kk";    syObject[sy];  // "kk" syObject.sy;   // undefined

读取 Symbol 值的属性名，通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 获取。

2、定义常量

?

1 2 3 4 5

const COLOR_RED = Symbol("red"); const COLOR_BLUE = Symbol("blue");   let color = COLOR_RED; console.log(color == COLOR_RED);

 

let、constant 关键字

1、只在代码块内有效

2、会造成暂时性死区（在变量定义之前使用变量，会报错）

 

解构赋值

数组模型的解构（Array）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//基本 let [a, b, c] = [1, 2, 3]; //a=1; b=2; c=3 //嵌套 let [a, [[b], c]] = [1, [[2], 3]]; //a=1; b=2; c=3 //可忽略 let [a, , b] = [1, 2, 3]; //a=1; b=3 //不完全解构 let [a = 1, b] = []; // a=1, b=undefined //剩余运算符 let [a, ...b] = [1, 2, 3]; //a=1; b=[2,3] //字符串 let [a, b, c, d, e] = 'hello'; //a='h'; b='e' ...   //解构默认值 let [a=2] = [undefined]; //a=2 let [a=2] = []; //a=2

对象模型解构（Object）

?

1 2 3 4 5 6

//基本 let { foo, bar } = { foo: 'aaa', bar: 'bbb' };//foo = 'aaa'; bar = 'bbb'   //可嵌套可忽略   //剩余

 

Map 对象与 Set

Maps 和 Objects 的区别

1、一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值

2、Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是

3、Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算

4、Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突

 

箭头函数 

1、箭头函数只有一行语句，且需要返回结果时，可省略 { }

?

1 2 3 4 5 6 7 8 9 10

//带 {} var f = (a, b) => {   let result = a+b;   return result; } f(6, 2);   //省略 {} var f = (a, b) => a+b; f(6, 2);

2、箭头函数返回对象时，要用 ( ) 将对象包裹

?

1 2 3 4 5 6 7

// 报错 var f = (id,name) => {id: id, name: name}; f(6,2);  // SyntaxError: Unexpected token :    // 不报错 var f = (id,name) => ({id: id, name: name}); f(6,2);  // {id: 6, name: 2}

3、箭头函数里面没有 this 对象，this 指向外层 this 对象