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 用法相同
