ES6基础使用3

Class关键字

Class的基本使用
  1. 通过class定义类

     class Person{}		
    
  2. 在类中通过constructor() 定义构造方法

     class Person{
     	constructor(name,age){
             console.log('构造函数会被自动调用');
             this.name = name
             this.age = age
     	}
     }
    
  3. 通过new来创建类的实列

     let person = new Person('jack',18)
    
  4. 类的一般方法 [ 在类中直接定义的方法可以用于继承 ]

    • 等同于在原型对象中直接添加方法Person2.prototype.say = function(){}

        say(){
            console.log(this.name,this.age);
        }
      

5.static关键字定义静态方法或者属性
- static静态关键字声明的方法或属性只提供给类的对象使用,实例不能使用

	static demo(){
        console.log('我是静态方法')
    }
类的继承
  1. 通过extends实现类的继承

    • 继承了父类的所有属性和方法

    • 等同于ChildPerson.prototype = new Person()

        class ChildPerson extends Person{}	
      
  2. 通过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)

  3. 重写继承父类中的一般方法

    • 默认继承的方法在隐式原型中,运行时会一层一层往下找

    • 当父类的方法不能满足子类实例对象的需求时进行重写 [ 当子类中有和父类中重名方法时,使用子类中的方法,不再继续往下 ]

        say(){
            console.log(this.name,this.age,this.sex)
        }
      

其他新增扩展

字符串的新增方法
  1. includes(str) 判断是否包含指定的字符串
  2. startsWith(str) 判断是否以指定的字符开头
  3. endsWith(str) 判断是否以指定的字符结尾
  4. repeat(number) 将字符串重复指定次数
数值的扩展
  1. Number.isFinite() 判断是否为一个有限大的数
  2. Number.isNaN() 判断是否是NaN
  3. Number.isInteger() 判断一个数值是否为整数
  4. Number.parseInt() 转换字符串为数值
  5. Math.trunc(number.float) 去除小数部分
数组的扩展
  1. Array.from() 将伪数组对象或者可遍历对象转换成纯粹的数组

    • 此处获取到一组button按钮的对象是一个伪数组

        let btns = document.getElementsByTagName('button')
        Array.from(btns).forEach((item,index)=>{
            console.log(item)
        })
      
  2. Array.of() 用于将一组值,转换为数组

     Array.of(1,'str',true)	
    
  3. 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
      }

  4. findIndex() 找出第一个满足条件的元素,返回该元素在数组中的下标 ,没有则返回-1

     findIndex(function(value,index,arr){return 要找的元素})	
    
对象的扩展
  1. Object.is(value1,value2) 比较两个值是否相等

  2. Object.assign(target,sourcel) 用于对象的合并,将源数组的属性赋值到目标属性上

     let obj1 = {name:'jack',age:18}
     let obj2 = {}
     Object.assign(obj2,obj1)
     console.log(obj2)		
    
  3. 直接操作__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 结构的实例有以下属性和操作方法。

  1. size属性返回 Map 结构的成员总数。

  2. 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
    
  3. Map.prototype.get(key)
    get方法读取key对应的键值,如果找不到key,返回undefined。

  4. Map.prototype.has(key)
    has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

  5. Map.prototype.delete(key)
    delete方法删除某个键,返回true。如果删除失败,返回false。

  6. 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"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值