一些比较常用而且好用的关于ES6数组和对象方法梳理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
const target = {};
const obj1 = { key1: 2 }
const obj2 = { key2: 3 }
const obj3 = { key2: 4 }
// 1、Object.assign合并对象方式一(Object.assign方法的第一个参数是目标对象，后面的参数都是源对象)
Object.assign(target, obj1, obj2);
console.log(target) // {key1:2, key2:3}
// 注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。比如此时源对象加个obj3 = {key2: 4} 则会输出 {key1:2, key2:4}
// 2、...es6扩展运算符合并对象方式二
const newObj = {...obj1,...obj2}
console.log(newObj) // {key1:2, key2:3}
// ...es6扩展运算符将一个数组转为用逗号分隔的参数序列
const arr = [1,2,3]
console.log(...arr) // 1 2 3
// 合并数组 (都是浅拷贝)
const arr1 = [1,2,3]
const arr2 = [4,5]
// ES5 的合并数组
var newArr= arr1.concat(arr2);
console.log(newArr) // [1, 2, 3, 4, 5]
// ES6 的合并数组
const newArr2= [...arr1,...arr2];
console.log(newArr2) // [1, 2, 3, 4, 5]
// 扩展运算符如果用于数组赋值，只能放在参数的最后一位，否则会报错。
// Array.from方法用于将两类对象转为真正的数组(类数组转为数组的方法 比如类似下面的数据结构和一些dom的集合)
const testArr = { '0': '222', '1': '333', length: 2}
// ES5的写法
var testArr1 = [].slice.call(testArr);
console.log(testArr1)// ["222", "333"]
// ES6的写法
const testArr2 = Array.from(testArr);
console.log(testArr2)// ["222", "333"]
// Array.of方法用于将一组值，转换为数组;Array.of基本上可以用来替代Array()或new Array()
let aArr = Array.of({a:1},{b:1},{c:1})
let bArr = Array.of(1,2,3)
console.log(aArr)// [{a:1},{b:1},{c:1}]
console.log(bArr)// [1, 2, 3]
// 数组实例的find方法，用于找出第一个符合条件的数组成员 如果没有符合条件的成员，则返回undefined
let aFind = [1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
console.log(aFind)
// findIndex如果所有成员都不符合条件，则返回-1
let aFindIndex = [1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
console.log(aFindIndex) // 2
// fill方法使用给定值，填充一个数组
let aFill = new Array(10).fill(10)
console.log(aFill) // [10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
// fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置
let aFillStarEnd = ['a', 'b', 'c'].fill(10, 1, 2)
console.log(aFillStarEnd) // ["a", 10, "c"]
// flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1 不适用于[{aa:'xxx',[{aa:'xxx'}]},{}]
let aFill1 = [1, 2, [3, [4, 5]]].flat()
console.log(aFill1) // [1, 2, 3, [4, 5]]
let aFill2 = [1, 2, [3, [4, 5]]].flat(2)
console.log(aFill2) // [1, 2, 3, 4, 5]
// 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数
let aFill3 = [1, [2, [3]]].flat(Infinity)
console.log(aFill3) // [1, 2, 3]
// 去重引用类型 [{},{},{}]
let objArr = [{
"id": 1,
"name": "tom",
"age": "17"
}, {
"id": 2,
"name": "bob",
"age": "18"
}, {
"id": 3,
"name": "pitter",
"age": "16"
}, {
"id": 1,
"name": "sopp",
"age": "15"
}];
let hash = {};
objArr = objArr.reduce(function(item, temp) {
console.log(item, temp)
hash[temp.id] ? '' : hash[temp.id] = true && item.push(temp);
return item
}, [])
console.log(objArr, '去重后的引用类型');
// 封装成函数 distinct(arr) 把需要去重的数组传进去即可
function distinct(arr){
var result = []
var obj = {}
arr.reduce((item,temp)=>{
// 这里判断的是数组引用类型中的ID， 各位可自行替换判断依据
obj[temp.id]?'':obj[temp.id]=true&&result.push(temp)
})
return result
}
</script>
</body>
</html>
内容原创，转载请注明出处！！！！谢谢合作！
