个人查漏补缺，具体的自己查看文档
一、扩展运算符 可对象合并
function upload(params) {
let config = {
type:'*.jpg,*png',
size:1024
}
config = { ...config,...params}
console.log(config)
}
upload({size:2048})
{type: "*.jpg,*png", size: 2048}
Object.assign(obj1,obj2) // 也可以对象合并
二、解构
字符串数组
let web = ['web','code']
let [,b] = web;
console.log(b) // code
三、属性检测
let arr = ["123","456"]
console.log(arr)
console.log(arr.hasOwnProperty("length")) //true
console.log(arr.hasOwnProperty("concat")) //false 原型继承 非自身属性
console.log("concat" in arr) // true 自身 原型都检测
let a = {
name:"范闲"
}
let c = {
obj:"这是一个人"
}
Object.setPrototypeOf(a,c)
console.log(a) // 检测效果原理同上
四、数组转对象
let QinYuNian = [
{
name:"范闲",
role:"主角光环",
caegory:"role"
},
{
name:"庆帝",
role:"一个喜欢深V的皇帝",
caegory:"role"
},
{
name:"林婉儿",
role:"鸡腿姑娘",
caegory:"role"
},
{
name:"陈萍萍",
role:".com 书记",
caegory:"role"
},
{
name:"王启年",
role:"捧哏",
caegory:"role"
}
]
let res = QinYuNian.reduce((obj,cur,index)=>{
obj[`${cur['caegory']}-${index}`] = cur;
return obj;
},{})
console.log(res)
五、遍历对象
let obj1 = {
name:"yp",
age:18
}
console.log(Object.keys(obj1)) // ["name", "age"]
console.log(Object.values(obj1)) // ["yp", 18]
console.log(Object.entries(obj1)) // [Array(2), Array(2)] [["name", "yp"]["age", 18]]
for( const [key,value] of Object.entries(obj1)){
console.log(key,value) // value
}
六、深浅拷贝
深浅拷贝，关键在于引用类型
七、对象的属性特征
比如我们遍历数组的时候为什么length没有遍历出来？
let obj3 = {
name:'yp',
age:18
}
console.log(Object.getOwnPropertyDescriptor(obj3,"age")) // {value: 18, writable: true, enumerable: true, configurable: true} // 可修改，可遍历，可操作
Object.defineProperty(obj3,'name',{ // 既可以修改原属性又可以添加属性，再配置
value:'yp1',
writable: false
})
obj3.name ='yp2'
console.log(obj3.name) //yp1
// 多个
Object.defineProperty(obj3,{
name:{},
age:{}
}
)
Object.preventExtensions(obj3) // 设置不可添加属性
Object.seal(obj3) //封闭 如果属性是可写的，那么可以修改属性值。保留它封闭前的属性
Object.freeze(obj3) // writable: false, enumerable: true, configurable: false
八、访问器
const User = {
data: { name:"yp",age:18},
set age(value){
if(typeof value !== "number" || value>100){
throw new Error('年龄格式错误')
}
this.data.age = value
},
get age() {
return this.data.age
}
}
User.age = 88;
console.log(User.age)
------------------------------------------------------
const threeMusketeers = {
category:[
{name:'html',level:3},
{name:'css',level:5},
{name:'js',level:9}
],
get totalLevel(){
return this.category.reduce((t,l)=>t+l.level,0)
}
}
threeMusketeers.totalLevel=20
console.log(threeMusketeers.totalLevel) // 17
九、proxy
-------------基本操作------------------
const person = {name:'yp'};
const proxy = new Proxy(person,{
get(obj,property){
return obj[property];
},
set(obj,property, value){
obj[property] = value;
return true
}
})
console.log(proxy.name) // yp
proxy.name = 'yp1';
console.log(proxy.name) //yp1
-------------控制函数------------------
function factorial(num){
return num ==1 ? 1: num*factorial(num-1)
}
let proxy1 = new Proxy(factorial,{
apply(func,obj,args){
console.time('run')
func.apply(this,args)
console.timeEnd('run')
}
})
proxy1.apply({},[5])
-----------------数组--------------------
let QinYuNian2 = [
{
name:"范闲",
role:"主角光环",
caegory:"role"
},
{
name:"庆帝",
role:"一个喜欢深V的皇帝",
caegory:"role"
},
{
name:"林婉儿",
role:"鸡腿姑娘",
caegory:"role"
},
{
name:"陈萍萍",
role:".com 书记",
caegory:"role"
},
{
name:"王启年",
role:"捧哏",
caegory:"role"
}
]
let proxy2 = new Proxy(QinYuNian2,{
get(array,key){
const name = array[key].name;
const role = array[key].role;
return name + '---'+ role
}
})
console.log(proxy2[2]) // 林婉儿---鸡腿姑娘
十、Json
键-值都带" "
let QinYuNian3 = [
{
name:"范闲",
role:"主角光环",
caegory:"role"
},
{
name:"庆帝",
role:"一个喜欢深V的皇帝",
caegory:"role"
},
{
name:"林婉儿",
role:"鸡腿姑娘",
caegory:"role"
},
{
name:"陈萍萍",
role:".com 书记",
caegory:"role"
},
{
name:"王启年",
role:"捧哏",
caegory:"role"
}
]
let json = JSON.stringify(QinYuNian3,['name','role'],2) // 保留的字段 空格
let obj5 = JSON.parse(json,(key,value)=>{
if(key==="name"){
value ="庆余年---" + value
}
return value
})
console.log(json)
console.log(obj5)
来源：CSDN
作者：web_自牧
链接：https://blog.csdn.net/weixin_44420276/article/details/103611009