1, Basic grammar
1. let command
(1) Declare variable
let a; Declare variables and assign values (variable initialization) let a = 100; console.log(a); // 100
(2) Note:
① Variable cannot be declared repeatedly
let star = 'ldh'; let star = 'zxy'; console.log(star); // Will report an error
② Written in a code block {} is called block level scope, global, function, eval
if else while for
{
let name = 'ldh';
console.log(name); // 'ldh' written outside {} is invalid.
}
③ There is no variable promotion
console.log(name); let name = 'ldh'; // report errors
④ Scope chain is not affected
{
let name = 'ldh';
function fn() {
console.log(name);
}
fn(); // ldh
}
2. const command
(1) Meaning:
An amount that declares that a constant value cannot be modified is called a constant
(2) Features:
① Be sure to declare and assign values.
const NAME = 'ldh'; console.log(NAME);
② Repeated declarations are not allowed. It is recommended that constants be capitalized.
const Message = 'Goodbye!'; const Mge = 30; // report errors
③ The value of a constant cannot be modified.
contst PI = 3.1415; PI = 3; //TypeError:Assignment to constant variable.
④ Block level scope
{
const NAME = 'ldh';
console.log(NAME); // It is invalid to write outside {}.
}
⑤ For the element modification of arrays and objects, it does not count as the modification of constants, and no error will be reported.
const TEAM = ['a', 'b', 'c'];
console.log(TEAM.push('d')); // 4
3. Deconstruction assignment
(1) Meaning:
ES6 allows you to extract values from arrays and objects according to a certain pattern and assign values to variables, which is called deconstruction assignment.
(2) Deconstruction of arrays
const F4 = ['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu']; let [a,b,c,d] = F4; // It can also be const console.log(a); // Zhang San console.log(b); // Li Si console.log(c); // Wang Wu console.log(d); // Zhao Liu
(3) Deconstruction of objects
const ldh = {
name: 'Lau Andy',
age: 18,
sing: function () {
console.log('sing');
},
};
let { name, age, sing } = ldh;
console.log(name); // Lau Andy
console.log(age); // 18
sing(); // sing
4. Template string
(1) Meaning:
ES6 introduces a new way to declare strings with backquotes``
(2) Statement:
let str = `I am a string`; console.log(str,typeof str);
(3) Line breaks can appear directly in the content
let str = `<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<ul>`;
(4) , variable splicing ${}
let name = 'Lau Andy';
let text = `${name}Is my idol`;
console.log(text); // Andy Lau is my idol
2, Extension of function
1. Default value of function parameter
(1) Meaning:
ES6 allows assignment of initial values to function parameters
(2) For example:
① Formal parameter initial value
function add(a, b, c = 3) {
// The default value parameter is generally placed in the last position.
return a + b + c;
}
let result = add(1, 2);
console.log(result); // 6
② Combined with deconstruction assignment
function fn({name , age = 20, sex }) {
// let name = pink.name;
// let age = pink.age;
// let sex = pink.sex;
console.log(name); // ldh
console.log(age); // 20
console.log(sex); // male
}
fn({
name: 'ldh',
sex: 'male',
});
2. rest parameter
(1) Meaning:
ES6 introduces the rest parameter to obtain the function arguments instead of arguments.
(2) For example:
① ES5 arguments how to get arguments
function date() {
console.log(arguments);
}
date('a', 'b', 'c', 'd');
② ES6 rest parameters
function date(...args) {
console.log(args); // Get an array
}
date('a', 'b', 'c', 'd');
③ The rest parameter must be placed at the end of the parameter
function fn(a, b, ...args) {
console.log(a); // pink
console.log(b); // ldh
console.log(args); // Get an array of length 6
}
fn('pink', 'ldh', 'a', 'b', 'c', 1, 2, 3);
3. Arrow function
(1) Definition:
ES6 allows the use of [arrow] () = > to define functions.
(2) Syntax:
A normal function declares a function
let fn = function() {
...
}
The arrow function declares a function
let fn = (a, b) => {
//There are formal parameters in parentheses
return a + b;
};
Call function
let result = fn(1, 2);
console.log(result); // 3
(3) For example:
① This is static. This always points to the value of this under the scope where the function is declared.
function getName() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
};
//Set the name property of the window object.
window.name = 'pink';
//Direct call
getName(); // pink
getName2(); // pink
// Create an object
const SCHOOL = {
name: 'Shang Silicon Valley',
};
//The call method call can change the direction of the ordinary function this, but cannot change the direction of the arrow function this.
getName.call(SCHOOL); // Shang Silicon Valley
getName2.call(SCHOOL); // pink
② Arrow functions cannot be instantiated as construction objects
let Ldh = (name, age) => {
this.name = name;
this.age = age;
};
let pink = new Ldh('Lau Andy', 18);
console.log(pink);
//The above code will report an error
③ Arrow functions cannot use the arguments variable
let fn = () => {
console.log(arguments);
};
fn(1, 2, 3);
//The above code will report an error
4. Abbreviation of arrow function
(1) Omit parentheses when there is only one formal parameter.
let add = n => {
return n + n;
};
console.log(add(9)); // 18
(2) Omit curly braces when there is only one statement in contemporary code body.
let pow = n => n * n; // In this case, return must be omitted, and the execution result of the statement is the return value of the function.
console.log(pow(9)); // 81
//This is equivalent to performing the following operations
let pow = (n) => {
return n * n;
};
console.log(pow(9)); // 81
(3) Note:
① Application scenario of arrow function: it is suitable for this independent callback, timer and array method callback.
② Not suitable for event callback, object method.
3, Array extension
1. Introduction to extension operator
(1) Meaning:
The [...] extension operator can convert [array] to comma separated [parameter sequence]
(2) For example:
// Declare an array
// const f4 =['a', 'b', 'b', 'c']; // => 'a', 'b', 'b', 'c'
// //Declare a function
// function fn() {
// console.log(arguments);
// }
// fn(...f4); // Similar to FN ('a ',' B ',' B ',' C ')
// fn(f4);
2. Application of extension operator
(1) Merging of arrays
const name1 = ['a', 'b']; const name2 = ['c', 'd']; // const name3 = name1.concat(name2); // Traditional writing const name3 = [...name1, ...name2]; // new method console.log(name3);
(2) Cloning of arrays
const f4 = ['a', 'b', 'c', 'd']; const newf4 = [...f4]; console.log(newf4); // ['a', 'b', 'c', 'd']
(3) Convert a pseudo array to a real array
const divs = document.querySelectorAll('div'); // Write four div tags on the body part
const divArr = [...divs];
console.log(divArr); // [div, div, div, div]
3. Method of adding array
① Array.of()
//Converts a set of values to an array var arr=Array.of(1,2,3,4); console.log(arr);//[1,2,3,4]
② Array.from()
//Convert pseudo array to array
var aLi=Array.from(document.getElementsByTagName("li"));
console.log(aLi instanceof Array);//instanceof determines whether an object belongs to an instance of a class
③ Array.find()
//Find data by conditions and return the first qualified data
var arr=[1,2,4,3];
var n=arr.find(function(item,index,array){
return item>3;
})
console.log(n); // 4
④ Array.findIndex()
//Find the subscript of the qualified data in the array. If it is not found, it returns undefined
var arr=[1,2,4,3];
var n=arr.findIndex(function(item,index,array){
return item>3;
})
console.log(n); // 2
⑤ fill()
// The fill() method fills an array with the given value. var arr = ['a','b','c'] arr.fill(7); // [7,7,7] new Array(3).fill(7); //[7,7,7]
⑥ includes()
// This method returns a Boolean value indicating whether an array contains the given value, similar to the include method of string. ES6 This method is introduced. var arr = [1,2,3] arr.includes(2); // true arr.includes(4); // false [1,2,NaN].includes(NaN); // true
⑦ for of and for in
// 1. for of is ES6 and fon in is ES5
// 2. for of traverses values and for in traverses keys
// 3. for of cannot traverse objects. for in can traverse both arrays and objects
// 4. When for of traverses the array, if there are undefined items, the traversal result is undefined, but for in cannot
// 5. for of cannot traverse the attributes (custom attributes) defined on the prototype, and for in can traverse
// 6. The compatibility of for is not very good. Android wechat browser on the mobile terminal does not support it, and Safari supports it
Array.prototype.hehe="ha-ha";
var arr=[1,2,3,,4];
for(let item of arr){
console.log(item)//1 2 3 undefined 4
}
for(let prop in arr){
console.log(prop)//0 1 2 4 hehe
}
var obj={
name:"Sun Yizhen",
age:20
};
for(let item of obj){//report errors
console.log(item)
}
for(let prop in obj){
console.log(prop)//name age
}
4, Object extension
1. Abbreviation of object
// ES6 allows variables and functions to be written directly into braces as object properties and methods.
let name = 'pink';
let change = function (a) {
console.log('Can change us!');
};
const school = {
name, //When the key value is the same as the value value, we can write one
change,
improve() { // Traditional method improve:function() {}
console.log('Can improve our skills');
},
};
console.log(name); // pink
school.change(); // Can change us
school.improve(); // Can improve our skills
2. Adding method of object
① Object.is()
//Determine whether two objects point to the same memory address
var obj1={a:1,b:2};
var obj2=obj1;
Object.is(obj1,obj2);//true
Object.is('foo','foo'); //true
Object.is({},{}); //false
// The same value is equal, similar to = = = except that: + 0 is not equal to - 0; NaN equals itself
② Object.assign()
//Merge objects
var obj1={name:"Sun Yizhen",age:20};
var obj2={sex:"female"};
var newObj=Object.assign(obj1,obj2);
console.log(newObj); //{name: "Sun Yizhen", age:20,sex: "female"}