成为VIP
—
title: JS操作对象
—
## JS中的对象类型
* Array
* Plain Object （键值对对象）
* Map
* Set
* Function
* Date
* arraylike
## 1. 获取对象所有键值对的 `键` 、 `值` 、 `键：值`
* 使用方法 `Object.entries()` 方法得到 `键：值`js获取数组最后一个值，得到的值的类型为字符串。
“`js
const object2 = {
a: ‘somestring’,
b: 42
};
for (const [key, value] of Object.entries(object2)) {
console.log(`${key}: ${value}`);
}
// output:
// “a: somestring”
// “b: 42”
“`
* 使用方法 `Object.keys()` 得到一个由键名组成的数组
:::tip
Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
Object.keys( ) 会返回一个数组，数组中是这个对象的key值列表，所以只要Object.keys(a)[0]， 就可以得只包含一个键值对的key值。
:::
“`js
// simple array
var arr = [‘a’, ‘b’, ‘c’];
console.log(Object.keys(arr)); // console: [‘0’, ‘1’, ‘2’]
// array like object
var obj = { ‘first’: ‘a’, ‘second’: ‘b’, ‘three’: ‘c’ };
console.log(Object.keys(obj)); // console: [‘first’, ‘second’, ‘three’]
“`
::: tip
数组也是对象的一种，所以Object.keys(arr)可以对其操作。
:::
* 使用方法 `Object.values()` 得到一个由键值组成的数组
“`js
var obj1 = { foo: ‘bar’, baz: 42 };
console.log(Object.values(obj1)); // [‘bar’, 42]
“`
## 2. 判断对象中所有属性的属性值是否为true
“`js
算法
“`
## 3. 删除对象中第一个、最后一个、指定的属性
“`js
算法
“`
## 4. 计算对象长度&获取对象属性的个数
* 使用for循环遍历
“`js
var obj = {
key1: 123,
key2: ”,
key3: 123,
}
var count = 0;
for (var i in obj) {
count++;
}
console.log(count) //3
“`
* 优化，通过hasOwnProperty判断是否是对象自身可枚举的属性
“`js
var obj = {
key1: 123,
key2: ”,
key3: 123,
}
var count = 0;
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
count++;
}
}
console.log(count) //3
“`
:::tip 也可这样计算
* 通过Object.keys()获取对象可枚举属性所组成的数组js获取数组最后一个值，并通过length获取对象长度
“`js
var obj = {“c1″:1,”c2”:2};
var arr = Object.keys(obj);
var len = arr.length;
console.log(len);//结果为2
“`
:::
## 5. 计算包含空对象对象数组的长度
在 `由对象组成的数组` 里，`{}` 是占数组长度的。
:::code-group
“`js [对象数组长度]
const Xarray = [{
key1: 123,
key2: ”,
key3: 123,
},
{
key1: null,
key2: 123,
key3: 123,
},
{
//这个对象是空的，但是它占用长度
},
{
key1: 123,
key2: 123,
key3: 123,
},
]
console.log(Xarray.length) //4
“`
“`js [其他类型元素数组长度]
const Xarray = [
”,
null,
0,
NaN,
undefined
]
console.log(Xarray.length) //？
“`
:::
## 6. 判断并去除对象中的空值
去空值，空值有 `”` 、 `0` 、 `NaN` 、 `null` 、 `undefined` 的表现方式。
以一个键值对对象数组为例子，删除以下各种情况中的空值。
“`js {3-5,8-10,13}
[
{
key1:123,
key2:”, //键值对的键值为空字符串，或者其他东西
key3:123,
},
{
key1:null, //键值对的键值为null
key2:123,
key3:123,
},
{
//这个对象是空的
},
{
key1:123, //这个对象看起来正常
key2:123,
key3:123,
},
]
“`
算法
“`js
//去掉对象数组中的空值
//也去除数组中空对象
//下面这个是直接不显示。
function distinctArrObj(arr) {
var MyShow = (typeof arr != “object”) ? [arr] : arr //确保参数总是数组
for (let i = 0; i < MyShow.length; i++) {
// 去掉对象某个属性的值为null、空的对象
// 去掉整个对象为空的对象
if (MyShow[i].name == null || MyShow[i].name == “” || JSON.stringify(MyShow[i]) == “{}”) {
MyShow.splice(i, 1);
i = i – 1;
}
}
return MyShow;
}
var arr3 = [{
name: ‘一个属性值是空的字符串，一个对象是空的’,
age: 18
},
{
name: ”, //空字符串
age: 19
},
{
//空对象
},
{
name: null, //空属性值
age: 19
},
]
console.log(arr3)
console.log(arr3.length)
console.log(distinctArrObj(arr3))
console.log(‘去掉空对象之后的长度：’ + distinctArrObj(arr3).length)
“`
## 7. 根据键值查找对象中的键值对并操作
* 找到键名为 `功夫熊猫` 的键值对，输出它的键名
:::code-group
“`js [方案一]
var OriginObject = {
‘001’: ‘功夫熊猫’,// [!code focus]
‘key’: 100,
‘002’: ‘功夫熊猫’,// [!code focus]
‘003’: ‘流浪地球’,
‘003’: ‘重复’,
‘004’: null,
}
var targetValue = ‘功夫熊猫’
for (var key in OriginObject) {
if (OriginObject[key] == targetValue) {
console.log(key)
}
}
“`
“`js [方案二]
var OriginObject = {
‘001’: ‘功夫熊猫’,// [!code focus]
‘key’: 100,
‘002’: ‘功夫熊猫’,// [!code focus]
‘003’: ‘流浪地球’,
‘003’: ‘重复’,
‘004’: null,
}
var targetValue = ‘功夫熊猫’
var getObjectKey = (OriginObject, targetValue) => {
return OriginObject.keys(OriginObject).find(targetValue => OriginObject[targetValue]== targetValue);
};
console.log(getObjectKey())
“`
:::
* 根据键值查找对象中的键值对，删除该键值对
“`js
OriginObject.forEach((value,index)=>{
if(value.targetValue==targetValue){
OriginObject.splice(index,1) //这里也可以进行替换键值操作，或者替换整个键值对
}
})
“`
* 根据键值查找对象中的键值对，将该键值对的键名更换为指定新键名
“`js
for(var key in OriginObject){
if(OriginObject[key]==targetValue){
// 名操作，注意更换的是键名而不是键值
}
}
“`
* 根据键值查找对象中的键值对，将该键值对的键与值反转
“`js
for(var key in OriginObject){
if(OriginObject[key]==targetValue){
反转操作
}
}
“`
## 8. 判断两个对象是否相等
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
