KnowHow

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

JavaScriptチートシート３（配列）

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

配列操作メモ

//initialize data
const numbers = [];
function countup(num, count){
    for(let i=0; i<count; i++){
        num.push(i);
    }
}
countup(numbers, 10);
// console.log(numbers);
movies = [
    {
        name: 'Amadeus',
        score: 99,
        year: 1986,
    },
    {
        name: 'StarGate',
        score: 80,
        year: 2000,
    }
]

//forEach:配列のメソッド。配列の要素を引数にして関数を呼び出して実行できる。最近はfor ofの方がいいかも

function print(element){
    console.log(element);
}
numbers.forEach(print);

console.log('---');
numbers.forEach((element) => {
    console.log(element);
})

console.log('---');
for (let elem of numbers){
    console.log(elem);
}

console.log('---');
movies.forEach((movie) =>{
    console.log(`${movie.name}: ${movie.score}/100`);
})

console.log('**************');

//map:mapの場合は、配列に対して関数を実行した戻り値を返す

const doubles = numbers.map((num)=>{
    return num*2;
})
doubles.forEach(print);

const titles = movies.map((movie)=>{
    return `movie title is "${movie.name}"`;
})
titles.forEach(print);

console.log('**************');

//アロー関数:関数を簡潔に記述する

const add = function(x, y){
    return x+y;
}
const add2 = (x,y)=>{
    return x+y;
}
console.log(add(1,2));
console.log(add2(1,2));

const square = (num)=>{
    return num*num;
}
const rollDie = () => {
    return Math.floor(Math.random() * 6)+1
}
console.log(square(4));
console.log(rollDie());

//アロー関数：暗黙的なreturn:　戻り値が一つの値（式）しかない場合のみ使える。

console.log('**************');
const rollDie2 = () => (
    Math.floor(Math.random() * 6) + 1
);
console.log(rollDie2());

const add3 = (x,y) => x+y;
console.log(add3(1,2));

//アロー関数とmap, forEachを組み合わせて使う

console.log('**************');

const newMovies = movies.map((movie) => {
    return `${movie.name} - ${movie.score} / 10`;
})
newMovies.forEach(print)


console.log('**************');
// //setTimeout : msec後に関数を実行する（逐次処理ではある）
// // clearTimeoutでキャンセルすることも可能
// console.log('Ya');
// setTimeout(()=>{console.log('Hello')}, 1000)
// console.log('Bye');

// //setInterval : msec毎に、関数を実行し続ける
// const id = setInterval(()=>{
//     console.log(Math.random())
// }, 2000);

// //setIntervalを止めるには、clearInterval()
// setTimeout(()=>{
//     console.log('call clearInterval')
//     clearInterval(id)
// }, 10000);

console.log('**************');

//filter: 提供されたテスト関数を満たす要素からなる新しい配列を生成する

const newnumbers = numbers.filter((num)=>{
    return num < 5;
})
newnumbers.forEach(print);

const goodMovies = movies.filter((movie)=>{
    return movie.score > 80;
});
const recentMovies = movies.filter((movie)=>movie.year > 1999);

const recentMoviesTitle = movies
    .filter((movie)=>movie.year > 1999)
    .map(movie=>movie.name);

goodMovies.forEach(print);
recentMovies.forEach(print);
recentMoviesTitle.forEach(print);

console.log('**************');

//some, every: 配列要素の評価式のTrueやFalseを返す
//everyは全ての要素が条件を満たせば、true, 一つでも満たさな場合は、false
console.log(numbers.every(num => num>5));
//someはどれか一つでも条件を満たせばTrueとなる。全てFalseの時にFalseとなる

console.log(numbers.some(num => num>5));

const allEvens = (nums) => {
    return nums.every(num => num % 2 === 0);
}
console.log(allEvens([2, 4, 6, 8]));
console.log(allEvens([1,2,4]));

console.log('**************');

//reduce: 配列の各要素に対して（引数で与えられた）reducer関数を実行して、「単一の出力値」を生成する
// ex) numbers=[1,2,3,4]
// numbers.reduce((accumerate, current)=>{ return accumerate + current; })

prices = [980, 1500, 1980, 4980, 2980];

let total = 0;
for (let price of prices){
    total += price;
}
console.log(total);

const total_res = prices.reduce((total, price)=>{
    return total + price;
})
console.log(total_res);

const min_value = prices.reduce((min, price)=>{
    if (min > price){
        return price;
    }
    return min;
})
console.log(min_value);

const bestMovie = movies.reduce((movie, current) =>{
    if (movie.score < current.socore){
        return current;
    }
    return movie;
})

console.log(bestMovie);

//reduceの初期値

const evens=[1, 3, 5, 7];
console.log(evens.reduce((sum, num) => { return sum+num }));
console.log(evens.reduce((sum, num) => { return sum+num },100));
console.log(evens.reduce((sum, num) => { return sum+num },15));


console.log('**************');

//アロー関数のthis : 普通のthisとはまた違った動き

const person1 = {
    firstName: 'Taro',
    lastName: 'Yamada',
    fullName: function() {
        return `${this.firstName} ${this.lastName}`
    },
    delayName: function(){
        setTimeout(function() {
            console.log(this);
            console.log(this.fullName())
        })
    }
}

const person2 = {
    firstName: 'Taro',
    lastName: 'Yamada',
    fullName: () => {
        return `${this.firstName} ${this.lastName}`
    },
    delayName: function(){
        setTimeout(()=>{
            console.log(this);
            console.log(this.firstName);
        }, 2000);
    }
}
console.log(person1.fullName())
console.log(person2.fullName()) //undfinedになる。thisはグローバルからとってくるので。

// console.log(person1.delayName());
console.log(person2.delayName()); //delayNameはarrow関数でthisの決まり方が違うのでうまくいく

戻る