The definitive guide to JavaScript reading notes (7th edition)

The definitive guide to JavaScript reading notes (7th edition)

Crayon Xiaoxin Quotations: A guy who thinks he is strong enough by himself does not have strong qualifications! The
author hopes: Reading classic books and communicating with Daniel, reading can fully understand their own shortcomings!

JavaScript authoritative guide reading notes (7th edition) "Rhino Book" has a supreme status in the hearts of engineers. Although there are many books on the market that explain the javaScript language and technology, but this book can be close to ECMAScript and W3C There are not many normative works. It is completely worthy of a wave of CV engineers. This article is only for recording reading notes for review and sharing with everyone Reading experience. Copy code

study notes

Chapter One Lexical Structure

Lexical structure is a lowest-level language syntax, specify how the variable name, comments given session identifier, and segmentation program statements, etc. copy the code

1.1 JavaScript program text

1. JavaScript is case sensitive 2. JavaScript ignores spaces between program marks 3. JavaScript also ignores newlines 4. In addition to regular spaces (\u0020), JavaScript also uses tabs (\t) and various ASCII Identification between control characters and Unicode Don't be spaces. JavaScript recognizes line breaks, carriage returns, and carriage return/line feed sequences as behavior terminator. Copy code

1.2 Notes

1. //Single line comment 2. /* This is also a kind of comment*/ And this is another kind of comment 3. /* * This is a multi-line comment * The * character at the beginning of each line is not necessary, just for aesthetics */ Copy code

1.3 Literal

It is a direct literal appears in the program data values duplicated code
12 //value 12 'geely' //string geely to true //Boolean null . //No object duplicated code

1.4 Identifiers and reserved words

Identifier: Simply put, it is a name used to provide tags for constants, variables, attributes, functions, and classes in the code, as well as some loops. Must start with a letter, underscore (_) or dollar sign ($), and subsequent characters can be letters, underscore (_) or dollar sign ($) and numbers Reserved words: like other languages, javaScrip reserves certain identifiers for the language, and these reserved words cannot be used as regular identifiers Copy code
The following are all legal variables i my_varbile_num v13 _demo $str Copy code
1.4.1 Common reserved words
abstract delete goto null throws as do if package transient boolean double implements private true break else import protected try byte enum in public typeof case export instanceof return use catch extends int short var char false interface static void class final is super volatile continue finally long Switch the while const float namespace the synchronized with Debugger for Native the this default function new new the throw copy the code

Chapter 2 Types, Values and Variables

Computer programs work by manipulating values (such as the value 3.14) or text (such as "hello world") The values that can be expressed and manipulated in a programming language are called types, and the set of types supported by a language is also the basic feature of this language JavaScript types can be divided into two categories: primitive types and object types Primitive type: number boolean string null undefined symbol Object types: In addition to basic objects (Object) and arrays (Array), javascript also defines some other useful object types such as: 1. Set object: represents a set of values 2. Map object: identifies the mapping of keys and values 3. RegExp object: represents the text mode, which can implement complex matching, search and replacement operations on strings 4. Date object: indicates that the date and time support date calculation 5. Error and subtypes indicate errors that may occur when the javscript code is running Copy code

2.1 Number

The main numeric type of javascript, Number, is used to represent integers and approximate integers. JavaScript uses IEEE754 standard definition The 64-bit floating point format represents the value. This means that the largest integer that js can represent is plus or minus 1.7976931348623157 times 10. The smallest integer to the power of 308 is plus or minus 5 times 10 to the minus 324 power js supports decimal and hexadecimal, binary and octal are added to ES6 Copy code
2.1.1 Numerical calculation
1. + (addition),-(subtraction), * (multiplication),/(division),% (remainder), ES6 new ** (exponentiation) 2. js also provides a set of properties through the Math object Functions and constants to support more complex calculations commonly used such as: Math .pow( 2 , 2 ) //4 2 square Math .round( .6 ) //1 is rounded to the nearest integer Math .ceil( .6 ) //1 rounded up the Math .floor ( .6 ) //0 rounded down the Math .abs (- . 5 ) //. 5 the absolute value of the Math .max ( 1 , . 3 , 2 ) //returns the maximum. 3 Math .min( 2 , 3 , 4 ) //2 returns the minimum value Math .random() //pseudo-random number ... ES6 adds some ... You can use Baidu by yourself when you use it Copy code

Common interview 1: Why does js calculate 0.3-0.2 !=0.1 Click to view picOne.png

1. js uses IEEE-754 floating point notation is a binary notation, this notation can accurately represent 1/2, 1/4, 1/1024 and other fractions. However, the most commonly used fractions are (especially in financial calculations) decimal fractions 1/10, 1/100, etc., and the binary system cannot be accurate. Represents even a simple number as 0.1 2. Simple solution: convert to integer processing Copy code

2.2 Text (String)

1. The escape character '\ud83d\udc99' 2. The use of string let s = 'hello,world' //Get a part of the string s.substring( 2 , 4 ) //"ell": No. 2-4 characters s.slice( 1 , 4 ) //Same as above s.slice(- 3 ) //"rld": the last 3 characters s.split( "," ) //["hello","world "] //Search string s.indexOf( "l" ) //2: The position of the first letter l s.indexOf( "l" , 3 ) //3:The position of the first letter l after position 3 s.indexOf( "ll" ) //-1: there is no corresponding character s.indexOf( "ll" ) //10: the position of the last letter l //The Boolean search function in ES6 and later versions s.startsWith( "hello" ) //true: the string is s.endsWith( "!" ) that starts with these characters //false: the s string is not with ! The ending s.includes( "or" ) //true: the substring "or" is included in the s string //Create a modified version of the string s.replace( " llo " , "ya" ) //"HeYa,world": replace s.toLowerCase() //"hello, world": lowercase s.toUpperCase() //"HELLO,WORLD": uppercase //Access individual characters in the string s.charAt( 0 ) //"H": the first character s.charAt(s.length- 1 ) //"d": the last character //ES2017 new string filling function "x.padStart(3)" //"x": Add a space to the left of X to make the length of the string 3 "x.padEnd(3)" //"x ": Add a space to the right of X to make the length of the string 3 "x.padstart(3," * ")" //"**x": Add a space to the left of X to make the character The length of the string becomes 3 "x.padEnd(3," * ")" //"x--": Add a space to the right of X to make the length of the string 3 //Delete space function. trim() is the other thing that ES5 has. ES2019 added "test ".trim() //"test": delete the space at the beginning and the end " test ".trimStart() //"test ": delete the space at the beginning also called TrimLeft "the Test" .trimEnd () //"the Test": delete trailing spaces also called trimRight copy the code
JavaScript strings cannot be modified. Methods like replace() and toUpperCase() all return new strings. They are not modifying the original string.
Strings can also be treated as read-only arrays. Use square brackets instead of chartAt() to access individual characters in the string
the let S = "Hello, World" S [ 0 ] //=> "H" S [s.length- . 1 ] //"D" copy the code
2.2.1 Template string
//1. The template string can wrap 2. You can insert the variable let age = '24' let name = 'gy' let s = `my name is ${name} I'am ${age} year old` //my name is gy I'am 24 year old copy the code

2.3 Boolean

Common interview 2: null and undefined

1. Null is a language keyword that evaluates to a special value, usually used to indicate that a value does not exist 2. TypeOf null returns Object , indicating that null can be represented as no object 3. Undefined also means that a certain value does not exist, but undefined means a deep non-existence. Specifically: When the value of a variable is not initialized, it is undefined. When querying for non-existent object properties or elements of an array, it will also be undefined . A function that does not have a clear return value returns undefined . A function parameter that does not pass a value is also undefined. Summary: Undefined can be used to represent a system-level, unexpected or similar error with no value May be null represent program level, there is no normal or expected values duplicated code

Common interview 3: the difference between var, let, const

1. Var defined variables do not have block-level scope let and const defined variables have block-level scope 2. Var can be repeatedly named variables let and const cannot be repeatedly named variables 3. Var defined variables will have scope promotion but let and const must be reused named 4. const generally define constants duplicated code

2.4 Destructuring assignment

1. let [x,y]=[ 3. , 4 ] //equivalent to let x=3 ,y=4 //assign the corresponding position 2. let [,x,,y ]=[ 1 , 2 , 3 , 4 ] //let x=2,y=4 //remaining parameters let [x,...y ]=[ 1 , 2 , 3 , 4 ] //let y=[2,3,4] //deconstruction Assignment can not only destructure arrays. In fact, the right side of the equal sign can be any iterable object let {r,g,b,a }={ r : 0.0 , g : 0.0 , b : 0.0 , d:0.0 } //let a=0.0,b=0.0,c=0.0,d=0.0, copy code

Common interview 4: Judgment of data type (4 ways)

1. typeof There is no problem in judging basic data types, but when encountering reference data types (such as array object) It does not work . The results returned for array object null are all objects. The following is a specific code example var test1 = null var test2 = 23 var test3 = false var test4 = 'gri' var test5 = [ 1 , 2 , 3 ] var test6={ name : 'zs' , age : 23 } var test7 = undefined console .log( 'test1's data type is' + typeof test1 ); //object console .log( 'test2's data type is' + typeof test2 ); //number console .log( 'test3 data The type is' + typeof test3); //boolean console .log( 'The data type of test4 is' + typeof test4 ); //string console .log( 'The data type of test5 is' + typeof test5 ); //object console .log( 'The data type of test6 is' +typeof test6 ); //object console .log( 'The data type of test7 is' + typeof test7 ); //undefined Copy code
2. Instanceof can detect array, object but cannot detect basic types of data, including null, nor instanceof operator It is used to detect whether the prototype property of the constructor appears in the prototype chain of an instance object. var arr = new Array (); var obj = { name : 'zs' , age : 23 } console .log(arr instanceof Array ); //true console .log(arr instanceof Object ); //true console .log(obj instanceof Object ); //true Note that if you need to determine whether the data type exists in the array and the object, you should check the array if you first determine the object It's also the object. There is no way to separate the two. Copy code
3. The constructor cannot judge undefined and null , and it is not safe to use it, because the pointer of the contructor can be changed. var bool = false var num = 123 var str =' zs ' var arr =[1,2,4] var obj = { name : 'gy' , age : 12 } function fun () {} function Student ( name,age,grades ) { this .age=age this .name=name this .grades=grades } function Person ( name,age ) { this .age=age this .name=name } var gy = new Person( 'gy' , 23 ) console .log(bool.constructor === Boolean ); //true console .log(num.constructor === Number ); //true console .log(str. constructor === String ); //true console .log(arr.constructor === Array ); //true console .log(obj.constructor === Object ); //true console .log(fun.constructor = == Function ); //true console .log(gy.constructor === Student);False// Console .log (gy.constructor === the Person); //to true copy the code
4. The final judgment data of the perfect solution ( Object .prototype.toString.call ()) function foo () {} console .log( Object .prototype.toString.call( 1 )); //'[object Number]' console .log( Object .prototype.toString.call( NaN )); //'[object Number] ' console .log( Object .prototype.toString.call( '1' )); //'[object String]' console .log( Object .prototype.toString.call( true )); //'[object Boolean] ' console .log( Object .prototype.toString.call( undefined )); //'[object Undefined]' console .log( Object .prototype.toString.call( null )); //'[object Null]' console .log( Object .prototype.toString.call( Symbol ())); //'[object Symbol]' console .log( Object .prototype.toString.call(foo)); //'[object Function]' console .log( Object .prototype.toString.call([ 1 , 2 , 3 ])); //'[ the Array Object] ' Console .log ( Object .prototype.toString.call ({})); //' [Object Object] duplicated code

To be updated...