JavaScript高级(4)

刚刚去复习了一下前三节,现在继续

ES6之前通过构造函数+原型实现面向对象编程

ES6之后通过类实现面向对象编程

类的本质

我们可以打印看看Star的类型

我们也可以简单的认为类就是构造函数的另外一种写法,通过验证,构造函数能实现的在类里也能实现

• 类本质就是函数
• 类的所有方法都定义在类的prototype属性上
• 类创建的实例,里面也有__proto__指向类的prototype原型对象
• 所以ES6的类它的绝大部分功能,ES5都可以做到,新的class写法这是让对象原型的写法更加清晰,更像面向对象编程的语法而已
• 所以ES6的类就是语法糖
• 语法糖就是一种便捷写法,简单理解,有两种方法可以实现同样的功能,但是一种写法更加清晰,方便,那么这个方法就是语法糖

ES5新增方法

ES5中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:

• 数组方法
• 字符串方法
• 对象方法

数组方法

遍历(迭代)方法: foreach( ) map( ) filter( ) some( ) every( )

foreach()

filter()

some()

注意:

1.filter也是查找满足条件的元素,返回的是一个数组,而且是把所有满足条件的元素返回回来

2.some也是查找满足条件的元素是否存在, 返回的是一个布尔值, 如果查找到第一个满足条件的元素就终止循环

接下来做一个案例:

写好结构以后,因为数据不是死的,而是我们动态生成的,所以这些手机的数据都是用JS写的,以对象的形式存储.放在数组中

下一步就是筛选我们要的数据:

我们筛选一个0~2000元的打印出来看看:

接下来是将我们筛选出来的数据重新渲染到页面上:

看看查询价格的效果:

当然bug还是很多的,暂且不管,接下来就是最后的环节,根据名称搜索商品.

如果查询数组中唯一的元素,用some方法更适合,因为它找到这个元素,就不再进行循环,效率更高.

关于这里的return true是这样的,some也不知道到底找没找到元素,要根据if中的true和false判断,所以要return true,some才能知道找没找到.

看看效果:

字符串方法 trim( )

这个方法在验证表单时很有用

对象方法

• obj: 必需 目标对象
• prop: 必需 需定义或修改的属性的名字
• descriptor: 必需 目标属性所拥有的特性

第三个属性比较麻烦: descriptor以对象形式{ }书写

• value: 设置属性的值,默认为undefined
• writable: 值是否可以重写 true || false, 默认为false(重写的意思就是允不允许修改属性值)
• enumerable: 目标属性是否可以被枚举. true | false, 默认为false
• configurable: 目标属性是否可以被删除或是否可以再次修改特性true | false,默认是false

现在写个最简单的试试看,给我们的obj添加一个color属性

修改原有的属性:

enumerable

可以看到address属性没有被遍历,因为它的enumerable默认就是false,另外两个我们用这个方法添加的属性也是默认false,但是我手动改成了true,所以可以遍历

Object.keys(obj)

configurable

如果为false, 则不允许删除这个属性,不允许再修改第三个参数里面的特性 默认为false

我们尝试修改特性:

可以发现是不允许修改的.

今天就先到这里啦