Maison >interface Web >js tutoriel >Comment ajouter, modifier et supprimer dynamiquement des tableaux JS et des objets JSON

Comment ajouter, modifier et supprimer dynamiquement des tableaux JS et des objets JSON

php中世界最好的语言original: 2018-05-28 09:44:514327parcourir

Cette fois je vous apporte quelles sont les précautionsVoici des cas pratiques. z

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>javascript里面的数组，json对象，动态添加，修改，删除示例</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var a = JSON.parse("{\"title\":\"\",\"data\":[]}");
var b = JSON.parse("{\"id\":\"2\"}");
var c = JSON.parse("{\"id\":\"3\"}");
var d = JSON.parse("{\"id\":\"4\"}");
var e = JSON.parse("{\"id\":\"5\"}");
var f = JSON.parse("{\"id\":\"6\"}");
function myObjectPush() {
debugger;
/* javascript里面的数组，json对象，动态添加，修改，
删除示例 只要适合Javascript的方法都是可以用在JSON对象的数组中的！
所以还有另外的方法splice( )进行crud操作！
*/
//增加属性
$(a).attr("id", "1");
//增加子对象
a.data.push(b);//数组最后加一条记录
a.data.push(c);
a.data.push(d);
a.data.unshift(d);//数组最前面加一条记录
//修改子对象及属性
a.title = "这是json名字";
//删除子对象
//json的删除有很多种，直接用过 delete json对象方式:
delete a.data[1];
a.data.pop(); //删除最后一项
a.data.shift(); //删除第一项
a.data.splice(0, 1); //删除指定子对象，参数：开始位置,删除个数
//替换不删除
a.data.splice(1, 0, e, f);//开始位置,删除个数,插入对象
//替换并删除 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象
console.log(a);
}
</script>
</head>
<body onload="myObjectPush()">
</body>
</html>

Résultats en cours d'exécution :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment utiliser le webpack Vue-cli pour créer automatiquement des rem pour les terminaux mobiles

Comment utiliser React Native pour créer un composant de bouton flottant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'instance de cache de composant spécifiée par vueArticle suivant：Explication détaillée de l'instance de cache de composant spécifiée par vue

Articles Liés

Voir plus