%20(1).png "プログラミング")
ショートハンド
短縮記法のこと。
コードの行数が減ってすっきりする、読みやすくなる。
レビューも楽になる。バグも減る（わかりやすくなるから）。
三項演算子
const x = 1;
const y = 10;
let answer;
if (x > y) {
answer = 'is greater';
} else {
answer = 'is lesser';
}
console.log(answer); //is lesser↓ショートハンド
const x = 1;
const y = 10;
const answer = x > y ? 'is greater' : 'is lesser'
console.log(answer); //is lesser条件式 ? trueの場合の結果 : falseの場合の結果
と書ける。
if-elseくらいの条件文であれば、見やすい。それ以上だと見づらくなる。
短絡評価
const x = 'test';
let y;
if (x !== null || x !== undefined || x !== '') {
y = x;
}else{
y = 'new';
}
console.log(y); //test↓ショートハンド
const x = 'test';
const y = x || 'new';
console.log(y); //testfalseの場合、右に処理が移行する。trueの場合は、そのまま左の処理が行われる。
※プリミティブ型がfalseになるのは、false、0、NaN、''（＝空文字）、null、undefinedの場合。それ以外はtrueとなる。
そのため、以下のようにifの条件式は、xと書くだけで良い。
const x = '';
let y;
if (x) {
y = x;
}else{
y = 'new';
}
console.log(y); //new変数宣言
let x;
let y;
let z = 3;
console.log(x); //undefined
console.log(y); //undefined
console.log(z); //3↓ショートハンド
let x,y,z=3;
console.log(x); //undefined
console.log(y); //undefined
console.log(z); //3並べて一行で宣言できる。
forループ
const numberArray = [1,2,3]
for (let i = 0; i < numberArray.length; i++){
console.log(numberArray[i]); //1 2 3
}↓
ショートハンド1
const numberArray = [1,2,3]
for(i in numberArray){
console.log(numberArray[i]); //1 2 3
}ショートハンド2
const numberArray = [1,2,3]
numberArray.forEach((element) => {
console.log(element); //1 2 3
});ショートハンド3
numberArray.map((element)=>{
console.log(element); //1 2 3
});ショートハンド4
numberArray.filter((element)=>{
console.log(element); //1 2 3
});ショートハンド5
numberArray.find((element)=>{
console.log(element); //1 2 3
});ショートハンド6
const numberArray = [1,2,3]
numberArray.findIndex((element)=>{
console.log(element); //1 2 3
});ショートハンド7
const numberArray = [1,2,3]
numberArray.some((element)=>{
console.log(element); //1 2 3
});ショートハンド3～7は、この場合同じ結果になるが、厳密には使い分けが必要。
forEach：配列内の各要素に対して昇順で、１回ずつ実行する。
map：配列の順番通りに各要素に対して一度ずつ呼び出し新しい配列を生成する。
filter：条件に合う（trueを返す）要素全てを抽出し、新しい配列を生成する。
find：ある条件に合う最初の要素の値を返す。
findIndex：ある条件に合う最初の要素の位置を返す。
some：配列が条件を一つでも満たしていればtrueを返す。
※every：配列が条件をすべて満たす場合にtrueを返す。
オブジェクトプロパティ
const key = 'key1';
const aaa = 789;
const obj1 = { [key]: 123 ,key2: 456, aaa: aaa};
console.log(obj1); // { key1: 123, key2: 456, aaa: 789 }↓ショートハンド
const key1 = 123;
const key2 = 456;
const aaa = 789;
const obj1 = { key1, key2, aaa };
console.log(obj1); // { key1: 123, key2: 456, aaa: 789 }変数名がキー、値がバリューで
{ キー }とかくと、{ キー：バリュー }となる。
分割代入
const n = 1;
const m = 2;
console.log(n, m); // 1 2
const obj = { name: 'Gorosuke', age: 8 };
const name = obj.name;
const age = obj.age;
console.log(name, age); // "Gorosuke" 8↓ショートハンド
const [n, m] = [1, 2];
console.log(n, m); // 1 2
const obj = { name: 'Gorosuke', age: 8 };
const { name, age } = obj
console.log(name, age); // "Gorosuke" 8便利、すっきりしたコードになる。
apiを呼んだとき等
const response = {
data: [
{
id: 1,
name: 'aichan',
email: 'aichan@aaa.com',
},
{
id: 2,
name: 'gorosuke',
email: 'gorosuke@bbb.com',
},
],
};
const { data: users = [] } = response;
console.log(users);
// [
// { id: 1, name: "aichan", email: "aichan@aaa.com" },
// { id: 2, name: "gorosuke", email: "gorosuke@bbb.com" }
// ]キーがdataで、同じなので、usersに分割代入してくれる！
スプレッド構文
const nums1 = [4, 5, 6];
const nums2 = [1, 2, 3].concat(nums1);
console.log(nums2); //[1, 2, 3, 4, 5, 6]↓ショートハンド
const nums1 = [4, 5, 6];
const nums2 = [1, 2, 3, ...nums1];
console.log(nums2); //[1, 2, 3, 4, 5, 6]関数のレストパラメータ... = 配列のスプレッド構文...
分割代入と組み合わせる
const response = {
id: 1,
name: 'aichan',
email: 'aichan@aaa.com',
};
const id = response.id;
const name = response.name;
const email = response.email;
const users = { name, email }
console.log(id,users);
// 1 { name: "aichan", email: "aichan@aaa.com" }↓ショートハンド
const response = {
id: 1,
name: 'aichan',
email: 'aichan@aaa.com',
};
const { id, ...users } = response;
console.log(id,users);
// 1 { name: "aichan", email: "aichan@aaa.com" }必須パラメータ
const testfunc = (argument) => {
if(argument === undefined) {
throw new Error('Missing parameter!');
}
return argument;
}
console.log(testfunc("test")) //test
console.log(testfunc()) //Error: Missing parameter!↓ショートハンド
const argufunc = () => { throw new Error('Missing parameter!') };
const testfunc = (argument = argufunc()) => argument ;
console.log(testfunc("test")) //test
console.log(testfunc()) //Error: Missing parameter!デフォルト引数と組み合わせると、すっきりかける。
0 件のコメント:
コメントを投稿