Vue和前端篇 持續(xù)更新開發(fā)中遇到的問題ing...

擴(kuò)展運(yùn)算符...

// 通過擴(kuò)展運(yùn)算符復(fù)制一個(gè)對(duì)象，修改obj之后不會(huì)對(duì)model造成影響
let obj = { ...this.model } 

.map()

let obj = [
   { id: 11, name: '張三' },
   { id: 12, name: '李四' },
   { id: 13, name: '王五' },
   { id: 14, name: '趙六' }
]
// 通過.map()函數(shù)可以獲取id數(shù)組 [11, 12, 13, 14]
let ids = obj.map(item => item.id)

.filter()

// 我們像之前一樣建一個(gè)數(shù)組對(duì)象，但是此次多了一個(gè)‘張三’
let obj = [
   { id: 11, name: '張三' },
   { id: 12, name: '李四' },
   { id: 13, name: '王五' },
   { id: 14, name: '趙六' },
   { id: 15, name: '張三' }
]
// 通過.filter()函數(shù)可以過濾出name為張三的所有對(duì)象 [ { id: 11, name: '張三' },  { id: 15, name: '張三' } ]
let obj2 = obj.filter(item => item.name === '張三')

.reduce()

語法
total 必需。初始值, 或者計(jì)算結(jié)束后的返回值
currentValue 必需。當(dāng)前元素
currentIndex 可選。當(dāng)前元素的索引
arr 可選。當(dāng)前元素所屬的數(shù)組對(duì)象
initialValue 可選。傳遞給函數(shù)的初始值

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

實(shí)例

1. 求數(shù)組項(xiàng)之和
let arr = [1, 2, 3, 4, 2, 3, 4]
// console(sum) 19
let sum = arr.reduce((obj, item) => { return obj + item}, 0)

2. 數(shù)組去重
// console(newArr) [1, 2, 3, 4]
let newArr = arr.reduce(function (obj, item) {
    if (obj.indexOf(item) === -1) {
        obj.push(item)
    }
    return obj
}, [])

去除數(shù)組重復(fù)元素

運(yùn)用ES6的Set數(shù)據(jù)結(jié)構(gòu) 、 Array.from()將其他類型轉(zhuǎn)換為數(shù)組

let ids = [11, 12, 13, 14, 15, 13, 15]
// 運(yùn)用 Array.from() 函數(shù) []
let ids2 = Array.from(new Set(ids))
// 運(yùn)用ES6的解構(gòu)賦值
let ids3 = [ ...new Set(ids) ]
// 結(jié)果都是 [11, 12, 13, 14, 15]

記錄每個(gè)數(shù)組元素出現(xiàn)的次數(shù)

兩種方法基本相同，第一種使用for循環(huán)

let arr = ['XX', 'YY', 'ZZ', 'ZZ', 'ZZ', 'TT', 'XX', 'YY', 'XX']
let countObj = {}
  for (let i = 0; i <= arr.length - 1; i++) {
     let v = arr[i]
     if (countObj[v]) {
         countObj[v]++
      } else {
          countObj[v] = 1
      }
}
// countObj = {XX: 3, YY: 2, ZZ: 3, TT: 1}

第二種使用reduce()函數(shù)

let arr = ['XX', 'YY', 'ZZ', 'ZZ', 'ZZ', 'TT', 'XX', 'YY', 'XX']
let countObj = arr.reduce((obj, name) => {
  if (name in obj) {
    obj[name]++
  } else {
    obj[name] = 1
  }
  return obj
}, {})

Vue全局注冊工具類js及常量

工具類 tools.js

import XEUtils from 'xe-utils'
export default {
    install (Vue) {
        /**
         * 日期轉(zhuǎn)換 yyyy-MM-dd
         */
        Vue.prototype.formatDateYMD = function (data) {
            return XEUtils.toDateString(data, 'yyyy-MM-dd')
        }
    }
}

常量 constants.js

const ONE = '001'
const TWO = '002'

export default {
    ONE, TWO
}

main.js

// 引入之前定義的兩個(gè)文件
import tools from '@/common/tools'
import constants from '@/common/constants'
// 使用注冊的tools工具
Vue.use(tools)
// 將CONSTANTS掛載到Vue上
Vue.prototype.CONSTANTS = constants

localStorage 和 sessionStorage

localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù)。
sessionStorage 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。
提示: 如果你想在瀏覽器窗口關(guān)閉后還保留數(shù)據(jù)，可以使用 localStorage 屬性， 該數(shù)據(jù)對(duì)象沒有過期時(shí)間，今天、下周、明年都能用，除非你手動(dòng)去刪除。

// 存儲(chǔ)
sessionStorage.setItem('name',  'Tom');
// 檢索
sessionStorage.getItem('name');
// 如果存的是數(shù)組對(duì)象時(shí)
sessionStorage.setItem('obj',  JSON.stringify(obj))
// 檢索
JSON.parse(sessionStorage.getItem('obj'))
// localStorage 用法相同