JavavScript--ES5和ES6(下)

一、Map

基于set和array之上构建的一个集合

1、Map的声明

使用 new 关键字和 Map 构造函数
let  m = new Map();
通过二维数组声明
var arr = [[1,2],[3,4]]
var map = new Map(arr) //通过二维数组构建的

2、Map的方法和属性

  • set()
  • get()
  • has()
  • delete()
  • clear()
  • size
    初始化之后,可以使用 set()方法再添加键/值对。另外,可以使用 get()和 has()进行查询,可以通过 size 属性获取映射中的键/值对的数量,还可以使用 delete()和clear()删除值。
const m = new Map(); 

alert(m.has("firstName")); // false 
alert(m.get("firstName")); // undefined 
alert(m.size); // 0 

m.set("firstName", "Matt") 
 .set("lastName", "Frisbie"); 
alert(m.has("firstName")); // true 
alert(m.get("firstName")); // Matt 
alert(m.size); // 2 

m.delete("firstName"); // 只删除这一个键/值对

alert(m.has("firstName")); // false 
alert(m.has("lastName")); // true 
alert(m.size); // 1 

m.clear(); // 清除这个映射实例中的所有键/值对

alert(m.has("firstName")); // false 
alert(m.has("lastName")); // false 
alert(m.size); // 0

Map 实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作。
可以
通过 entries()方法(或者 Symbol.iterator 属性,它引用 entries())取得这个迭代器。
keys()和 values()分别返回以插入顺序生成键和值的迭代器

const m = new Map([
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 
for (let key of m.keys()) { 
 alert(key); 
} 
// key1 
// key2 
// key3 
for (let key of m.values()) { 
 alert(key); 
} 
// value1 
// value2 
// value3

weakMap基于weakSet上面构建map 也就是他的key是对象 只能是对象

二、解构

var obj = {username:'jack',password:'123'}
// obj.username
// obj.password
//解构来取 (通过key来解构对应的obj) {key} = {key:123}
var {password,username} = obj
console.log(username);
console.log(password);
//快速提取对象里面数据
var {age} = {age:18}
console.log(age);
//解构取数组里面的内容 按照位置来取对应的值
var [o,p] = ['a','b']
console.log(o);
// 快速读取值
var {sex} = {username:'jack',password:"123",age:'18',sex:"女"}
console.log(sex);

三、扩展运算符

...打开数组拿出里面的内容

//扩展运算符
var arr = [1,3,5]
var arr1 = [2,4,6]
console.log(...arr); //解除数组的包装 把他暴露出来 1 3 5
//如果你的方法里面需要,隔开他会默认给你加上一个,
console.log( 'abc'.concat(1,2,3,4,5));
console.log( 'abc'.concat(...arr,...arr1)); //默认加上,

四、类

他是用于对象构建的 (类只是一个构建对象的容器 )调用这个class要使用new关键词。

//类名首字母必须大写
class Person{
constructor(){ //构造器
//this必须在构造器里面使用
this.age = 18 //类的属性
this.sayHello = function(){ //类的方法
console.log('hello')
}
}
}
//构建对象
var person = new Person()
console.log(person.age); //18
person.sayHello() //hello
//类名首字母必须大写 class不能被重复定义
class Person1{
//constrctor调用 new的过程 每一次new 里面的内容都会重新声明
constructor(age=18,name='jack'){ //构造器
//this必须在构造器里面使用 this是指向实例化的对象
this.age = age //类的属性
this.name = name
this.sayHello = function(){ //类的方法
console.log('hello')
}
}
run(){//在函数里面可以访问对应的this
console.log(this.name+'跑');
}
}
//使用new 调用的对应构造器的时候 就是在实例化的过程 而产生的对象被称为实例化对象
var person = new Person1(18,'jack')
console.log(person); // age:18 name:jack sayHello:fn
var person1 = new Person1()
console.log(person1);
person1.run()
console.log( person1.sayHello == person.sayHello);//false
console.log( person1.run == person.run);//true

注意事项

  • class 修饰的类 类名首字母必须大写
  • class 不允许重复声明
  • class 里面this只能存在于constructor(构造器)里面
  • class 里面this指向当前实例化对象
  • 在实例化的过程 new的过程的 调用的constructor函数 跟其他函数无关(所以当前在constructor都会重新声明一次)

extends关键词

extends 用于继承 他会拥有父类所有的非私有的属性及方法

class Person{
constructor(){
this.age = 18
}
run(){
console.log('跑');
}
}
//extends 关键词声明以后 在对应的constructor里面想要使用this 必须先写super()
class Son extends Person{
constructor(){
super()//指向父类Person的构造器constructor
this.name = 'jack'
}
}
var son = new Son()
console.log(son);//获取不到run的

注意事项

  • 在子类构造里面如果想要使用this 必须先要使用super()
  • super指向父类的构造器
  • 子类无法获取构造器之外的函数
posted @ 2022-10-28 19:46  蒜泥捣莓  阅读(25)  评论(0编辑  收藏  举报