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

 

r：菜鸟ES6教程

基本数据类型

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

ES6 新增 Symbol

 

基本数据类型 Symbol 

唯一性

let sy = Symbol("kk");
console.log(sy); //Symbol(kk)
typeof(sy);      //"symbol"

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

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

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 作为对象属性名时，不能用 . 运算符，要用方括号

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

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

2、定义常量

const COLOR_RED = Symbol("red");
const COLOR_BLUE = Symbol("blue");

let color = COLOR_RED;
console.log(color == COLOR_RED);

 

let、constant 关键字

1、只在代码块内有效

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

 

解构赋值

数组模型的解构（Array）

//基本
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）

//基本
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、箭头函数只有一行语句，且需要返回结果时，可省略 { }

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

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

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

// 报错
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 对象