あなたは JavaScript を初めて使用するか、またはたまにしか使用したことがないかもしれません。いずれにせよ、JavaScript は大きく変化しており、いくつかの機能は使用する価値があります。この記事では、本格的な JavaScript 開発者が毎日ある時点で使用すると思われる機能をいくつか紹介します。
参考資料
ES6 に関する次の 2 つのサイトが私のお気に入りです:
-
ES6 の機能
MDN
展開演算子
名前が示すように、オブジェクトまたは配列の前に演算子 (...) を展開するために使用されます。構造はリストに展開されます。それを実証してください:
let firstHalf = [ 'one', 'two']; let secondHalf = ['three', 'four', ...firstHalf];
この書き方は十分にエレガントで簡潔ですか?展開演算子が使用されない場合は、次のように記述する必要があります:
let firstHalf = [ 'one', 'two'];
let secondHalf = ['three', 'four'];
for(var i=0, i <firstHalf.length; i++ ) {
secondHalf.push(firstHalf[i]);
}展開演算子は、オブジェクトのプロパティを結合するのにも適しています:
const hero = {
name: 'Xena - Warrior Princess',
realName: 'Lucy Lawless'
}
const heroWithSword = {
...hero,
weapon: 'sword'
}展開演算子が使用されない場合、オブジェクトのプロパティを調べる必要があります。
let keys = Object.keys(hero);
let obj = {};
for(var i=0; i< keys.length; i++) {
obj[keys[i]] = keys[props[i]];
}残りのパラメータ
残りのパラメータはシーケンスに含まれます。 JavaScript の特徴は、パラメータの数が非常に柔軟であることです。通常、引数を収集する引数変数があります。例を見てみましょう:
function add(first, second, ...remaining) {
return first + second;
}上記のコードは 1 番目と 2 番目を追加するだけです。つまり、add(1, 2) と add(1, 2, 3, 4) を呼び出しても同じ結果が得られます。の結果。以下で修正しましょう:
function add(first, second, ...remaining) {
return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}前に述べたように、 ...remaining は残りのパラメータを収集し、これらのパラメータに名前を付け、残りのパラメータを処理する意図を明確に示します。遅くとも ES5 にはすでに議論があると記憶していますが、それについて知っている人はほとんどいません。
文字列補間
このようなステートメントを見たことがありますか?
class Product {
constructor(name, description, price) {
this.name = name;
this.description = description;
this.price = price;
}
getDescription() {
return " Full description \n" +
" name: " + this.name +
" description: " + this.description
}
}もちろん、私は getDescription() メソッド内の長くて読めない複数行のステートメントについて言及しています。同様の現象がほとんどのプログラミング言語に存在します。いくつかの言語では文字列補間が提供されており、幸いなことに JavaScript もその 1 つです。 getDescription() メソッドを書き直してみましょう。
getDescription() {
return `Full description \n:
name: ${this.name}
description ${this.description}
`;
}${} 補間は ` でラップされた文字列のペアで使用できます。見た目もずっと快適になりました。
省略された属性
ES5 では次のように記述する必要があります:
function createCoord(x, y) {
return {
x: x,
y: y
}
}ES6 では、将来的に省略された属性を使用できるようになります:
function createCoord(x, y) {
return {
x,
y
}
}Doesn'もっと爽やかに見えませんか？
メソッド属性
メソッド属性は、メソッドを指すオブジェクト内に定義された属性です。例として、次の ES5 コード部分を考えてみましょう:
const math = {
add: function(a,b) { return a + b; },
sub: function(a,b) { return a - b; },
multiply: function(a,b) { return a * b; }
}ES6 将来的には、次のように記述するだけで済みます:
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}代入の構造化
代入の構造化は、開発者自身の精神的健康。
次のコードを考えてみましょう:
function handle(req, res) {
const name = req.body.name;
const description = req.body.description;
const url = req.url;
log('url endpoint', url);
// 大量代码逻辑
dbService.createPerson(name, description)
}どの観点から見ても、上記のコードは完璧ではありませんが、さまざまなレベルからオブジェクトを表示してデータを取得するというアプリケーション シナリオを反映しています。ここで何が問題なのかと尋ねるかもしれません。そうですね、あまり多くの変数を宣言しないことで、キーストロークを節約できます。
function handle(req, res) {
const { body: { name, description }, url } = req;
log('url endpoint', url);
// 大量代码逻辑
dbService.createPerson(name, description)ご覧のとおり、上記のコードは 3 行を 1 行に圧縮しています。
代入の構造化はオブジェクトに限定されません。配列でも同様に機能します。次のコードを考えてみましょう:
const array = [1,2,3,4,5,6]; const a = array[0]; const c = array[2];
上記のコードは、より洗練された方法で書き直すことができます:
const array = [1,2,3,4,5,6]; const [a, ,c, ...remaining] = arr; // remaining = [4,5,6]
上記のパターン マッチングを使用して、配列の値を分解できます。特定の値をスキップするには、 、 、を使用します。上記の残りのパラメータもここで使用できます。ここでは、残りのパラメータを通じて残りの配列メンバーをキャプチャします。
分割代入は関数やパラメーターにも使用できます。関数に 2 ～ 3 個を超えるパラメーターがある場合、オブジェクトを使用してすべてのパラメーターを収集するのが JavaScript の事実上の標準です。たとえば、次の関数:
function doSomething(config) {
if(config.a) { ... }
if(config.b) { ... }
if(config.c) { ... }
}には、より良い記述方法があります:
function doSomething({ a, b, c }) {
if(a) { ... }
if(b) { ... }
if(c) { ... }
}Array メソッド
ES6 では、次のような多くの便利な配列メソッドが導入されています。
##find()、リスト内のメンバーを検索し、見つからないことを示す null を返します。- findIndex()、リスト メンバーのインデックスを検索します、
- some()、リストのメンバーでアサーションが少なくとも True であるかどうかを確認します。
- includes、リストに項目が含まれているかどうかを確認します。
- 次のコードは、その使用方法を理解するのに役立ちます。 :
const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true
const numberArray = [1,2,3,4];
numberArray.includes(2) // truePromises Async/Await
このサークルに数年参加している方なら、次のようなコールバックしかなかった時代があったことを覚えているかもしれません:
function doSomething(cb) {
setTimeout(() => {
cb('done')
}, 3000)
}
doSomething((arg) => {
console.log('done here', arg);
})一部の操作は非同期で完了までに時間がかかるため、コールバックを使用します。その後、Promise ライブラリが登場し、人々はそれを使い始めました。その後、JavaScript は Promise のネイティブ サポートを徐々に追加しました。
function doSomething() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done')
}, 3000)
})
}
doSomething().then(arg => {
console.log('done here', arg);
})次のように呼び出して、Promise をつなげることもできます:
getUser()
.then(getOrderByUser)
.then(getOrderItemsByOrder)
.then(orderItems => {
// 处理排序后的成员
})后来生活更加美好，我们有了 async/await， 上面一段代码可以这样写：
async function getItems() {
try {
const user = await getUser();
const order = await getOrderByUser(user);
const items = await getOrderItemsByOrder(order);
return items;
} catch(err) {
// 在这里处理错误，建议返回某个值或者重新抛出错误
}
}
getItems().then(items => {
// 处理排序后的成员
})模块
差不多任何编程语言都支持模块这一概念，也就是将代码分为多个文件，每个文件是一个自我包含的单元（模块）。 考虑下面的代码：
// math.js
export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }
export default mult(a,b) => a * b;
// main.js
import mult, { add, sub } from './math';
mult(2, 4) // 8
add(1,1) // 2
sub(1,2) // -1我们在上面用 export 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。 export default 关键字则注明仅仅 import 模块时得到的结构。 在 main.js 中，我们将导入的 default 命名为 mult，同时指明我们引入 add() 和 sub() 这两个方法。
箭头函数和字典作用域 this
我在这篇文章中很多地方都用到了箭头函数，它不过是另一种函数表示法。 过去我们只能这么声明函数：
function printArray(arr) {
// 具体操作
}现在我们也可以这么写：
const printArray = (arr) => {
// 具体操作
}我们也可以将函数声明写到一行里：
const add = (a,b) => a + b
上面的代码表明我们进行操作并返回结果。 我们也可以采用下面的语法返回一个对象：
const create = (a,b) = > ({ x: a, y: b })过去会碰到搞不清 this 是什么的问题。 考虑下面的代码：
let array = [1,2,3];
function sum() {
this.total = 0;
arr.forEach(function(item) {
this.total+= item; // 糟糕，`this` 是内层函数的 `this`
})
return total;
}上面代码中的 this 指向 forEach 内部函数的 this，这可不是我们想要的。 过去我们通过以下方式解决这个问题：
function sum() {
this.total = 0;
var self = this;
arr.forEach(function(item) {
self.total+= item; // 这里我们使用 `self`，它能解决问题，但是感觉有点别扭
})
return total;
}箭头函数可以解决问题，再也不用 self 了，现在代码看起来是这样的：
function sum() {
this.total = 0;
arr.forEach((item) => {
this.total+= item; // 一切安好，`this` 指向外层函数
})
return total;
}大胜！
结语
我还可以讲讲更多 ES6 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。
【相关推荐：javascript高级教程】
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
