iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js对象合并的4种方式与数组合并的4种方式
  • 937
分享到

js对象合并的4种方式与数组合并的4种方式

js对象合并js数组合并对象与数组合并 2022-11-13 18:11:51 937人浏览 薄情痞子
摘要

目录一、对象合并1、拓展运算符(...)2、Object.assign()3、递归赋值4、Jquery中的extend()二、数组合并1、扩展操作符2、使用array.conca&#

一、对象合并

1、拓展运算符(...)

ES6入门中是这样说的:

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let obj1 = {
    name: '陈伟停',
    gender: '男',
    hobby: '唱歌'
};
let obj2 = {
    name: '陈伟停',
    gender: '男',
    hobby: '跳舞',
    nationality: '中国'
};
 
let obj = {...obj1, ...obj2};
console.log(obj);  // { name: '陈伟停', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出:

  • 同名属性:合并,并且后边的(obj2)把前边的(obj1)覆盖。
  • 不同名属性:属性值不变,只合并。

注:第一级是深拷贝,第二级开始都是浅拷贝。

2、Object.assign()

MDN上是这样写的:

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

用于对象合并,写法如下: 

let obj = Object.assign({}, obj1, obj2);
console.log(obj);  // { name: '陈伟停', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出,效果与法一相同。 

注:第一级是深拷贝,第二级开始都是浅拷贝。

3、递归赋值

let obj = obj1;
for (var p in obj2){
    if(obj2.hasOwnProperty(p))
    obj[p] = obj2[p];
}
console.log(obj);  // { name: '陈伟停', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出,效果与法一相同。 类似于直接赋值增加属性

注:第一级是深拷贝,第二级开始都是浅拷贝

4、jquery中的extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

$.extend(obj1, obj2)  // 浅拷贝
$.extend(true, obj1, obj2)  // 深拷贝

二、数组合并

1、扩展操作符

使用es6语法的拓展运算符:这个方法也是创建一个新数组

var newArray = [...array,...elements]
console.log(newArray); // ["a", "b", 0, 1, 2]

2、使用array.concat()方法进行合并

使用concat方法:这个方法不是添加到现有数组,而是创建并返回一个新数组。

var array = ["a", "b"];
var elements = [0, 1, 2];
 
var newArray = array.concat(elements);
console.log(array); //['a', 'b']
console.log(newArray);// ["a", "b", 0, 1, 2]

3、关于Apply

使用Apply方法:这个方法是将数组各项添加到另一个数组当中,是一种改变原数组的方法

var array = ["a", "b"];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

4、array.push()方法进行合并

const heroes = ['Batman'];
 
heroes.push('Superman');
 
heroes; // ['Batman', 'Superman']
const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
 
heroes.push(...villains);
 
heroes; // ['Batman', 'Superman', 'Joker', 'Bane']

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: js对象合并的4种方式与数组合并的4种方式

本文链接: https://www.lsjlt.com/news/169325.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作