JavaScript:JSON、三种包装类

JOSN:

我们希望可以将一个对象在不同的语言中进行传递,

以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式

JSON(JavaScript Object Notation)

  • JS的对象表示法

  • JSON实际上就是一个字符串,它的语法格式和JS对象的语法基本上是一致

通过JSON表示的对象可以在任意的语言中使用

  • JSON的语法和JS对象的语法基本一样,不同点在于,

JSON中属性名必须加引号,而且必须是双引号

JSON中的字符串也必须使用双引号

最后一个属性后边不能再有逗号

  • JSON的类型:

JSON对象 {}

JSON数组 []

  • JSON所支持的属性的类型:

数字

字符串(使用双引号)

布尔值

空值(null)

对象

数组

IE7 及浏览器7以下不支持

var obj = {name:"孙悟空", age:18, gender:"男"};

var json = '{"name":"孙悟空", "age":18, "gender":"男", "haha":null, "abc":{}, "bcd":[]}';

var jsonArr = '[1, 2, 3]';

// console.log(typeof json);

// console.log(typeof jsonArr);

/*

JSON 工具类,用来操作JSON数据的

JSON.parse() 用来将一个JSON转换为JS对象(数组)

JSON.stringify() 用来将一个JS对象转换为一个JSON字符串

*/

// 将一个JSON字符串转换为JS对象

// var o = JSON.parse(json);

// var arr = JSON.parse(jsonArr);

// json = '{"name":"孙悟空", "age":18, "gender":"男"}';

// JSON.parse(json);

var arr = [

{name:"孙悟空", age:18, gender:"男"},

{name:'猪八戒', age:28, gender:'男'},

{name:'沙和尚', age:38, gender:'男'}

];

var arrStr = JSON.stringify(arr);

// console.log(arrStr);

var arr2 = [{name:'孙悟空'},{name:'猪八戒'}];

// var arr3 = arr2.slice(); 浅复制

// arr3[0].name = '哈哈';

// console.log(arr2[0].name);

// 可以通过JSON来完成对象的深复制

var arr3 = JSON.parse(JSON.stringify(arr2));

arr3[0].name = '哈哈';

console.log(arr2[0].name);

三种包装类:

在JS中,给我们提供了三个包装类:

Number()

String()

Boolean()

  • 这三个包装类可以用于创建出一个基本数据类型的对象

  • 可以通过 new Number()、 new String()、 new Boolean()

来创建一个基本数据的对象,但是千万不要这么用

  • 当我们去调用一个基本数据类型的属性或方法时,由于值中并不具备属性和方法,

所有JS的引擎会临时通过包装类来将其转换为对象,然后通过该对象调用属性或方法。

  • 这样就意味着,可以直接通过值来调用其包装类的方法

    var a = 10; // 基本数据类型的值

    var b = {}; // 是一个对象

    // b.name = '孙悟空';

    // b.sayHello = function () {

    // console.log('哈哈哈哈~~');

    // };

    // var result = a.toString();

    // console.log(result);

    a.name = 'haha';

    a.age = 18;

    console.log(a.name, a.age);

    /*

    在JS中,给我们提供了三个包装类:

    Number()

    String()

    Boolean()

    • 这三个包装类可以用于创建出一个基本数据类型的对象

    • 可以通过 new Number()、 new String()、 new Boolean()

    来创建一个基本数据的对象,但是千万不要这么用

    • 当我们去调用一个基本数据类型的属性或方法时,由于值中并不具备属性和方法,

    所有JS的引擎会临时通过包装类来将其转换为对象,然后通过该对象调用属性或方法。

    • 这样就意味着,可以直接通过值来调用其包装类的方法

    */

    var c = 10; //基本数据类型的10(原始值)

    // 对象类型的数字具有原始值数字的所有功能,并且它可以直接存储属性和方法

    // 但是在开发中,我们绝对绝对不要这么使用

    var d = new Number(10); // 对象类型的10

    // console.log(d+''); //10

    // d.name = '哈哈';

    // d.age = 18;

    // console.log(d.name, d.age);

    // console.log(d + 33);

    var f = new Number(33);

    var g = new Number(33);

    // 比较对象形式基本类型数据时,比较的是对象的内存地址

    // console.log(f == g);

    // console.log(typeof f);

    var str = 'hello';

    var reuslt = str.endsWith('o');

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

相关推荐
monkey_meng2 分钟前
【Rust中的项目管理】
开发语言·rust·源代码管理
Eric_见嘉2 分钟前
真的能无限试(白)用(嫖)cursor 吗?
前端·visual studio code
喜欢打篮球的普通人4 分钟前
rust高级特征
开发语言·后端·rust
ModelBulider22 分钟前
十三、注解配置SpringMVC
java·开发语言·数据库·sql·mysql
V搜xhliang024631 分钟前
基于深度学习的地物类型的提取
开发语言·人工智能·python·深度学习·神经网络·学习·conda
DK七七32 分钟前
多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
开发语言·前端·微信小程序·小程序·php
苹果酱056736 分钟前
C语言 char 字符串 - C语言零基础入门教程
java·开发语言·spring boot·mysql·中间件
老赵的博客43 分钟前
QSS 设置bug
前端·bug·音视频
Chikaoya44 分钟前
项目中用户数据获取遇到bug
前端·typescript·vue·bug
南城夏季1 小时前
蓝领招聘二期笔记
前端·javascript·笔记