JavaScript:内置:包装 / 数组 / Math / Date

更多
2019年04月18日 14点09分 作者:叶飞 修改

概念:类和对象

之前我们学习过用花括号({})可以生成生成一个匿名 对象。

实际上,按“面向对象”的观点,对象 实例

  • 类(型):抽象概念,比如:人
  • 对象:具体实例,比如,张三

张三 这个 对象 就是 实例(实际的例子)。

所以要有对象必须先有类。(参考:C#)

匿名类对象,就是一个没有类名的对象。

JavaScript号称是一个“面向对象”的语言,还是提供了很多内置类型的。

演示:native code


包装类

之前我们学过的所有基本(primitive)类型,都有对应的类的:String / Number / Boolean / Array(数组),注意他们的首字母大写。

  1. 在类型前面使用关键字/运算符 new
  2. 类型后面添加一对圆括号,
  3. 圆括号中传入一个相应的值
var n = new Number(123);

我们就能得到一个相应的对象。得到的对象一样可以按基本类型变量使用:

new Number(123) -23    //100

但是,他们属于


不同类型

new Number(123)  == 123    //true
new Number(123)  === 123    //false,因为
typeof new Number(123)     //Object

复习:typeof 123 结果是什么?


如果没有new

@猜一猜@:这样的代码结果是什么?

Number(888) + 98    //注意Number()前面没有new

这是因为在JavaScript中没有真正的“类”的定义,类就是函数,函数也可以是类。(后文详述)

所以你可能会觉得有无new都无所谓。但是:

Boolean('false')          //true
new Boolean('false')   //false

找谁说理去?!


以上这些包装函数,知道就行,不建议在开发中使用。


数组

复习:length可以赋值,改变数组的长度,得到 undefined (增加的)或 截短 的数组。

还有以下一些常用方法:

  • indexOf():获取下标,-1表示没有找到
  • slice():同string的substring()
  • push() 和 pop():和“栈”(stack)类似,但栈的出入口在数组末尾
  • shift() 和 unshift():从数组头部 删除/添加 元素
  • sort() 和 reverse():试一试sort()的排序标准?
    [1,18,7,92,2].sort()// [ 1, 18, 2, 7, 92 ] what?
    可以加一个回调函数:
    [1,18,7,92,2].sort(function(a, b){
       return a>b ? 1 : -1;   //返回值只能是1或-1,不能是bool值
    })
  • concat():连接多个数组


Math类

Math类和其他类不一样,不能new出一个Math对象来:

我们只能使用Math的静态方法。


补充:静态 vs 实例

  • 静态:直接由类调用的,比如:
    Math.abs(-23)
  • 实例:需要由对象调用,比如:
    new Array().length
Math类提供的静态方法,常用的有
  • abs():取绝对值
  • 取整:
    • ceil():向上取整
    • floor():向下取整
    • round():四舍五入取整
  • random():会生成一个小于1的随机小数
    @想一想@:如果得到一个1000以内的随机正整数?
    Math.ceil(Math.random()*1000)


其他运算相关方法

JavaScript奇怪的地方在于,如果我们要四舍五入到n位小数位,需要用到的是包装类Number的实例方法toFixed(n):

7.654.toFixed(2)   //7.65
7.658.toFixed(2)   //7.66

更奇怪的是,他们返的是字符串!

另外,这两个方法也很常见:parseInt() / parseFloat(),他们能够将其他类型数据转换成整数(int)或x小数(float)类型。

还可以选择进制,比如将100101按二进制转换成10进制整数(返回始终为10进制)

parseInt('100101', 2)



常见面试题:parseInt(str)和+str的区别

Javascript总是让人一言难尽啊!o(╥﹏╥)o


总体上感觉,

  • parse()会把参数转换成字符串格式,然后按字符进行解析
  • +会与后面的值进行数值运算,拿到结果
但JavaScript不同类型间的“字符串转换”和“数值转换/运算”也玄学一样的存在,所以还是挨个记吧:


  • 字符串以数值开头的,parse()都能够解析,+不一定
    parseInt('32abc')    //32
    +'32abc'    //NaN
    //然鹅
    parseInt('')    //NaN
    +''    //0
    
  • bool和数组类型:+能转,parse()反而不行
    parseInt(true)    //NaN
    +true    //1
    parseInt([])    //NaN
    +[]    //0
    
  • 匿名对象/undefined,都无法解析
    parseInt({})
    +{}
    parseInt(undefined)
    +undefined
    
  • null又出幺蛾子
    +null    //0
    parseInt(null)    //NaN

在我我们学习内置函数的时候,有时候是直接调用函数,如:parseInt();但更多的时候是从一个“变量”调用,如:'yuanzhan'.substring(2,4),为什么呢?



Date

日期对象,表示时间。


new()一个

系统当前日期:new Date()

还可以按:年,月,日,小时,分钟,秒……指定的日期:new Date(2019,4,20,.....) ,但是等等,为什么是5月?因为Javascript的月份(注意:仅仅只有月份)是从0开始计数的。

但是,new Date()还可以传字符串。试一试:new Date('2019/4/20'),这时候你发现又是4月了,ʅ(‾◡◝)ʃ


get和set

拿到一个Date对象,我们就可以调用它的getXXX()方法,获得它的年与日等

  • getYear():奇怪是事又发生了
    new Date().getYear()  //121
    结果不是2021,而是121(@想一想@:为什么?)
    要想获得2021,需要使用:
    new Date().getFullYear()
  • getMonth():理所当然的,返回从0开始的计数:
    new Date('2021/4/24').getMonth()  //3
  • getDate():注意不是getDay()
  • getDay():返回星期几
  • getHours():小时
  • ……

set可用于修改日期

如果指定的日期值 n :就在本年/月/周……内,直接设定在本年/月/周……第 n 月/周/日;

但是,

增/减时间:否则

  • 会自动计算

设置一个月的某一天为上个月的最后一天:

d.setDate(0);

字符串解析:Date.parse('str') 返回时间戳:一个自增的整数,它表示从1970年1月1日零时整的GMT时区开始的那一刻,到现在的毫秒数。验证方法:

new Date(0)


这里又有一个记忆陷阱:getYear()是从1900年起算,但时间戳是从1970年算,(*/ω\*)







更多内置函数,使用:MDN(JavaScript文档)


作业

  1. 使用JavaScript内置字符串函数,处理 “‘源栈’:飞哥小班教学,线下免费收看” :将“飞哥”改成“大神”,“线下”改成“线上”。
  2. 将数组['why','gIT','vs2019','community','VERSION']规范化,让所有元素:
    • 首字母大写开头,其他字母小写
    • 截去超过6个字符的部分,如'community'将变成'Commun'
  3. 使用正则表达式判断某个字符串:
    1. 是否是合格的Email格式
    2. 是否是小数(正负小数都可以)
    3. 将所有以zyf-开头的属性去掉zyf- (尽可能多的制造测试用例,比如:<a lzyf-old='',或者:<span>zyf---+---fyz</span> ……)
  4. 利用新学到的Array函数,重新完成之前的数组相关作业
  5. 在上述数组头部加上小鱼老师,末尾加上大飞哥
  6. 创建一个函数getRandomArray(length, max),能返回一个长度不大于length,每个元素值不大于max的随机整数数组。
  7. 生成一个函数toChinese(),可将传入的日期参数(如:new Date())转换成中文日期格式(如:2019年10月4日 16点54分)
  8. 生成一个函数addDays(number),可在当前日期的基础上增加number天
-------------


  1. 按自己的情况,生成一个JSON字符串,包括真实姓名、QQ昵称、年龄、性别、兴趣爱好、自我介绍……,上传到QQ群:一起帮·有意向(729600626)
  2. 根据其他同学的JSON获得其个人资料,生成一个表格显示。





String() vs toString():null / undefined / 123

123.toString()
123..toString()
(123).toString()
null.toString()
undefined.toString()

……

JavaScript 对象 面向对象
赞: 8 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

Web前端


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript入门

Javascript的基本语法:为能使用JQuery和Bootstrap.js的使用打下基础

ES进阶

借助于ES6,讲解JavaScript中一些更复杂的语法特性,如作用域、闭包、面向对象、原型链、this变化、module等

JQuery和Bootstrap

JQuery类库(含Ajax),以及Bootstrap的JavaScript组件部分

Vue.js

全部
关键字



帮助

反馈