前端面试-js之object类型JSON

Yang_River 发布于2019-08-21 16:48 / 2335人阅读

摘要：有两个特殊的全局变量本文主要详解三个参数对象，接收的值是对象包括除了之外的所有类型处理函数或者数组，处理函数是对每一个键值对都处理，数组是只过滤留下数组包含的键值，处理函数可以为代表缩进字符，如果是最大不能超过，如果是字符串就是缩进的字符串

ECMAScript有两个特殊的全局变量：Math & JSON
本文主要详解JSON

JSONValue:

JSONNullLiteral
JSONBooleanLiteral
JSONObject
JSONArray
JSONString
JSONNumber

JSONFunction:

JSON.stringify(jsonvalue, replacerfnorarray, space)

三个参数：
1. json对象，接收的值是json对象包括除了function之外的所有类型
2. 处理函数或者数组，处理函数是对每一个键值对都处理，数组是只过滤留下数组包含的键值，处理函数可以为null 
3. space代表缩进字符，如果是number最大不能超过10，如果是字符串就是缩进的字符串
结果：json字符串
有replacer参数的话，返回过滤后的结果，否则返回原生的字符串
过程：
将json-->json字符串

JSON.parse()

接收的是json字符串，将其格式化为json对象
两个参数：
1. 加单引号的json字符串
2. 过滤函数
结果：
得到格式化的json对象

例子： JSON.stringify：

键值对

array

number

string

boolean

null

function

可见，当值是function时会返回undefined，这个有些情况下并不是我们期望的，那么怎么解决呢，要善于利用第二个参数即replacer为函数时（详解见下面）

// 定义第二个参数为函数，参数需要key&value
function replace (key,value) {
    // 判断value类型是否为function
    if(typeof value === "function"){
        return Function.prototype.toString.call(value);
    }
    return value;
}
// 定义一个变量test,某一键值对的值为fn
var test = {"first": 1, "getFirst": function(){console.log(this.first);}};
// 调用
JSON.stringify(test,replace);
// 结果：
// "{"first":1,"getFirst":"function (){console.log(this.first);}"}"

第二个参数除了可以是function之外还可以是数组[string,number类型的元素]，相当于一个IP白名单；

var test = {a:1,b:2,c:3};
JSON.stringify(test,["a"]);
// "{"a":1}"

第二个参数还可以是null,或者不写，会执行JSON.stringify

var test = {a:1,b:2,c:3};
JSON.stringify(test,null);
// "{a:1,b:2,c:3}"

JSON.stringify(test);
// "{a:1,b:2,c:3}"

第三个参数space

如果space参数为String类型的情况下,则默认取String的前10个字符作为分割符

如果space参数为Number类型的情况下,则表示space个空格(space<=10,大于10取10)

//space参数为String的情况下:
var test = {a:"1",b:2,c:3};
JSON.stringify(test,null,"test")
/*
{
test"a": "1",
test"b": 2,
test"c": 3
}
*/
//space参数为Number的情况下:
var test = {a:"1",b:2,c:3};
JSON.stringify(test,null,4)
/*
{
    "a": "1",
    "b": 2,
    "c": 3
}

三个参数共同控制，将多层嵌套的json对象转换为格式化的美化的json string

// 定义第二个参数为函数，参数需要key&value
function replace (key,value) {
    // 判断value类型是否为function
    if(typeof value === "function"){
        return Function.prototype.toString.call(value);
    }
    return value;
}
// 定义一个变量test,某一键值对的值为fn
var test = {"first": 1, "getFirst": function(){console.log(this.first);}};
// 调用
JSON.stringify(test,replace,4);
// 结果：
/*
"{
    "first": 1,
    "getFirst": "function (){console.log(this.first);}"
}"
*/

JSON.parse:

两个参数，1json字符串，2replacer function

应用：

数组去重最妙的方法

function replacer(key, value) {
    if(typeof value === "function"){
        return Function.prototype.toString.call(value);
    }
    return value;
}
function unique(arr) {
   var hash = {},
      re = [];
  for (var i = 0, length = arr.length; i < length; i++){
    if(!hash[JSON.stringify(arr[i],replacer)]){
      re.push(arr[i]);
      hash[JSON.stringify(arr[i])] = true;
    }
  }
  return re;
}
unique([function a (){console.log("function")}]);
console.log(unique([1,"1", 1]));
console.log(unique([1,1,5,6,5,78,5,3]));
console.log(unique([1,"1",false,"false",[1,2,3],[1,2],{a:1},{a:1},{b:1}]));
console.log(JSON.stringify(false));
console.log(JSON.stringify("false"));

云服务器 GPU云服务器 js object数据类型 js数据类型object js转换object数据类型 js中的object数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88740.html

【前端面试】变量和类型计算

摘要：题目使用能得到哪些类型和的选择中有哪些内置函数变量按存储方式分为哪些类型，并描述其特点如何理解知识点值类型和引用类型值类型引用类型对象，数组，函数值类型直接把值存储在堆中，把赋值给在内存中是又给开辟了一块新的空间，存储了同样的值。 1.题目 1.JS使用typeof能得到哪些类型 === 和 == 的选择 JS中有哪些内置函数 JS变量按存储方式分为哪些类型，并描述其特点如何理解J...

DoINsiSt 2019-08-23 14:28 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
前端面试之手写代码

摘要：虽然构造函数或者对象字面量的方法都可以用来创建对象，但是这些方法使用同一个接口创建很多对象，会产生大量的重复代码。参考资料冴羽的专题系列中高级前端面试手写代码无敌秘籍前端笔试之手写代码一本系列会从面试的角度出发围绕JavaScript，Node.js(npm包)以及框架三个方面来对常见的模拟实现进行总结，具体源代码放在github项目上，长期更新和维护 showImg(https://use...

niceforbear 2019-05-21 16:12 评论0 收藏0
【进阶4-3期】面试题之如何实现一个深拷贝

摘要：今天这篇文章我们来看看一道必会面试题，即如何实现一个深拷贝。木易杨注意这里使用上面测试用例测试一下一个简单的深拷贝就完成了，但是这个实现还存在很多问题。引言上篇文章详细介绍了浅拷贝 Object.assign，并对其进行了模拟实现，在实现的过程中，介绍了很多基础知识。今天这篇文章我们来看看一道必会面试题，即如何实现一个深拷贝。本文会详细介绍对象、数组、循环引用、引用丢失、Symbo...

longmon 2019-08-23 18:05 评论0 收藏0
#yyds干货盘点# 前端基础知识面试集锦3

摘要：当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单，建议使用构造函数与原型混合方式。它是基于的一个子集。 JavaScript介绍js的基本数据类型。Undefined、Null、Boolean、Number、Stri...

番茄西红柿 2021-11-22 15:29 评论0 收藏2637