KnowHow

技術的なメモを中心にまとめます。
検索にて調べることができます。

JavaScriptチートシート４

登録日 ：2025/02/09 14:54
カテゴリ ：Linux

//デフォルト引数

function rollDie(numSides = 6){
    // numSides = typeof numSides !== 'undefined' ? numSides : 6;
    return Math.floor(Math.random() * 6) + 1;
}

console.log(rollDie());
console.log(rollDie(6));

function greet(person, msg ='こんにちは', suffix='!!'){
    console.log(`${msg}, ${person}さん${suffix}`);
}

console.log(greet('Yamada'));

console.log('------------------');

//スプレッド構文

Math.max(10,9,8,16);
let nums = [1,2,3,4,5,6]
console.log(Math.max(nums))
console.log(Math.max(...nums))
//列挙可能なオブジェクトもOK
console.log('abcdef');
console.log(...'abcdef');


console.log('------------------');

//スプレッド構文（配列リテラル）
//既存の配列から、新しい配列を作る

const cats = ['Tama', 'Taro', 'Momo'];
const dogs = ['Machi', 'Pochi']

console.log(cats.concat(dogs))
const allPets = [...cats, ...dogs,'Sakura'];
console.log(allPets);

console.log('------------------');

//スプレッド構文（配列リテラル）:オブジェクトの場合

const feline = {
    legs: 4,
    family: 'Cats',
}
const canie = {
    legs: 4,
    family: 'Dogs'
}
console.log({...feline, color: 'black'});
console.log({...feline, ...canie});
console.log({...[2, 4, 6, 8]});

//オブジェクトのコピーを使う例：フォームインプットデータを返したい場合

const formData = {
    email: 'hoge@example.com',
    password: 'secret',
    username: 'hoge'
}

const newUser = {...formData, id: '111', isVerified: false}
console.log(newUser);
console.log(formData);


console.log('------------------');

//レスト構文

//arguments:すべての引数が辞書型で入ってくる（配列ではなく、KeyとValueがある
// function sum(){
// console.log(arguments);
// return arguments.reduce((total, num) =>{
// return total + num;
// })
// }
// nums = [1, 2, 3, 4, 5];
// console.log(sum(nums)); //argumetsは配列ではないから、reduceは使えずエラーになる
//そこでレスト構文を使う

function sum_rest(...numbers){
    console.log(numbers);
    return numbers[0].reduce((total,num)=> total+num);
}
// sum_rest(nums);
console.log(sum_rest(nums));

function raceResults(gold, silver, ...rest){
    console.log(`gold: ${gold}`)
    console.log(`silver:${silver}`)
    console.log(`rest: ${rest}`)
}

raceResults('a', 'b', 'c', 'd')


console.log('------------------');

//分割代入
//配列の分割代入

const scores = [10, 20, 30, 40, 50];

const [gold, silver ,...rest] = scores;
console.log(gold);
console.log(silver);
console.log(rest);

//オブジェクトの分割代入

const user = {
    email: 'hoge@example.com',
    password:'secret',
    firstName:'Mike',
    lastName: 'Owen',
    born: '1830',
    died: '1986'
}
const {firstName, lastName, email} = user;

const { born: birthYear} = user;
console.log(firstName, lastName, email, birthYear);

// デフォルト値

const {city: birthArea='N/A', password='N/A'} = user;
console.log(birthArea, password);


console.log('------------------');

//関数パラメータ
//分割代入

function fullName(user){
    const {firstName, lastName} = user;
    // return `${user.firstName} ${user.lastName}`
    return `${firstName} ${lastName}`
}
console.log(fullName(user));

function fullName2({firstName, lastName='aaa', city='bbb'}){
    return `${firstName} ${lastName} ${city}`
}
console.log(fullName2(user));

movies = [
    {
        name: 'Amadeus',
        score: 99,
        year: 1986,
    },
    {
        name: 'StarGate',
        score: 80,
        year: 2000,
    }
]

console.log(movies.filter(movie => movie.score >= 90));
console.log(movies.filter(({score})=>score>=90));

console.log(
    movies.map(movie =>{
        return `${movie.name}:${movie.score}/100`
    })
)
console.log(
    movies.map(({name, score}) =>{
        return `${name}:${score}/100`
    })
)

戻る