ES6

let const var

1. var 关键字

  • 声明的全局变量挂载在window对象下

    var a = 1;
console.log(window.a)

  • 变量提升

    console.log(a);
var a = 1;

  • 声明的变量可以重复声明和修改

    var a = 1;
var a = '111';
console.log(a);

2. let 和 const 关键字

  • let和const声明的全局变量不挂载在window对象下
  • let 和 const 定义的变量不会出现变量提升现象，let/const 也存在变量声明提升，只是没有初始化分配内存。 一个变量有三个操作，声明(提到作用域顶部)，初始化(赋默认值)，赋值(继续赋值)，其实就是创建提升，因为没有初始化分配内存，所以使用该变量就会报错，这是暂时性死区
  • let 和 const 是JS中的块级作用域
  • let 和 const 不允许重复声明(会抛出错误)
  • const 声明一个只读的常量。一旦声明，常量的值就不能改变(如果声明是一个对象，那么不能改变的是对象的引用地址)

解构符号

1. 解构符号的作用

解构赋值是对赋值运算符的扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

2. 使用方式

  • 基本使用

    let [a, b, c] = [1, 2, 3];
// let a = 1,b = 2,c=3

  • 嵌套使用

     // 数组
 let [a, [[b], c]] = [1, [[2], 3]];

console.log(a);
console.log(b);
console.log(c);

// 对象
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
console.log(x);
console.log(y);

  • 忽略

    // 数组
let [a, , b] = [1, 2, 3];
console.log(a);
console.log(b);

// 对象
let obj = { p: ['hello', { y: 'world' }] };
let { p: [x, { }] } = obj;
console.log(x);

  • 不完全解构

     // 数组
 let [a = 1, b] = [];
 console.log(a);
 console.log(b);

// 对象
let obj = { p: [{ y: 'world' }] };
let { p: [{ y }, x] } = obj;
console.log(x);
console.log(y);

  • 剩余运算符

    // 数组
// let [a, ...b] = [1, 2, 3];
// console.log(a);
// console.log(b);

// 对象
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
console.log(a);
console.log(b);
console.log(rest);

  • 字符串

    let [a, b, c, d, e] = 'hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

  • 解构默认值

    // 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
let [a = 2] = [undefined]; 
console.log(a);
// 对象
let {a = 10, b = 5} = {a: 3};
// console.log(a);
// console.log(b);

  • 交换变量的值.

     let a = 1;
 let b = 2;
 [a,b] = [b,a];
 console.log(a);
 console.log(b);

3. 解构赋值的应用

// 1. 浅克隆与合并
let name = { name: "aaa" }
let age = { age: 'bbb' }
let person = { ...name, ...age }
console.log(person) // { name: "aaa", age: 'bbb' }

let a = [1,2,3];
let b = [4,5];
let c = [...a,...b];
console.log(c);

// 2. 提取JSON数据
let JsonData = { id: 10, status: "OK", data: [111, 222] } 
let { id, status, data: numbers } = JsonData; 
console.log(id, status, numbers); //10 "OK" [111, 222]

// 3. 函数参数的定义
// 参数有序
function fun1([a, b, c]) { console.log(a, b, c) } 
fun1([1, 2, 3]); 

// 参数无序
function fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3, x: 2, y: 1 });

// 参数有默认值
function fun3 ([a=1,b]) {
console.log(a,b);
}
fun3([,3])

箭头函数

1. 箭头函数没有this,this是从外部获取的

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

2. 箭头函数不能对箭头函数进行 new 操作

不具有 this 自然也就意味着另一个限制：箭头函数不能用作构造器（constructor）。不能用 new 调用它们。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

3. 箭头函数没有arguments

箭头函数没有自己的 arguments 对象，但是箭头函数可以访问外围函数的 arguments 对象：

function constant() {
    return () => arguments[0]
}

var result = constant(1);
console.log(result()); // 1

4. 箭头函数没有原型和super

连原型都没有，自然也不能通过 super 来访问原型的属性，所以箭头函数也是没有 super 的，不过跟 this、arguments、new.target 一样，这些值由外围最近一层非箭头函数决定。

var Foo = () => {};
console.log(Foo.prototype); // undefined

map与weakmap

1. map

1.1 map特点

  • Map的键和值可以是任何数据类型

    //1. map的键名可以是任意数据
var map = new Map();
var o = {num:1};
map.set(o,'111');
console.log(map);

  • 键值对按照插入顺序排列

     // map有顺序
 var map = new Map([[2,'111'],[1,'222']]);
 console.log(map);

// obj自动排序
var obj = {'2':'111','1':'222'}
console.log(obj);

  • map数据可迭代，object数据不可迭代

    var map = new Map([[2,'111'],[1,'222']]);
console.log(map);
for(var value of map){
	console.log(value)
}

1.2 map的常用属性

操作方法 内容描述
map.set(key,value) 添加键值对到映射中
map.get(key) 获取映射中某一个键的对应值
map.delete(key) 将某一键值对移除映射
map.clear() 清空映射中所有键值对
map.entries() 返回一个以二元数组（键值对）作为元素的数组
map.has(key) 检查映射中是否包含某一键值对
map.keys() 返回一个当前映射中所有键作为元素的可迭代对象
map.values() 返回一个当前映射中所有值作为元素的可迭代对象
map.size 映射中键值对的数量 
let map = new Map();
let o = {n: 1};
// 给map添加o属性，值是’A‘
map.set(o, "A"); 
// 给map添加'2'属性，值是9
map.set("2", 9);
// 判断是否存在’2‘属性
console.log(map.has("2")); 
// 获取o属性值
console.log(map.get(o)); 
console.log(...map);
// 查看map
console.log(map);
// 删除’2‘属性
map.delete("2"); 
// 清空所有属性
map.clear(); 
//create a map from iterable object
let map_1 = new Map([[1, 2], [4, 5]]);
console.log(map_1.size); //number of keys

1.3 遍历map数据

  • keys()：返回键名的遍历器
  • values()：返回键值的遍历器
  • entries()：返回键值对的遍历器
  • forEach()：使用回调函数遍历每个成员
const map = new Map([
  ['a', 1],
  ['b', 2],
])

for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
  console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
  console.log(item)
}
// ["a", 1]
// ["b", 2]

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 1
// "b" 2

// for...of...遍历map等同于使用map.entries()

for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 1
// "b" 2

2. WeakMap

2.1 WeakMap特点

WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。

  • 只接受对象作为键名（null 除外），不接受其他类型的值作为键名

      // 1. 只能使用对象作为键名
  var weakmap = new WeakMap();
  // weakmap.set('a',111);
  var o = {num:1};
  weakmap.set(o,111);
  console.log(weakmap);

  • 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的

     // 2. 键名是弱引用，如果键名销毁，该属性就销毁 (IE打开)
 var weakmap = new WeakMap();
 var o = {num:1};
 weakmap.set(o,111);
 o = null;
 console.log(weakmap);

  • 不可枚举，枚举影响其列表将会受垃圾回收机制的影响，方法有 get、set、has、delete

posted @ 2022-07-16 14:31  千本嘤嘤嘤  阅读(25)  评论(0)    收藏  举报