前端知识积累 —— 把不会的东西记录下来

Vue和前端篇持续更新开发中遇到的问题ing...

扩展运算符...

// 通过扩展运算符复制一个对象，修改obj之后不会对model造成影响
let obj = { ...this.model }

.map()

let obj = [
   { id: 11, name: '张三' },
   { id: 12, name: '李四' },
   { id: 13, name: '王五' },
   { id: 14, name: '赵六' }
]
// 通过.map()函数可以获取id数组 [11, 12, 13, 14]
let ids = obj.map(item => item.id)

.filter()

// 我们像之前一样建一个数组对象，但是此次多了一个‘张三’
let obj = [
   { id: 11, name: '张三' },
   { id: 12, name: '李四' },
   { id: 13, name: '王五' },
   { id: 14, name: '赵六' },
   { id: 15, name: '张三' }
]
// 通过.filter()函数可以过滤出name为张三的所有对象 [ { id: 11, name: '张三' },  { id: 15, name: '张三' } ]
let obj2 = obj.filter(item => item.name === '张三')

.reduce()

语法
total 必需。初始值, 或者计算结束后的返回值
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
initialValue 可选。传递给函数的初始值

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

实例

1. 求数组项之和
let arr = [1, 2, 3, 4, 2, 3, 4]
// console(sum) 19
let sum = arr.reduce((obj, item) => { return obj + item}, 0)

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

去除数组重复元素

运用ES6的Set数据结构、 Array.from()将其他类型转换为数组

let ids = [11, 12, 13, 14, 15, 13, 15]
// 运用 Array.from() 函数 []
let ids2 = Array.from(new Set(ids))
// 运用ES6的解构赋值
let ids3 = [ ...new Set(ids) ]
// 结果都是 [11, 12, 13, 14, 15]

记录每个数组元素出现的次数

两种方法基本相同，第一种使用for循环

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()函数

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) {
        /**
         * 日期转换 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

// 引入之前定义的两个文件
import tools from '@/common/tools'
import constants from '@/common/constants'
// 使用注册的tools工具
Vue.use(tools)
// 将CONSTANTS挂载到Vue上
Vue.prototype.CONSTANTS = constants

localStorage 和 sessionStorage

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

// 存储
sessionStorage.setItem('name',  'Tom');
// 检索
sessionStorage.getItem('name');
// 如果存的是数组对象时
sessionStorage.setItem('obj',  JSON.stringify(obj))
// 检索
JSON.parse(sessionStorage.getItem('obj'))
// localStorage 用法相同