首页 > 编程语言 >JavavScript--ES5和ES6(下)

JavavScript--ES5和ES6(下)

时间:2022-10-28 19:56:44浏览次数:47  
标签:ES5 console log JavavScript age alert -- var new

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

标签:ES5,console,log,JavavScript,age,alert,--,var,new
From: https://www.cnblogs.com/zhouwying/p/16837242.html

相关文章

  • JavaScript--运动
    一、概述运动主要是动画的操作,主要是操作某个document元素的属性变化(位置变化)二、运动主要的原理及步骤原理:使用开启定时器setInterval()/setTimeout()和清除定时器c......
  • 浅谈PHP设计模式的观察者模式
    简介观察者模式是行为型模式的一种,定义了对象间一对多的关系。当对象的状态发生变化时候,依赖于它的对象会得到通知。适用场景类似触发钩子事件,可做消息通知、框架底层......
  • JavaScript--循环语句
    一、循环语句的概念1、循环语句,声明一组要反复执行的命令,直到满足某些条件为止。2、循环包括测试条件以及一个块(通常就是{..})。循环块的每次执行被称为一个迭代。二......
  • JavaScript--原型及模块入门
    面向对象回顾核心概念:万物皆对象(顶层对象Object)抽取行为作为方法抽取名词作为属性俩种构建对象的方式构造函数构建es6的形式classclassPerson{ constructor(){/......
  • JavaScript--条件控制语句
    一、if语句if语句有三种形式:简单的if语句,if-else语句,if-elseif语句。1、语法if语句是使用最频繁的语句之一,语法如下://if语句if(condition){statement1}......
  • JavaScript--详解&&和--
    一、&&和||的简单介绍1、&&(逻辑与)逻辑与操作符由两个和号(&&)表示。2、||(逻辑或)逻辑或操作符由两个管道符(||)表示。二、深入理解&&和||1、用法&&和||运算符的返回值......
  • TreeMap
    (1)TreeMap跟TreeSet底层原理一样,都是红黑树结构的。(2)由键决定特性:不重复、无索引、可排序。(3)可排序:对键进行排序。(4)注意:默认按照键的从小到大进行排序,也可以自己规定键的......
  • 软链接和硬链接
    软链接:1.软链接存放的是源文件的路径,指向源文件2.源文件删除,软链接文件依然存在,但是找不到路径3.源文件和软链接文件iNode号不同4.创建软链接  ln -s  源文件......
  • 程序员的修炼之道——从小工到专家4
    第四章注重实效的偏执 按合约设计没有合约,编译器所能做的只是确保子类符合特定的方法型构(signature)。但如果我们适当设定基类合约,我们现在就能够确保将来任何子类都无......
  • PYTHON JSON EXCEL
    #+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#pipinstallpandas#pipinstallopenpyxl#importjsonimporttimeimportpandasimpor......