フロントエンドes6ナレッジポイントの概要

新たな冠状肺炎の流行との闘いで亡くなった殉教者と同胞の犠牲に対する全国のすべての民族グループの人々の深い哀悼の意を表すために、国務院は本日、国の追悼を行うことを決定した発表を発表しました。 2020年4月4日のイベント。この間、国内外の大使館や領事館は追悼の旗を降ろし、全国的に公の娯楽活動を停止した。4月4日の10時から、全国の人々が3分間の黙祷を観察し、車、電車、船が警笛を鳴らし、防空サイレンが鳴りました。
死者が安らかに眠り、生き物が一生懸命働き、祖国が繁栄し、力強くなりますように。

ES6

1.履歴
ECMAScriptとJSECMA
は標準であり、JSは
ESと呼ばれるEMCAScriptの実現です。
ローエンドブラウザは主にES3.1をサポートします。
ハイエンドブラウザは主にES6をサポートし
ます。2。履歴バージョン
1996.11、ES1.0Netscapeが提出されましたJS to ECMA組織、ES
1998年6月に正式に登場、ES2.0は
1999年12月に正式にリリース、ES3.0は
2011.06で広くサポートされ、ES5.1はISO国際標準になりました
2015.06、ES6.0は正式にリリースされました
3.互換性の問題
ES6は、IE10 +、Chrome、Firefox、NodeJS、モバイル
ソリューションをサポートします-オンライン変換または事前コンパイル

新機能

1.変数
2.関数
3.配列
4.文字列
5.オブジェクト指向
6.
約束
7.ジェネレーター8.モジュール化

1.letとconst

1.元のVaRは
、繰り返し宣言することができ、
変更することができない。
何らブロックレベルのスコープはありません
。2.新たに追加されたLET（変数）が
繰り返し宣言することはできません。これは
変更することができる。
ブロックレベルのスコープ
。3.新しく追加されたconst（定数）
を繰り返し宣言
することはできません。
ブロックを変更することはできません。レベルスコープ

2.矢印機能

素人の言葉で言えば、関数を削除して=>を追加します

//原函数
function user() {
 alter(你真帅)
}
//箭头函数  
user () => {
alter(你真帅)
}

ケースがあります
のみ1つのパラメータが存在するとき）（保存することができる
唯一のリターン、{}を保存することができた場合

3.パラメータ...引数

残りの配列を表しますが、最後の桁にある必要があります

function show(a, b, ...args) {
    console.log(a)
    console.log(b)
    console.log(args)
}
console.log(show(1, 2, 3, 4, 5))

結果は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)

結果は[1,2,3,4,5,6]で、これはパラメーターを使用して配列を表します。

4.脱構築の割り当て

構造の左側と右側は同じである必要があり、
宣言と割り当てを分離することはできません

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)

素人の言葉で言えば、それは一文で値を割り当てることであり、左側と右側の構造は等しくなければならず、配列は配列に対応し、文字列は文字列に対応します。

5.アレイ

1.マップメソッドマッピング（多数の最初の章の関数の概念に少し似ています）

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)

結果
[2,4,6]
[2,4,6]
['失敗'、 '合格'、 '合格'、 '合格']

2.要約を減らします（合計、階乗などが可能です）

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)

気持ちいい
3.フィルターを減らすための紹介

var arr = [1, 2, 3, 4]
var result = arr.filter(item => item % 2 === 0)
console.log(result)
//输出结果为true的值

4. ForEach
ループの反復では、誰もがそれに精通しているため、あまり説明しません

6.弦

開始あり
終了あり

var url = 'http://www.baidu.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 结果  true  true

簡単に言えば、始まりと終わりを判断するために使用されます

7.約束

非同期および同期の概念
非同期、各操作は同時に複数の操作とは関係ありません。コードは複雑で
同期的です。実行できるのは1つだけで、コードは単純です。

Promise
は非同期的に同期的に記述されるため、読みやすさが向上します。多層のネストされたコールバック関数に非常に便利です。つまり、すばらしい言葉です。

// 原始写法
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）メソッドはラップ
新しい約束のインスタンスを生成して返す、複数プロミスオブジェクトインスタンスを
約束アレイ内のすべての約束インスタンスが解決さになったとき、この方法は、返され
た結果アレイにすべての結果をとパス
内の任意の約束場合promise配列が拒否され、Promise.all呼び出し全体が即座に終了し、拒否された新しいpromiseオブジェクトが返されます。

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.ジェネレーター

通常の機能は電車のようなものです。停止できない
ジェネレーター機能はタクシーです。途中で停止できます。yieldとnextを使用して実行します。

//普通函数
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()

産出

パラメータを渡して返すことができます
。最初のnext（）パラメータパスは無効であり、開始にのみ使用されます

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.オブジェクト指向

// 老版本
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()