Basic series of javascript: variables and data types in JavaScript (I)

Today, I will review the js foundation systematically and make a record

javascript consists of three parts:

1. ECMASCRIPT(ES): describes the syntax and basic objects of the language
2. DOM: document object model, which describes the methods and interfaces for processing web page content
3. BOM: browser object model, which describes the method and interface of interacting with the browser
   

js as client language

Operate the elements in the page according to the relevant js syntax, and sometimes operate some functions in the browser

1. Ecmascript3 / 5 / 6, syntax specification of JS (variables, data types, operation statements, etc.)
2. DOM(document object model): document object model, which provides some js properties and methods to operate DOM elements in the page
3. BOM(browser object model): browser object model, which provides some js properties and methods to operate the browser
   

Variable & & data type

Variable:
Multiple definitions: var/let/const/function/import/class
Strict naming rules: case sensitive / hump naming / keyword reserved words
data type
Basic data types: number, string, boolean, null, undefined
Reference data types: object (array, object, regular), function
Symbol: unique value

variable in js

Variable: variable quantity. In programming language, variable is actually a name used to store and represent things with different values.

There are several ways to create variables:

1. ES3

var a = 12
a = 13
console.log(a) // The output is the value 13 represented by a

1. ES6

let b = 100
b = 200
const c = 1000
c=2000 // An error is reported. The stored value of the variable created by const cannot be modified (constant)

1. Creating a function is also equivalent to creating a variable

function fn() {}

1. Creating classes in ES6 is also equivalent to creating variables
2. The module import of ES6 can also create variables

import B from './b.js'

1. Symbol
   

js naming convention

• Strictly case sensitive
• Use numbers, letters, underscores, $, numbers cannot start

let $box ; // Generally, those obtained with jQ start with $
let _box ; // General public variables are_ start
let 2box; //No, but it can be written as box2

• Use hump naming method: the first letter is lowercase, and the first letter of every other meaningful word should be capitalized (the naming should be as semantic as possible, and English words should be used)

Common abbreviations: Add / insert / create / new, updata, delete / del / remove / RM, SEL / select / query / get, info

• Keywords and reserved words cannot be used
  

Common data types in js

1. Basic data type

• Number: regular number and NaN
• string: all strings enclosed in single quotation marks, double quotation marks and back quotation marks are strings
• boolean: true/false
• Null object pointer null
• undefined

1. Reference data type

Object data type object

• {} normal object
• [] array object
• Regular object

Function data type function

1. Detailed explanation of number data type

Number number type: including: regular number, NaN

1. NaN

NaN: not a number: it is not a number, but it belongs to the number type
NaN and any value (including yourself) don't want to wait, so we can't judge whether it is a significant number by waiting
isNaN: check whether a value is a non significant number. If it is not a significant number, return true; otherwise, return false for a significant number
When using isNaN for detection, first verify whether the detected value is of digital l type. If not, first convert the value to digital type based on the Number () method, and then detect

1. Convert values of other types to numeric types

Number([val])
parseInt/parseFloat([val], [base])
Number(val): converts a string into a number. As long as the string contains any non valid numeric character (except the first point), the result is NaN, and the empty string will become the number 0
To convert a reference data type to a number, first convert it to a string based on the toString method, and then convert it to a number
parseInt/parseFloat([val], [hexadecimal]): it is also a method to convert to numbers. For strings, it searches for valid numeric characters from left to right until it encounters non valid numeric characters. Stop searching (no matter whether there are numbers after it), and return what is found as a number

console.log(Number(true)) // 1
console.log(Number(false)) // 0
console.log(Number(null)) // 0
console.log(Number(undefined))NaN
console.log(Number({age: 10})) // NaN {} .toString() => "[object Object]" => NaN
console.log(Number({})) // NaN
console.log(Number([])) //  [].toString() => "" => 0
console.log(Number([12])) //  12
console.log(Number([12,13])) //   NaN
console.log(parseInt('12.5px')) // 12
console.log(parseFloat('12.5px')) // 12.5
console.log(parseFloat(true)) // NaN

2. string data type

All enclosed in single quotation marks, double quotation marks and back quotation marks are strings

1. Convert other types to strings

[val].tostring()
null and undefined prohibit direct toString,
Ordinary objects The result of toString() is "[object]" reason: object prototype. The toString method is not converted to a string, but is used to detect the data type

[].toString() // => ""
({name: 'xxx'}) // => "[object Object]"

1. String splicing

Among the four algorithms, except addition, the rest are mathematical calculations. Only addition may have string splicing

let a = 10 + null + true + [] +undefined + "Lanfeng" + null + [] + 10 + false 
connsole.log(a) // 11undefined Lanfeng null10false
/*
	* 10 + null => 10 + 0 => 10
  * 10 + true => 10 + 1 => 11
  * 11 + [] => 11 + '' => '11' To change an empty array into a number, you must first go through the process of changing into an empty string. When you encounter a string, it will be directly changed into a string splicing
  * '11' + undefined => '11undefined'
  * ....
  * 11undefined Lanfeng null10false
*/

3. boolean boolean type

There are only two values true/false

1. Converts values of other types to Boolean types

Only the five values of 0, NaN, '', null and undefined are converted to false, and the rest are converted to true (without any special circumstances)

• Boolean([val])
• !/!!
• Conditional judgment

// !:  Negate (first to Boolean, then negate)
// !!:  Taking negation and then negation is equivalent to converting only to Boolean
console.log(!1)  // false
console.log(!!1)   // true

If the condition is just a value, not = = / = = = /! = / >= These comparisons are to convert the value to boolean type first, and then verify whether it is true or false

if('3px' - 3) { //'3px' - 3 => NaN-3 => NaN => false
 ...
}

5. null/undefined

Neither defined nor defined stands for null

• Null: expected (generally, we don't know the value at the beginning. We manually set it to null first, and then assign the value later)

let num = null //=> let num=0;  Generally, it is better to use nul as the initial null value, because zero is not null, and it has its own storage space in the stack memory
num = 12

• undefined: unexpected

let num; // Create a variable without assignment. The default value is undefined
num = 12

6. object data type - Common Object

{[key]:[value],...} any object is composed of zero to multiple key value pairs (attribute name: attribute value) (and the attribute name cannot be repeated)
Get the property value corresponding to the property name

• Object Attribute name
• Object [attribute name], the attribute name is a number or string or variable
• If the current attribute name does not exist, the default attribute value is undefined
• If the attribute name is a number, the attribute value cannot be obtained by point

let person = {
	name: 'lanfeng',
  age: 23,
  height: '185cm',
  weight: '80kg',
  1: 100
}
//Get the property value corresponding to the property name
// =Object Attribute name
console.log(person.name)
 // =[attribute name] of the object. The attribute name is a number or string or variable
console.log(person['age'])
console.log(person.sex) // undefined
console.log(person.1)  //SyntaxError: missing ) after argument list

1. Set property name property value

The attribute name cannot be duplicate. If the attribute name already exists, it does not belong to adding or modifying attribute values

1. Delete attribute name

True delete: completely kill the attribute
False deletion: the attribute is still in use and the value is empty

let person = {
	name: 'lanfeng',
  age: 23,
  height: '185cm',
  weight: '80kg',
  1: 100
}
// Fake deletion
person.weight = null
console.log(person)

// Really delete
delete person[1]

7. Arrays are special object types

1. What we set is the attribute value. The attribute name is the number generated by default, increasing from zero, and this number represents the position of each item. We call it "index". It starts from zero, increases continuously, and represents the digital attribute name of the position of each item
2. The default attribute name is length, which stores the length of the array

let arr = [12, 'ha-ha', true, 13]
console.log(arr.length)
console.log(arr[length])
// First index 0, last index arr.length - 1
console.log(arr[0])
console.log(arr[length-1])

// Append to the end of the array
arr[arr.length] = 100
console.log(arr)

For more information, please follow the official account