资讯专栏INFORMATION COLUMN

js操作

tianren124 / 3233人阅读

摘要:日期格式转换将国际标准格式转换为年月日将日期格式将日期格式转为练习将国际标准时间转换成年月日创建一个日期分别获取年月日的值将年月日的值拼接成指定格式模版字符串什么时候会用到思考模版字符串使用场景字符串里解析变量函数表达式多行特殊符号转义

20170521 日期格式转换

将国际标准格式转换为"年/月/日"

将日期格式将日期格式"20/05/2017" 转为 "2017-05-20"

练习1
formatDate1 (data) {
  // 将国际标准时间转换成"年/月/日"
  // 1.创建一个日期
  // 2.分别获取年月日的值
  // 3.将年月日的值拼接成指定格式
  let dateStr = new Date(data)

  let year = dateStr.getFullYear()
  let month = dateStr.getMonth() + 1
  let day = dateStr.getDate()

  // es6 模版字符串 什么时候会用到?
  console.log(`${year}/${month}/${day}`)
  return `${year}/${month}/${day}`
}

思考:模版字符串使用场景?

字符串里解析变量、函数、表达式

多行 trim()、特殊符号转义

嵌套使用

参考:

https://developer.mozilla.org...

http://es6.ruanyifeng.com/#do...模板字符串

练习2
formatDate2 (data) {
  // 将日期格式 "20/05/2017" 转为 "2017-05-20"
  let str = data
  let newStr = ""
  // 1.split() 分割字符串 
  // 2.数组倒序reverse() 
  // 3.将数组转换成字符串
  newStr = str.split("/").reverse().join("-")
  return newStr
}
数组常用的属性和方法

其实看完文档基本上就忘记了,所以要对内容进行分类方便以后要用的时候方便查找 https://developer.mozilla.org...

总结每种操作对应的方法、对原数组有无更改

更改了原数组的内容和长度:push() unshift()/pop() shift() splice()

不改变原数组长内容和长度:concat() slice() forEach() map()

1. 添加元素

push() 从数组末尾添加元素,返回新数组的length
[].push.call() 添加对象

unshift() 将元素添加到数组开头,并返回新数组长度

splice()

2. 删除元素

pop() 从数组中删除最后一个元素,并返回该元素的值,数组为空返回undefined

shift() 从数组中删除第一个元素,并返回该元素的值, 数组为空返回undefined

splice()

3. 合并数组

push() Array.prototype.push.apply(arr1, arr2) 将arr2添加到arr1

concat() 合并多个数组,返回一个新数组,不会更改原数组

4. 过滤数组

fliter() 以某种规则筛选出通过的元素,返回一个新数组

5. 查找元素

find()

findIndex()

6. 遍历数组

forEach() 对数组每个元素执行一次函数 没有办法终止或跳出循环

map() 给数组中的每个元素执行某种操作,不改变原数组,返回值为一个新数组

forEach()和map() 的区别

7. 排序

sort()

reverse()

8. 类型转换

join() 数组-字符串

9. 浅拷贝数组

slice() [start, end) 选择一部分拷贝到一个新数组对象,原数组不改变,start从0开始计算
将类数组对象和集合转换成一个数组,只需将方法绑定到这个对象上即可Array.prototype.slice.call(Object)

10. 迭代器

keys()

entries()

11. 计算

reduce()

经常忘记的具体用法 push 添加元素

描述:push() 从数组末尾添加元素,返回新数组的length

合并数组Array.prototype.push.apply(arr1, arr2) 将arr2添加到arr1

像数组一样给对象添加对象

var obj = {
  length: 0,
  addElem: function addElem (elem) {
    [].push.call(this, elem)
  }
}

obj.addElem({
  a: 1
})
obj.addElem({
  b: 2
})
console.log(obj.length, obj) //2 Object
slice 浅拷贝数组

[start, end) 选择一部分拷贝到一个新数组对象,原数组不改变,start从0开始计算

将类数组对象和集合转换成一个数组,只需将方法绑定到这个对象上即可Array.prototype.slice.call(Object)

filter 过滤数组
// 以某种规则筛选出通过的元素,返回一个新数组
let arr = [1, 2, 3, 4]
function fn (value) {
  return value % 2 === 0
}
console.log(fn(4)) // true
console.log(fn(3)) // false
console.log(arr.filter(fn)) // 2, 4

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88258.html

相关文章

  • [译] Node.js 架构概览

    摘要:文件系统请求和相关请求都会放进这个线程池处理其他的请求,如网络平台特性相关的请求会分发给相应的系统处理单元参见设计概览。 译者按:在 Medium 上看到这篇文章,行文脉络清晰,阐述简明利落,果断点下翻译按钮。第一小节背景铺陈略啰嗦,可以略过。刚开始我给这部分留了个 blah blah blah 直接翻后面的,翻完之后回头看,考虑完整性才把第一节给补上。接下来的内容干货满满,相信对 N...

    antyiwei 评论0 收藏0
  • React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    摘要:多余的操作其实是代码里面的噪音,不利于我们理解和维护。下一节中我们将介绍小书和容器类组件。 React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketan...

    Gemini 评论0 收藏0
  • jQuery Deferred对象

    摘要:给普通的操作指定回调函数对象的最大优点,就是它把这一套回调函数接口,从操作扩展到了所有操作。方法用于指定对象状态为已失败时的回调函数。执行完毕执行成功执行失败接收一个或多个对象作为参数,为其指定回调函数。 什么是deferred对象 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型...

    baoxl 评论0 收藏0
  • JS每日一题:如何理解es6中的Proxy?

    20190124问: 如何理解es6中的Proxy? 试题解析:对proxy的理解,可能会延伸到vue的双向绑定 Proxy(代理) 定义 可以理解为为目标对象架设一层拦截,外界对该对象的访问,都必须通过这层拦截 简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

    tinysun1234 评论0 收藏0
  • JS每日一题:如何理解es6中的Proxy?

    20190124问: 如何理解es6中的Proxy? 试题解析:对proxy的理解,可能会延伸到vue的双向绑定 Proxy(代理) 定义 可以理解为为目标对象架设一层拦截,外界对该对象的访问,都必须通过这层拦截 简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

    PumpkinDylan 评论0 收藏0
  • Node.js学习之路07——fs文件系统之对文件或目录执行的其他操作

    摘要:如果打开一个文件的符号链接文件进行编辑,操作系统将自动打开符号链接中所指向的原文件进行编辑,如果打开一个目录的符号链接文件进行文件的操作编辑或删除操作,则操作系统将西东打开符号链接中所指向的原目录并执行相应的操作。 8. 对文件或目录执行的其他操作 8.1 修改文件名字或移动文件目录fs.rename fs.rename(oldPath, newPath, callback(err...

    lordharrd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<