JavaScript Array Object 備忘録

#JavaScript備忘録 Array オブジェクト

##Javascript Array オブジェクト
JavaScript の Array オブジェクトは、配列を構築するためのグローバルオブジェクト

Create Array

let names = ["Angela", "Lisa" , "Mark", "Bob"];
console.log(names); //["Angela", "Lisa" , "Mark", "Bob"]

let names2 = new Array("Mizue", "Fumi", "Hiro"); // []ではなく（）

console.log(names2); // ["Mizue", "Fumi", "Hiro"]

length プロパティ

 console.log(names.length); //4
 console.log(names2.length); //3

 let cars = new Array("Toyota", "BMW" ,"Honda","Nissan" , "Subaru");
 cars.length = 8;
 console.log(cars); // ["Toyota", "BMW", "Honda", "Nissan", "Subaru", undefined, undefined, undefined]
 console.log(cars.length); //8

Array メソッド

1. Array.from()

配列風オブジェクトや反復可能オブジェクトから、新しい、浅いコピーの Arrayインスタンスを生成する。

 const msg = 'Hello';
 console.log(msg); // "Hello"
 console.log(Array.from(msg)); //["H", "e", "l", "l", "o"]
 const newMsg = Array.from(msg);
 console.log(newMsg[0]); // "H"
 console.log(newMsg[1]); // "e"
 console.log(newMsg[2]); // "l"
 console.log(newMsg[3]); // "l"
 console.log(newMsg[4]); // "o"

//コールバックで新しい配列を作成
//文字列の一つずつに☆を追加

const myString = 'Good Job';
const newArry = Array.from(myString, (character) => `${character}☆`);
 console.log(newArry); // ["G☆", "o☆", "o☆", "d☆", " ☆", "J☆", "o☆", "b☆"]

 console.log(newArry.length); //8

####2. Array.isArray()
Array.isArray() メソッドは、渡された値が Array かどうかを判断する
値が Array の場合は true です。そうでなければ false を返す

let myArray = ["Japan", "Canada","USA"];
console.log(Array.isArray(myArray)); // true

let myNo = 4;
console.log(Array.isArray(myNo)); //false

let myArray2 = ["a", "b", "c"];
console.log(Array.isArray(myArray2[1])); //false

3. Array.of()

Array.of() メソッドは、引数の数や型にかかわらず、可変長引数で、新しい Array インスタンスを生成する

let foods = Array.of("Donut", "Pizza" , "Sushi");
console.log(foods); // ["Donut", "Pizza", "Sushi"]
console.log(Array.isArray(foods)); //true


let languages = Array.of(7);
console.log(languages); // [7]
console.log(languages.length); //1
console.log(Array.isArray(languages));// true

let languages2 = Array(7);
console.log(languages2); //[undefined, undefined, undefined, undefined, undefined, undefined, undefined]
console.log(languages2.length); //7

forEach()

与えられた関数を、配列の各要素に対して一度ずつ実行する
配列.forEach(コールバック関数)

let list = ["Number1", "Number2", "Number3"];
list.forEach((x,y) => {
  console.log(x,y);
}); // "Number1" 0
    //"Number2" 1
    //"Number3" 2

// for文　例
let cars = ["Toyota" , "Audi", "Nissan" , "Honda"];

 for(let i = 0 ; i < cars.length; i++) {
   console.log(cars[i]);
 }　　　　            //"Toyota"
                     //"Audi"
                     //"Nissan"
                     //"Honda"

//forEach()に変換
 cars.forEach((name) => {
   console.log(name);
 });                 //"Toyota"
                     //"Audi"
                     //"Nissan"
                     //"Honda"

//Example

 let numbers = ["1", "2", "3","4","5","6"];

 numbers.forEach((num) => {
   if(num % 2 === 0) {
     console.log(`${num} This is even number`);
   } else {
     console.log(`${num} This is not even number`);
   }
 });
// "1 This is not even number"
// "2 This is even number"
// "3 This is not even number"
// "4 This is even number"
// "5 This is not even number"
// "6 This is even number"

####array.map()
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成する
配列.map(コールバック関数)

//Example１
 const idList = [1,2,3,4];

 const userIdList = idList.map((idNumber) =>
   `UserId:${idNumber}` );

 console.log(userIdList);
 //["UserId:1", "UserId:2", "UserId:3", "UserId:4"]

//Example2

 const numbers = [3,4,5,6];

 const doubleNumbers = numbers.map((num) => {
    return  num * 2; });

 console.log(doubleNumbers); //[6, 8, 10, 12]


// forEach()は戻り値がなく実行するだけのメソッドに対して、map()メソッドは実行後の結果を配列として返す点が異なる。

####Array.filter
引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成する
配列.filter(コールバック関数)

//Example1
 let ages = [15,18,20,29,33,42];
 let overAge = ages.filter((age) =>
   age > 23 && age < 40);
 console.log(overAge); //[29, 33]

Array reduce()

配列の各要素を左から右に実行して、単一の値を生成する
配列.reduce(コールバック関数)

//Example
 let priceList = [300, 750,1050];
 let totalPrice = priceList.reduce((previous,current) => {
   return previous + current; });

 console.log(totalPrice); //2100