文章目录
- 1、创建对象的6种方式总结
- 一、new 操作符 + Object 创建对象
- 二、字面式创建对象
- 2、js 如何判断对象是否为空
- 3、获取对象长度
- 4、js 遍历对象的 5 种方法
- 1、for … in
- 2、Object.keys(obj)
- 3、Object.values(obj)
- 4、Object.getOwnPropertyNames(obj)
- 5、使用Reflect.ownKeys(obj)遍历
- 其他
- 5、js 判断对象是否包含某个属性
- 6、JS 中对象数组按照对象的某个属性进行排序
- 菜鸟封装
今天菜鸟整理自己的 goole 书签栏,突然发现,看着确实挺有用,通过标题大致就知道是什么内容,大致就知道了什么时候可以帮助菜鸟解决什么问题,没用的或者太简单的就删除了。
但是菜鸟转念一想,发现菜鸟脑子里是一点印象都没有,如果用的时候来找的话,找得到还好,找不到就像考试作弊,明明考试前还看见了,但是一到考试就找不到答案在哪里的感觉,心态直接炸了。
而且感觉一些基础,即使不好记,也真的需要记在脑子里,而不是书签里,所以就把几个菜鸟感觉很重要、很常用的,这里做个总结,俗话说:好记性不如烂笔头,也希望可以帮助读者!
1、创建对象的6种方式总结
这里菜鸟能力有限,就不班门弄斧了,建议看原文:创建对象的6种方式总结,其实不难,最常用的就是菜鸟下面介绍的两种种的第二种,直接用 {} 创建,顶天加一个构造函数类型 或者 混合模式,但是这两种现在一般用 class 代替了!
一、new 操作符 + Object 创建对象
var person = new Object();
person.name = "lisi";
person.age = 21;
person.family = ["lida","lier","wangwu"];
person.say = function(){
alert(this.name);
}
二、字面式创建对象
这里就是直接使用 {} 创建对象!
var person = {
name: "lisi",
age: 21,
family: ["lida","lier","wangwu"],
say: function(){
alert(this.name);
}
};
2、js 如何判断对象是否为空
function goodEmptyCheck(value) {
return value && Object.keys(value).length === 0 && value.constructor === Object;
}
至于为什么要这样写,建议看原文:JavaScript 中如何判断对象是否为空
菜鸟大致说一下,就是 value 是为了防止 undefined 、null 出现报错,而 Object.keys(value).length ,是很容易就想到的,就是判断对象是否为空的方法之一,Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组(for …, in 则会去原型链上找)。至于 value.constructor 是为了防止 js 内置的 9 个构造函数,创建的值也被搞成了空对象!
3、获取对象长度
上面的判断对象是否为空的里面有提到 Object.keys() 方法,这个方法也是获取对象长度的关键点!
var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'};
var arr = Object.keys(obj);
console.log(arr); // ['name','sex','age']
console.log(arr.length); //3
4、js 遍历对象的 5 种方法
1、for … in
循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性【不含Symbol属性】)
2、Object.keys(obj)
使用 Object.keys() 遍历 (返回一个数组,包括对象自身的【不含继承的】所有可枚举属性【不含Symbol属性】)
3、Object.values(obj)
该方法会返回一个包含对象自身可枚举属性值的数组,数组的顺序与通过 for…in 循环获取对象属性的顺序一致。需要注意的是,返回的数组中的属性值的顺序并不是严格按照对象中属性的定义顺序,而是根据 JavaScript 引擎的内部实现而定。
代码:
const obj = {
name: "sdja",
age: 23,
txt: "fasfas",
phone: "12313123",
};
let arr = Object.values(obj);
console.log(arr);
结果:
4、Object.getOwnPropertyNames(obj)
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性【不可枚举属性,需要自己定义
】)
const obj = {
a: 1,
b: 2,
[Symbol('c')]: 3
};
const propertyNames = Object.getOwnPropertyNames(obj);
console.log(propertyNames); // 输出: ["a", "b"]
如果想要获取 Symbol 属性,可以使用 Object.getOwnPropertySymbols() 方法。
5、使用Reflect.ownKeys(obj)遍历
返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举
其他
更多遍历就是和遍历数组一样,使用 forEach、for-of
5、js 判断对象是否包含某个属性
可以简单总结一下,如果我们只需判断对象有没有某个属性,使用 in 运算符就好了。而如果我们还要关心这个属性是不是自身属性,那么推荐 hasOwnProperty() 方法。
详见:JS 判断对象属性是否存在,判断是否包含某个属性,是否为自身属性
6、JS 中对象数组按照对象的某个属性进行排序
在 JavaScript 中,可以使用 Array.prototype.sort() 方法对对象数组按照对象的某个属性进行排序。sort() 方法会原地对数组进行排序,并返回排序后的数组。
假设有一个对象数组 arr,每个对象都包含一个属性 property,我们可以通过传入一个比较函数给 sort() 方法来实现按照 property 属性进行排序。
// 假设有一个对象数组
const arr = [
{ name: 'John', age: 30 },
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 35 }
];
// 按照 age 属性进行升序排序
arr.sort((a, b) => a.age - b.age);
console.log(arr);
// 输出:
// [
// { name: 'Alice', age: 25 },
// { name: 'John', age: 30 },
// { name: 'Bob', age: 35 }
// ]
// 按照 name 属性进行字母顺序排序(不区分大小写)
arr.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
console.log(arr);
// 输出:
// [
// { name: 'Alice', age: 25 },
// { name: 'Bob', age: 35 },
// { name: 'John', age: 30 }
// ]
菜鸟封装
这里是菜鸟做项目的时候封装的一个公共函数,是提供一个排序方式,让数组的某个属性名按照该方式排序的函数
/**
* 对象按什么属性名和排序方式排序
* @param {Array} arr 对象数组
* @param {*} propertyName 属性名
* @param {Array} order 排序方式
* @returns {Array}
*
*/
export const Objsort = (arr, propertyName, order) => {
return arr.sort((a, b) => {
const indexA = order.indexOf(a[propertyName]);
const indexB = order.indexOf(b[propertyName]);
return indexA - indexB;
});
};