JavaScript復習①からの続きです。
配列とfor文、length
JavaScriptファイル
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < 3 ; i ++) {
console.log(fruits[i]);
}
コンソール
apple
banana
orange
JavaScriptファイル
const fruits = ["apple", "banana", "orange"];
console.log(fruits.length);
for (let i = 0; i < fruits.length ; i ++) {
console.log(fruits[i]);
}
コンソール
3
apple
banana
orange
// 一つ上のファイルの条件式の箇所を i < 3 から i < fruits.length に変更してもコンソールの出力は同じである。
オブジェクト
JavaScriptファイル
// オブジェクト
{プロパティ1: 値1, プロパティ2: 値2}
{name: "チョコ", price: 150}
//上の例だとname がプロパティで、"チョコ"が値
const item = {name: "チョコ", price: 150};
console.log(item);
console.log(item.name);
コンソール
{name: "チョコ", price: 150}
チョコ
オブジェクトの値の更新
JavaScriptファイル
const item = {name: "チョコ", price: 150};
item.price = 1,000;
console.log(item.price);
コンソール
1,000
オブジェクトを要素に持つ配列
JavaScriptファイル
const items = [
{name: "チョコ", price: 150},
{name: "ビスケット", price: 300}
];
console.log(items[1]);
console.log(items[1].price);
// 配列の中のオブジェクトのインデックス番号はそれぞれ、
// {name: "チョコ", price: 150}が0、{name: "ビスケット", price: 300}が1である。
コンソール
{name: "ビスケット", price: 300}
300
undefined
配列の存在しないインデックス番号の要素やオブジェクトの存在しないプロパティの要素を取得しようとすると、 undefinedと出力される複雑なオブジェクトを扱う
JavaScriptファイル
const character = {
name: "たろう",
age: 20,
favorite: {
food: "すし",
sports: "野球",
color: "赤色"
}
};
console.log(character.favorite);
console.log(character.favorite.food);
コンソール
{food: "すし", sports: "野球", color: "赤色"}
すし
関数の定義
JavaScriptファイル
const 定義名 = function() {
// まとめたい処理
};
JavaScriptファイル
const introduce = function() {
console.log("こんにちは");
console.log("私はたろうです");
};
introduce(); //関数の呼び出し
コンソール
こんにちは
私はたろうです
アロー関数
JavaScriptファイル
const introduce = ()=> {
console.log("こんにちは");
console.log("私はたろうです");
};
introduce(); //関数の呼び出し
コンソール
こんにちは
私はたろうです
関数内で引数を使用する
JavaScriptファイル
const introduce = (name)=> {
console.log("こんにちは");
console.log(`私は${name}です`);
};
introduce("たろう"); //関数の呼び出し
introduce("はなこ"); //関数の呼び出し
コンソール
こんにちは
私はたろうです
こんにちは
私ははなこです
関数 引数のデフォルト値を設定する
JavaScriptファイル
// 引数のデフォルト値を設定することができる
function showAd(message = 'Ad'){
console.log('----------');
console.log(`---${message}---`);
console.log('----------');
}
.
.
.
複数の引数を受け取る関数の呼び出し
JavaScriptファイル
const introduce = (name, age)=> {
console.log(`私は${name}です`);
console.log(`私は${age}歳です`);
};
introduce("たろう", 20);
コンソール
私はたろうです
私は20歳です
戻り値
JavaScriptファイル
const add = (a,b)=> {
return a + b;
};
const sum = add(1,3); //関数呼び出し部分
console.log(sum);
コンソール
4