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