1.ECMASript 7の新機能
1. Array.prototype.includes
includesこのメソッドは、要素が配列に含まれているかどうかを検出するために使用され、ブール値を返します。
2. 指数演算子
指数演算子は、**同じ関数とMath.pow(a, b)結果ES7 で導入されました。
2 ** 3 // 8
Math.pow(2, 3) // 8
2. ECMAScript 8 の新機能
1. 非同期と待機 (重要)
asyncawait2 つの構文を組み合わせると、非同期コードは同期コードのように動作します。(つまり、同期的に見えるものは実際には非同期です。)
async関数を宣言する前に、関数が非同期であることを文字通りに理解しましょう。非同期を意味します。awaitこれは待機、つまり非同期メソッドが完了するまで待つことを意味します。
1.1 非同期
async宣言されたfunction関数はasyncfunction。構文は次のとおりです。
async function funcName() {
//statements
}
async内部で使用しawaitても使用しなくても構いません。async関数の戻り値はPromiseobjectため、この関数を実行する際にはthenおよびcatchメソッドを使用できます。関数本体内の戻り値によると、async関数の戻り値の詳細は次のとおりです。
1. 関数が値を返さない場合、async関数の成功したオブジェクト（fulfilled）であり、ステータス値は です。Promiseundefined
let a = async function() {
}
let res = a()
console.log(res)
// Promise{<fullfilled>: undefined}
2. 戻り結果が 1 でない場合Promise、async関数の戻り値は成功したオブジェクト（fulfilled）であり、ステータス値はこの内部戻り値です。Promise
let a = async function () {
return 'hello'
}
let res = a()
console.log(res)
// Promise{<fullfilled>: 'hello'}
3. 内部でエラーがスローされた場合、async関数の失敗したPromiseオブジェクトになります。
let a = async function foo() {
throw new Error('出错了')
}
a().catch(reason => {
console.log(reason)
})
4. 関数の内部戻り値がPromiseオブジェクト、async関数戻り値の状態はこのPromiseオブジェクト。
let a = async function () {
return new Promise((resolve, reject) => {
resolve("成功")
})
}
a().then(value => {
console.log(value)
})
1.2 待つ
await右側に値を持つ演算子と同等です。通常はPromiseobjectが、非Promise型の場合もあります。非Promise型が、await式によって返される値はこの値です。Promiseオブジェクトが、await式は次のコードをブロックし、現在のオブジェクトの値を待ちます。Promiseresolve
総合async的に見てawait、 。awaitは と組み合わせてasync使用するが、async必ずしも必須ではありませんawait。async後続の関数の戻り値をPromiseオブジェクト、awaitこれがPromise完了するのを、resolveの結果を返します。これがPromise失敗する、try-catch必要に応じてキャッチ処理を使用してください。
Promiseチェーン呼び出しを使用すると、従来の方法でコールバック地獄の問題が解決され、async-await によってコードの可読性がさらに最適化されます。
const p = new Promise((resolve, reject)=>{
resolve('成功')
})
async function main() {
let res = await p
console.log(res)
}
main()
// '成功'
const p = new Promise((resolve, reject)=>{
reject('失败')
})
async function main() {
try {
let res = await p
console.log(res)
} catch(e) {
console.log(e)
}
}
main()
// '失败'
1.3 包括的なアプリケーション - ファイルの読み取り
要件: 最初にユーザー データ user を読み取り、次に注文データ order を読み取り、最後に製品データ item を読み取ります。
この非同期操作を使用することは簡単に考えられますPromise。コードは次のとおりです。
const fs = require('fs')
let p = new Promise((resolve, reject) => {
fs.readFile('./files/user.md', (err, data) => {
if (err) reject(err)
resolve(data)
})
})
p.then(value => {
return new Promise((resolve, rejecet) => {
fs.readFile('./files/order.md', (err, data) => {
if (err) rejecet(err)
resolve([value, data])
})
})
}, reason => {
console.log(reason)
}).then(value => {
return new Promise((resolve, reject) => {
fs.readFile('./files/goods.md', (err, data) => {
if (err) reject(err)
value.push(data)
resolve(value)
})
})
}, reason => {
console.log(reason)
}).then(value => {
console.log(value.join('\n'))
}, reason => {
console.log(reason)
})
ただし、Promise連鎖、そのような連鎖呼び出しが多すぎると必然的にコードが複雑になり、直感的とは思えません。asyncおよびメソッドを使用して最適化できますawait。コードは次のとおりです。
const fs = require('fs')
function readUser() {
return new Promise((resolve, reject) => {
fs.readFile('./files/user.md', (err, data) => {
if (err) reject(err)
resolve(data)
})
})
}
function readOrder() {
return new Promise((resolve, reject) => {
fs.readFile('./files/order.md', (err, data) => {
if (err) reject(err)
resolve(data)
})
})
}
function readGoods() {
return new Promise((resolve, reject) => {
fs.readFile('./files/goods.md', (err, data) => {
if (err) reject(err)
resolve(data)
})
})
}
async function read() {
let user = await readUser()
let order = await readOrder()
let goods = await readGoods()
console.log([user, order, goods].join('\n'))
}
read()
このようにすると、コードは同期コードであるかのように直感的に見えますが、実際には非同期操作です。
1.4 包括的なアプリケーション - パッケージ ajax
function sendAjax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
}
reject(xhr.status)
}
}
})
}
async function main() {
let res = await sendAjax('http://poetry.apiopen.top/sentences') //直接得到promise成功状态的值
console.log(res)
}
main()
2. Object.values と Object.entries
1.Object.values()このメソッドは、指定されたオブジェクトの列挙可能なすべてのプロパティ値の配列を返します。これは、Object.keys()前者がプロパティ値を返し、後者がキーと値の組み合わせの配列を返す点を除いて同様です。
let obj = {
a: 1,
b: {
1:2},
c: [1,2,3]
}
console.log(Object.values(obj))
// [1, {1: 2}, [1,2,3]]
console.log(Object.keys(obj))
// ['a', 'b', 'c']
2.Object.entries()このメソッドは、指定されたオブジェクト自体の走査可能な属性[key,value]の(配列要素は個々の配列の配列でもあります)。
const obj = {
a: 1, b: 2, c: 3};
console.log(Object.entries(obj))
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]
配列が返されるので、 を使用してfor...of走査。
const obj = {
a: 1, b: 2, c: 3 };
for (let [k, v] of Object.entries(obj)) {
console.log(k, v)
}
3. ECMAScript 11 の新機能
1. BigInt (新しい数値型)
BigIntは、任意の長さの整数のサポートを提供する特別な数値型です。
bigintを作成するには2 つの方法があります。整数リテラル値を追加するn方法と、文字列や数値などBigInから生成される t 関数を呼び出す方法です。bigint
let n1 = 123n
let n2 = 456n
let n3 = BigInt(789)
console.log(typeof n1) // bigint
console.log(n1+n2) // 579n
console.log(n2+n3) // 1245n
比較演算子:
たとえば、< と >bigintはnumber型の数値を比較するために使用されますが、問題ありません。
alert( 2n > 1n ); // true
alert( 2n > 1 ); // true
ただし、number と bigint は異なる型であるため、等しいと比較されることも==ありますが、 ===(厳密に等しい) 比較はできないことに注意してください。
alert( 1 == 1n ); // true
alert( 1 === 1n ); // false
2、グローバルはこちら
グローバル オブジェクトは、どこでも使用できる変数と関数を提供します。これらのグローバル変数は、デフォルトで言語または環境に組み込まれます。
ブラウザーでは window と呼ばれ、Node.js では window と呼ばれますglobal。他の環境では別のものが使用される場合があります。
ES11 では、globalThisがグローバル オブジェクトの標準名として追加されJavaScript、すべての環境でこの名前がサポートされる必要があります。すべての主要なブラウザがサポートしています。
使用シナリオ: 環境がブラウザであると仮定して、ウィンドウを使用します。スクリプトを他の環境で実行するために使用する可能性がある場合に最適ですglobalThis。