liang14658fox

Appearance

一、 遍历对象 ​

1.1 通过遍历计算对象的长度 ​

  1. 使用for循环遍历
js
var obj = {
	key1: 123,
	key2: '',
	key3: 123,
}
var count = 0;
for (var i in obj) {
	count++;
}
console.log(count) //3
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
var obj = {
	key1: 123,
	key2: '',
	key3: 123,
}
var count = 0;	
for (var i in obj) {
	if (obj.hasOwnProperty(i)) {
		count++;
	}
}
console.log(count) //3
  1. 通过Object.keys()获取对象可枚举属性所组成的数组，并通过length获取对象长度
js
var obj = {"c1":1,"c2":2};
var arr = Object.keys(obj);
var len = arr.length;
console.log(len);//结果为2
var obj = {"c1":1,"c2":2};
var arr = Object.keys(obj);
var len = arr.length;
console.log(len);//结果为2

1.2 通过遍历判断对象中所有属性的属性值是否为true ​

js
let TestObj = {
    name1 : true,
    name2 : true,
    name3 : true
}
let TestObj_2 = {
    name1 : true,
    name2 : true,
    name3 : false
}
function judgeObj(obj){
    let isTrue = true
    for (let i in obj) {
        if (obj[i] === false) {
            isTrue = false
        }
    }
    return isTrue
}
console.log(judgeObj(TestObj)) // true
console.log(judgeObj(TestObj_2)) // false
let TestObj = {
    name1 : true,
    name2 : true,
    name3 : true
}
let TestObj_2 = {
    name1 : true,
    name2 : true,
    name3 : false
}
function judgeObj(obj){
    let isTrue = true
    for (let i in obj) {
        if (obj[i] === false) {
            isTrue = false
        }
    }
    return isTrue
}
console.log(judgeObj(TestObj)) // true
console.log(judgeObj(TestObj_2)) // false

1.3 遍历对象 ​

我们一般都用 for 循环去遍历一个数组

js
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"
js
const obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
const obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

INFO

现在我们可以用 for...of 遍历值，使用 for...in 遍历索引

二、 对象之间的操作 ​

2.1 合并两个对象 ​

js
let arr1 = {
	a:1,
	b:2,
	c:3
};
let arr2 = {
	d:4,
	e:5,
	a:6
};
//方法一 拓展运算符，后面相同的属性覆盖前一个
let arr3={...arr1,...arr2};

//方法二 Object.assign()，后面相同的属性覆盖前一个
let arr3=Object.assign(arr1,arr2);

//方法三 Object.keys()，相同的属性只取第一个
Object.keys(arr1).forEach(key => {
	arr2[key] = arr1[key]
})
let arr1 = {
	a:1,
	b:2,
	c:3
};
let arr2 = {
	d:4,
	e:5,
	a:6
};
//方法一 拓展运算符，后面相同的属性覆盖前一个
let arr3={...arr1,...arr2};

//方法二 Object.assign()，后面相同的属性覆盖前一个
let arr3=Object.assign(arr1,arr2);

//方法三 Object.keys()，相同的属性只取第一个
Object.keys(arr1).forEach(key => {
	arr2[key] = arr1[key]
})

2.2 合并多个对象 ​

js

三、访问对象 ​

3.1 获得属性的键值 ​

js
let obj = {
    first: '1',
    second: '2',
    third: '3',
    1: '一',
    '2': '二'
}

console.log(obj['first'], obj['2']) // 对象名['属性名']
console.log(obj[1]) // 对象名[属性名（键值对的键名为数字类型）]
console.log(obj.second) // 对象名.属性名
// console.log(obj.1) // 报错！
let obj = {
    first: '1',
    second: '2',
    third: '3',
    1: '一',
    '2': '二'
}

console.log(obj['first'], obj['2']) // 对象名['属性名']
console.log(obj[1]) // 对象名[属性名（键值对的键名为数字类型）]
console.log(obj.second) // 对象名.属性名
// console.log(obj.1) // 报错！

3.2 获得属性的键名 ​

js
for (let key in Obj) {
  console.log(key)
}
for (let key in Obj) {
  console.log(key)
}

3.3 根据键值找到对应键值对的键名 ​

js
let obj = {
    name: '孙义和',
    age: 18,
    sex: '男',
    number: '201811050301',
    id: '201811050301'
}
// 对象的键名唯一但是键值不唯一，所以这里输出一个数组
function findKeyByValue(value, obj) {
    let keyArr = []
    for (let key in obj) {
        if (obj.hasOwnProperty(key) && obj[key] === value) {
            keyArr.push(key);
        }
    }
    return keyArr
}

console.log(findKeyByValue('孙义和',obj))
let obj = {
    name: '孙义和',
    age: 18,
    sex: '男',
    number: '201811050301',
    id: '201811050301'
}
// 对象的键名唯一但是键值不唯一，所以这里输出一个数组
function findKeyByValue(value, obj) {
    let keyArr = []
    for (let key in obj) {
        if (obj.hasOwnProperty(key) && obj[key] === value) {
            keyArr.push(key);
        }
    }
    return keyArr
}

console.log(findKeyByValue('孙义和',obj))

后续可以根据得到的键名数组，进行删除、更改键名、键值等操作

3.4 获得对象的第一个属性的键/值 ​

获取obj对象第一个属性的键

js
var obj = { name: "张三", city: "北京" };

//获取obj对象第一个属性的键（方法1）
console.log(Object.keys(obj)[0]); // name

//获取obj对象第一个属性的键（方法2）
var fistKey = null;
for (let key in obj) {
  fistKey = key;
  break;
}
console.log(fistKey); // name
var obj = { name: "张三", city: "北京" };

//获取obj对象第一个属性的键（方法1）
console.log(Object.keys(obj)[0]); // name

//获取obj对象第一个属性的键（方法2）
var fistKey = null;
for (let key in obj) {
  fistKey = key;
  break;
}
console.log(fistKey); // name

获取obj对象第一个属性的值

js
var obj = { name: "张三", city: "北京" };

//获取obj对象第一个属性的值（方法1）
console.log(Object.values(obj)[0]); // 张三

//获取obj对象第一个属性的值（方法2）
var val = null;
for (let key in obj) {
  val = obj[key];
  break;
}
console.log(val); // 张三
var obj = { name: "张三", city: "北京" };

//获取obj对象第一个属性的值（方法1）
console.log(Object.values(obj)[0]); // 张三

//获取obj对象第一个属性的值（方法2）
var val = null;
for (let key in obj) {
  val = obj[key];
  break;
}
console.log(val); // 张三

INFO

如何获得对象第N个属性？

JavaScript中Object并没有提供length的方法。

但是可以通过Object.keys转换成数组。

Object.keys() 方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。

想获取第N个属性直接使用返回的数组索引找到对应元素即可

js
// JS获取对象的第N个值
obj[Object.keys(obj)[下标]]
// JS获取对象的第N个值
obj[Object.keys(obj)[下标]]

四、查找 ​

4.1 判断一个对象中是否存在某个键名 ​

js
let obj = {
    id:'907',
    age:19,
    school:'青岛理工大学'
}
console.log('name' in obj) //false
console.log('age' in obj) // true
let obj = {
    id:'907',
    age:19,
    school:'青岛理工大学'
}
console.log('name' in obj) //false
console.log('age' in obj) // true

4.2 根据键值查找对象的属性 ​

js
//创建一个方法，返回value值对应的key
function findKey (objName,value, compare = (a, b) => a === b) {
  return Object.keys(objName).find(k => compare(objName[k], value))
}

//新建一个对象
var nameMap = {
  'Afghanistan':'阿富汗',
  'Angola':'安哥拉',
  'Albania':'阿尔巴尼亚'，
  'Argentina':'阿根廷',
  'Armenia':'亚美尼亚',
}

findKey(nameMap,'阿富汗')  //返回结果为：Afghanistan
//创建一个方法，返回value值对应的key
function findKey (objName,value, compare = (a, b) => a === b) {
  return Object.keys(objName).find(k => compare(objName[k], value))
}

//新建一个对象
var nameMap = {
  'Afghanistan':'阿富汗',
  'Angola':'安哥拉',
  'Albania':'阿尔巴尼亚'，
  'Argentina':'阿根廷',
  'Armenia':'亚美尼亚',
}

findKey(nameMap,'阿富汗')  //返回结果为：Afghanistan

4.3 删除对象中的属性 ​

js
delete object[key]; 
// or
delete object.key
delete object[key]; 
// or
delete object.key
  1. 使用 delete
js
let obj = {
	name: '白小仙',
	age: 16,
	message: '御狐之绊',
	time: '2023-11-11'
}
delete obj['message']
console.log(obj)
let obj = {
	name: '白小仙',
	age: 16,
	message: '御狐之绊',
	time: '2023-11-11'
}
delete obj['message']
console.log(obj)

WARNING

删除对象的自身属性 如果键被删除，返回true；如果键不存在，返回false。

  1. 使用对象解构

4.4 根据键值删除对象的属性 ​

js
function findKey(objName, value, compare = (a, b) => a === b) {
	return Object.keys(objName).find(k => compare(objName[k], value))
}
				
let obj = {
	name: '璨璨',
	age: 18,
	address: '聊城'
}
			
delete obj[findKey(obj, '聊城')]
console.log(obj)
function findKey(objName, value, compare = (a, b) => a === b) {
	return Object.keys(objName).find(k => compare(objName[k], value))
}
				
let obj = {
	name: '璨璨',
	age: 18,
	address: '聊城'
}
			
delete obj[findKey(obj, '聊城')]
console.log(obj)

五、操作对象 ​

5.1 赋值简化 ​

如果变量名和对象的属性名相同，就不用写键：值的形式，直接写变量名就行

js
let firstName = 'Amitav'
let lastName = 'Mishra'

// 常规写法
let obj = { firstName: firstName, lastName: lastName }

// 简写
let obj = { firstName, lastName }
let firstName = 'Amitav'
let lastName = 'Mishra'

// 常规写法
let obj = { firstName: firstName, lastName: lastName }

// 简写
let obj = { firstName, lastName }

5.2 对象深拷贝 ​

js
let obj = { x: 20, y: { z: 30 } }

// 常规写法
const makeDeepClone = (obj) => {
  let newObject = {}
  Object.keys(obj).map((key) => {
    if (typeof obj[key] === 'object') {
      newObject[key] = makeDeepClone(obj[key])
    } else {
      newObject[key] = obj[key]
    }
  })
  return newObject
}
const cloneObj = makeDeepClone(obj)

// 属性值不含 function, undefined 或者 NaN 时
const cloneObj = JSON.parse(JSON.stringify(obj))

// 也可以用展开运算符
let obj = { x: 20, y: 'hello' }
const cloneObj = { ...obj }
let obj = { x: 20, y: { z: 30 } }

// 常规写法
const makeDeepClone = (obj) => {
  let newObject = {}
  Object.keys(obj).map((key) => {
    if (typeof obj[key] === 'object') {
      newObject[key] = makeDeepClone(obj[key])
    } else {
      newObject[key] = obj[key]
    }
  })
  return newObject
}
const cloneObj = makeDeepClone(obj)

// 属性值不含 function, undefined 或者 NaN 时
const cloneObj = JSON.parse(JSON.stringify(obj))

// 也可以用展开运算符
let obj = { x: 20, y: 'hello' }
const cloneObj = { ...obj }

5.3 深拷贝补充 ​

除了利用 JSON 的 API，还有更新的深拷贝对象的 structuredClone API。 但要注意，并不是在所有的浏览器中都支持。

js
structuredClone(obj)
structuredClone(obj)

PS：深拷贝遇到正则或者undefined是不会被拷贝的，JSON API 只能拷贝 Array 和 Object 这两种复合类型，其他的复合类型都会丢失。 省事的话建议使用 lodash 的cloneDeep 函数。

5.4 判断对象是否为空 ​

Reflect.ownKeys 方法返回一个由目标对象自身的属性组成的数组，它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))，示例如下：

js
const a = Symbol()
const obj1 = {
  [a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {
  value: 1,
  enumerable: false
})
const obj4 = {}

console.log(Reflect.ownKeys(obj1).length === 0)  // false
console.log(Reflect.ownKeys(obj2).length === 0)  // false
console.log(Reflect.ownKeys(obj3).length === 0)  // false
console.log(Reflect.ownKeys(obj4).length === 0)  // true
const a = Symbol()
const obj1 = {
  [a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {
  value: 1,
  enumerable: false
})
const obj4 = {}

console.log(Reflect.ownKeys(obj1).length === 0)  // false
console.log(Reflect.ownKeys(obj2).length === 0)  // false
console.log(Reflect.ownKeys(obj3).length === 0)  // false
console.log(Reflect.ownKeys(obj4).length === 0)  // true

5.5 判断两个对象是否相等 ​

判断两个Object是否相等 ​

判断两个对象是否相等，这两个对象的值只能是数字或字符串

js
function objEqual(obj1, obj2) {
    const keysArr1 = Object.keys(obj1)
    const keysArr2 = Object.keys(obj2)
    if (keysArr1.length !== keysArr2.length)
        return false
    else if (keysArr1.length === 0 && keysArr2.length === 0)
        return true
    else
        return !keysArr1.some((key) => obj1[key] != obj2[key])
}
function objEqual(obj1, obj2) {
    const keysArr1 = Object.keys(obj1)
    const keysArr2 = Object.keys(obj2)
    if (keysArr1.length !== keysArr2.length)
        return false
    else if (keysArr1.length === 0 && keysArr2.length === 0)
        return true
    else
        return !keysArr1.some((key) => obj1[key] != obj2[key])
}