1. Variable declaration keyword
1. The VaR global variable will be promoted
2.let local variables are similar to var, except that they can only function locally, that is, they function in a pair of {}, and they will not promote variables and cannot be declared repeatedly
3. The variable type declared by const is generally constant and must be assigned a value. The variable name must be capitalized
2. Structure
1. Array
1. Generally speaking, it can be simply understood as parsing an array or object into a separate variable
2. Basic format:
var [a,b,,c='defalut',...res]=arr
Parsing: comma represents the next bit,... res represents all the remaining elements in the array and can only be placed at the end of the array, and c='default 'represents the default value
3. Exchange variables
[a,b]=[b,a]
2. Structure
Basic format:
var {name,age,say='Hello',...res}Note: there is no order of attribute names in the object
3. String
3.1. String template
Basic format: ` ${js variable} `, which can realize line feed, add special symbols and other operations
var obj = { name: "Zhang San", age: 18 };
var str4 = "Hello, he is" + obj.name + "this year" + obj.age + "year";
console.log(str4);
var str5=`Hello, he is ${obj.name}，this year ${obj.age}`
console.log(str5);
3.2. Traversal for of
var str = "The party is in my heart, the powerful country has me";
// 01 for of str
for (let s of str) {
console.log(s);
}
3.3. There are three main detection methods: return true/false
3.3.1.include(sub) check whether it contains
var str = "The party is in my heart, the powerful country has me";
// 02 includes
console.log(str.includes("my")); //false
console.log(str.includes("I")); //true
3.3.2.startWith(sub) detection starts with
var str = "The party is in my heart, the powerful country has me";
// 02 startsWith starts with
console.log(str.startsWith("wo")); //false
console.log(str.startsWith("party")); //true
3.3.3.endtWith(sub) detection ends with
var str = "The party is in my heart, the powerful country has me";
// 02 endswith ends with
console.log(str.endsWith("wo")); //false
console.log(str.endsWith("I")); //true
3.4 de blank
3.4.1 trim () remove the blank at both ends
// 03 es5 Remove Blank trim remove blank at both ends
var str1 = " The party is in my heart, the powerful country has me ";
console.log(str1);
console.log(str1.trim());
3.4.2 trimleft() removes the left margin and trimlight() removes the right margin
// 03 trimleft remove the left margin trimlight remove the right margin
var str1 = " The party is in my heart, the powerful country has me ";
console.log(str1);
console.log(str1.trimLeft());
console.log(str1.trimRight()); 
3.5 string repetition
// 05 repeat repeat
var str2 = "How do you do\n";
console.log(str2.repeat(6));
3.6 filling. Padend (times, content)
// 06 padding at the beginning of padstart and padding at the end of padEnd
var str3 = "8987";
console.log(str3.padStart(8, "0"));
console.log(str3.padEnd(8, "0"));
console.log("LOVE".padEnd(10, "-"));
4. Array high order method
4.1forEach() traversal
// 01 forEach traversal
var arr = [1, 3, 5, 9];
// The element traversed by item, the subscript of the index element, and self the current array
arr.forEach(function (item, index, self) {
console.log(index, item, self);
});4.2map() mapping
// 02 map mapping, mapping a new array from an existing array
var arr = [1, 3, 5, 9];
var arr2 = arr.map(function (item, index, self) {
return item * 100 + "￥";
});
console.log(arr);
console.log(arr2);
4.3 filter
// 03 filter filter
var arr = [1, 3, 5, 9];
var arr3 = [20, 1, 5, 36, 45];
var arr4 = arr3.filter(function (val) {
// When the returned value is true, the current element is retained
// When the returned value is false, the current element is filtered
return val > 5;
});
console.log(arr4);
4.4 reduce (cumulative)
// 04 reduce cumulative
var arr = [1, 3, 5, 9];
var all = arr.reduce(function (res, val, index, self) {
return res * 10 + val;
// return res+val
});
console.log(all);
// 1 1+3 1*10+3
// 2 4+5 13*10+5
// 3 9+9 135*10+9
4.5 some() has a
// 05 some detection returns true as long as there is a match
var arr = [1, 3, 5, 9];
var res = arr.some(function (item) {
return item > 10;
});
console.log(res); //false
4.6 every
// 06 every detection is true (every match is true)
var arr = [1, 3, 5, 9];
var result = arr.every(function (item) {
return item > 5;
});
console.log(result); //false
4.7 find() find element
// 07 find the first data greater than 10 in the data
// Find find element
var arr = [1, 8, 6, 3, 4, 20, 45, 0, 12];
var n = arr.find((item) => item > 10);
console.log("First digit:" + n);
4.8 findindex() find element subscript
// 08 findIndex find element subscript
var arr = [1, 8, 6, 3, 4, 20, 45, 0, 12];
var ind = arr.findIndex((item) => item > 10);
console.log("subscript:" + ind);5. Arrow function
// 01 arrow function omitted function
// 02 = > left parameter
// 03 function body and return value on the right of arrow
// 04 pass two or more parameters in parentheses
// 05 if there are multiple lines in the function body, curly braces need to be added, and return needs to be in the curly braces
// 06 if an object is returned, wrap it with ()
var obj = {
name: "Zhang San",
age: 20,
grow: function () {
// Who calls setInterval and who is this
// The arrow function's this points to the function's upper scope this
window.setInterval(() => {
console.log(this);
this.age++;
console.log(this.name + "already" + this.age + "la");
}, 1500);
},
};
obj.grow();
6. Function
6. Function
function fn(a = 5, b = 6) {
alert(a + b);
}
// Call extension parameters
var ps = ["Hello", "Zhu Yilong", "the weather is nice today", "Want to come out and play together?"];
function meeting(p1, p2, p3, p4) {
var str = `What should I say? ${p1},${p2},${p3},${p4}`;
console.log(str);
}
// ps array expansion, passing in
meeting(...ps);
// Definition: indefinite parameter
// Parameters are not necessarily... Arrays to receive
function add(...arg) {
var res = arg.reduce((a, b) => a + b);
console.log(res);
}
add(1, 2, 3, 4);
7. Object: object abbreviation and object dynamic attributes
// Object abbreviation
var name = "Zhang San";
var age = 22;
var say = function () {
alert(`Hello, I'm ${this.name}`);
};
var obj = {
name,
age,
say,
doit() {
alert(this);
},
};
console.log(obj);
// Dynamic attributes (object attributes can be spliced through js)
var nick = "hello";
var myobj = {
name: "Zhang San",
[nick + "speak"]: "Hello",
};
console.log(myobj);
8. Class: this in definition class, instantiation class and instantiation class
Object oriented features: 01 inheritance (extensions) 02 package (constructor) 03 dynamic (04) interface
// people
// Define class
class Prerson {
// Constructor
constructor(name, age) {
// The class instance that this in the class points to
this.name = name;
this.age = age;
}
eat() {
alert("I don't like the weather today");
}
}
// Instantiation class
// P1 and P2 are called instances, instance objects
var p1 = new Prerson("Zhang San", 30);
var p2 = new Prerson("Li Si", 22);
// teacher
// Extensions inheritance
class Teach extends Prerson {
constructor(name, age, major) {
super(name, age);
this.major = major;
}
teach() {
console.log(`I'm going to teach the students ${this.major}curriculum`);
}
}
// Instantiation teacher
var t1 = new Teach("Teacher Ju", 26, "biology");
var t2 = new Teach("Teacher Wen", 22, "Physics");
console.log(t1);
console.log(t2);
9. Module
9.1 import:
import{name,fun,Square from './api.js'}
Alias as, * for all
import*api from './api.js'
api.name;api.fun()
9.2 export:
Export {name, fun, square} is exported multiple times
export default Squart By default, you can only export once
10.set: set (array) without duplicate elements
// set array de duplication
var arr = [1, 15, 16, 1, 2, 5, 1, 2, 3, 2, 3];
var arr2 = [...new Set(arr)];
console.log(arr2);
// Instantiate set
var s1 = new Set([1, 8, 9, 8]);
for (let s of s1) {
console.log(s);
}
s1.add("love");
s1.delete(8);
console.log(s1.has("love"));
console.log("Length:", s1.size, s1);