js 对象合并和数组合并

hykeda1年前JS541

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

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() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

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']



相关文章

WebAPP开发——H5标签audio(属性和API事件)

WebAPP开发——H5标签audio(属性和API事件)

audio支持的格式audio 定义音频 格式:mp3 wav oggmp3所有浏览器兼容ogg safari不支持wav 都支持js 能帮助生成audio对象 new Audio(); 等同于HTM...

介绍几款有用的图表插件

大家在开发一些系统的时候会用到很多统计的图表,我在做统计报表的时候用过挺多图表插件的,现在推荐大家几款优秀、稳定、可靠、大公司开发的图表体统。 1、Highcharts Highchart...

20个js工具函数助力高效开发

前言日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率。1、校验数据类型export const typeOf...

生成随机图片

function getMockImagesURL() { let arr = [200, 250, 300, 350, 400, 450]; const width = arr[...

js获取键盘事件keyCode都是229原因

今天在操作空格键和enter键时出现键盘keyCode值都是229,导致特定的键盘事件没有触发。经过查询,原来是因为在中文输入法下,使用 keydown 事件时,绝大部分的键盘ASCII码值都是229...

Javascript知识点

1、将1,2,3,4,5转成一,二,三......export function transfromNumber(number){   const ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。