进阶6 Math & Array & Date

Math任务

1、写一个函数,返回从min到max之间的 随机整数,包括min不包括max

function random(min, max){
  return min + Math.floor(Math.random()*(max-min))
}

2、写一个函数,返回从min都max之间的 随机整数,包括min包括max

function random(min, max){
  return min + Math.floor(Math.random()*(max+1 -min))
}

3、写一个函数,生成一个长度为 n 的随机字符串,字符串字符的取值范围包括0到9,a到 z,A到Z。

function getRandStr(len){
  var dict = '0123456789zxcvbnmasdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP'
  var str = ''
  for(var i = 0; i < len; i++){
    str += dict[Math.floor(Math.random()*62)]
  }
  return str
}
var str = getRandStr(10)

4、写一个函数,生成一个随机 IP 地址,一个合法的 IP 地址为 0.0.0.0~255.255.255.255

function getRandIP(){
  var arr = []
  for(var i = 0; i < 4; i++){
    arr.push(Math.floor(Math.random()*256))
  }
  return arr.join('.')
}

var ip = getRandIP()
console.log(ip)

5、写一个函数,生成一个随机颜色字符串,合法的颜色为#000000~ #ffffff

function getRandColor(){
  var dict = '0123456789abcdef'
  var str = ''
  for(var i = 0; i < 6; i++){
    str += dict[Math.floor(Math.random()*16)]
  }
  str = '#' + str
  return str
}
var color = getRandColor()
console.log(color)   // #a34fdb

数组任务

1.1 数组方法里push、pop、shift、unshift、join、splice分别是什么作用?

var arr = [1, 2, 3, 4]
arr.push('wangpeng') // 在数组的最后面添加一个元素, 返回数组的长度 5
console.log(arr)  //  [1, 2, 3, 4, 'wangpeng']
arr.pop() // 把数组的最后一个元素取出来,返回这个元素 4
console.log(arr)  // [1, 2, 3]
arr.unshitf('wangpeng') //  在数组的最前面添加一个元素, 返回数组的长度 5
console.log(arr)  // ['wangpeng', 1, 2, 3, 4]
arr.shift() // 把数组的第一个元素取出来,返回这个元素 1
console.log(arr)  // [2, 3, 4]
var str1 = arr.join()
// 把数组中的所有元素放入一个字符串, 元素是通过指定的分隔符进行分隔, 参数为空则和数组一样,用逗号分隔
console.log(str1)  // 1,2,3,4
console.log(arr)  // [1, 2, 3, 4]
var str2 = arr.join("") // 表示用空字符串连接
console.log(str2)  // 1234
var arr1 = arr.splice(1,2) // 从arr中,下标为1的元素开始,拿出2个元素作为数组返回,原数组发生改变 [2, 3]
console.log(arr) // [1, 4]

1.2 用 splice函数分别实现push、pop、shift、unshift方法

JavaScript提供了一个splice方法用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数

  1. 开始索引 (可以是负数,表示从后向前索引, - 1 可以理解为 arr.length - 1)
  2. 删除元素的位移
  3. 插入的新元素,当然也可以写多个

splice方法返回一个由删除元素组成的新数组,没有删除则返回空数组

arr.splice(arr.length-1, 0, 5) // push 在 arr 中最后面,添加元素 5
//  当然这里的length-1 中  - 1 不是必须的,只要大于等于数组下标,添加的元素都会在最末尾
//  并且可以用 -1 来替换 arr.length 
arr.splice(arr.length-1, 1) // pop 从arr 中删除最后一个元素,并返回这个由删除元素组成的新数组,原数组改变
//这里也可以是 - 1,表示arr 最后一位, 但是和上面的添加元素不同,这里第一个参数超出 arr 最大下标之后,返回空数组,也就是没有删除
arr.splice(0, 0, 0) // unshift 在 arr 中最前面,添加元素 0
arr.splice(0, 1) // shift 从 arr 中删除第一个元素

2. 写一个函数,操作数组,数组中的每一项变为原来的平方,在原数组上操作

方法一: 虽然原数组变了,但是函数内部,不是在原数组操作,而是把平方结果进行赋值

function squareArr(arr){
  for(var i = 0; i < arr.length; i++){
    arr[i] = arr[i] * arr[i]
  }
}
var arr = [2, 4, 6]
squareArr(arr)
console.log(arr) // [4, 16, 36]

方法二: 使用splice方法, 在原数组上进行替换(实际过程是: 删除+新增)

function squareArr(arr){
  for(var i = 0; i < arr.length; i++){
    arr.splice(i,1,Math.pow(arr[i],2))
  }
}
var arr = [2, 4, 6]
squareArr(arr)
console.log(arr) // [4, 16, 36]

3. 写一个函数,操作数组,返回一个新数组,新数组中只包含正数

首先是直接在原数组上操作,最后原数组发生改变

function filterPositive(arr){
  for(var i = 0; i < arr.length; i++){
    if( typeof arr[i] !== 'number' || arr[i] <= 0 ){
      arr.splice(i,1)
      i--
    }
  }
}
var arr = [3, -1,  2,  '饥人谷', true]
filterPositive(arr)
console.log(arr) //[3,  2]

正确方法是向新的数组内 push 元素,然后return 新的数组,这样返回的才是新数组,而原数组不变

function filterPositive(arr){
  var newArr = []
  for(var i = 0; i < arr.length; i++){
    if(typeof arr[i] === 'number' && arr[i] > 0 ){
      newArr.push(arr[i])
    }
  }
  return newArr
}
var arr = [3, -1,  2,  '饥人谷', true]
var newArr = filterPositive(arr)
console.log(newArr) //[3, 2]
console.log(arr) //[3, -1,  2,  '饥人谷', true]

Date 任务

1、 写一个函数getChIntv,获取从当前时间到指定日期的间隔时间

function getChIntv(dateStr){
  var targetDate = new Date(dateStr) // 目标时间的时间对象
  var curDate = new Date() // 当前时间的时间对象
  var offset = Math.abs(targetDate - curDate) // 得到时间毫秒数的时间差 
  // 毫秒数如何变为 天时分秒呢?
  var totalSeconds = Math.floor(offset/1000) // 得到取整后的总的秒数
  var seconds = totalSeconds%60 // 得到无法转换为分钟数后,剩下的秒数
  var totalMinutes = Math.floor(totalSeconds/60)  // 总的整数分钟数
  var minutes = totalMinutes%60 // 得到无法转换为小时数后,剩下的分钟数
  var totalHours =Math.floor(totalMinutes/60) // 总的整数小时数
  var hours = totalHours%24 // 得到转换为天数后,剩下的小时数
  var totalDays = Math.floor(totalHours/24) // 得到总的整数天数
  // 取整后,总会由更小的单位来表示取整后表达不了的余数, 
  // 或者理解为当前的余数有表示单位了,更大的单位尽管放心取整,而不会损失精度
  return totalDays + '天' + hours + '小时' + minutes + '分' + seconds + '秒'
}

2、把hh-mm-dd格式数字日期改成中文日期

function getChsDate(dateStr){
  var targetDate = new Date(dateStr)
  var dict = '零一二三四五六七八九十'

  var strDigitYear = targetDate.getFullYear().toString() // 2015
  var strDigitMonth = (targetDate.getMonth() + 1).toString()  // 12
  var strDigitDay = targetDate.getDate().toString()  // 8
  var strYear = ''
  var strMonth = ''
  var strDay = ''

  for(var i = 0; i < 4; i++){
    strYear += dict[strDigitYear[i]] /*汉字*/ 
  }

  if(strDigitMonth.length === 2){
    if (strDigitMonth != 10){
      strMonth = '十' + dict[strDigitMonth[1]]
    }else{
      strMonth = '10'
    }
  } else{
    strMonth = dict[strDigitMonth]
  }

  if(strDigitDay < 11){
    strDay = dict[strDigitDay] // 0 ~ 10
  }else if(strDigitDay >10 && strDigitDay < 20){
    strDay = '十' + dict[strDigitDay[1]]
  }else if(strDigitDay == 20 || strDigitDay == 30){
    strDay = dict[strDigitDay[0]] + '十'
  }else if(strDigitDay >20 && strDigitDay < 30){
    strDay = '二十' + dict[strDigitDay[1]]
  }else{
    strDay = '三十一'
  }

  return strYear + '年' + strMonth + '月' + strDay + '日'
}

var str = getChsDate('2015-12-08');
console.log(str);  // 二零一五年十二月八日 0~10, 11~19, 20, 21~29, 30, 31

3、写一个函数,参数为时间对象毫秒数的字符串格式,返回值为字符串。假设参数为时间对象毫秒数t,根据t的时间分别返回如下字符串:

刚刚( t 距当前时间不到1分钟时间间隔)

3分钟前 (t距当前时间大于等于1分钟,小于1小时)
8小时前 (t 距离当前时间大于等于1小时,小于24小时)
3天前 (t 距离当前时间大于等于24小时,小于30天)
2个月前 (t 距离当前时间大于等于30天小于12个月)
8年前 (t 距离当前时间大于等于12个月)

function friendlyDate(time){
  var curDate = new Date()
  // 当前时间的毫秒级,这里的curDate是使用Date构造函数创建的实例,不需要 Date.parse(),在与毫秒参与计算的时候,也会自动转化成毫秒级,而下面的time,是外部手动传入的,如果是时间字符串,必须要解析成毫秒级,才能参与毫秒计算
  var offset = curDate - time
  // 这里也可以把 time 改成  Date.parse(time) ,从而函数参数变为传入日期字符串,这时候传入'1994-05-01', 能计算出,我现在距离出生已经 23年了
  var minutes = Math.floor(offset/1000/60) 
  var hours = Math.floor(minutes/60)
  var days = Math.floor(hours/24)
  var months = Math.floor(days/30)
  var years = Math.floor(months/12)  
  // 1年11个月29天23小时59分 ,这也是1年前, 而不是2年前,  逻辑判断上和1年0个月0天0小时0分没区别,所以之前各项取整的误差累计不影响结果
  if(minutes < 1){
    return '刚刚'
  }else if( minutes >= 1 && minutes < 60 ){
    return minutes + '分钟前'
  }else if( hours >= 1 && hours < 24 ){
    return hours + '小时前'
  }else if( days >= 1 && days < 30 ){
    return days + '天前'
  }else if( months >=1 && months < 12 ){
    return months + '个月前'
  }
  return years + '年前'
}
var str = friendlyDate(767750400000)
console.log(str) // 23年前

Date 中的坑

第一个坑

Date() 返回一个无用的字符串
"Fri Sep 01 2017 12:17:57 GMT+0800 (中国标准时间)"
new Date() 才是返回Date 对象
Fri Sep 01 2017 12:18:11 GMT+0800 (中国标准时间)

第二个坑

d.getDate() 返回的是几号,而不是整个日期
d.getDay() 返回的是星期几 0 ~ 6, 星期天是 0,而不是7

第三个坑

month 从 0 开始

第四个坑

d.toLocaleString() 不可靠,当地时间不是JS能决定的,是依赖于本地操
作系统时间设置
new Date() 里面参数是不可靠的,是默认当地时间
最好用时间戳或者UTC
一个时间距离1970-1-1 0点0分0秒的时间就是时间戳

Date.UTC(2000,0,1,0,0,0)
946684800000
new Date(Date.UTC(2000,0,1,0,0,0))
Sat Jan 01 2000 08:00:00 GMT+0800 (中国标准时间)

写一个函数,判断某一年是不是闰年

能用API 为什么不直接调用时间函数,2月如果有29天,那就是闰年,否则28天就是平年

// 年数能被400整除是闰年, 2月有29天也是闰年

function xxx(year){
  var d = new Date(year,1,29) // Date 如果发现当天超出了,就顺延到下一个月
  console.log(d.getDate())
  return d.getDate() === 29 // 直接 return  是否等于 29 的真假性
}
xxx(2016) // 29 true

同理, 想知道一个月有多少天,
把时间调到那个月的下个月第一天,然后往回拨一秒,获取那时的日期就行了:

function 这个月多少天(year, month){
  var d = new Date(year, month , 1, 0, 0, 0 )  
  //  想知道某年2月份天数,如果直接输入2,那么js会认为是3月份第一天
  var 前一天 = new Date(d - 1000)   // 因此,此处减去1s,就退回到2月份最后一天
  return 前一天.getDate()  // 接着获取当天的是几号即可
}

作者:方应杭
链接:https://www.zhihu.com/question/53364395/answer/134650535
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

结束语

实际项目中,关于Date,更多的是用 moment.js, 是一个时间方面非常好用的库,有很多更靠谱的API

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,196评论 0 4
  • Math 1、写一个函数,返回从min到max之间的 随机整数,包括min不包括max 2、写一个函数,返回从mi...
    Feiyu_有猫病阅读 259评论 0 1
  • 1、写一个函数,返回从min到max之间的 随机整数,包括min不包括max 2、写一个函数,返回从min都max...
    饥人谷_一叶之秋阅读 312评论 0 0
  • 二十岁学习盲文、适应盲道、习惯听书不算晚,老易眼疾,多做准备。 #汪汪,汪#
    仇志飞阅读 216评论 0 0
  • 光阴画了一个圈 街边的小摊 圆盘飞快的旋转 只是那个第一个给你买棉花糖的人 已不在人间
    伍丁零阅读 266评论 0 0