刚刚去复习了一下前三节,现在继续
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
我们尝试修改特性:
可以发现是不允许修改的.
今天就先到这里啦
