15 の JavaScript 開発スキルの要約 (整理および共有)

この記事では、プロジェクトでよく使用されるヒントをいくつか紹介します。JavaScript には、ほとんどの初心者および中級開発者が知らない優れた機能がたくさんあります。みんなが助けてくれることを願っています。

#1. オブジェクトに条件付きで属性を追加する

展開演算子 (. . .) 条件付きでプロパティを JS オブジェクトにすばやく追加します。

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

&& 演算子は、各オペランドが true と評価された場合、最後に評価された式を返します。したがって、オブジェクト {age: 16} が返され、これが person オブジェクトの一部として展開されます。

条件が false の場合、JavaScript は次のような処理を行います:

const person = {
  id: 1,
  name: '前端小智',
  ...(false), 
};
// 展开 `false` 对对象没有影响
console.log(person); // { id: 1, name: 'John Doe' }

2. オブジェクトに属性が存在するかどうかを確認します

in キーワードを使用すると、JavaScript オブジェクトに特定の属性が存在するかどうかを確認できます。

const person = { name: '前端小智', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

3. オブジェクトの動的プロパティ名

動的キーを使用してオブジェクト プロパティを設定するのは簡単です。 ['key name'] を使用してプロパティを追加するだけです:

const dynamic = 'flavour';
var item = {
  name: '前端小智',
  [dynamic]: '巧克力'
}
console.log(item); // { name: '前端小智', flavour: '巧克力' }

同じトリックを使用して、動的キーを使用してオブジェクト プロパティを参照できます:

const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'

4。動的を使用します。キーによるオブジェクトの構造化

オブジェクトを構造化するときに、次を使用して構造化された属性の名前を変更できることがわかりました。しかし、キー名が動的である場合、オブジェクトのプロパティを分解することもできることをご存知ですか?

const person = { id: 1, name: '前端小智' };
const { name: personName } = person;
console.log(personName); // '前端小智'

ここで、動的キーを使用してプロパティを構造化します:

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template); // Good bye

5. Null 値のマージ?? Operator# # ?? 演算子は、変数が null か未定義かを確認する場合に便利です。左オペランドが null または未定義の場合は右オペランドを返し、それ以外の場合は左オペランドを返します。

const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0

3 番目の例では、JS では 0 が false とみなされますが、null または未定義ではないため、0 が返されます。 || 演算子を使用できると思うかもしれませんが、この 2 つは違います。

ここで || 演算子を使用できると思うかもしれませんが、この 2 つは違います。

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0

6. オプションのチェーン?.次のようなエラーがよく発生します: TypeError: null のプロパティ 'foo' を読み取れません。これはすべての開発者にとって悩ましい問題です。この問題を解決するために、オプションのチェーンが導入されました。見てみましょう:

const book = { id:1, title: 'Title', author: null };
// 通常情况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined

次の関数オプション チェーンも使用できます:

const person = {
  firstName: '前端',
  lastName: '小智',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined

7. !! 演算子 ## を使用します。 #!! 演算子を使用すると、式の結果をブール値 (true または false) にすばやく変換できます:

const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false

8. 文字列と整数の変換

演算子を使用して文字列を数値にすばやく変換します:

const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'

数値を文字列にすばやく変換するには、演算子の後に空の文字列を続けることもできます:

const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'

これらの型変換は非常に便利ですが、コードの明瞭性と可読性が低下します。したがって、実際の開発では慎重に選択して使用する必要があります。

9. 配列内の false 値をチェックする

誰もが配列メソッドを使用したはずです: filter、some、every、これらのメソッドブール値メソッドを組み合わせて使用​​して、true と false の値をテストできます。

const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false

仕組みは次のとおりです。これらの配列メソッドがコールバック関数を受け入れることがわかっているので、コールバック関数としてブール値を渡します。ブール関数自体はパラメーターを受け入れ、パラメーターの真偽に応じて true または false を返します。したがって:

myArray.filter(val => Boolean(val));

は次と同等です:

myArray.filter(Boolean);

10. 配列の平坦化

プロトタイプ配列にはメソッドがありますflat は、配列の配列から単一の配列を作成できます。

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat(); 
//[ { id: 1 }, { id: 2 }, { id: 3 } ]

深さレベルを定義して、ネストされた配列構造をどの程度の深さまで平坦化するかを指定することもできます。例:

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

11.Object.entries

ほとんどの開発者は、Object.keys メソッドを使用してオブジェクトを反復処理します。このメソッドはオブジェクト キーの配列のみを返し、値は返しません。 Object.entries を使用してキーと値を取得できます。

const person = {
  name: '前端小智',
  age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]

オブジェクトを反復処理するには、次のようにします。

Object.keys(person).forEach((key) => {
  console.log(`${key} is ${person[key]}`);
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key} is ${value}`);
});
// name is 前端小智
// age is 20

上記のメソッドはどちらも同じ結果を返しますが、Object.entries の方がキーと値のペアを取得するのが簡単です。

12.replaceAll メソッド

JS で、出現する文字列をすべて別の文字列に置き換えるには、次の正規表現を使用する必要があります。表示:

const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

しかし、ES12 では、replaceAll という新しいメソッドが String.prototype に追加されました。これは、出現する文字列をすべて別の文字列値に置き換えます。

str.replaceAll('-', ' '); // Red Green Blue

13. 数値区切り文字

アンダースコアを数値区切り文字として使用できるため、数値内の 0 の数を数えやすくなります。 。

// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000

下划线分隔符也可以用于BigInt数字，如下例所示

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = 'on';

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。

const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a) {
  a = b
}

检查a的值是否为真，如果为真，那么更新a的值。使用逻辑或 ||操作符也可以做同样的事情。

const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);

使用空值合并操作符 ??:

const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined) {
  a = b;
}

注意：??操作符只检查 null 或 undefined 的值。

【相关推荐：javascript学习教程】

以上が15 の JavaScript 開発スキルの要約 (整理および共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。