【JavaScript】对象的复制和引用处理方法 |
您所在的位置：网站首页 › js对象复制方法 › 【JavaScript】对象的复制和引用处理方法 |
|
JavaScript 把{}和[]都当作对象Object类型，在调用函数传递的参数中，对象Object只能被引用，不会深度拷贝，下面讲一些关于JavaScript对象的常用处理方法 1.数组对象JavaScript 有对数组对象的处理方法，参考如下代码 //创建一个九宫格数组 类似 3维数组 数组所有值用填充 let grids = new Array(9).fill(1); console.log('grids', grids) //将数组内重新填充 grids = grids.map((value,index) => value+index); // grids.forEach((value,index) => grids[index]=value+index); console.log('grids', grids) //将数组拼成一个字符串，用逗号分隔 let str = grids.join(','); // let str = grids.toString(); console.log('str', str); //将所有参数整理成数组 grids = Array.of('i',' ','l','o','v','e',' ','y','o','u'); str = grids.join(''); console.log('str', str); console.log('value => array', grids); //将字符串转换成数组 console.log('array', Array.from(str)); console.log('array', str.split('')); //过滤掉数组中的空格符 grids = grids.filter((value,index) => value.trim()!=''); console.log('array filter', grids); //判断数组中每项是否都符合条件 console.log('array space char', grids.every((value,index) => value!=' ')); //判断数组中某一项是否符合条件 console.log('array a space char', grids.some((value,index) => value==' ')); //按字母顺序排序 grids = grids.sort(); console.log('array sort', grids); //原数组 反向排序 grids.reverse(); console.log('array reverse', grids); //从数组索引起始处查找 符合条件的一条记录位置 console.log('array select where index', grids.indexOf('o')); console.log('array select where index', grids.findIndex((value,index) => value=='o')); //从数组索引末尾处查找 符合条件的一条记录位置 console.log('array select where index', grids.lastIndexOf('o')); //截取数组中的一段 console.log('array ', grids.slice(3,5)); //连接两个数组 console.log('array conncat', grids.concat([1,2,3])); //删除数组某项 grids.shift();//移除第一项 grids.pop();//移除最后一项 grids.splice(3,1);//移除第三个的一项 // grids.splice(3,1,'O');//替换第三个的一项 console.log('array ', grids); //添加数组项 grids.unshift('Y');//添加到第一项 grids.push('E');//添加到最后一项 console.log('array ', grids); 2.非数组对象关于非数组对象的处理，也可以叫JSON数据对象(数据结构中没有方法)，参考代码如下 //定义一个对象 let args = { a: 1, b: 3, c: [], d: {}, fun1: () => {} }; //获取对象的所有属性名和方法名 console.log('object keys', Object.keys(args)); //获取对象的所有属性值和方法（匿名方法） console.log('object values', Object.values(args)); //将对象的所有属性和方法通过键值对形式处理后返回 console.log('object entries', Object.entries(args)); //将JSON对象转换成字符串（其中方法类型被忽略） console.log('object => json string', JSON.stringify(args)); //将JSON格式字符串转换成JSON对象 try{ const json = `{"a":1,"b":3,"c":[],"d":{}}`; console.log('json string => object', JSON.parse(json)); }catch(err){ //如果字符串JSON格式有误，转换可能会失败，然后抛出异常错误 console.error(err) } 3.引用对象调用函数的时候，通过传递参数为对象的话，只能是传递对象的引用，参考如下代码 /** * 累加方法 * @params { Object | Array | Numbers } 参数可以是对象，数组，多个数字 * @return { Object | Number } 返回累加结果 * */ function add(){ if (arguments.length>0) { let args = arguments[0]; //判断对象类型 if (args instanceof Object) { //判断该对象是不是数组 if (args instanceof Array) { //计算数组中的所有值，遍历数组，前后两个项参与计算 return args.reduce((previous,current,args) => previous+current); } const { a, b } = args; args.c = a+b; return args; } let a = arguments[0] instanceof Number ? 0 : ''; for(let i=0; i source 非覆盖 只拷贝了数值和引用 不算全部复制 Object.assign(target,source); console.log('source',source); console.log('target',target); target.b = 'cc'; target.c.a = 12;//这里是引用的 同时改变了source和target的值 console.log('source',source); console.log('target',target);JavaScript 没有自带的深度拷贝函数，下面通过自定义copyAll()方法以供调用，代码如下 /** * target => source 深度拷贝（全部复制过来） * @param { Object } target 当前对象 * @param { Object } source 原对象 * @param { Boolean } isReplace 是否覆盖 * @return { Object } 返回拷贝出的对象 * */ function copyAll(target,source,isReplace) { let isArray = source instanceof Array; if (target==undefined){ if (isArray) target=[]; else target={}; } for(let i in source){ if (isArray && i=='length') continue; if (isReplace && target[i]!=undefined) continue; switch(typeof source[i]){ case 'object': target[i]=copyAll(target[i],source[i]); break; default: target[i]=source[i]; } } return target; } //调用例子 let source = { a:1, b:'bb', c:{ a:10, b:'bbb', c:{ a:12 }, d:[1,2,3] } }; let target = { a:3 }; copyAll(target,source,true);//深拷贝 target.b = 'cc'; target.c.a = 24;//以下 source的值 不受影响 target.c.c = 48; target.c.d[1] = 33; console.log('source',source); console.log('target',target); 5.注意事项💡小提示 尝试修改对象值，要注意被其它引用后修改的影响，尽量用深度拷贝文章中提到对象的部分处理方法，JavaScript需要E5以上才支持到此结束，如阅读中有遇到什么问题，请在结尾评论处留言，ヾ(￣▽￣)ByeBye |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |