Class关键字
Class的基本使用
-
通过class定义类
class Person{} -
在类中通过constructor() 定义构造方法
class Person{ constructor(name,age){ console.log('构造函数会被自动调用'); this.name = name this.age = age } } -
通过new来创建类的实列
let person = new Person('jack',18) -
类的一般方法 [ 在类中直接定义的方法可以用于继承 ]
-
等同于在原型对象中直接添加方法
Person2.prototype.say = function(){}say(){ console.log(this.name,this.age); }
-
5.static关键字定义静态方法或者属性
- static静态关键字声明的方法或属性只提供给类的对象使用，实例不能使用
static demo(){
console.log('我是静态方法')
}
类的继承
-
通过extends实现类的继承
-
继承了父类的所有属性和方法
-
等同于
ChildPerson.prototype = new Person()class ChildPerson extends Person{}
-
-
通过super()调用父类的构造方法
-
子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象
class ChildPerson extends Person{ constructor(name,age,sex){ super() this.sex = sex } } let Cp = new ChildPerson('tom',23,'1') Cp.say() -
如果需要使用父类中的的构造函数的属性，需要对super进行传参
super(name,age)
-
-
重写继承父类中的一般方法
-
默认继承的方法在隐式原型中，运行时会一层一层往下找
-
当父类的方法不能满足子类实例对象的需求时进行重写 [ 当子类中有和父类中重名方法时，使用子类中的方法，不再继续往下 ]
say(){ console.log(this.name,this.age,this.sex) }
-
其他新增扩展
字符串的新增方法
- includes(str) 判断是否包含指定的字符串
- startsWith(str) 判断是否以指定的字符开头
- endsWith(str) 判断是否以指定的字符结尾
- repeat(number) 将字符串重复指定次数
数值的扩展
- Number.isFinite() 判断是否为一个有限大的数
- Number.isNaN() 判断是否是NaN
- Number.isInteger() 判断一个数值是否为整数
- Number.parseInt() 转换字符串为数值
- Math.trunc(number.float) 去除小数部分
数组的扩展
-
Array.from() 将伪数组对象或者可遍历对象转换成纯粹的数组
-
此处获取到一组button按钮的对象是一个伪数组
let btns = document.getElementsByTagName('button') Array.from(btns).forEach((item,index)=>{ console.log(item) })
-
-
Array.of() 用于将一组值，转换为数组
Array.of(1,'str',true) -
find() 找出第一个满足条件的元素，返回该成员 ,没有则返回undefined
-
这是实例对象中的方法，完整写法 Array.prototype.find()
find(function(value,index,arr){return 要找的元素})
-
基本使用
let arr = [1,2,4,2,4,6]
let res = arr.find(function(item,index){
return item > 3
}
-
-
findIndex() 找出第一个满足条件的元素，返回该元素在数组中的下标 ,没有则返回-1
findIndex(function(value,index,arr){return 要找的元素})
对象的扩展
-
Object.is(value1,value2) 比较两个值是否相等
-
Object.assign(target,sourcel) 用于对象的合并,将源数组的属性赋值到目标属性上
let obj1 = {name:'jack',age:18} let obj2 = {} Object.assign(obj2,obj1) console.log(obj2) -
直接操作__porto__ 属性
set和map数据结构
set的使用
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); // add()是set对象添加元素的方法
for (let i of s) {
console.log(i);
}
利用这个特性可以简单的完成一些数组中相同值的排除
向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。另外，两个对象总是不相等的。
Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56
// 类似于
const set = new Set();
document
.querySelectorAll('div')
.forEach(div => set.add(div));
set.size // 56
Set 实例的属性和方法
Set 结构的实例有以下属性。
- Set.prototype.constructor：构造函数，默认就是Set函数。
- Set.prototype.size：返回Set实例的成员总数。
Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。
- Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
- Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
- Set.prototype.clear()：清除所有成员，没有返回值。
s.add(1).add(2).add(2);
// 注意2被加入了两次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
遍历操作
Set 结构的实例有四个遍历方法，可以用于遍历成员。
- Set.prototype.keys()：返回键名的遍历器
- Set.prototype.values()：返回键值的遍历器
- Set.prototype.entries()：返回键值对的遍历器
- Set.prototype.forEach()：使用回调函数遍历每个成员
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
WeakSet
WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set
第二个区别是WeakSeet中的对象都弱引用
Map
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
下面代码使用 Map 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
const map = new Map([
['name', '张三'],
['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
实例的属性和操作方法
Map 结构的实例有以下属性和操作方法。
-
size属性返回 Map 结构的成员总数。
-
Map.prototype.set(key, value)
set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。const m = new Map(); m.set('edition', 6) // 键是字符串 m.set(262, 'standard') // 键是数值 m.set(undefined, 'nah') // 键是 undefined -
Map.prototype.get(key)
get方法读取key对应的键值，如果找不到key，返回undefined。 -
Map.prototype.has(key)
has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。 -
Map.prototype.delete(key)
delete方法删除某个键，返回true。如果删除失败，返回false。 -
Map.prototype.clear()
clear方法清除所有成员，没有返回值。
遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。
- Map.prototype.keys()：返回键名的遍历器。
- Map.prototype.values()：返回键值的遍历器。
- Map.prototype.entries()：返回所有成员的遍历器。
- Map.prototype.forEach()：遍历 Map 的所有成员。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
4272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
