JavaScript basic syntax

Posted by ziesje on Thu, 10 Mar 2022 03:09:11 +0100

JavaScript

operator

reference material: Priority of operators in JavaScript

Operator (priority from high to low)	describe
[] ()	Field access, array subscripts, function calls, and expression grouping
++ -- - ~ ! delete new typeof void	Unary operator, return data type, object creation, undefined value
* / %	Multiplication, division, modulo
+ - +	Addition, subtraction, string concatenation
<< >> >>>	displacement
< <= > >= instanceof	Less than, less than or equal to, greater than, greater than or equal to, instanceof
== != === !==	Equal, not equal, strict equality, non strict equality
&	Bitwise AND
^	Bitwise XOR
\|	Bitwise OR
&&	Logic and
\|\|	Logical or
?:	condition
= oP=	Assignment, operation assignment
,	multiple evaluation

&&And||

reference material: & & (logical and) and | (logical or) in JavaScript

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

console.log( 1 && 2); // 2 / / before true and after output 
console.log( 1 && 0); // 0
console.log( 0 && 1); // 0 / / front false output
console.log( 0 && ''); // 0

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

console.log( 1 || 2); // 1 / / true before output
console.log(1 || 0); // 1
console.log(0 || 1); // 1 / / before false and after output
console.log('' || 0); // 0

//"&" | "
console.log(1 || 2 && 3);  // 1

==And===

reference material: = = and in JavaScript===
=Assignment, = = equal, = = identity

Comparison rules for '= ='
- Are the data types the same
- If they are the same, compare whether the two numbers are equal
- If different, first convert the two numbers to the same data type, and then compare them
Comparison rule for '= ='
- Are the data types the same
- If different, return false directly
- If they are the same, compare whether they are equal

=>

reference material: The role of = > in js

(x) => x + 6

amount to

function(x){
    return x + 6;
}

console

reference material:

console.log("Number of bytes written : ",  len); // String number
console.log("Number of bytes written : "+  len); // String string

JSON

reference material: JavaScript JSON

JSON is a format for storing and transmitting data. It is usually used to transfer data from the server to the web page.
JSON, the full English name of JavaScript Object Notation, is a lightweight data exchange format.

//example
//The object "sites" is an array containing three objects
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

rule of grammar
- The data is a key / value pair.
- Data is separated by commas.
- Brace save object
- Square brackets hold the array

JSON.parse()

JSON.parse(text[, reviver]) is used to convert a JSON string into an object.
- Parameters:
  - text: required, a valid JSON string
  - reviver: optional, a function of conversion result, which will be called for each member of the object.
- Return value:
  - Returns the converted object of the given JSON string

//example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie tutorial(runoob.com)</title>
</head>
<body>

<h2>by JSON String creation object</h2>
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

</body>

//result
 by JSON String creation object
Google www.google.com

JSON.stringify()

JSON. Stringify (value [, replace [, space]]) is used to convert JavaScript values to JSON strings.
- Parameters:
  - Value: required, the JavaScript value to convert (usually an object or array).
  - Replace: optional. The function or array used to convert the result.
    - If replace is a function, JSON Stringify will call this function and pass in the key and value of each member. Use the return value instead of the original value.
    - If this function returns undefined, members are excluded. The key of the root object is an empty string: ''.
    - If the replacement is an array, only the members with key values in the array are converted. The conversion order of members is the same as that of keys in the array.
  - space: optional. Indents, spaces and line breaks are added to the text,
    - If space is a number, the return value text is indented by a specified number of spaces at each level,
    - If space is greater than 10, the text is indented by 10 spaces. Space can also use non numbers, such as: \ t.
- Return value: returns a string containing JSON text.

//example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie tutorial(runoob.com)</title>
</head>
<body>

<p id="demo"></p>
<script>
var str = {"name":"Rookie tutorial", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "There is only one parameter:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //Indent with four spaces
document.write( "Usage parameters:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre is used to format the output
</script>

</body>
</html>

//result
 There is only one parameter:
{"name":"Rookie tutorial","site":"http://www.runoob.com"}

Usage parameters:
{
    "name": "Rookie tutorial",
    "site": "http://www.runoob.com"
}

Relationship between JSON and JS objects

Many people don't know the relationship between JSON and JS objects, or even who is who.
In fact, it can be understood as follows: JSON is the string representation of JS objects. It uses text to represent the information of a JS object, and (JSON) is essentially a string.

var obj = {a: 'Hello', b: 'World'}; //This is a js object. Note that the key name of the js object can also be wrapped in quotation marks. The key name here does not need to be contained in quotation marks
var json = '{"a": "Hello", "b": "World"}'; //This is a JSON string, which is essentially a string

JSON (format string) and JS object (also known as JSON object or JSON format object) are converted to each other (JSON.parse and JSON.stringify).

To realize the conversion from JSON string to JS object, use JSON Parse() method:

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //The result is {a: 'Hello', b: 'World'} an object

To convert from a JS object to a JSON string, use JSON Stringify() method:

var json = JSON.stringify({a: 'Hello', b: 'World'}); //The result is' {"a": "Hello", "b": "World"} 'a string in JSON format

Say a loose word: json Parse () is a string to js object, json Stringify () is the conversion of js objects to strings. Their premise is that they need json format to be meaningful.

setTimeout

setTimeout(function() {...}, 1000); Execute the function() function after 1000 milliseconds

Topics: Javascript Front-end

Programmer Think