ECMAScript
Map
ES6提供了Map数据结构。它类似于对象,也是键值对的集合。但是‘键’的范围不限于字符串,各种类型的值(对象)都可以当做键。Map也实现了iterator接口,所以可以使用[扩展运算符]和[for…of…]进行遍历。Map的属性和方法
1.size:返回Map的元素个数
2.set:增加一个新元素,返回当前Map
3.get:返回键名对象的键值
4.has:检测Map中是否包含某个元素,返回boolean值
5.clear:情况集合,返回undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 声明Map
let m = new Map();
// 添加元素
m.set('name', 'zs');
m.set('func', function() {
console.log('Map');
});
let key = 'citys';
m.set(key, ['南宁', '河池', '北海']);
console.log(m);
// 元素个数
console.log(m.size);
// 删除元素
m.delete('name');
// 获取指定的元素
// console.log(m.get('func'));
console.log(m.get('func'));
console.log(m.get(key));
// 清空
// m.clear();
// 遍历
for (const item of m) {
console.log(item);
}
console.log(m);
</script>
</body>
</html>
class类
ES6提供了更接近传统语言的写法,引入了class(类)的概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象变成的语法而已
知识点:
1.class 声明类
2.constructor 定义构造函数初始化
3.extends 集成父类
4.super 调用父级构造方法
5.static 定义静态方法和属性
6.父类方法可以重写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// es5写法
// 创建Person类
/* function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
Person.prototype.say = function() {
console.log('hello');
};
*/
// ES6写法
class Person {
// 当new之后,会自动调用这个构造器函数
constructor(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
say() {
console.log('hello');
};
};
// 实例化对象
let zs = new Person('张三', 22, '男');
console.log(zs);
zs.say();
</script>
</body>
</html>
静态成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// function Person() {};
// 以下这两个属性是属性函数对象的,不是实例化对象的,所以实例化对象不能调用
// 函数对象的成员称为静态成员(是属于类的,不是属于实例对象的)
/* Person.name = '张三';
Person.change = function() {
console.log('hello');
}; */
// let nona = new Person();
// console.log(nona.name); //undefined
// nona.change(); //Uncaught TypeError: nona.change is not a function
/* Person.prototype.name = '李四';
Person.prototype.change = function() {
console.log('hello');
};
let nana = new Person();
console.log(nana.name); //李四
nana.change(); */
class Person {
// 静态属性
// 由static标注的属性,是属于class的,不属于实例对象的
static name = '张三';
static change() {
console.log('我可以改变世界');
}
};
let nana = new Person();
console.log(nana.name); //undefined
console.log(Person.name); //张三
</script>
</body>
</html>
类的继承(ES5构造函数继承)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 人类
function Person(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.say = function() {
console.log('hello');
};
// 中国人
function Cperson(name, age, sex, color) {
// 改变Person类的this指向,Person的name,age指向Cperson的name和age
Person.call(this, name, age);
this.sex = sex;
this.color = color;
};
// 设置子类构造函数的原型
// 这样后,子级的实例对象上就会存在父级的成员
Cperson.prototype = new Person;
// 校正
Cperson.prototype.constructor = Cperson;
// 声明子类的方法
Cperson.prototype.toDos = function() {
console.log('我要干饭');
};
Cperson.prototype.playGame = function() {
console.log('我要玩王者');
};
const p = new Cperson('张三', '22', '男', '粉色');
console.log(p);
</script>
</body>
</html>
ES6的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Person {
// 构造器
constructor(name, age) {
this.name = name;
this.age = age
};
// 父类的成员属性(所有子类都可继承到)
say() {
console.log('hello');
}
};
class Cperson extends Person {
// 构造器
constructor(name, age, sex, color) {
// spuer就相当于父类的构造方法
super(name, age); //相当于Person.call(this,name,age)
this.sex = sex;
this.color = color;
};
// 子类独有的方法
play() {
console.log('玩游戏');
}
};
const p = new Cperson('张三', 22, '男', 'pink');
console.log(p);
p.say();
p.play();
</script>
</body>
</html>
子类对父类方法的重写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Person {
// 构造器
constructor(name, age) {
this.name = name;
this.age = age
};
// 父类的成员属性(所有子类都可继承到)
say() {
console.log('hello');
}
};
class Cperson extends Person {
// 构造器
constructor(name, age, sex, color) {
// spuer就相当于父类的构造方法
super(name, age); //相当于Person.call(this,name,age)
this.sex = sex;
this.color = color;
};
// 子类独有的方法
play() {
console.log('玩游戏');
};
//对父类的方法进行重写(声明一个同名方法)
// 子类调用该方法时,调用的是子类的方法而不是父类的
say() {
// 使用super.say()也可以同时调用父类中的方法
super.say()
console.log('我重写了父类的方法');
}
};
const p = new Cperson('张三', 22, '男', 'pink');
p.say()
</script>
</body>
</html>
set和get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建类
class Person {
// 可以不写构造器,不写的默认形式:
/* constructor(){
super()
}; */
get name() {
console.log('我叫张三');
};
set name(newVal) {
console.log('name属性被修改了' + newVal);
}
};
// 实例化对象
const p = new Person();
// 读取了实例对象的代码
p.name;
p.name = '李四';
// console.log();
</script>
</body>
</html>