開発者の人生は常に新しいことを学んでいます。フロントエンド開発者として、コードをよりエレガントで作業しやすくするためのいくつかのテクニックを知っている必要があります。
長い間JavaScriptの開発を行ってきたかもしれませんが、問題を解決したり、追加のコードを記述したりせずに問題を解決できる最新の機能を使用できない場合があります。これらの手法は、クリーンで最適化されたJavaScriptコードを作成するのに役立ちます。
1.複数の条件判断
// long
if( x === 'a' || x === 'b' || x === 'c' || x === 'd'){
// logic
}
// short
if(['a', 'b', 'c', 'd'].includes(x)){
// logic
}
2.三項演算子
一部のif / esle条件付き判断のみを使用する場合、単純に三項演算子を使用して達成できます。
if / else条件判定のペアが多い場合は、使用をお勧めしません。
// long
let flag
if(x > 10){
flag = true
}else {
flag = false
}
// short
let flag = x > 10 ? true : false
3.変数宣言
共通の値または共通の型を持つ2つの変数を宣言する場合は、この省略形を使用できます。
// long
let var1
let var2 = 1
// short
let var1, var2 = 1
4.空の/未定義のチェックとデフォルト値の割り当て
新しい変数を作成する必要がある場合、その値によって参照される変数がnullであるか未定義であるかを確認する必要がある場合は、次の実装を検討できます。
// long
if(test1 !== null || test1 !== undefined || test1 !== ""){
let test2 = test1;
}else {
let test2 = ''
}
// short
let test2 = test1 || ''
5.複数の変数に値を割り当てます
この方法は、複数の変数を処理していて、さまざまな変数にさまざまな値を割り当てたい場合に非常に便利です。
//long
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
//Short
let [test1, test2, test3] = [1, 2, 3];
6.代入演算子の省略形
プログラミングでは多くの算術演算子を扱います。これは、JavaScript変数に演算子を割り当てるための便利な手法の1つです。
// long
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
// short
test1++;
test2--;
test3 *= 20;
7.真実の判断
// long
if (test1 === true)
// short
if (test1)
8.マルチコンディションAND / OR演算
//long
if (test1) {
callMethod();
}
//short
test1 && callMethod();
9.forEath
// long
for (var i = 0; i < testList.length; i++)
// short
testList.forEach(item => console.log(item))
10.戻り値を比較します
// long
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe('test');
}
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
console.log(val);
}
// short
function checkReturn() {
return test || callMe('test');
}
11.矢印関数
//long
function add(a, b) {
return a + b;
}
//short
const add = (a, b) => a + b;
12.短い関数呼び出し
// long
function test1() {
console.log('test1');
};
function test2() {
console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
test1();
} else {
test2();
}
// short
(test3 === 1? test1:test2)();
13.スイッチ
条件をKey-Valueオブジェクトに保存し、条件に従って使用できます。
// long
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// short
var data = {
1: test1,
2: test2,
3: test
};
data[something] && data[something]();
14.デフォルトパラメータ
//long
function add(test1, test2) {
if (test1 === undefined)
test1 = 1;
if (test2 === undefined)
test2 = 2;
return test1 + test2;
}
//short
add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3
15.パラメータを渡して検証する必要があります
// long
function hello(obj){
let {name, age} = obj
if(!name){
console.warn('name is null, pls check!')
return ''
}
if(!age){
console.warn('age is null, pls check!')
return ''
}
return `${name}: ${age}`
}
// short
function hello(obj){
let {name = required('name'), age = required('age')} = obj
return `${name}: ${age}`
}
function required(key){
console.warn(`${key} is null, pls check!')
}
16.スプレッド演算子
//long
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);
//short
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]
クローン作成には、スプレッド演算子を使用することもできます
//long
const test1 = [1, 2, 3];
const test2 = test1.slice()
//short
const test1 = [1, 2, 3];
const test2 = [...test1];
17.テンプレート文字列
1つの文字列で+を使用して複数の変数を接続することにうんざりしている場合は、この方法を検討できます。
//long
const welcome = 'Hi ' + user + ' ' + name + '.'
//short
const welcome = `Hi ${user} ${name}`;
18.オブジェクト属性の割り当て
let test1 = 'a';
let test2 = 'b';
//Long
let obj = {test1: test1, test2: test2};
//short
let obj = {test1, test2};
19.文字列を数値に変換する
//Long
let test1 = parseInt('123');
let test2 = parseFloat('12.3');
//Short
let test1 = +'123';
let test2 = +'12.3';
20. Array.find
オブジェクトの配列があり、オブジェクトのプロパティに基づいて特定のオブジェクトを検索する場合、findメソッドは非常に便利です。
const data = [{
type: 'test1',
name: 'abc'
},
{
type: 'test2',
name: 'cde'
},
{
type: 'test1',
name: 'fgh'
},
]
// long
function findtest1(name) {
for (let i = 0; i < data.length; ++i) {
if (data[i].type === 'test1' && data[i].name === name) {
return data[i];
}
}
}
//shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData);
21.多条件判断
タイプをチェックするコードがあり、タイプに基づいて異なるメソッドを呼び出す必要がある場合、複数のelse ifまたはswitchを使用することを選択できますが、より良いものはありますか？
// long
if (type === 'test1') {
test1();
}
else if (type === 'test2') {
test2();
}
else if (type === 'test3') {
test3();
}
else if (type === 'test4') {
test4();
} else {
throw new Error('Invalid value ' + type);
}
// short
const types = {
test1: test1,
test2: test2,
test3: test3,
test4: test4
};
let func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();
22.インデックス検索
配列を繰り返して特定の値を見つけるときは、indexOf()メソッドを使用します。より良いメソッドを見つけたらどうなるでしょうか。この例を見てみましょう。
//long
if(arr.indexOf(item) > -1) { // item found
}
if(arr.indexOf(item) === -1) { // item not found
}
//short
if(~arr.indexOf(item)) { // item found
}
if(!~arr.indexOf(item)) { // item not found
}
~ビット演算子が-1以外の真の値を返します。逆転は~それをするのと同じくらい簡単です。さらに、次のinclude()関数も使用できます。
if (arr.includes(item)) {
// true if the item found
}
24. Object.entries（）
この機能は、オブジェクトをオブジェクトの配列に変換するのに役立ちます
const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** ouput
[ [ 'test1', 'abc' ],
[ 'test2', 'cde' ],
[ 'test3', 'efg' ]
]
**/
24. Object.values（）
const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/
25.文字列を複数回繰り返す
同じ文字を何度も繰り返すには、forループを使用して同じループに追加できますが、省略形のメソッドがある場合はどうなりますか？
//long
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test ';
}
console.log(str); // test test test test test
//short
'test '.repeat(5);
26.配列内の最大値と最小値を見つけます
const arr = [1, 2, 3];
Math.max(…arr); // 3
Math.min(…arr); // 1