ES6基础知识点2
1 新的对象
1.1 set
- 一个不重复的数组
- 用于数组去重
- 转换为数组 Arry.from() […]
var arr=[1,3,4,2,2,4,3];
var arr2=new Set(arr);
console.log(arr2);
arr3=[...arr2];
console.log(arr3);
arr4=Array.from(arr2);
console.log(arr4)
1.1.1 Set的方法
- 初始化 new Set()
- 添加 add()
- 删除 delete()
- 获取长度 size
- 遍历 for of
- 检测是否存在 has()
- 清空 clear()
var s=new Set([1,3,1,3,5,7,9]);
console.log(s);
console.log("size",s.size);
s.add(30);
console.log("add",s);
s.delete(3);
console.log("delete",s);
for (let i of s) {
console.log(i)
}
1.2 类似对象的map
- 获取 get()
- 设置 set()
- 删除 delete()
- 获取长度 size
- 遍历 for of
- 检测是否存在 has()
- 清空 clear()
- 特点：1.键名可以是任意对象，而对象的键名只能是字符串或者symbol；2.map 是有序的 对象：按照默认排序
var obj={"b":100,"a":"jack","2":"best","1":"tom"}
console.log(obj);
var map=new Map([["b",100],["a","jack"],["2","best"],["1","tom"]])
console.log(map)
//获取
console.log(map.get("b"));
//设置
map.set(3,"jack")
console.log(map);
//遍历
for(let [k,v] of map){
console.log(k,v)
}
//删除
map.delete(3);
console.log(map)；
//获取map长度
console.log(map.size);
//获取对象长度
console.log(Object.keys(obj).length)
1.3 Symbol 符号
//初始化 s1=Symbol(“blue”);
//var obj={[s1]:1}
//Symbol.for(“blue”)==Symbol.for(“blue”) true
//Symbol(“blue”)==Symbol(“blue”) false
1.4 for of
- 可以迭代的类型：String Arry Set Map。
var arr = ["jack", "tom", "anbi"];
//默认遍历是value
for (let item of arr) {
console.log(item)
}
//keys 键名的集合
for (let key of arr.keys()) {
console.log(key)
}
//entries 键与值的结合
for (let [key, val] of arr.entries()) {
console.log(key, val)
}
//value 值的集合
for (let val of arr.values()) {
console.log(val)
}
2 类
2.1 创建类的模板
class Dog {
constructor(name) {
this.name = name;
}
bark() {
console.log("旺旺");
}
}
var d1 = new Dog("jack");
var d2 = new Dog("tom");
d1.bark();
d2.bark();
2.2 继承
- 单继承*
class Animal {
constructor(name) {
this.name = name;
}
runing() {
console.log("我正在跑")
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log("旺旺");
}
}
class Cat extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log("喵喵");
}
}
var k1 = new Cat("tom");
var k2 = new Dog("jack");
k1.bark()
k1.runing()
k2.bark()
k2.runing()
2.3 封装
class Cat extends Animal {
constructor(name,age=2) {
super(name);
this.age=age;
}
//set get 当我们去设置或者获取对数据进行额外操作,隐藏原本的数据直接操作
set Age(val){
if (val>=0) {
this.age=val;
} else{
console.log("设置错误");
}
}
get Age(){
return this.age;
}
bark() {
console.log("喵喵");
}
}
2.4 static 静态方法与静态属性
class Cat extends Animal {
constructor(name,age=2) {
super(name);
this.age=age;
Cat.num++;
}
/* 静态属性 */
static num=0;
/* 静态方法 */
static sayLog(){
console.log(`一共有${this.num} 只猫`)
}
//set get 当我们去设置或者获取对数据进行额外操作,隐藏原本的数据直接操作
set Age(val){
if (val>=0) {
this.age=val;
} else{
console.log("设置错误");
}
}
get Age(){
return this.age;
}
bark() {
console.log("喵喵");
}
}
var k1 = new Cat("tom",2);
console.log(Cat.num);
Cat.sayLog()
2.5 类的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
class Person {
/**
* 构造函数 *
* @param {String} name 人的名字
* @param {Number} hurt 伤害
* @param {Number} blood 血量
* @param {Number} money 金币
*
* */
constructor(name, hurt = 20, blood = 100) {
this.name = name;
this.hurt = hurt;
this.blood = blood;
this.money = 100;
}
/**
* @description 攻击狗,得到金币，判断输赢
* @param {Object} dog 被人攻击的对象
*/
attact(dog) {
dog.blood -= this.hurt;
if (dog.blood <= 0) {
console.log('%c你赢了', 'color:#fff;background:green')
this.blood = 100;
return;
}
this.money += Math.round(Math.random() * 30);
console.warn(this.name, "血量:", this.blood, "金币:", this.money)
console.log(dog.name, "血量", dog.blood)
if (Math.random() > .4) {
dog.bite(this)
}
}
/**
* @param {Object} weapon 武器对象
*
*/
getWeapon(weapon) {
if (this.money >= weapon.money) {
this.hurt += weapon.hurt;
this.money -= this.money;
console.log(`%c ${weapon.name} 购买成功`, 'color:#fff;background:green')
} else {
console.warn("余额不足请充值")
}
}
}
class Dog {
/**
* 构造函数 *
* @param {String} name 狗的名字
* @param {Number} hurt 伤害
* @param {Number} blood 血量
* @param {Number} money 金币
*
* */
constructor(name, hurt = 45, blood = 100) {
this.name = name;
this.hurt = hurt;
this.blood = blood;
}
/**
* @param {Object} person
* @description 狗攻击的人,攻击一下减少一次血
*/
bite(person) {
person.blood -= this.hurt;
if (person.blood <= 0) {
console.log("%c你输了", 'color:#fff;background:orangered');
dog.blood = 100;
return;
}
console.warn(person.name, "血量", person.blood, "金币:", person.money)
console.log(this.name, "血量", this.blood)
if (Math.random() > .5) {
person.attact(this)
}
}
}
class Weapon {
/**
* 构造函数 *
* @param {String} name 武器的名字
* @param {Number} hurt 伤害
* @param {Number} money 需要的金币
*
* */
constructor(name, hurt = 20, money = 150) {
this.name = name;
this.hurt = hurt;
this.money = 130;
}
}
var name = window.prompt("请输出你的用户名", "洪七公");
var person = new Person(name);
var dog = new Dog("大黄");
var weapon = new Weapon("打狗棒")
while (true) {
num = window.prompt("1:攻击\n2:购买武器\n3:重新开始\nq:退出", "1");
if (num == "q") {
break;
}
switch (num) {
case "1":
person.attact(dog);
break;
case "2":
person.getWeapon(weapon);
break;
case "3":
person = new Person(name);
dog = new Dog("大黄");
console.clear();
break;
}
}
</script>
</body>
</html>
3 模块
3.1 什么是模块？
- 模块就是对js的逻辑进行拆分，各个模块执行对应的功能，而且需要明确各个模块之间的关系。每个模块有对应的接口对模块进行使用。
3.2 js 模块化的好处
- 可维护性：由于各模块之间相互独立，更好的实现高内聚低耦合，一个优秀的模块会尽量减少外部代码对模块的依赖。
- 重用性：可以实现代码的重用，减轻代码的编程量。
- 命名空间：在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。