Copie une partie des propriétés d'un objet à un autre objet

En or 2021-10-13 18:54:57
copie une partie des propri


Cet article a été impliqué dans「Le programme Nugget Star」,.Gagner un grand sac cadeau pour la création,Remise en question des incitatifs à la création.

D'abord, nous préférons deux objets, l'un est l'objet assignétargetObj,L'un est l'objet d'affectationoriginObj,Utilisez ces deux objets lors de l'affectation ci - dessous.

Méthode 1(Cycle de base)

La méthode de base est la boucle,ParforLe cycle, par exemple:

for(let key in targetObj) {
targetObj[key] = originObj[key]
}
Copier le Code

C'est l'usage le plus élémentaire,Pour les utilisateurs de n'importe quelle langue,Ceux qui connaissent la syntaxe circulaire l'utiliseront,Tout ce qu'on pense, c'est ce qu'on obtient,Bien compris..

Méthode 2(Déconstruction des tâches)

Supprimer les attributs de différence:HypothèsestargetObjOui.a、b、c、dQuatre attributs,originObjOui.a、b、cTrois attributs

let {d, ...targetObj} = originObj
Copier le Code

es6Déconstruction des tâches(Il faut déterminer si l'environnement soutientes6Syntaxe,Mais pour l'instant, il y a un soutien général,Le support par défaut pour l'ingénierie des cadres est passé àes5,Donc il n'y a pas besoin de s'inquiéter),Cette méthode s'applique à moins d'attributs de différence, Si les attributs de différence sont plus nombreux , Déconstruire l'assignation en utilisant la même méthode pour lister les attributs à assigner , Plus simple et plus clair .

Méthode IV(Fonction d'auto - exécution)

const targetObj = (({a, d, e}) => ({a, d, e}))(originObj)
Copier le Code

Cette méthode semble simple et atmosphérique ,Une ligne de code,Pas d'eau boueuse.En fait..., Cette méthode est un principe avec la méthode 3 pour déconstruire l'affectation , C'est juste une fonction qui porte , Le paramètre input est un objet , La valeur de retour est également un objet , Les propriétés des deux objets sont cohérentes .

Méthode V(PersonnalisationextendFonctions)

function extend(originObj) {
var obj = {},
keyAttr = Array.prototype.slice.call(arguments).slice(1);
keyAttr.forEach(function(val, index) {
if (val in obj) {
obj[val] = originObj[val]
}
})
return obj
}
targetObj = extend(originObj, 'key1', 'key2')
Copier le Code

Cette méthode utilise principalement arguments Objet pour obtenir les paramètres de la fonction .Injs Il n'est pas nécessaire d'indiquer explicitement le nom du paramètre ,Pour passer à traversarguments Obtenir les paramètres de la fonction ,Concernantarguments Pas de détails ici ,Mais attention,Par exemple:

var length = 10;
function fn() {
console.log(this.length);
}
var obj = {
method: function(fn) {
fn();
arguments[0]();
}
};
obj.method(fn, 1); Produits:10,2
Copier le Code

Il y en a ici.2Points à noter.fnDans la fonctionthisDirection de:

1.La première valeur est10,Ce qui a été faitmethod La première ligne à l'intérieur "fn() ",Ici.thisPointéwindow. Donc la valeur de sortie est définie pour la couche externe length.

2.La deuxième valeur est2,Ce qui a été faitmethod Deuxième ligne à l'intérieur "arguments[0] ()"(arguments[0] () => fn() ),Ici.thisCe qui a été faitargumentsCet objet, Donc la sortie est argumentsLongueur

En outre, une attention particulière doit être accordée au mode strict :

1 En mode strictarguments Comme un mot réservé , Donc si vous définissez arguments Variables et fonctions associées , Une erreur de syntaxe est signalée .

2 arguments Objet d'argument entrant en mode strict , Et immuable , C'est - à - dire qu'il ne peut pas passer à l'intérieur de la fonction arguments Pour modifier les valeurs des arguments .

3 Utilisation interditearguments.callee,caller, Vous ne pouvez pas obtenir vos propres références de cette façon à l'intérieur d'une fonction

Méthode V(reduceFonctions)

const pickFn = (originObj, keyArr) =>
keyArr.reduce((total, val) => (val in obj && (total[val] = obj[val]), total), {});
targetObj = pickFn(originObj, ['a', 'd', 'e'])
Copier le Code

La méthode utilise principalement reduceLa superposition de, Principalement recyclé .

Il y a encore beaucoup de scénarios dans le développement d'entreprise pour copier une partie des propriétés d'un objet à un autre , Un scénario courant est l'édition de la liste , En général, lors de l'édition des données de ligne de liste echo de données , Les données sont obtenues directement à partir de cette ligne , Et le champ de données de cette ligne est le champ de données du pop - up d'édition redondant , À ce stade, nous devons utiliser l'une de ces méthodes pour attribuer des attributs partiels .

版权声明
本文为[En or]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013185452922t.html

  1. 前端开发框架Vue中Vuex的使用原理分享
  2. vue-echarts初次体验
  3. 分享一些web前端开发好用的网站
  4. 每天读一点webpack-003
  5. react之组件生命周期
  6. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  7. SpringBoot Java后端实现okhttp3超时设置
  8. react之組件生命周期
  9. Cycle de vie des composants de React
  10. 使用Reactor将阻塞调用变为异步非阻塞
  11. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  12. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  13. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  14. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  15. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  16. 如何解决“Serverless”系统的冷启动问题
  17. BootstrapBlazor 模板安装
  18. BootstrapBlazor 模板安装
  19. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  20. 使用ESLint+Prettier来统一前端代码风格
  21. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  22. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  23. 使用elementui在完成项目中遇到的未知知识点2
  24. On the mechanism of webpack loader
  25. 云原生体系下 Serverless 弹性探索与实践
  26. vue开发技巧
  27. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  28. 致敬!再见了!LayUI !
  29. Vue安装和卸载
  30. Implement a flipped character with the transform attribute of CSS
  31. 你的第一个 Docker + React + Express 全栈应用
  32. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  33. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  34. 前端技巧-JS元编程ES6 symbol公开符号
  35. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  36. 前端推荐!10分钟带你了解Konva运行原理
  37. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  38. 零基础学习Web前端需要注意什么呢?
  39. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  40. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  41. JavaScript数组 几个常用方法
  42. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?
  43. 暢談this的四種綁定方式
  44. 2021最新Vue面试必胜宝典,大厂面试题解析!
  45. Quatre façons de lier ceci
  46. Préparation au développement de l'extension tagdown
  47. Intervieweur: Parlez - moi des flotteurs CSS
  48. Packaging the View Component Library with rollup
  49. Comment un composant enfant modifie les valeurs passées par le composant parent
  50. Résumé de l'API Express
  51. Optimisation de la structure du Code if else dans le projet
  52. Fonction magique pour résoudre le problème de la fonction maybe - - fonction either
  53. 新手学前端的方法是什么 自学前端该怎么规划
  54. 云原生体系下 Serverless 弹性探索与实践
  55. 如何全方位打造安全高效的HTTPS站点(一)
  56. "Liu Jing dit che 丨 point de vue" est - ce que Custom Road est un MpV digne de la terre?
  57. 从理念到LRU算法实现,起底未来React异步开发方式
  58. Compared with Volvo XC60, Lingke 09 goes out of the spa platform. What would you choose, regardless of the brand?
  59. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  60. 云原生体系下 Serverless 弹性探索与实践