JavaScript consists of:

ECMAScript**** is a scripting language standardized by Ecma International (formerly known as the European Computer Manufacturers Association) through ECMA-262. The language is widely used on the World Wide Web. It is often referred to as JavaScript or JScript, so it can be understood as a standard for JavaScript, but in fact the latter two are implementations and extensions of the ECMA-262 standard.

The BOM (Browser Object Model) is the Browser Object Model that gives JavaScript the ability to “talk” to the Browser. The browser object model is the Window object.

DOM (Document Object Model) is the Document Object Model through which all elements of an HTML Document can be accessed. Document Object Model HTML Document object.

1. Introduction to the composition of javaScript:

Including: ECMAScript, DOM, BOM

1.ECMAScript: Javascript core syntax, platform independent

For example: define variables, if,switch,for, array Api, string Api, regular Api…..

2.DOM:(Document Object Model) For the browser tag operation for example: get ID, get class name, get tag name

Redraw: refers to the page color change, does not affect the DOM space change color,background reflux: Refers to the size of the page elements (width, padding, height, margin), the change of the position: left, top, bottom, right and tranform: translateX redrawn (300 px) is not necessarily cause reflux, but return must be redrawnCopy the code

3.BOM:(Browser Object Model) for Browser API operations

History: history. The go (), the history, the back () pusState, popState, replaceState navigator: information related with browser system

The navigator userAgent reference: https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator location: the main location for your browser's address bar access to relevant information. Search the location. The href Location. A hash reference: https://developer.mozilla.org/zh-CN/docs/Web/API/LocationCopy the code

ECMA6/7/8… New feature ES6 ES2015….. ES11 ES2020

For the latest developments in ES6/7/8/9/ : github.com/tc39/propos…

Let and const: The point

1. What is the difference between let and var

Similarities: Both define variables

Var has variable promotion, let does not 2. Var allows repeated definitions of variables. Let does not allow repeated definitions 3. Is there a block-level scope? {} Global scope: scope defined outside a function Local scope: scope defined inside a function Block-level scope: scope defined within {} braces

2. What is the difference between let and const

Let defines a const variable that cannot be changed. If you want to change it, define it as an object. In this way, you can modify the properties of the object. Is the basic data of ES6 new type number, string, Boolean, null, and undefined, symbol (new) ES6

Symbol: The value defined is unique

The values of two symbol types are never different

Such as:var s1=Symbol(a)var s2=Symbol()
s1=== s2
 false
Copy the code

Extension operator (…) The extension operator (also called the expansion operator) has two functions:

1.Convert an array to a list of data [a,b,c,d]-- >a,b,c,dvar arr1=[Awesome!.777.888]
var arr2=['hello'.'vuejs']
var result=[...arr1,...arr2]
Copy the code

[a,b,c,d] [a,b,c,d] [A,b,c,d]

3. Expand the object

varresult={... obj1,... Obj2} or result =ObjectThe assign ({}, obj1 obj2) such as:function sum1(str,... args) {
  var result=0;
  for(var i=0; i<args.length; i++) { result+=args[i] }return result;
}

sum1('Please enter'.20.30.40)
classClass defines a class:class Person {
   constructor(a,b) {
     / / the constructor
     this.attribute =a} method1Method () {}2Method () {}3() {}} inherit from a class:class Child extends Person {

   constructor(a,b) {
     super(a)// represents the parent class
     / / the constructor
     this.attribute =a} method1Method () {}2Method () {}3() {}}Copy the code

Set and map: Set: is understood to be a distinct array

Convert data of type set to array:

Var s=new Array. From (s) or […s]

var s=new Set() s.add() s.has() s.delete() s.size

For example, de-duplicate an array:

var arr=[3.34.23.2.2.23.23.3.34.34.34.45]

[...new Set(arr)]
Copy the code

Map: an object with an enhanced data type for the key of the object. Previously, it could only be a string, but now the attributes of the object can be of any data type!

{
  "name":'jack'.'10':'abc'.'undefined':999
}

var m1=new Map() m1.set(attribute name, value)/ / setM1.get (attribute name)/ / to getM1.delete (property name)/ / delete


// Iterate over the Map type to get all the values
for(var [key,value] of m1) {

  console.log(key)
  console.log(value)
}
Copy the code

Promise:

1.Implementation of an asynchronous solution for handling callback hell:function waiting() {

    return new Promise((resolve,reject) = >{
    
             setTimeout(function() {
      
                //console.log(2)
                reject('ha ha')},2000)      

    })

 }


waiting().then(res= >{
   console.log(1)
   console.log('res:',res)
    console.log(3)

}).catch(error= >{

   console.log('error:',error)

})

.then
.catch
.race
.finally
Promise.all([waiting(),waiting2(),waiting3()])
   .then(res= >{


   }).catch(res= >{})Copy the code

Async/await (ES2017) key

Serial execution: the first asynchrony must be executed, and the result of the first asynchrony must be passed to the second asynchrony function before the second asynchrony operation is performed

// The first function
function waiting() {
    return new Promise((resolve,reject) = >{
          // I'm just using setTimeout to simulate Axios,
             setTimeout(function() {
                resolve('Second interface returns')},2000)})}// The second function
function waiting2() {
    return new Promise((resolve,reject) = >{
          // I'm just using setTimeout to simulate Axios,
             setTimeout(function() {
                reject('Return from second interface')},2000)})}async function handleFn() {
   console.log(1)
   // Wait for the first function to return
    let res=await waiting()
    console.log('res:',res)
    
    // Wait until the second function returns
    let res2=await waiting2(res)
    console.log(res2)} Parallel: Both interfaces are executed simultaneouslyfunction waiting() {
    return new Promise((resolve,reject) = >{
          // I'm just using setTimeout to simulate Axios,
             setTimeout(function() {
                resolve('Second interface returns')},2000)})}function waiting2() {
    return new Promise((resolve,reject) = >{
          // I'm just using setTimeout to simulate Axios,
             setTimeout(function() {
                reject('Return from second interface')},2000)})}async function handleFn() {
   console.log(1)
    // Execute concurrently,waiting (),waiting2() until both interfaces have successfully returned
    let res=await Promise.all([waiting(),waiting2()])
     console.log('res:',res)
     console.log('end')
 }

 handleFn().catch(res= >{

     console.log('error:',res)
 })
Copy the code

This is the first article for beginners to understand the front-end scripting language JavaScript. IT is being continuously updated. I hope IT will be helpful to you on the way.