js对象转数组的方法(3种JavaScript对象转数组的方法)

我们在项目开发的时候,有时需要将js对象转换为数组,下面钦钦技术栈给大家具体演示一下怎么转换,主要是介绍一些常用和3种JavaScript对象转数组的方法。

3种JavaScript对象转数组的方法
3种JavaScript对象转数组的方法

比如JavaScript对象如下:

let obj = {
  'name': '钦钦技术栈',
  'url': 'https://www.qin1qin.com',
  'des': '专注技术栈',
};

这里只需要它的值,我们需要转换的数组形式如:

方式一:Object.values

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

let arr = Object.values(obj); //对象转化为数组

ps:如果只需要返回键作为数组,可以使用Object.keys()的方式,所以结合Map,也可以实现:

let arr=Object.keys(obj).map(function(i){return obj[i]}); //对象转化为数组

方式二:循环

可以直接利用循环,如for in或者forEach()等:

var arr = []; //定义数组
for (var i in obj) {
    arr.push(obj[i]); 
}

方式三:Array.from

Array.from() 方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

var arr = Array.from(Object.values(obj),x=>x);

js对象转换为数组的其他两种方法

1、Object.values(obj)

var obj = {
    length: 3,
    age:18
}
var arrs = Object.values(obj)
console.log(arrs); //[ 3, 18 ]

2、for-in

var obj = {
    length: 3,
    age:18
}
var arrs =[]
for(key in obj){
  console.log(key,'key');
  //length key
  //age key
  arrs.push(obj[key])
}
console.log(arrs); //[ 3, 18 ]

js对象转数组函数splice

数组对象下的API:

所有API之前都需要arr.调用此API。除了2个增加2个删除1个倒叙和splice,其他的都不改变自身,返回一个值。

toString():将数组返回为字符串

join():将数组返回为字符串,参数可替换,逗号。如果不加参数则和toSting一样

push():在数组尾部增加一个元素,返回数组长度

unshift():在数组头部增加一个元素,返回数组长度

pop():在数组尾部删除一个元素,返回数组长度

shift():在数组头部删除一个元素,返回数组长度

concat():合并数组,参数为要合并的数组

splice():删除、替换、插入元素。参一:开始索引值,参二:要操作元素的个数,参三:替换/增加的元素(可不加)。返回改动的元素

slice():返回数组一部分

reverse():颠倒数组

sort():将数组排序 a-b升序 b-a降序

indexOf():查询数组中是否存在某个元素,有返回第一次出现的索引值,没有返回-1

reduce():累运算元素,返回累运算后的结果

forEach():遍历数组,没有返回值

filter():过滤元素,返回满足条件的元素

find():查找数组中是否有满足条件的元素,有返回查询到的结果,没有返回undefined

findIndex():查找数组中是否有满足条件的元素,有的话返回满足条件的索引值,没有返回-1

map():重组数组,返回经过操作后的元素

some():检查数组中是否存在满足条件的元素,满足返回true,不满足返回false

Array.isArray():判定参数是否为数组,是返回true,不是返回false

Array.from():将类数组转为真数组,类数组不能调用数组下的API

splice()的用法:

splice(startIndex,length,item)

参数一:开始的索引值

参数二:要操作元素的个数

参数三:替换的元素(可不加)。

注意:splice()改变的是数组本身,返回的是改动的元素

删除startIndex后指定个数的元素

splice(startIndex,length)删除从startIndex起后面的length个元素

 var arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.splice(0,2) // 删除startIndex起后面的两个元素
console.log(arr); // [2, 3, 4, 5, 6, 7, 8, 9, 10]

删除startIndex后的所有元素

splice(startIndex)删除从startIndex起后面的所有元素包括startIndex本身

var arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.splice(2) // 删除从startIndex起后面的所有元素包括startIndex本身
console.log(arr); // [0, 1]

在指定位置插入元素

splice(startIndex,0,item)在startIndex前插入item

var arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.splice(1,0,99) // 在startIndex前插入元素
console.log(arr); // [0, 99, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

替换指定的元素

splice(startIndex,1,item)将startIndex替换为item

splice(startIndex,length,item)如果length大于1,则删除startIndex后的length个元素,然后插入一个新元素。

var arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.splice(0,1,99) // 将startIndex替换为item
console.log(arr); // [99, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr = [0,1,2,3,4,5,6,7,8,9,10];
arr.splice(0,2,99) // 如果length大于1,则删除startIndex后的length个元素,然后插入一个新元素
console.log(arr); // [99, 2, 3, 4, 5, 6, 7, 8, 9, 10]

版权声明:本文(即:原文链接:https://www.qin1qin.com/catagory/124/)内容由互联网用户自发投稿贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 630367839@qq.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022-06-18 11:39:45
下一篇 2022-06-19 2:34:51

软件定制开发公司

相关阅读

发表回复

登录后才能评论
通知:禁止投稿所有关于虚拟货币,币圈类相关文章,发现立即永久封锁账户ID!