数据处理方法
- 1、判断object对象是否为空{}
- 2、js字符串的处理
- 3、回顾es6数组操作
- push() 从后面添加元素
- pop() 从后面删除元素
- shift() 从前面删除元素
- unshift() 从前面添加元素
- splice(i, n) 删除从i（索引值）开始之后的n个元素
- slice(start, end) 切去索引值start到索引值end的数组
- concat() 连接两个数组
- split() 将字符串改为数组
- sort() 将数组进行排序
- reverse() 将数组反转
- forEach(callback) 遍历数组，无return
- 扩展运算符
- Array.from()对象转为数组
- Array.of()将一组值转为数组
- copyWithin()
- find(),findIndex(),findLast(),findLastIndex()
- fill()填充一个数组
- entries()键名； keys()键值； values()键值对
- includes()
- flat() flatMap()
- at()
- toReversed() toSorted() toSpliced() with()
- 4、set 去重、交集、并集、差集
- 5、weakSet
- 6、Map
- 7、WeakMap
- 案例
- 8、object() 构造函数
// 用法：
Object.assign(target, ...sources)
参数： target ---> 目标对象
source ---> 源对象
返回值：target, 即目标对象
1、判断object对象是否为空{}
// 1. for in 遍历
for(let i in obj) { return true }
return false
// 2. JSON.stringify() 方法判断
if(JSON.stringify(obj) === '{}') return true;
return false;
// 3. ES6中Object.keys()判断 Object.keys()方法返回一个给定对象的自身可枚举属性组成的数组
Object.keys(obj).length === 0 ? "空" : "不为空"
2、js字符串的处理
多次复制一个字符串 repeat
// 多次复制一个字符串 repeat
const a = '1'.repeat(8) // '11111111'
填充字符串到指定长度 padStart
// 填充字符串到指定长度： padStart 在开头添加0，直到字符串的长度为8；padEnd 在末尾添加*,直到字符串的长度为5
const a = '001'.padStart(8, '0') // '00000001'
const b = '34'.padEnd(5, '*') // '34***'
字符串拆分字符数组 […]
// 字符串拆分字符数组
const word = 'apple'
const a = [...word] // ['a', 'p', 'p', 'l', 'e']
反转字符串的字符 reverse
// 反转字符串的字符
const word = 'apply'
const a = [...word].reverse.join('') // 'ylppa'
字母大写 toUpperCase
// 字符串第一个字母大写
let word = 'apply'
word = word[0].toUpperCase + word.substr(1) // 方法一
const a = [...word] // 方法二
a[0] = a[0].toUpperCase()
word = a.join('')
3、回顾es6数组操作
push() 从后面添加元素
- arr.push() 从后面添加元素，返回值为添加完后的数组长度
let arr = [1, 2, 3, 4, 5]
console.log(arr.push(0)) // 6
console.log(arr) // [1, 2, 3, 4, 5, 0]
pop() 从后面删除元素
- arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
let arr = [1, 2, 3, 4, 5]
console.log(arr.pop(0)) // 5
console.log(arr) // [1, 2, 3, 4]
shift() 从前面删除元素
- arr.shift() 从前面删除元素，只能删除一个，返回值是删除的元素
let arr = [1, 2, 3, 4, 5]
console.log(arr.shift()) // 1
console.log(arr) // [2, 3, 4, 5]
unshift() 从前面添加元素
- arr.unshift() 从前面添加元素，返回值是添加完后的数组长度
let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(9)) // 6
console.log(arr) // [9, 1, 2, 3, 4, 5]
splice(i, n) 删除从i（索引值）开始之后的n个元素
- arr.splice(i, n) 删除从i（索引值）开始之后的n个元素，返回值是删除的元素
let arr = [1, 2, 3, 4, 5]
console.log(arr.splice(2, 2)) // [3, 4]
console.log(arr) // [1, 2, 5]
slice(start, end) 切去索引值start到索引值end的数组
- arr.slice(start, end) 切去索引值start到索引值end的数组，不包含end的值，返回值是切出来的数组
let arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1, 3)) // [2, 3]
console.log(arr) // [1, 2, 3, 4, 5]
concat() 连接两个数组
- arr.concat() 连接两个数组，返回值为连接后的新数组
let arr = [1, 2, 3, 4, 5]
console.log(arr.concat([1, 2])) // [1, 2, 3, 4, 5, 1, 2]
console.log(arr) // [1, 2, 3, 4, 5]
split() 将字符串改为数组
- str.split() 将字符串改为数组
let str = '123456'
// 一
console.log(str.split('')) // ['1', '2', '3', '4', '5', '6']
// 二
console.log(str.split('2')[0]) // 1
console.log(str.split('2')[1]) // 3456
sort() 将数组进行排序
- arr.sort() 将数组进行排序，返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小进行排序
let arr = [2, 10, 6, 1, 4, 22, 3]
let arr1 = arr.sort((a, b) => a - b)
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) => b - a)
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]
reverse() 将数组反转
- arr.reverse() 将数组反转，返回值是反转后的数组
let arr = [1, 2, 3, 4, 5]
console.log(arr.reverse()) // [5, 4, 3, 2, 1]
console.log(arr) // [5, 4, 3, 2, 1]
forEach(callback) 遍历数组，无return
- arr.forEach(callback) 遍历数组，无return，即使有return，也不会返回任何值，并影响原来的值
let arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, arr) => {
console.log(`value: ${value}; index: ${index}; arr: ${arr}`)
})
// 输出
value: 1; index: 0; arr: 1,2,3,4,5
value: 2; index: 1; arr: 1,2,3,4,5
value: 3; index: 2; arr: 1,2,3,4,5
value: 4; index: 3; arr: 1,2,3,4,5
value: 5; index: 4; arr: 1,2,3,4,5
let arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, array) => {
value = value * 2
console.log(`value: ${value}, index: ${index}, array: ${array}`)
})
console.log(arr)
// 输出
value: 2, index: 0, array: 1,2,3,4,5
value: 4, index: 1, array: 1,2,3,4,5
value: 6, index: 2, array: 1,2,3,4,5
value: 8, index: 3, array: 1,2,3,4,5
value: 10, index: 4, array: 1,2,3,4,5
[1, 2, 3, 4, 5]
let arr = [1, 2, 3, 4, 5]
let res = arr.forEach((item, index, arr) => {
arr[index] = item * 2
return arr
})
console.log(arr) // [2, 4, 6, 8, 10]
console.log(res) // undefined
扩展运算符
- 扩展运算符
// 替代函数apply()方法
let arr1 = [0, 1, 2]
let arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1, arr2) // arr1值为 [0, 1, 2, 3, 4, 5]
arr1.push(...arr2) // arr1值为 [0, 1, 2, 3, 4, 5]
Array.from()对象转为数组
- Array.from()
用于两类对象转为真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
let arr1 = [].slice.call(arrayLike) // ['a', 'b', 'c']
let arr2 = Array.from(arrayLike) // ['a', 'b', 'c']
Array.from(arrayLike, x => x * x)
// 等同于
Array.from(arrayLike).map(x => x * x)
Array.from([1, 2, 3], (x) => { x * x }) // [1, 4, 9]
Array.of()将一组值转为数组
- Array.of()
用于将一组值转为数组
Array.of(3, 11, 8) // [3, 11, 8]
Array.of(3).length // 1
copyWithin()
- copyWithin()
Array.prototype.copyWithin(target, start = 0, end = this.length)
// 三个参数
// target(必需): 从该位置开始替换数据，如为负值，则从后面开始数
// start(可选): 从该位置开始读取数据，默认为0，如为负值，则从后面开始数
// end(可选): 到该位置前停止读取数据,默认等于数组长度。如果为负值，表示从末尾开始计算。
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]
find(),findIndex(),findLast(),findLastIndex()
- find(),findIndex(),findLast(),findLastIndex()
// find(),找出第一个符合条件的数组成员，没有符合条件的成员，则返回undefined
// findIndex() 找出符合条件的数组第一个成员的位置，如所有成员都不符合条件，则返回-1
[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 5, 10, 15].findIndex((value, index, arr) => { // 当前的值、当前的位置和原数组
return value > 9
})
// 两个方法都可以发现NaN，弥补了数组indexOf()方法的不足
[NaN].indexOf(NaN) // -1
[NaN].findIndex(y => Object.is(NaN, y)) // 0
fill()填充一个数组
- fill()
填充一个数组
['a', 'b', 'c'].fill(7) // [7, 7, 7]
new Array(3).fill(7) // [7, 7, 7]
entries()键名； keys()键值； values()键值对
- entries() keys() values()
// keys()对键名的遍历
// values()对键值的遍历
// entries()对键值对的遍历
Object.keys(['a', 'b', 'c']) // ['0', '1', '2']
Object.values(['a', 'b', 'c']) // ['a', 'b', 'c']
Object.entries(['a', 'b', 'c']) // [['0', 'a'], ['1', 'b'],['2', 'c']]
includes()
- includes()
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
flat() flatMap()
- flat() flatMap()
// flat() 用于将嵌套的数组"拉平"，变成一维数组；默认拉平的层数为1；转为一维数组Infinity;
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity) // [1, 2, 3]
[1, 2, ,4, 5].flat() // [1, 2, 4, 5] 原有数组有空位，flat()方法会跳过空位
// flatMap()对原数组的每个成员执行一个函数(相当于map()),该方法返回一个新数组，不改变原数组
[2, 3, 4].flatMap((x) => [x, x * 2])
// 相当于[[2, 4], [3, 6], [4, 8]].flat()
// [2, 4, 3, 6, 4, 8]
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// 相当于[[[2]], [[4]], [[6]], [[8]]].flat()
// [[2], [4], [6], [8]]
at()
- at()
// 返回对应位置的成员，并支持负索引；如参数位置超出了数组范围，at()返回undefined
const arr = [5, 12, 8, 130, 44]
arr.at(2) // 8
arr.at(-2) //130
toReversed() toSorted() toSpliced() with()
- toReversed() toSorted() toSpliced() with()
// toReversed()对应reverse()，用来颠倒数组成员的位置。
// toSorted()对应sort()，用来对数组成员排序。
// toSpliced()对应splice()，用来在指定位置，删除指定数量的成员，并插入新成员。
// with(index, value)对应splice(index, 1, value)，用来将指定位置的成员替换为新的值。
const seq = [1, 2, 3]
seq.toReversed()
console.log(seq) // [1, 2, 3]
const out = [3, 1, 2]
out.toSorted()
console.log(out) // [1, 2, 3]
const arr = [1, 2, 3, 4]
arr.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
console.log(arr) // [1, 2, 3, 4]
const corr = [5, 1, 3]
corr.with(1, 2) // [5, 2, 3]
console.log(corr) // [5, 1, 3]
4、set 去重、交集、并集、差集
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
https://es6.ruanyifeng.com/#docs/set-map
// 去除数据的重复成员
[...new Set(array)]
例：
const arr = [1, 23, 44, 33, 23, 44, 22, 23]
const bb = [...new Set(arr)]
console.log(bb) // [1, 23, 44, 33, 22]
// 去除字符串里面的重复字符
[...new Set('ababbc')].join('') // 'abc'
// 去除数组重复成员的另一种方法
function dedupe(array) {
return Array.from(new Set(array))
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
遍历操作
Set结构的实例有四个遍历方法，可以用于遍历成员。
- Set.prototype.keys(): 返回键名的遍历器
- Set.prototype.values(): 返回键值的遍历器
- Set.prototype.entries(): 返回键值对的遍历器
- Set.prototype.forEach(): 使用回调函数遍历每个成员
(1) keys()，values(), entries()
keys方法、values方法、entries方法返回的都是遍历器对象。由于Set结构没有键名，只有键值（或是说键名跟键值是同一个值），所以keys方法和values方法的行为完全一致。
let set = new Set(['red', 'green', 'blue'])
for (let item of set.keys()) {
console.log(item)
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item)
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item)
}
// ['red', 'red']
// ['green', 'green']
// ['blue', 'blue']
(2) forEach()
Set 结构的实例与数组一样，也拥有forEach()方法，用于对每个成员执行某种操作，没有返回值。
let set = new Set([1, 4, 9])
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9
注Set结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。
(3) 遍历的应用
扩展运算符（…）内部使用 for…of 循环，所以也可以用于Set结构。
let set = new Set(['red', 'green', 'blue'])
let arr = [...set]
// ['red', 'green', 'blue']
扩展运算符和Set结构相结合，就可以去除数组的重复成员。
let arr = [3, 5, 2, 2, 5, 5]
let unique = [...new Set(arr)]
// [3, 5, 2]
数组的map和filter方法也可以间接用于Set
let set = new Set([1, 2, 3])
set = new Set([...set].map(x => x*2))
//返回set结构： {2, 4, 6}
let set = new Set([1, 2, 3, 4, 5])
set = new Set([...set].filter(x=>(x%2)===0))
//返回set结构：{2, 4}
let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
// 并集
let union = new Set([...a, ...b])
// {1, 2, 3, 4}
// 交集
// has()：将匹配元素集合缩减为包含特定元素的后代的集合；在数组中寻找是否包含有匹配的值，并返回
let intersect = new Set([...a].filter(x => b.has(x)))
// {2, 3}
//(a相对于b的）差集
//has()：将匹配元素集合缩减为包含特定元素的后代的集合；在数组中寻找是否包含有匹配的值，并返回；
let difference = new Set([...a].filter(x => !b.has(x)))
// {1}
如果想在遍历操作中，同步改变原来的Set结构，目前没直接方法，但有两种变通方法。
// 方法一
// 利用原Set结构映射除一个新的结构，然后赋值给原来的Set结构
let set = new Set([1, 2, 3])
set = new Set([...set].map(val => val * 2))
// 方法二
// 利用Array.from方法
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2))
// set值为2、4、6
5、weakSet
WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
WeakSet结构有三种方法：
- WeakSet.prototype.add(value)：向WeakSet实例添加一个新成员，返回WeakSet结构本身。
- WeakSet.prototype.delete(value)：清除WeakSet实例的指定成员，清除成功返回true，如果在WeakSet中找不到该成员或该成员不是对象，返回false。
- WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在WeakSet实例中。
const ws = new WeakSet()
const obj = {}
const foo = {}
ws.add(window)
ws.add(obj)
ws.has(window) // true
ws.has(foo) // false
ws.delete(window) // true
ws.has(window) // false
6、Map
Map结构的实例有一下属性和操作方法。
属性和操作方法
(1)、size属性
size属性返回Map结构的成员总数
const map = new Map()
map.set('foo', true)
map.set('bar', false)
console.log(map.size) // 2
(2)、Map.prototype.set(key, value)
set方法设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则生成该键。
const map = new Map()
map.set('edition', 6) // 键是字符串
map.set(262, 'standard') // 键是数值
map.set(undefined, 'nah') // 键是 undefined
console.log("map=", map)
set方法返回的是当前Map对象，因此可以采用链式写法。
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c')
(3)、Map.prototype.get(key)
get方法读取key对应的键值，如果找不到key，返回undefined。
const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello) // Hello ES6!
(4)、Map.prototype.has(key)
has方法返回一个布尔值，表示某个键是否在当前Map对象之中。
const m = new Map()
m.set('edition', 6)
m.set(262, 'standard')
m.set(undefined, 'nah')
console.log(m.has('edition')) // true
console.log(m.has('years')) // false
console.log(m.has(262)) // true
console.log(m.has(undefined)) // true
(5)、Map.prototype.delete(key)
delete方法删除某个键，返回true。如果删除失败，返回false。
const m = new Map()
m.set(undefined, 'naH')
console.log(m.has(undefined)) // true
m.delete(undefined)
m.has(undefined) // false
(6)、Map.prototype.clear()
clear方法清楚所有成员，没有返回值
let map = new Map()
map.set('foo', true)
map.set('bar', false)
console.log(map.size) // 2
map.clear()
console.log(map.size) // 0
遍历方法
Map结构原生提供三个遍历器生成函数和一个遍历方法
- Map.prototype.keys()：返回键名的遍历器。
- Map.prototype.values()：返回键值的遍历器。
- Map.prototype.entries()：返回所有成员的遍历器。
- Map.prototype.forEach()：遍历 Map 的所有成员。
const map = new Map([
['F', 'no'],
['T', 'yes']
])
for(let key of map.keys()) {
console.log(key)
}
// "F"
// "T"
for(let value of map.values()) {
console.log(value)
}
// "no"
// "yes"
for(let item of map.entries()) {
console.log(item[0], item[1])
}
// "F" "no"
// "T" "yes"
// 或者
for(let [key, value] of map.entries()) {
console.log(key, value)
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for(let [key, value] of map) {
console.log(key, value)
}
// "F" "no"
// "T" "yes"
Map结构转为数组结构，比较快速的方法是使用扩展运算符…
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three']
])
[...map.keys()] // [1, 2, 3]
[...map.values()] // ['one', 'two', 'three']
[...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']]
[...map] // [[1,'one'], [2, 'two'], [3, 'three']]
结合数组的map方法、filter方法，可以实现Map的遍历和过滤（Map本身没有map和filter方法）。
const map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c')
const map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
)
console.log(map1) // {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
)
console.log(map2) // {2 => '_a', 4 => '_b', 6 => '_c'}
与其他数据结构的相互转换
Map转为数组[…]
Map 转为数组最方便的方法，就是使用扩展运算符…
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc'])
[...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
数组转为Map
将数组传入Map构造函数，就可以转为Map
new Map([
[true, 7],
[{foo: 3},['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
Map转为对象
如果所有 Map 的键都是字符串，它可以无损地转为对象。
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }
如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。
对象转为Map
对象转为Map可以通过Object.entries()
let obj = {"a": 1, "b": 2}
let map = new Map(Object.entries(obj))
``
也可实现一个转换函数
```javascript
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
Map 转为 JSON
Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
JSON 转为 Map
JSON 转为 Map，正常情况下，所有键名都是字符串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
7、WeakMap
https://es6.ruanyifeng.com/#docs/set-map
案例
日常处理数据解构
示例一
data: {
FR3: [
{ id: 0, deviceId: 665 },
{ id: 1, deviceId: 789 },
{ id: 3, deviceId: 779 }
],
pc4: [],
pc6: []
}
改为
areaDevice: [
{
list: [
{ id: 0, deviceId: 665 },
{ id: 1, deviceId: 789 },
{ id: 3, deviceId: 779 }
],
type: 'FR3'
},
{
list: [],
type: 'pc4'
},
{
list: [],
type: 'pc6'
}
]
// 方法一
let areaDevice = []
Object.keys(data).forEach(item => {
areaDevice.push({
type: item,
list: data[item]
})
})
// 方法二
let areaDevice = Object.entries(data).map(item => {
return {
'type': item[0],
'list': item[1]
}
})
示例二
headers: [
{
align: 'center',
key: 'name',
title: '门店名称'
},
{
align: 'cneter1',
key: 'address',
title: '门店名称1'
},
{
align: 'center2',
key: 'shopName',
title: 'gopx'
}
]
改为
_headers: {
A1: {
align: 'center',
key: 'name',
v: '门店名称'
},
B1: {
align: 'cneter1',
key: 'address',
v: '门店名称1'
},
C1: {
align: 'center2',
key: 'shopName',
v: 'gopx'
}
}
let _headers = headers.map((item, i) => Object.assign({}, {
key: item.key,
title: item.title,
position: String.fromCharCode(65 + i) + 1
})).reduce((prev, cur) => Object.assign({}, prev, {
[cur.position]: {key: cur.key, v: cur.title}
}, {}), {})
示例三
data1: {
anpig: {
age: 12,
name: 'abcd',
list: [1, 2, 3]
},
abTag: {
age: 13,
name: 'cdeg',
list: [2, 3, 4]
},
cdTab: {
age: 14,
name: 'cds',
list: [4, 5, 6]
}
}
改为
result: [
{
age: 12,
name: 'abcd',
list: [1, 2, 3],
voiceId: 0
},
{
age: 13,
name: 'cdeg',
list: [2, 3, 4],
voiceId: 1
},
{
age: 14,
name: 'cds',
list: [4, 5, 6],
voiceId: 2
}
]
let result = Object.entries(this.data1).map((item, index) => {
return {
...item[1],
voiceId: index
}
})
示例四
data1: [
{
endWeek: 3,
startWeek: 4,
list: ['a', 'b']
},
{
endWeek: 4,
startWeek: 5,
list: ['b', 'c']
}
]
改为
result: [
{
endWeek: 3,
startWeek: 4,
list: ['a', 'b'],
ab: false
},
{
endWeek: 4,
startWeek: 5,
list: ['b', 'c'],
ab: false
}
]
}
// 方法一
let result = data1.map(item => {
item.ab = false
return item
})
// 方法二
let result = data1.map(item => Object.assign({}, {
endWeek: item.endWeek,
startWeek: item.startWeek,
list: JSON.parse(JSON.stringify(item.list)),
ab: false
}))
示例五
data1: {
ageCategories: ['成人女声', '男声', '女童', '男童'],
senceCategories: ['推荐', '单人', '双人']
}
改为
result: {
age: ['全部年龄', '成人女声', '男声', '女童', '男童'],
sence: ['全部', '推荐', '单人', '双人']
}
整体构思： 第一步 Object.entries()
解析为
[
['ageCategories', [['成人女声', '男声', '女童', '男童']]],
['senceCategories', [['推荐', '单人', '双人']]]
]
第二步使用 reduce() 第一个参数：上次调用回调返回的值（必选）
第二个参数： 数组中当前被处理的数组项
// 写法一
let aa = Object.entries(this.data1 || []).reduce((prev, cur) => ({ // ({})相当于 return {}
...prev,
[cur[0] === 'senceCategories' ? 'sence' : cur[0] === 'ageCategories' ? 'age' : k] : cur[0] === 'senceCategories' ? ['全部', ...cur[1]] : cur[1] === 'ageCategories' ? ['全部年龄', ...cur[1]] : cur[1]
}), {})
// 写法二
// [k, v] 其实 k：相当于cur[0], v相当于cur[1]
let aa = Object.entries(this.data1 || []).reduce((prev, [k, v]) => ({
...prev,
[k === 'senceCategories' ? 'sence' : k === 'ageCategories' ? 'age' : k] : [k === 'senceCategories' ? ['全部', ...v] : k === 'ageCategories' ? ['全部年龄', ...v] : v]
}),{})
示例六
result: {
age: ['全部年龄', '成人女声', '男声', '女童', '男童'],
sence: ['全部', '推荐', '单人', '双人']
}
改为
filter: { age: '全部年龄', sence: '全部' }
// 写法一
let bb = Object.entries(aa).reduce((prev, cur) => ({
...prev,
[cur[0]]: cur[1][0][0]
}), {})
// 写法二
let bb = Object.entries(aa).reduce((prev, [k, v]) => ({
...prev,
[k]: v[0][0]
}), {})
例七
let people = [
{ name: 'Alice', age: 18 },
{ name: 'Max', age: 17 },
{ name: 'Jane', age: 17 },
{ name: 'Tom', age: 15 },
{ name: 'Jay', age: 16 },
{ name: 'Wenndy', age: 15 },
{ name: 'lily', age: 16 }
]
let groupedPerson = this.groupBy(people, 'age')
console.log('groupedPerson===', groupedPerson)
groupBy(objectArray, property) {
return objectArray.reduce((acc, obj) => {
let key = obj[property]
if (!acc[key]) {
acc[key] = []
}
acc[key].push(obj)
return acc
}, {})
}
8、object() 构造函数
创建一个新对象
const o = new Object()
o.foo = 42
console.log(o)
// { foo: 42 }
使用undefined和null类型调用Object
以下示例在o中存储一个空object对象：
const o = new Object()
const o = new Object(undefined)
const o = new Object(null)
获取BigInt和Symbol的封装对象
当用new调用BigInt()和Symbol()构造函数时会抛出一个错误，以阻止创建封建对象而不是基本类型值的常见错误。为这些类型创建封装对象的唯一方法是使用它们调用Object()
const numberObj = new Number(1)
console.log(typeof numberObj) // "object"
const bigintObj = Object(1n)
console.log(typeof bigintObj) // "object"
const sysbloObj = Object(Symbol("foo"))
console.log(typeof symbolObj) // "object"
1333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
