study hard and make progress every day

This article has included to my lot DayDayUP:github.com/RobodLee/DayDayUP warehouse, welcome Star

  • Summary of common HTML tags
  • Hand to hand takes you to learn CSS
  • HTML5 and CSS3 knowledge summary
  • Hand on hand teaches you mobile WEB development

JavaScript introduction

When we used to write web pages, we used HTML+CSS, and these are called static web pages, they’re just for displaying content, they don’t have interactive functions, and if you want to execute a specific event when you click on an element, you have to use JavaScript, and with JavaScript, Web pages can achieve more complex effects, such as interaction with the server, such pages are called dynamic web pages.

The browser is split into a rendering engine, which parses HTML and CSS, and a JS engine, called a kernel. The JavaScript engine is used to read the JavaScript code in the web page, and then interpret and execute the JavaScript code line by line.

JavaScript appetizer

Before we get into JavaScript, let’s cover some of the basics of JavaScript.

JavaScript writing location

JavaScript has three types of writing: inline, inline, and imported. It is convenient to use inline when the content is small, but not recommended when the code is large.

<body>
    <button onclick="alert('Robod')" >Wechat official account</button>
</body>
Copy the code

The second is inline writing, which wraps JavaScript code around a tag, usually in a head tag or a body tag.

<script>
    console.log("Wechat official Account: Robod");
</script>
Copy the code

The final external import is to give the script tag a SRC attribute pointing to the JavaScript file to import, which is appropriate if the code is large.

<script src="./js/xxx.js"></script>
Copy the code

annotation

JavaScript comments and C language, Java, divided into single-line comments and multi-line comments

// This is a one-line comment
/* This is a multi-line comment for multi-line content */
Copy the code

Input output statement

Those of you who have programming experience have probably printed out temporary data on the console or somewhere to test how the code works, or to show the user something, and to provide input and output in JavaScript.

  • alert(msg)

This method pops up an alert box in the browser, which can be used to test the code, but mostly serves to alert the user.

alert('Don't forget to give it a thumbs up.');
Copy the code

  • console.log(msg)

In this way, some data can be printed in the Console. When writing code, you can print some data through the Console to see how the code is running. Press F12 in the browser window and then click Console to view the Console.

console.log('wechat Official Account: Robod');
Copy the code

  • prompt(info)

Usually we need the user to enter something, and then we can pop up an input box, and the user can enter something in the input box.

prompt('Hey, buddy, did you like it? ');
Copy the code

Variables and constants

The computer’s memory is used for temporary storage of data, the data is stored in the memory is different memory areas, each area has a memory address, we can go to the operation through the memory address of the area of the corresponding data, when there are a lot of data needs to be in the memory, so many memory address, it’s not easy to remember, so there is the concept of variables, Variables are containers used to store data. The way to think about the variable is 👉 hotel is like the memory, there is a room in it, room number 4399, room number 4399 is Wangwu, 4399 May not be easy to remember, give this room a different name, called Wangwu, then Wangwu is a variable, pointing to room 4399.

Variables need to be declared and then assigned in the process of use. Var and let keywords are used to declare variables. The difference between them lies in their different scopes.

var a;				// Declare variable A
a = 10;				// Assign a value to variable A
var b = 20;			// Assign a value to b while declaring the variable b
var c = prompt();	// Prompt brings up the input box and assigns the contents of the input box to variable C
Copy the code

The value of a variable can be modified. A constant is a value that cannot be modified once assigned. It is declared with the const keyword.

const a = 10;
a = 20;
Copy the code

An error is reported if the value of a constant is changed.

The data type

Those of you who have written Java or C already know that you need to specify data types when declaring variables, such as Java👇

int a = 10;
String s = "Wechat official Account: Robod";
float b = 3.14 f;
Copy the code

However, JavaScript only needs to write the var or let keyword when declaring variables, but this does not mean that JavaScript does not have data types, but because JavaScript is a weakly typed language, the type of data will be determined automatically during the program running, and does not need to be manually specified.

Have not learned other languages may have a friend, what is a data type, simple I make a mouth mentioned variables are used to store data in front of the container, since it is container, must be put one label for the container, don’t label may appear problem, and the chemical laboratory reagent bottle, no label one thousand drank hydrochloric acid as the water to do ~

Different data types occupy different amounts of memory. Data types can reduce the error rate of the system on the one hand and make better use of memory space on the other.

Basic data types

There are five basic data types

type instructions The default value
Number Digital type 0
Boolean Boolean value type false
String String type “”
Undefined Only variables are declared but no values have been assigned undefined
Null The value is null when declared null
  • Number

The default Number is decimal. It can also be used to express binary, octal, and hexadecimal numbers.

var a = 10; / / plastic value
var b = 3.14; / / floating point
var c = 0b10; // Binary, starting with 0b
var d = 077; // octal, starting with 0
var e = 0x11; // A hexadecimal number starting with 0x
var f = Number.MAX_VALUE; // the maximum value of the numeric type is 1.7976931348623157e+308
var g = Number.MIN_VALUE; // The minimum value of the numeric type, 5E-324
var h = Infinity; / / infinity
var i = -Infinity; / / an infinitesimal
var j = NaN; //Not a Number
Copy the code
  • String

A String is a String of characters wrapped in quotation marks (single or double quotation marks are acceptable). Single quotation marks are recommended. Since quotes are used to represent strings, how do I want to represent quotes in strings? JavaScript provides us with the transfer character, which can be denoted by “\” with a specific symbol:

If you want to get the length of a string, you can use its length attribute. Multiple strings can be concatenated by “+”, but strings are mostly concatenated between strings and variables.

var s1 = "Wechat official Account: Robod";
var len = s1.length; // Get the length of string s1
var s2 = "S1 has the length:" + len; // the length of s1 is 11
Copy the code
  • Boolean

Boolean values are true and false. Boolean values are 1 and 0 when used with Number.

var a = true;
var b = 1 < 0; //false
var c = 5 + a - b * 3; / / 6
Copy the code
  • Undefined and Null

A variable that is declared but not assigned is of type Undefined, and Null means an empty object, meaning nothing.

The typeof keyword

When we do not know what the data typeof a variable is, we can use the typeof keyword to retrieve its data type.

var a = "Wechat official Account: Robod";
console.log(typeof a); //string
var b = 33.33;
console.log(typeof b); //number
Copy the code

Conversion of data types

There are three ways to convert other types of data to string type.

//1.toString()
var a = 10;
var s1 = a.toString(); // The number a is converted to the string '10'
//2.String()
var b = true;
var s2 = String(b); // Boolean type b converted to string 'true'
//3. The last type is the previously mentioned "+" concatenated string
var c = undefined;
var s3 = c + ' '; // Concatenate with empty string to convert it to string 'undefined'
Copy the code

Since numbers can be converted to strings, strings can also be converted to numerals

// 1.parseint (), convert to an integer, the decimal part will be omitted
var num1 = parseInt('666'); // Convert the string '666' to the number 666
//2.parseFloat(), convert to decimal
var num2 = parseFloat('6.668'); // Convert string '6.668' to floating point 6.668
//3.Number(), integer floating point numbers can be converted
var num3 = Number('33'); // The string '33' is converted to the number 33
//3. Implicit conversion using operators
var num4 = '3.14' * 1; // Convert the string '3.14' to alphanumeric 3.14
Copy the code

Use the Boolean() function to convert other types of data to Boolean. Values representing null and negative are converted to false, such as “, 0, NaN, null, undefined, and others are converted to true.

The operator

Operators are symbols used to perform functions such as assignment, comparison, and arithmetic operations.

Arithmetic operator

Symbols used to perform two variable or worthwhile arithmetic operations are called operator operators.

The operator describe The sample
+ add 1 plus 1 is 2
– Reduction of 2 minus 1 is 1
* take 5 times 6 is 30
/ In addition to 30/5 is 6
% modulo 7%2 = 1

Increment and decrement operators

The increment operator is ++, and the decrement operator is –, and is used with the variable, which is divided into pre-increment (decrement) and post-increment (decrement).

// Increment operation, decrement is the same principle
var a = 10;
A =11, b=10
var b = a++;
B =11, c=11
var c = ++b;
Copy the code

Comparison operator

Also known as relational operator, is used to compare two data, after the comparison, return a Boolean value as the result of the comparison.

The operator describe
< Less than
> Is greater than
> = Greater than or equal to
< = Less than or equal to
= = Is equal to, will transform ⭐
! = Is not equal to
= = = Are congruent
! = = The congruent
? : Ternary operator

A bit different from the Java comparison operator is that “==” does not mean exactly equal. It only compares content for equality, not data types; “===” is the same as “== “in Java, the result is true only when the value matches the data type exactly.

var num = 10;
var s = '10';
// The string is converted to a numeric type before comparison, so the result is true
var bool1 = num == s;
// Inconsistent data type, result is false
var bool2 = num === s;
Copy the code

The ternary operator is a bit special in that it consists of three expressions.

/* Syntax: conditional expressions Statement 1: statement 2; The result of the conditional expression is first evaluated. If true, the value of statement 1 is taken; if false, the value of statement 2 is */
var a = (10 > 5)? (12 / 2) : 3; //10>5 is true, so a=12/2, which is 6
Copy the code

Logical operator

The operator used to perform Boolean operations is called a logical operator, and its return value is Boolean.

The operator instructions
&& Logic and
` `
! Logic is not

Both side of * * && and | | followed an expression,! ** is followed by an expression to the right.

// If both sides are true, the result is true. If either side is false, the result is false
var a = (5 > 3) && (5= = =4); //false
// If one of them is true, the result is true
var b = (2 < 1) | | (3 > 1); //true
// take the opposite result of the expression
varc = ! (5 > 3); //false
Copy the code

The expressions on either side of a logical operator can be booleans as well as values of other types.

Returns the result of the first expression when the first expression means 0, empty, etc., and the second expression when the second expression means otherwise
var a = ' ' && 456; //a=''
var b = 123 && (5 + 5); //b=10
Returns the result of the second expression, which returns the result of the first expression
var c = 123 || 456; //c=123
var d = undefined || 456; //d=456
Copy the code

Note that the logical operators are short-circuited, meaning that while the first expression can determine the final result, the second expression does not evaluate.

var num = 5;
//a=null,num=5
var a = null && ++num;
Copy the code

The assignment operator

Operator used to assign data to variables.

The operator instructions
= Assign the value to the right of the assignment number to the left
+ =, = Add or subtract a value before assigning
*=, /=, %= Multiply and divide by one value after the assignment 
var age = 10;
age += 5; // equivalent to age=age+5; age=15
age -= 5; // equivalent to age=age-5; age=10
age *= 10; // equivalent to age=age*10; age=100
Copy the code

Operator priority

In primary school, we all learned that when addition and subtraction and multiplication and division exist in a formula, multiply and divide first and then add and subtraction, and the contents in parentheses are calculated first, which is the priority of the operator, the one with the higher priority is calculated first, and the one with the lower priority is calculated later.

Process control

Flow control is used to control the order in which code is executed.

Sequential structure

Sequential structure is code executed in the order in which it is written. There is no specific syntax structure.

Branching structure

Branch structure is to execute different code paths according to different conditions in the process of code execution, so as to get different results, just like driving when you meet a fork in the road, take different roads will lead to different places. JavaScript provides two types of branching statements: the if statement and the switch statement.

The if statement consists of if, else, and else if

// When expression 1 is true, statement 1 in braces is executed
if(expression1) {statement1;
}
// Statement 2 is executed when statement 2 is true and statement 3 is executed when statement 3 is false
if(expression2) {statement2;
} else{statement3;
}
/* Execute the statement in curly braces when one of the expressions is true, and exit the branch structure; If neither match, execute the last else statement */
if(expression3) {statement4
} else if(expression4) {statement5
} else if(expression5) {statement6
} else{statement7
}
Copy the code

I mentioned that ternary expressions are very much like branching structures.

The switch statement, like the if else if, is multi-branched and executes different code based on different conditions

// Select the corresponding value by the value of the expression and execute the corresponding statement, which is not consistent with executing the last statement in default
switch(expression) {caseValue1: statement1
        break;
    caseValue2: statement2
        break; .default: Executes the last statement; }Copy the code

Loop structure

In the process of writing programs, often encounter some regular repeated operations, so with a loop structure you can repeat some operations, reduce the amount of code. There are three types of loop statements in JavaScript. JavaScript loops are the same as Java loops, so those with Java programming experience can skip this section.

The first is the for loop.

/* for (initialize variable; Conditional expression; Operation expression) {// loop body} */
for(var i=0; i<10; i++) {console.log('wechat Official Account: Robod');
}
Copy the code

The example above, the first of all, I value initialized to 0, then judging by conditional expression, qualified to perform the code in the curly braces, expression, and then the operation performed by conditional expression to determine again, accords with a condition code executed in curly braces again, until don’t conform to jump out of the loop conditional expression.

The second is the while loop.

/* While (conditional expression) {// loop body} */
var i = 0;
while (i < 10) {
    console.log('wechat Official Account: Robod');
    i++;
}
Copy the code

If the conditional expression is met, the code in curly braces is executed, and then the loop is determined until the conditional expression is not met.

The last one is the do while loop.

/* do {// loop body} while (conditional expression) */
var i = 0;
do {
    console.log('wechat Official Account: Robod');

} while (++i < 10);
Copy the code

Different from the while loop, the do while loop executes the code in curly braces regardless of whether the character meets the condition, and then evaluates the condition until it exits the loop when the condition does not meet. Compared with the first two loop structures, the do while loop is used less.

When executing a loop, you might run into a situation where you end the loop if certain conditions are not met and proceed to the next loop, using the continue keyword.

// Let's say we have a requirement to select students who are over 170 in the order of their student id
// If the height of a student does not match the height of the student, skip the student
for (var i = 1; i <= 50; i++) {
    if(Student I's height < 170cm) {continue;
    }
    // Take this student out
}
Copy the code

The counterpart of a continue is a break, which ends the loop when it encounters a break.

// Now there is another requirement. Please select a student who is over 170 in the order of student id number
// If you find a student above 170, break the loop
for (var i = 0; i <= 50; i++) {
    if(Height of student I >= 170cm) {console.log('my classmates I');
        break; }}Copy the code

An array of

An array, as its name implies, is a collection of data. Unlike Java, JavaScript arrays can hold any type of data. Arrays can be created in two ways, one using the new keyword, the other using array literals.

1. Use the new keyword
var array1 = new Array(a);// Create an empty array
var array2 = new Array(1.'Robod'.true); // Add an array element when creating an array
//2. Create an array using an array literal
var array3 = []; // Create an empty array
var array4 = [1.'Robod'.true]; // Add an array element when creating an array
Copy the code

Each element of the array has a number, which is the index. This number increases from 0 in the order in which the elements are inserted, and the elements are accessed by ** array name [index]**.

var array = new Array(1.'Robod'.true); // The index starts at 0 and goes from left to right
var name = array[1]; // Get index 1 and assign to variable name, name='Robod'
Copy the code

The length of an array is obtained by the length property of the array.

var array = new Array(1.'Robod'.true);
var len = array.length; // Get the length of the array using the length attribute
// The array can be iterated with a loop
for (var i = 0; i < len; i++) {
    console.log(arr[i]);
}
Copy the code

In JavaScript, you can expand an array by adding more data to the array, for example, if it’s already 3.

var array = new Array(1.'Robod'.true); // The size of the array is 3
//1. Modify the length attribute of the array to expand the array
array.length = 4; // Change the array size to 4, the fourth element is undefined
//2. Add data to an array by name [index]
array[4] = '666'; // The size of the array used to be 4, but now it can be expanded to 5 by assigning the fifth element
Copy the code

function

Usually in the process of writing code, often in different places to write some of the same function of the code, so these codes can be extracted from them, packaged into a different function, when you need to use this section of a function, you can call it directly, which can reduce a large part of the code.

Functions need to be declared before they are used. Functions are declared using the function keyword.

Function name () {function body} */
function f() { // Declare the function
    console.log('Robod');
}
/* Call the function with the function name () */
f(); // Call the function
Copy the code

In the case of 👆, there are no parameters and return values. The so-called parameters are the conditions specified to the function when the function is called. For example, the function is to find the sum of two numbers, so the two numbers to be added must be passed to the function when the function is called. The return value is a feedback to the caller when the function completes, using the return keyword.

function add(a, b) { //a,b are formal parameters that are passed from the caller
    var result = a + b;
    return result;
}
var sum = add(20.30); // The arguments in parentheses are the actual arguments passed to the function
Copy the code

In the 👆 example, there is a one-to-one correspondence between parameters and arguments. JavaScript allows the number of parameters and arguments to be different

function add(a, b) {
    var result = a + b;
    return result;
}
//1. If the number of arguments is greater than the parameter, the extra argument is discarded, i.e. 40 is discarded, resulting in 50
var sum1 = add(20.30.40);
//2. If the number of arguments is smaller than the parameter, the extra parameter value is undefined. The calculation result of this example is NaN
var sum2 = add(20);
Copy the code

Arguments is a built-in object for functions. Each function has a built-in object that stores all arguments passed as pseudo-arrays. This means that we can declare functions without specifying parameters. Arguments can be used to get all the arguments passed in.

// Compute the sum of any number of arguments
function add() {
    var result = 0;
    for (let i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}
var sum = add(20.30.40.50);
Copy the code

In the 👆 example, arguments are as long as 👇

Another way to declare functions is through function expressions, also known as anonymous functions.

var f = function () {
    / / the function body
}
f(); // Call the function with "variable name ()"
Copy the code

Functions declared in this way do not have function names, only variable names, functions are called through the variable name (), function calls can also take arguments. Both statements are similar.

scope

All variable names used in the code have a scope beyond which they cannot be accessed. Like WiFi signals, you can’t connect beyond the range of the signal.

Global scope

A global scope can be used anywhere, and global variables remain in memory until the browser closes and is destroyed. Variables declared outside a function using the var keyword are global variables and can be accessed in any function.

Local scope

A local scope, also known as a function scope, can be accessed only inside a function, but not outside it.

function f() {
    var a = 10;
}
console.log(a);
Copy the code

For example, in the above code, a variable a is defined inside function F. If it is accessed outside the function, an error will be reported.

Block-level scope

While many other languages have the concept of block-level scope, such as Java and C, JavaScript didn’t have block-level scope until ES6 introduced it with the let keyword. Block-level scope refers to the area surrounded by curly braces “{}”.

if (true) {
    var a = 10;
    let b = 20;
    console.log(b); / / 20
}
console.log('a=' + a); //a is a global variable, accessible
console.log('b=' + b); // the scope of b is block-level and cannot be accessed outside curly braces
Copy the code

The scope chain

In JavaScript, functions can be declared in a nested manner, so there is a question: which variable is accessed when multiple functions have a variable of the same name?

function f1() {
    var num = 10;
    function f2() {
        var num = 20;
        function f3() {
            console.log('f3:' + num); / / 20
        }
        f3();
        console.log('f2:' + num); / / 20
    }
    f2();
    console.log('f1:' + num); / / 10
}
f1();
Copy the code

Each function has a scope. If there are other functions within the function, a scope is created within the scope. The inner function can access the variables of the outer function, and the chain lookup is used to determine which data can be accessed by the inner function.

In the example above, f3 does not have a variable named num, so it accesses the variable num in F2 at the next level up, if it does not already have one, and so on. F2 and F1 each have a variable named num, so they access their own variable num.

Preliminary analysis

Js engine is divided into pre-parsing and code execution, pre-parsing means that all var and function in JS code will be promoted to the front of the current scope. Pre-resolution is divided into variable pre-resolution (variable promotion) and function pre-resolution (function promotion).

Variable preresolution

Take a look at this piece of code 👇

console.log(a); //undefined
var a = 10;
Copy the code

Undefined: undefined: undefined: undefined: undefined: undefined: undefined: undefined: undefined Because variable promotion raises the declaration of a variable to the top of the current scope, but does not promote the assignment, equivalent to the following code:

var a;
console.log(a); //undefined
a = 10;
Copy the code

So the print is undefined.

Function preparsing

Function promotion is the promotion of the function declaration to the front of the current scope.

f();
function f() {
    console.log('wechat Official Account: Robod');
}
Copy the code

The function declaration in the above code is placed after the function call, and will execute normally because the function declaration is placed in front of the JS engine, equivalent to the following code:

function f() {
    console.log('wechat Official Account: Robod');
}
f();
Copy the code

But declaring a function as a function expression is different, as in this code:

f();
var f = function () {
    console.log('wechat Official Account: Robod');
}
Copy the code

The function expression is preparsed the same as the variable preparsed, which is equivalent to the following code:

var f;
f();
f = function () {
    console.log('wechat Official Account: Robod');
}
Copy the code

So calls to function expressions are placed under function expressions.

object

In JavaScript, an object is an unordered collection of related properties and methods, and everything is an object, such as strings, numbers, arrays, functions, and so on. An object is a concrete thing, which is composed of attributes and methods. Attributes are some characteristics of the object and are nouns. Method is the behavior of an object and is a noun. For example, is a dog an object? A dog is not an object, it is a general reference, but a dog named Xiao Ming is an object, it has age, weight and other attributes, also has eating, running, jumping and other methods.

Objects can be created in three ways

literal

The literal used to create the object is “{}”, which contains the properties and methods of the object.

/* Syntax: var object name = {attribute name 1: attribute value, attribute name 2: attribute value, // separated by a comma...... Function () {function () {... }, method name 2: function (parameter) {... }... } * /
var robod = {
    name: 'robod'.height: 180.yanzhi: 'max'.eat: function (rice) {
        console.log('Rice man! Rice soul! Dry rice is the master! '); }}Copy the code

Object properties and method calls 👇

// Pass "object name. Property name "to call an object's property
console.log(robod.name);
// Call the properties of an object by "object name [' property name ']"
console.log(robod['yanzhi']);
// Pass "object name. Method name () "to call an object's method
robod.eat();
Copy the code

new Object()

Java uses the new keyword to create objects, and JavaScript can also create an object.

// Create an empty object
var robod = new Object(a);// Add attributes and methods via "=" assignment
robod.name = 'robod';
robod.height = 180;
robod.yanzhi = 'max';
robod.eat = function () {
    console.log('Rice man! Rice soul! Dry rice is the master! ');
}
Copy the code

The constructor

The first two methods can only create one object at a time. If two objects and methods are the same, you have to copy the code, which makes the code bloated. It is easier to create objects as constructors, which, like Java, extract some of the same properties and methods from an object and encapsulate them in a constructor.

function LiangZai(name, height, yanzhi, rice) {
    this.name = name; //this. attribute name = the parameter passed in
    this.height = height;
    this.yanzhi = yanzhi;
    this.eat = function () { / / this method name
        console.log(rice); }}var robod = new LiangZai('Robod'.180.'max'.'Rice man! Rice soul! Dry rice is the master! ');
var xiaoming = new LiangZai('Ming'.175.'Handsome ratio'.'millet');
Copy the code

For example, if robod and Xiaoming are created as objects, the constructor is equivalent to the Java Class concept.

Traverse object

Sometimes we might want to iterate over properties and property values in an object, and we can do that by doing for in, which is also a way to iterate over methods

var robod = {
    name: 'robod'.height: 180.yanzhi: 'max'.eat: function () {
        console.log('Rice man! Rice soul! Dry rice is the master! '); }}for (const key in robod) { // the key traversal in front of the attribute name and method name, followed by the object name
    console.log(key);
    console.log(robod[key]); // The format is object name [key].
}
Copy the code

Built-in objects

Built-in objects are objects that come naturally to JavaScript that provide common methods to simplify development.

The Math object

Math encapsulates constants and common methods of mathematics, such as absolute values and roundings. Math doesn’t use new; its properties and methods are static and callable, the equivalent of Java static classes.

Math.PI; / / PI
Math.floor(); // round down
Math.ceil(); // round up
Math.random(); // Round to the nearest round
Math.abs(); / / the absolute value
Math.max(); // Find the maximum value
Math.min(); // Find the minimum value
Copy the code

Date object Date

Date encapsulates date-related methods, such as retrieving a Date string that returns the number of milliseconds from January 1, 1970 to the present. Date objects are instantiated with new before being used.

var date = new Date(a);// Get the total number of milliseconds since Date, the number of milliseconds since January 1, 1970
/ / 1. The valueOf () method
date.valueOf();
/ / 2. GetTime () method
date.getTime();
//3. Now () method, static method, direct call
Date.now();
//4
+new Date(a);Copy the code

Array object

The Array object is used to create arrays. It contains array-related methods, such as deleting elements, adding elements, etc.

var arr = [1.2.3.4.5];
// Add one or more elements to the end
arr.push(6.7); //1, 2, 3, 4, 5, 6, 7
// Remove the last element of the array
arr.pop(); //1, 2, 3, 4, 5, 6
// Add one or more elements to the beginning of the array
arr.unshift(-1.0); //-1, 0, 1, 2, 3, 4, 5, 6
// Remove the first element of the array
arr.shift(); //0, 1, 2, 3, 4, 5, 6
// The first index of a given element in the array does not return -1
console.log(arr.indexOf(3));
arr.indexOf(3); / / 3
// The last index of a given element in the array does not return -1
console.log(arr.lastIndexOf(3)); / / 3
// Convert the array to a string, separating each item with a comma
console.log(arr.toString()); / / 0,1,2,3,4,5,6
// Convert an array to a string, separating each item with the specified delimiter
console.log(arr.join('￥$￥')); //0￥$￥1￥$￥2￥$￥3￥$￥4￥$￥5￥$￥6
Copy the code

String object

Strings in JavaScript, like strings in Java, are immutable, so all methods in a string object do not modify the string itself and return a new string when the operation is complete.

var s = 'The people, the soul, the people are the people.';
// Find the subscript of the specified content,indexOf(' character or string to find ', where to start the search (can be omitted))
console.log(s.indexOf('meal'.3)); / / 5
// Search from back to front, lastIndexOf(' character or string to find ', where to start search (can be omitted))
console.log(s.lastIndexOf('nothing'.5)); / / 4
Char char char char char char char char char char char char char char
console.log(s.charAt(6)); / / the soul
// Get the character at the specified position, STR [index number]
console.log(s[6]); / / the soul
// Concatenate two or more strings, equivalent to "+"
'The Cook'.concat('Soul of Dried Rice'.'All cooked food is for the best.'); // All the people are the master
// Truncate the string, substr(the index of the starting position, the number of characters truncated)
console.log(s.substr(4.3)); / / nothing
// Cut the string, slice(start position, end position (characters without end position))
console.log(s.slice(4.7)); / / nothing
// Replace character, replace(' replaced character or string ',' replaced by character or string '), replaces only the first one
console.log(s.replace('meal'.'rice')); // Dry rice people, dry rice soul, dry rice are people
// Convert to array, split(' delimiter ')
console.log(s.split(', ')); //[" I love you ", "I love you "]
Copy the code

The document query

The method I mentioned above is only a small part, more content can be referred to MDN website (developer.mozilla.org/zh-CN/), as long as you search the corresponding keyword in the search box, the corresponding content will appear, there are detailed description of attributes, methods and usage, etc.

But while it’s still a little inconvenient to use MDN’s web site directly, there’s a simpler way. I’ve been writing articles for a year, and here are all the tools I use! In this article, Amway has a very useful software – uTools. It includes a plug-in called JavaScript Documentation that allows you to quickly find the contents of the MDN.

See, as long as you press the shortcut key Alt+ space to call up uTools, then enter JS and press Enter to open the JavaScript document plug-in, and then enter the content you want to search is searching the content of MDN.

conclusion

As a matter of fact, I have learned JavaScript before, but I haven’t read it for a long time, and I didn’t take notes at that time, so I forgot a lot of things. Therefore, I quickly reviewed JavaScript during the holiday these days, and then wrote a note to record the knowledge points in JavaScript, in case I forgot them again after a long time. This article will focus on the basic syntax of JavaScript, manipulating page elements in the next article. What is wrong in the article welcome to correct!

Code word is not easy, if you can, give me a like, favorites, follow

If you like my article, please follow the wechat official account “R o B O D”.

This article has been uploaded to my Github repository DayDayUP: github.com/RobodLee/Da… , welcome to Star