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指向父类的构造器
- 子类无法获取构造器之外的函数