Detailed explanation of the processing of Json data in JS and the method of parsing JSON data

Detailed explanation of the processing of Json data in JS and the method of parsing JSON data

learning target:

Section numberKnowledge pointsClaim
The first section of the array to remove duplicatesArray deduplicationTo understanding
The second section array sortingArray sortTo understanding
The third section json overviewjson overviewgrasp
The fourth section json methodjson methodgrasp
Section 5 json parsingjson parsinggrasp

1. Array de-duplication

Array deduplication refers to finding the same elements from the array and deleting the same elements.

Ensure that each element in the array is a unique operation.

1.1.indexOf de-duplication

The basic idea is: using the indexOf method of the array, the purpose is to find the first occurrence of the stored parameter in the array.

Disadvantages: When implementing this method, it will traverse the array until the target is found, which consumes a lot of time.

var arr = [1,2,1,3,1,4 **,2,3]; var arr2 =[]; for(var i=0;i

Initially there are no elements in arr2.

Loop judgment,

As long as the element in arr is not in arr2

Just store this element in arr into arr2

Then finally the elements in arr2 are all non-repeated elements in arr

hash table deduplication

The basic idea is: use the already-appearing element as the attribute name and store it in an object**** . The subscript reference is much faster than searching the array with indexOf.

Disadvantages: A lot of memory is used, and space is sacrificed in exchange for time.

var arr = [1,2,1,3,1,4]; var result = [] var hash = {}; for (var i = 0; arr[i] != undefined; i++) {if (!hash [arr[i]]) {result.push(arr[i]);

hash [arr [i]] = true;


Initially there are no elements in result

There is no attribute in the hash object and loops until the array element is null

Determine if:

In [hash object], there is no name

[Current arr element] attributes


Add this element to the new array result

And add this attribute to the hash object

2. the array sort

2.1 Bubble sort

Bubble sort method:

Compare two adjacent elements in the array. If the previous one is larger than the next one, then the two array elements will be swapped (that is, put the smaller one in front), and finally find the largest element, put it at the end, and then again The cycle comparison.


The first bubbling: 90,98,70,85,60,87,100

The second bubbling: 90,70,85,60,87,98,100

The third bubbling: 70,85,60,87,90,98,100

The 4th bubbling: 70,60,85,87,90,98,100

The 5th bubbling: 60,70,85,87,90,98,100

The 6th bubbling: 60,70,85,87,90,98,100

[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-TGSauQSx-1608259559098) (020803JS algorithm and json analysis.assets/clip_image006.png)]

2.2. Quick sort

The idea of "Quick Sort" is very simple, the entire sorting process only requires three steps:

(1) In the data set, select an element as the "pivot".

(2) All elements smaller than "reference" are moved to the left of "reference"; all elements greater than "reference" are moved to the right of "reference".

(3) Repeat the first and second steps for the two subsets on the left and right of the "benchmark" until there is only one element left in all the subsets.

2.3 Recursive function

A function that can call itself is called a recursive function.

It can be said that recursion is the most troublesome algorithm in programming thought.

Let's take a look at the most classic example of recursion

var func = function (x) {

if (x === 1) {

return 1;

} else {

return x*func(x-1);



This is the most classic example of recursion, called N!.

2.4 Binary search

The premise of binary search : ordered array, natural order (from small to large order)

Find the middle number and compare the middle number with the number you input. If the number you input is larger than the middle number, go to the second half of the data search, otherwise go to the first half of the data search.

Repeat the above process until you find a record that meets the conditions

var arr = [2, 4, 5, 9, 31, 60, 79, 80, 90];
 true, false.

3. JSON overview

The full name of JSON**** in English is JavaScript Object Notation, which is a lightweight data exchange format. It can store data and transmit data.

JSON is an independent language, a format for storing and transmitting data, and is usually used by the server to transfer data to web pages.

The JSON language uses the syntax of JavaScript, which means that processing JSON data in JavaScript does not require any special APIs or toolkits, but one thing that needs to be explained is:

JSON and Javascript are two different languages.

The format of JSON**** is just a text, and the text can be read by any programming language and transmitted as a data format.

3.1 json syntax

Data is in name/value pairs

Data is separated by commas

Curly braces to save objects

Brackets save the array

The JSON object is written in braces ({}):

Var obj = {


**"Sex":"** male",

"Age": 25


Objects can contain multiple name/value pairs:

The writing format of JSON data is: name/value pairs.

The name/value pair includes the field name (in double quotes), followed by a colon, and then the value

{"name":"halon", "sex":"woman", "from":" Greece "}

3.2 The difference and comparison between JSON and JS objects

the differenceJSONJavascript
meaningJust a data formatRepresents an instance of the class
transmissionCan cross-platform data transmission, fastCan't transmit
which performed1. Key-value pair mode, the key name must be enclosed in double quotes 2. The value cannot be a method function, cannot be undefined/NaN1. Key-value pair mode, the key name is not quoted 2. The value can be a function, object, string, number, boolean, etc.

4. the method provided by JSON

Personal understanding, JSON is

(1) Convert [Data in the foreground (objects, arrays, etc.)] into [Send a string to the background].

(2) Convert [Background data (character string)] to [ordinary data (object, array, etc.)].

4.1 parse() method

JSON.parse (data transferred from the background)

Deserialization (sometimes called JSON data parsing, or JSON parsing for short),

Able to convert JSON string into JS data type.

When converting, if there is a format that does not meet the JSON requirements in the string, an error will be reported directly.

JSON parsing is the process of converting [string data returned in the background] into [data that can be used directly] by some means.

Under normal circumstances, the JSON parsing in JS will directly use the JSON.parse method provided in JSON to directly convert.

var info = '{
 "from":" " 


4.2 stringify() method

JSON.stringify (data to be transmitted to the background)

Serialization (sometimes called JSON data encapsulation or data encryption)

Able to convert JS data type into JSON string.

When converting, if there is a format that does not meet the requirements of JSON in the data, the corresponding processing will be done