js操作

tianren124 發(fā)布于2019-08-21 15:49 / 3244人閱讀

摘要：日期格式轉(zhuǎn)換將國際標準格式轉(zhuǎn)換為年月日將日期格式將日期格式轉(zhuǎn)為練習將國際標準時間轉(zhuǎn)換成年月日創(chuàng)建一個日期分別獲取年月日的值將年月日的值拼接成指定格式模版字符串什么時候會用到思考模版字符串使用場景字符串里解析變量函數(shù)表達式多行特殊符號轉(zhuǎn)義

20170521 日期格式轉(zhuǎn)換

將國際標準格式轉(zhuǎn)換為"年/月/日"

將日期格式將日期格式"20/05/2017" 轉(zhuǎn)為 "2017-05-20"

練習1

formatDate1 (data) {
  // 將國際標準時間轉(zhuǎn)換成"年／月／日"
  // 1.創(chuàng)建一個日期
  // 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}`
}

思考：模版字符串使用場景？

字符串里解析變量、函數(shù)、表達式

多行 trim()、特殊符號轉(zhuǎn)義

嵌套使用

參考：

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

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

練習2

formatDate2 (data) {
  // 將日期格式 "20/05/2017" 轉(zhuǎn)為 "2017-05-20"
  let str = data
  let newStr = ""
  // 1.split() 分割字符串 
  // 2.數(shù)組倒序reverse() 
  // 3.將數(shù)組轉(zhuǎn)換成字符串
  newStr = str.split("/").reverse().join("-")
  return newStr
}

數(shù)組常用的屬性和方法

其實看完文檔基本上就忘記了，所以要對內(nèi)容進行分類方便以后要用的時候方便查找 https://developer.mozilla.org...

總結(jié)每種操作對應(yīng)的方法、對原數(shù)組有無更改

更改了原數(shù)組的內(nèi)容和長度：push() unshift()/pop() shift() splice()

不改變原數(shù)組長內(nèi)容和長度：concat() slice() forEach() map()

1. 添加元素

push() 從數(shù)組末尾添加元素，返回新數(shù)組的length
[].push.call() 添加對象

unshift() 將元素添加到數(shù)組開頭，并返回新數(shù)組長度

splice()

2. 刪除元素

pop() 從數(shù)組中刪除最后一個元素，并返回該元素的值，數(shù)組為空返回undefined

shift() 從數(shù)組中刪除第一個元素，并返回該元素的值，數(shù)組為空返回undefined

splice()

3. 合并數(shù)組

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

concat() 合并多個數(shù)組，返回一個新數(shù)組，不會更改原數(shù)組

4. 過濾數(shù)組

fliter() 以某種規(guī)則篩選出通過的元素，返回一個新數(shù)組

5. 查找元素

find()

findIndex()

6. 遍歷數(shù)組

forEach() 對數(shù)組每個元素執(zhí)行一次函數(shù) 沒有辦法終止或跳出循環(huán)

map() 給數(shù)組中的每個元素執(zhí)行某種操作，不改變原數(shù)組，返回值為一個新數(shù)組

forEach()和map() 的區(qū)別

7. 排序

sort()

reverse()

8. 類型轉(zhuǎn)換

join() 數(shù)組－字符串

9. 淺拷貝數(shù)組

slice() [start, end) 選擇一部分拷貝到一個新數(shù)組對象，原數(shù)組不改變，start從0開始計算
將類數(shù)組對象和集合轉(zhuǎn)換成一個數(shù)組，只需將方法綁定到這個對象上即可Array.prototype.slice.call(Object)

10. 迭代器

keys()

entries()

11. 計算

reduce()

經(jīng)常忘記的具體用法 push 添加元素

描述：push() 從數(shù)組末尾添加元素，返回新數(shù)組的length

合并數(shù)組Array.prototype.push.apply(arr1, arr2) 將arr2添加到arr1

像數(shù)組一樣給對象添加對象

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 淺拷貝數(shù)組

[start, end) 選擇一部分拷貝到一個新數(shù)組對象，原數(shù)組不改變，start從0開始計算

將類數(shù)組對象和集合轉(zhuǎn)換成一個數(shù)組，只需將方法綁定到這個對象上即可Array.prototype.slice.call(Object)

filter 過濾數(shù)組

// 以某種規(guī)則篩選出通過的元素，返回一個新數(shù)組
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