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才能知道找没找到.

看看效果:

JavaScript高级(4)

字符串方法 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

  我们尝试修改特性:

图片

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

图片

  今天就先到这里啦

阅读原文

简介:目前学习前端,欢迎关注微信公众号:睡不着所以学编程
(0)
打赏 喜欢就点个赞支持下吧 喜欢就点个赞支持下吧

声明:本文来自“睡不着所以学编程”,分享链接:https://www.zyxiao.com/p/297453    侵权投诉

网站客服
网站客服
内容投稿 侵权处理
分享本页
返回顶部