大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
先给个案例体验下
对于像这样的一个对象,把它转换成一个数组,我们在开发中应该会遇到过,
{‘未完成’:0, ‘已完成’:1, ‘待确认’:2, ‘已取消’:-1}转为[{“未完成”:0},{“已完成”:1},{“待确认”:2},{“已取消”:-1}]
我们首先想到的是把他们一个个循环遍历取出来,push到一个数组当中去
let obj1 = { '未完成': 0, '已完成': 1, '待确认': 2, '已取消': -1 },
arr1 = [];
for (let i in obj1) {
let linshiObj = {};
console.log(obj1[i]);
linshiObj[i] = obj1[i];
console.log(linshiObj[i])
arr1.push(linshiObj);
// arr1.push(obj1[i]);
}
console.log(arr1);
1.对象的获取值有两种方法
let obj2 = { name: "zjl" };
console.log(obj2.name); //常用
// console.log(obj1['未完成']);
console.log(obj2['name']);
2.类数组对象:
但是在项目开发中可能遇到的情况有很多,所以在这里就详细讲解了数组转对象的一些方法
这里所说的对象是类数组对象,什么是类数组对象呢,下面就先描述下;
类数组对象:
拥有length属性,其它属性(索引)为非负整数
不具有数组所具有的方法
常见的类数组有arguments和NodeList,
《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数
function isArrayLike(Ob) {
if (Ob && // o is not null, undefined, etc.
typeofObo === 'object' && // o is an object
isFinite(Ob.length) && // o.length is a finite number
Ob.length >= 0 && // o.length is non-negative
Ob.length === Math.floor(Ob.length) && // o.length is an integer
Ob.length < 4294967296) // o.length < 2^32
{
return true; // Then o is array-like
}
else {
return false; // Otherwise it is not
}
}
在这里解释下isFinite函数:isFinite() 函数用于检查其参数是否是无穷大。
如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。
3. 下面就来介绍下这几种方法
1.Array.prototype.slice.call(obj)
这种方法是借用了数组原型中的slice方法,返回一个数组。slice方法的内部实现:
Array.prototype.slice = function (start, end) {
let result = new Array();
start = start || 0;
end = end || this.length; //使用call之后this指向了类数组对象
for (let i = start; i < end; i++) {
result.push(this[i]);
}
return result;
}
通用的转换函数
var toArray = function (Ob) {
try {
return Array.prototype.slice.call(Ob);
} catch (e) {
var arr = [];
for (var i = 0, len = s.length; i < len; i++) {
arr[i] = s[i];
}
return arr;
}
}
let object1 = {
'0': 3,
'1': 13,
'2': 23,
'3': 33,
'length': 5,
'name': 330
}
console.log(toArray(object1) + ' ' + 'Array.prototype.slice.call(obj)');
2.2.Array.from()
Array.from()是ES6中新增的方法,可以将两类对象转为真正的数组:类数组对象和可遍历(iterable)对象(包括ES6新增的数据结构Set和Map);
方法可以将类数组对象和可迭代对象转换为数组。
类数组对象上文已提及,何为可迭代对象?
Array、Set、Map 和字符串都是可迭代对象(WeakMap / WeakSet 并不是可迭代对象)
字符串变成了可迭代对象,解决了编码的问题
这些对象都有默认的迭代器,即具有 Symbol.iterator 属性
可以用 for of 循环
所有通过生成器创建的迭代器都是可迭代对象
如document.getElementsByTagName(“div”) 返回的是可迭代对象但不是一个数组
Array.isArray(document.getElementsByTagName(‘div’)) 返回 false;
let object3 = {
'0': 3,
'1': 13,
'2': 23,
'3': 33,
};
function* createIterator(obj) {
for (let value in obj) {
yield obj[value];
};
};
let iterator = createIterator(object3); //
console.log(iterator);
let arr3 = Array.from(iterator);
console.log(Array.from(object3))// [3, 13, 23, 33]
// 默认情况下,开发者定义的对象都是不可迭代对象,但如果给 Symbol.iterator 属性添加一个生成器,则可以将其变为可迭代对象
obj[Symbol.iterator] = function* () {
for (let value in this) {
yield this[value]
}
}
let arr = Array.from(obj)
// [3, 13, 23, 33]
// 判断对象是否为可迭代对象的方法
typeof obj[Symbol.iterator] === 'function'
//把NodeList对象转换为数组,然后使用数组的forEach方法
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(p => {
console.log(p);
});
//只要是部署了Iterator接口的数据结构,Array.from都能将其转换为数组
Array.from('zjl');
3. 扩展运算符(…)
同样是ES6中新增的内容,扩展运算符(…)也可以将某些数据结构转为数组
3.1 arguments对象的转换
function foo() {
var args = [...arguments];
}
3.2
NodeList对象的转换
[...document.querySelectorAll('p')]
4.Object.values(obj)
默认情况下,开发者定义的对象都是不可迭代对象,但提供了返回迭代器的方法
entries()
values()
keys()
通过使用这些方法,可以返回相关的数组
与类数组对象需要对象有 length 值不同,Object.values(obj) 返回对象自身可枚举属性值的集
let object4 = {
'0': 3,
'1': 13,
'2': 23,
'3': 33
};
let array4 = Object.values(object4) // [3, 13, 23, 33]
let array41 = Object.keys(object4);//['0','1','2','3']
// let array42=Object.entries(object4);
// console.log(array4);
// console.log(array41);
// console.log(array42);
大概就是这些了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194219.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...