JavaScript for the front-end base

First, JavaScript introduction method

1. Write code in script tag

<script>    // Write your JS code here </script>

2. Introduction of additional JS files

<script src= "Myscript.js" ></script>

Second, JavaScript language specification

1. Comments

This is a single-line comment

/*

This is a multi-line comment

*/

2, Terminator

The language in JavaScript is separated by a semicolon (;) is a terminator.

Third, JavaScript language Foundation

1. Variable declaration

The variable name of the <1>javascript can be made up of _, number, letter, $, and cannot begin with a number.

The <2> declares that the variable is declared using the format of the var variable name;

varName = ' Guo ';varAge = 18;/*NOTE: Variable names are case-sensitive.    Camel-named rules are recommended. Reserved words cannot be used as variable names. is the keyword. *//*add: ES6 new let command for declaring variables. The usage is similar to Var, but the declared variable is valid only within the block of code where the Let command resides. For example, a For loop counter is good for using the Let command. */ for(Let i = 0;i<arr.lenth;i++) {....}//ES6 New Const is used to declare constants. Once declared, its value cannot be changed. Const PI= 3.1415; PI//3.1415PI= 3//TypeError: ' PI ' is read-only

Iv. JavaScript data types

JavaScript has a dynamic type

var x; At this point x is undefined

var x = 1; At this point x is the number

var x = "Guo"//This time x is a string

1. Value (number)

JavaScript does not go into integral and floating-point types, there is only one type of number.

var a = 12.34; var b =; var // 12300000 var // 0.00123

There is also a Nan, which indicates that it is not a number.

Common methods:

// back to 123 // The return Nan,nan property is a special value that represents a non-numeric value. This property is used to indicate that a value is not a number.  //  return to 123.456

2. Strings (String)

var a = ' Hello '; var b = ' world '; var c = A +//  get HelloWorld

Common methods: stitching strings generally with "+"

Method	Description
. length	return length
. Trim ()	Remove whitespace
. Trimleft ()	Remove the left margin
. TrimRight ()	Remove the blank on the right
. CharAt (N)	Returns the nth character
. Concat (Value,..)	Stitching
. Index	Sub-sequence position
. substring (from,to)	Get sub-sequences by index
. Slice (Start,end)	Slice
. toLowerCase ()	Lowercase
. toUpperCase ()	Capital
. Split (Delimiter,limit)	Segmentation

The difference between substring and slice:

>> stop does not swap both if start is less than 0, then the cut starts at the end of the string, starting at the beginning of the first (including the character at that position) if stop is less than 0, then cutting the ABS from the end of the string forward (stop) character end (does not contain the position character) the difference between slice and substring

Add:

A template string was introduced in ES6. The template string, which is an enhanced version of the string, is identified with an inverse quotation mark ('). It can be used as a normal string, or it can be used to define a multiline string, or to embed a variable in a string.

// Normal String ' This is a normal string! '//  multiline text ' This is multiple lines of text '//  string embedded in variable var name = "Q1mi", Time = " Today "; ' Hello ${name}, how is you ${time}? '

Note: If you need to use anti-quotes in the template string, precede it with a backslash escape.

Jshint enable ES6 syntax support/*jshint esversion:6*/

3, Boolean value (Boolean)

The difference between python,true and false is lowercase.

var true ; var false ; // ' (empty string), 0, null, undefined, Nan are all false. 

4, null and undefined

★null indicates that the value is empty and is generally used when a variable needs to be specified or emptied, such as name=null;

★undefined indicates that when a variable is declared but not initialized, the default value of the variable is undefined. There is also the undefined that is returned when the function has no definite return value.

Null means that the value of the variable is empty, and undefined means that only the variable is declared, but it has not been assigned a value.

5. Objects (object)

All things in JavaScript are objects: strings, numbers, arrays, functions ... Except that JavaScript allows custom objects.

JavaScript provides multiple built-in objects, such as String, Date, array, and so on.

Objects are just special data types with properties and methods.

Array

The purpose of an array object is to use a separate variable name to store a series of values. Similar to the list in Python.

var a = [123, ' abc ']console.log (a[//  output ' abc ' )

Common methods:

Method	Description
. length	The size of the array
. push (Ele)	Trailing append element (multiple elements can be appended)
. Pop ()	Gets the trailing element (only one can be deleted)
. Unshift ()	Head Insert Element (multiple elements can be inserted)
. Shift ()	Remove elements from the head (only one can be deleted)
. Slice (Start,end)	Slice
. Reverse ()	Reverse
. Join (SEQ)	Concatenate array elements into a string (the point is preceded by an array join for the content to be concatenated)
. Concat (Val,...)	Connection array
. Sort ()	Sort
. ForEach ()	Pass each element of the array to the callback function
. Splice ()	Delete an element and add a new element to the array
. Map ()	Returns an array element that invokes a new array of values after the function is processed

Note about sort ():

If the method is called without parameters, the elements in the array are sorted alphabetically, more precisely, by the order in which the characters are encoded. To do this, you should first convert the elements of the array to a string, if necessary, for comparison.

If you want to sort by other criteria, you need to provide a comparison function that compares two values and returns a number that describes the relative order of the two values. The comparison function should have two parameters A and B with the following return values:

If a is less than B, a value that is less than 0 is returned if a should appear before B in the sorted array.
If a equals B, 0 is returned.
If a is greater than B, a value greater than 0 is returned.

Example:

function Sortnumber (b) {    return A- B}var arrl = [11,100,22,55,33,44]arrl.sort ( Sortnumber)//  about traversing elements in an array, you can use the following method:var a = [10,20,30,40];  for (var i=0;i<a.length;i++) {    console.log (a[i])}

6. ForEach ()

Grammar:

ForEach (function (Currentvalue,index,arr), Thisvalue)

Parameters:

V. Operators

1. Arithmetic operators

+ - * / % ++ --

2. Comparison operators

>  >=  <  <= = = = =  = =   !== Note:    1== ' 1 '  //  True  Weak type comparison    //  false  strong type comparison

3. Logical operators

&& |      | or    ! Non -

4. Assignment operators

=   +=   -=   *=   /=

Vi. Process Control

1, If-else

var a = ten; if (a>5) {    console.log (' yes ')}else{    console.log (' no ' ) )}

2, If-else If-else

var a = 5; if (a>5) {    console.log (' a>5 ');} Else if (a<5) {    console.log (' a<5 ');} Else {    console.log (' a=5 ');}

3. Switch

varDay =NewDate (). GetDay ();Switch(day) { Case0: Console.log (' Sunday ')     Break;  Case1: Console.log (' Monday ')     Break;  Case2: Console.log (' Tuesday ')     Break; default: Console.log (' No ')}

The case clause in switch usually adds a break statement, or the program continues to execute the statements in the subsequent case.

4. For

 for (var i=0;i<10;i++) {    console.log (i)}

5. While

var i=0;  while (i<10) {    console.log (i);    I+ +;}

6, ternary operation

var a = 1; var b = 2; var c = a>b? A:bconsole.log (c)

JavaScript for the front-end base