javascript 操作对象属性

121 阅读2分钟

有条件地在对象中添加属性💡

const isValid = false;
const age = 18;

const person = {
    id: '1',
    name: 'Krina',
    ...(isValid && {isActive:true}),
    ...((age >= 18 || isValid) && {cart:0})
};
console.log('person',person); //{id: '1', name: 'Krina', cart: 0}

检查一个对象是否包含某个属性

const person = {
    id: 'abc',
    name: 'Krice'
}

console.log('name' in person); // true
console.log('isActive' in person); // false

使用动态键进行对象解构

const produtData = {id:'12', name:'Laptop'};
const {name: deviceName} = produtData;
console.log(deviceName); // Laptop

const exractKey = 'name';
const {[exractKey]:data} = produtData;
console.log('data',data); // data Laptop

循环访问一个对象以同时访问键和值

const data = {id: 1, name: 'Laptop', isSale: true};

Object.entries(data).forEach(([key,value]) => {
    if(['id','name'].includes(key)){
        console.log('key:',key,'value:',value); // key: id value: 1 key: name value: Laptop
    }
})

当使用可选的链接(?.)访问对象中不存在的任何键时,防止抛出错误🐞

const data = {id:2,isActive:true};
console.log('data',data.name); //throw error
console.log('data',data?.name); // undefined
console.log('data',data?.name?.user); // undefined
console.log('data',data?.nameDisplay?.()); // undefined

如果您确定键必须传入数据,如果没有传入,则最好抛出错误,而不是防止它们。

检查数组中的假🌵值

const fruitList = ['apple',null,'mango',undefined,''];
const filterList = fruitList.filter(Boolean);
console.log(filterList); // ['apple', 'mango']

const isAnyList = fruitList.some(Boolean);
console.log(isAnyList); // true;

删除数组中的重复值

const fruitList = ['apple','mango','apple','grapes'];
const uniqList = [...new Set(fruitList)];
console.log(uniqList); // ['apple', 'mango', 'grapes']

检查值是一个数组类型

const fruitList = ['apple','mango','apple','grapes'];
console.log(typeof fruitList); // object
console.log(Array.isArray(fruitList)); // true

使用' + '操作符🤩将字符串转换为数字和数字转换为字符串

const personNo = '238932';
console.log('personNo:', +personNo,'typeof', typeof +personNo); // personNo: 238932 typeof number

const personId = 238932;
console.log('personId:',personId+'','typeof',typeof (personId+"")); // personId: 238932 typeof string

当value为空且未定义时,使用??有条件地分配其他值

let data = undefined ?? 'noData';
console.log(data); // noData
data = null ?? 'noData';
console.log(data); // noData
data = '' ?? 'noData';
console.log(data); // ''
data = 0 ?? null ?? 'noData';
console.log(data); // 0
data ??= 'noData'; 
console.log(data); // 0

如果值不为真(0,' ',null, undefined, false, NaN),需要有条件地赋值时使用的OR操作符。

let data = undefined || 'noData';
console.log(data); // noData
data = null || 'noData';
console.log(data); // noData
data = '' || 'noData';
console.log(data); // noData
data = 0 || null || 'apple';
console.log(data); // apple
data ||= 'noData';
console.log(data); // apple