ES6 grammar foundation summary

What are the three major components of JavaScript

1. ECMAscript;
The core of JavaScript describes the basic syntax (var, for, if, array, etc.) and data types (number, string, Boolean, function, object (obj, [], {}, null), undefined). ECMAScript is a set of standards that define what a language (such as JS) looks like.
2. Document Object Model DOM;
DOM (document object model) is an application program interface (API) for HTML and XML. DOM will plan the entire page into a document composed of node levels. Each part of an HTML or XML page is a derivative of a node. Consider the following HTML page:
<html> <head> <title>Sample Page</title> </head> <body> <p>hello world!</p> </body> </html>
DOM creates a tree to represent documents, so that developers have unprecedented control over the content and structure of documents. Nodes (getElementById, childNodes, appendChild, innerHTML) can be easily deleted, added, and replaced with DOM API s.
3. Browser object model BOM
Access and operate the browser window. For example, pop up a new browser window, move, change and close the browser window, provide detailed navigator object, detailed location object, detailed screen object, support for cookies, etc.

As a part of JavaScript, BOM is not supported by relevant standards. Each browser has its own implementation. Although there are some non factual standards, it still brings some trouble to developers.

let

var a = 1; Global variables, which can be declared repeatedly, can be used first, in the declaration
let a = 1 global declaration means global variable and local declaration means local variable. It cannot be declared repeatedly and must be declared before use
const a = 1 constant. Constants can only be assigned at the time of declaration. Once assigned, they cannot be modified. Other constants are similar to let

Destructuring assignment

Deconstruction assignment of object

Deconstruction assignment of object

let obj = {
    a: 1,
    b: 2,
    c: 3
};
let {a,c} = obj; 
console.log(a,c);//Output 1 3

Deconstruction assignment of array

 let arr = [1,2,3];
 let [a,c] = arr;
/console.log(a,c); Input 1 2

Object deconstruction: the variable name and attribute name should correspond
Array deconstruction: the variable name corresponds to the value index

String deconstruction copy

let str = "ABCD";
let [a,b] = str;
console.log(a,b); //Output A B 

Expand operator

// Expand operator
let arr = [1,2,3,4,5];
let arr2 = ["a",...arr,"b","c"];
// Put the data in arr into arr2 and arrange it from the first bit
console.log(arr2); //Output ["a",1,2,3,4,5,"b","c"]

Remaining parameters

// Remaining parameters
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a,b); //Output 1, 2, 3, 4, 5 

set

set is a de duplication array

let arr = [1,2,3,4,1,3,5,2];
let data = new Set(arr);
console.log(data);
//duplicate removal
console.log([...data]);//Convert to array

The above is output 12345
 method:
    size Data length
    Set.add() Add child return set Data itself
    Set.delete() Delete child return true | false 
    Set.has() Include children
    
data.add("a").add("b") Chain use

map

let data = new Map([["leo",40],["zmouse",30],["reci",20]]);
data.set("Liu Wei",41);
data.delete("leo");
console.log(data.get("zmouse"));
console.log(data);

method:
    size Data length
    data.set() Add child return set Data itself
    Set.delete() Delete child return true | false 
    Set.has() Include children

Arrow function

let fn = (nub1,nub2)=>nub1*nub2; // Parameter = > return value (parameter 1, parameter 2) = > return value (braces are not required)
let fn = ()=>{
console.log(111);
}; // Braces are required
//() => {
Execute statement
return
}

Default parameters

The arguments parameter is provided in the function function by default, but the arrow function does not. You need to declare it yourself

let fn = (a,arg)=>{
    //console.log(arguments);
    console.log(a,arg);
};

fn(1,2,3,4);  //Output 1, 2,

let fn = (a,...arg)=>{
    //console.log(arguments);
    console.log(a,arg);
};

fn(1,2,3,4);  //Output 1, 2, 3, 4,

function fc(){
	console.log(arguments)
}
fc(1,2,3)  //Output 1 2 3
``
#### this point

document.onclick = function(){
let fn = (a,...arg)=>{
console.log(this);
};
fn();
};

window.onclick = function(){
let fn = (a,...arg)=>{
console.log(this);
};
fn();
};
//The arrow this points to this in the scope where the arrow function is defined
//Output document and window respectively

#### Function defaults

let fn = (nub=0,nub2=0)=>{
console.log(nub+nub2);
}
fn();
``

array

Array.from

Array.from(arrayLike,mapFn)
**Parameter one**: Required according to arrayLike New array generated
**Parameter two**: Optional, callback function, which can change the contents of the generated array
let datas = {
        0: "a",
        1: "b",
        2: "c",
        length: 3
    };
 // datas = Array.from(datas);
 datas = Array.from(datas,(item,index)=>{
     console.log(item,index,this);
     return item.toUpperCase();
 },document);
 console.log(datas);  //Return to ABC

Array.isArray

Array.isArray(data) detects whether the data is an array
Parameter: data to be detected
Return value: true array, false non array

Array.of

Array.of(element0, element1,..., elementN) converts parameters to an array
Parameter: elementN data to be put into the array
Return value: new array

let arr = Array.of(1,2,3,4,5,5,6);
console.log(arr);

arr.find

Array. Find (callback, thisarray) finds the value of the first element in the array that meets the requirements
Parameter: callback (callback function)
Optional parameter: the value of this object when thisArg executes callback
Return value: the value of the first element in the array that satisfies the provided test function; otherwise, undefined is returned

 let arr = [1,2,5,6];
 let val = arr.find((item)=>{
    return item >= 5;
 });
 console.log(val);

arr.findIndex

let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
    return item >= 5;
});
console.log(index);

Array.findIndex(callback, thisArg) finds the value of the first element in the array that meets the requirements
Parameter: callback (callback function)
Optional parameter: the value of this object when thisArg executes callback
Return value: the index of the value that meets the requirements

arr.flat

Flattened multidimensional array
Optional parameter: depth specifies the structure depth of the nested array to be extracted. The default value is 1(Infinity indicates the deepest)
Return value: a new array containing all the elements in the array and subarray

let arr = [
    [1,2],
    [3,4],
    [
        [6,7],
        [
            [8],
            [9,10]
        ]
    ]
];
console.log(arr.flat(Infinity));

arr.flatMap

let arr = [
    [1,2],
    [3,4],
    [6,8]
];
let arr2 = arr.flatMap((item,index,array)=>{
    item = item.filter(item=>item>=2);
	console.log(array) //Output [1,2] [3,4] [6,8]
    return item;
});
console.log(arr2); //Output [2,3,4,6,8]

First, use the mapping function to map each element, and then compress the result into a new array. It is almost the same as map and flat with depth value 1, but flatMap is usually a little more efficient in merging into one method
Parameter: currentValue the element currently being processed in the array
Index optional, the index of the current element being processed in the array.
Array optional, the called map array

arr.fill

Array arr.fill(value, start, end]); Fills all elements in an array from the start index to the end index with a fixed value. Do not include termination index
Parameter: the value used to fill the array elements.
Optional parameters:
Start start index. The default value is 0.
end terminates the index. The default value is arr.length

let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr);//Output a f f d e

arr.includes

arr.includes(valueToFind, fromIndex) determines whether the array contains a specified value
Parameter: valueToFind the value to find
Optional parameter: search backward from fromIndex
Return value: true means that the array contains valueToFind, and false means that the array does not contain fromIndex

let arr = ["a","b","c","d"];
console.log(arr.includes("a",3));

character string

str.includes

str.includes(valueToFind, fromIndex) determines whether the string contains a specified value
Parameter: valueToFind the value to find
Optional parameter: search backward from fromIndex
Return value: true means that the array contains valueToFind, and false means that the array does not contain fromIndex

str.endsWith

str.endsWith(searchString, length) determines whether the current string ends with another given substring
searchString substring to search
Length is the length of str. The default value is str.length
Return value: returns true if the incoming substring is at the end of the search string; Otherwise, false will be returned.

str.startsWith

str.startsWith(searchString, position) determines whether the current string starts with another given substring
Parameters:
searchString substring to search
Position searches str for the starting position of searchString. The default value is 0, which is the beginning of the real string
Return value: returns true if the incoming substring is at the beginning of the search string; Otherwise, false will be returned.

str.repeat

str.repeat(count) constructs and returns a new string containing a specified number of copies of strings connected together
Parameter: count is an integer between 0 and positive infinity. Indicates how many times the original string is repeated in the newly constructed string
Return value: the new string generated

<script>
let str = "123";
console.log(str.repeat(5)); //Output 123123123123123

Template string

This was probably the case when strings and variable variables were fused together

'<p>full name'+name+'</p>'

In addition, syntax errors will be reported if the line breaks. The template string introduced in es6 is first changed from single quotation marks to single quotation marks·

·<p>full name ${name}</p>·

There is no error in line feed. There is no need to make so many single quotation marks. The single quotation mark becomes a dot "·"

let gender = function(){
    return "male"
};
·<p>Gender ${gender()}</p>· //You can also insert methods

es6 new object method

Object.assign

Object.assign(target,... sources) copies the values of all enumerable attributes from one or more source objects to the target object

let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    c: 3,
    d: 4
};
let f = null;
let obj3 = Object.assign({},obj,obj2,{f});

Object.is

Boolean Object.is(value1, value2) determines whether two values are the same value.

Rule: (true in the following cases)
Both values are undefined
Both values are null
Both values are true or both are false
Two values are strings composed of the same number of characters in the same order
Two values point to the same object
Both values are numbers and
Both are positive zero + 0
All negative zeros - 0
It's all NaN

babel

babel is a javascript compiler. Some methods in es6 are not compatible with the browser. You need to use babel and compile it into the original usage before the browser can be compatible

Tags: Javascript html5 html

Posted on Tue, 19 Oct 2021 15:37:01 -0400 by mbbout