js高级(学习笔记)

23 阅读2分钟

defineProperty

Object.defineProperty(obj, prop, descriptor)

参数

obj 要在其上定义属性的对象。

prop 要定义或修改的属性的名称。

descriptor 将被定义或修改的属性描述符。

数据描述符

configurable 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同 时该属性也能从对应的对象上被删除。默认为 false。

enumerable 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性 中。默认为 false。

value 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

writable 当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false。 存取描述符

get 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该 方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的 this并不一定是定义该属性的对象)。默认为 undefined。

set 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触 发执行该方法。该方法将接受唯一参数,即该属性新的参数值。默认为 undefined。

想要在获取对象的值的时候做一些别的操作

let obj = {
    $name: "小狗",
    get name(){ // 获取 name 属性时触发
        //console.log("在这里可以进行其他操作");
        return this.$name;// 想要让 obj 在获取name 属性时,拿到的值
    },
    set name(newVal){ // 设置 name 属性时 触发
        console.log(newVal); // 给 name 设置的新值,这里也可以做其他操作
        this.$name = newVal;
    }
};
//console.log(obj.name);
obj.name = "可爱的小狗狗";
let obj = {
    name: "小狗狗",
    age: 8
};
Object.defineProperty(obj,"name",{
    configurable: true, //配置是否允许被删除 true(默认值) 可以被删除,false 不能被删除
    enumerable: true, //配置是否允许被枚举 true(默认值) 可以被枚举,false 不能被枚举
    set(newVal){
        console.log("这个想要设置的新值",newVal);
    },
    get(){
        return "你猜名字是啥";
    }
});
  • 自定义返回的类型
let myExports = {}
Object.defineProperty(myExports,Symbol.toStringTag,{value: 'Module'});
console.log(Object.prototype.toString.call(myExports) // [object Object]

  • 在页面中丝滑跳转
s0.scrollIntoView({})
behavior 定义过渡动画。“auto”,“instant"或"smooth”。默认为"auto"。
block “start”,“center”,“end"或"nearest”。默认为"center"inline  “start”,“center”,“end"或"nearest”。默认为"nearest"
  • 解构对象,需要给对象手动添加一个迭代器
const arr = [3,4]
const iter = arr[Symbol.iterator]();
const a = iter.next().value;
const b = iter.next().value;
// 已上是数组迭代器的基本使用


// 因为数组天生子嗲迭代器,对象没有,所以对象就需要我们自己手写了

一道算法

const data = [
    {"userId": "001", "productId": "p001", "level": 3},
    {"userId": "002", "productId": "p001", "level": 2},
    {"userId": "001", "productId": "p002", "level": 2},
    {"userId": "002", "productId": "p003", "level": 3},
]
const map = new Map()
data.forEach(item => {
    if (!map.has(item.productId)) {
        map.set(item.productId, [])
    }
    map.get(item.productId).push(item)
})
console.log('先按照productID分类',map)
const productIdUserId = {}
const getMaxLevelUserId = (arr) => {
    let maxLevel = 0
    let maxLevelUserId = ''
    arr.forEach(item => {
        if (item.level > maxLevel) {
            maxLevel = item.level
            maxLevelUserId = item.userId
        }
    })
    return maxLevelUserId
}
map.forEach((value, key) => {
    productIdUserId[key] = getMaxLevelUserId(value)
})
console.log('找最大的level',productIdUserId)
const res = {}
Object.keys(productIdUserId).forEach(key => {
    res[productIdUserId[key]] ? res[productIdUserId[key]].push(key) : res[productIdUserId[key]] = [key]
})
console.log('最终结果=》',res)