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);