In order to express the deep condolences of the people of all ethnic groups across the country for the sacrifice of martyrs and compatriots who died in the fight against the new crown pneumonia epidemic, the State Council issued an announcement today, deciding to hold a national mourning event on April 4, 2020. During this period, the national and foreign embassies and consulates lowered their flags to mourn, and public entertainment activities were suspended nationwide. Starting at 10 o'clock on April 4, people across the country observed a three-minute silence. Cars, trains, and ships sounded their horns, and air defense sirens sounded.
May the dead rest in peace, may the living work hard, and may the motherland be prosperous and strong.
ES6
1. Historical
ECMAScript and JS
ECMA are standards. JS is the implementation of
EMCAScript, referred to as ES.
Low-end browsers mainly support ES3.1.
High-end browsers mostly support ES6
. 2. Historical version
1996.11, ES1.0 Netscape submitted JS to ECMA organization, ES Officially appeared on
June 1998, ES2.0 was officially released on
December 1999, ES3.0 was widely supported
2011.06, ES5.1 became an ISO international standard
2015.06, ES6.0 was officially released
3. Compatibility issues
ES6 supports IE10+, Chrome, Firefox, NodeJS, mobile
Solution-online conversion or pre-compilation
New features
1. Variables
2. Functions
3. Arrays
4. Strings
5. Object-oriented
6.
Promise
7. generator 8. Modularization
1.let and const
Var original 1
may be repeated statement
can not modify the restriction
no block-level scope
2. The new let (variable)
can not repeat statements
can be modified
block-level scope
3. Add the const (constant)
can not repeat a statement
can not be modified
block Level scope
2. Arrow function
In layman's terms, remove the function and add =>
//原函数
function user() {
alter(你真帅)
}
//箭头函数
user () => {
alter(你真帅)
}
There are cases
when there is only one parameter () can be saved
if only one return, {} can save
3. Parameters...args
Represents the remaining array, but must be in the last digit
function show(a, b, ...args) {
console.log(a)
console.log(b)
console.log(args)
}
console.log(show(1, 2, 3, 4, 5))
The result is a=1 b=2 args=[3,4,5]
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)
The result is [1,2,3,4,5,6] which is to use parameters to represent the array
4. Deconstruction assignment
The left and right sides of the structure need to be the same,
declaration and assignment cannot be separated
let [a, b, c] = [1, 2, 3]
console.log(a, b, c)
let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z)
let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)
In layman's terms, it is to assign a value in one sentence, the structure of the left and right sides must be equal, the array corresponds to the array, the string corresponds to the string, etc.
5. Array
1. Map method mapping (a bit like the concept of functions in the first chapter of high numbers)
let arr = [1,2,3]
let result = arr.map(function (item) {
return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)
let score = [50,60,70,80]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)
Result
[2,4,6]
[2,4,6]
['failed','passed','passed','passed']
2. Reduce summary (you can sum, factorial, etc.)
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (prev, cur, index) {
// prev 上次回调结果，cur当前元素，index索引
console.log(prev, cur, index)
return prev+cur
})
console.log(result)
An introduction to reduce that feels good
3. filter
var arr = [1, 2, 3, 4]
var result = arr.filter(item => item % 2 === 0)
console.log(result)
//输出结果为true的值
4. ForEach
loop iteration, everyone is familiar with it, so I won’t describe it much
6. String
startsWith
endsWith
var url = 'http://www.baidu.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 结果 true true
Simply put, it is used to judge the beginning and the end
7.Promise
Asynchronous and synchronous concepts
Asynchronous, each operation has nothing to do with multiple operations at the same time, the code is complicated and
synchronous, only one thing can be done, the code is simple
Promise
is written asynchronously in a synchronous way, which improves readability. It is very convenient for multi-layer nested callback functions. In short, it is a word, awesome!
// 原始写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
});
});
});
});
// Promise 写法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
Promise.all(promiseArray) method wraps
multiple Promise object instances, generates and returns a new Promise instance
, when all the promise instances in the promise array become resolved, this method will return
and pass all the results to the results array
If any promise in the promise array is rejected, the entire Promise.all call will be terminated immediately and a new promise object that is rejected will be returned.
var p1 = Promise.resolve(1),
var p2 = Promise.resolve(2),
var p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
console.log(results);
});
8.generator
Ordinary functions are like trains.
Generator functions that cannot be stopped are taxis. They can be stopped midway. Use yield and next to execute
//普通函数
function show() {
console.log('a')
console.log('b')
}
show()
//generator
function *show2() {
//注意函数前添加*号
console.log('1')
yield
console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next()
yield
It can pass parameters and return
. The first next() parameter pass is invalid, only used to start
function * show() {
console.log('1')
var a = yield
console.log('2')
console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20
function* show2() {
console.log('1')
yield 10
console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // {
value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// {
value: undefined, done: true } 最后的value需要return返回
9. Object Oriented
// 老版本
function User(name, pass) {
this.name = name
this.pass = pass
}
User.prototype.showName = function () {
console.log(this.name)
}
User.prototype.showPass = function () {
console.log(this.pass)
}
var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {
User.call(this, name, pass)
this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
console.log(this.level)
}
var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()
新版面向对象
有了 class 关键字、构造器
class 里面直接加方法
继承，super 超类==父类
class User {
constructor(name, pass) {
this.name = name
this.pass = pass
}
showName() {
console.log(this.name)
}
showPass() {
console.log(this.pass)
}
}
var u1 = new User('able2', '111')
u1.showName()
u1.showPass()
// 新版本继承
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass)
this.level = level
}
showLevel(){
console.log(this.level)
}
}
v1 = new VipUser('blue', '123', 3)
v1.showLevel()