カテゴリー: Javascript

Javasript 分割代入

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
let start = 'Tokyo';
let goal = 'Osaka';

//start = goal;
//goal = start;

//let temp = "";
//temp = start;
//start = goal;
//goal = temp;

[goal, start] = [start, goal]

console.log(start);
console.log(goal);
}

Javascript 分割代入

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = [70, 90, 80, 85];
  // const first = scores[0];
  // const second = scores[1];
  // const third = scores[2];
  // const fourth = scores[3];
  const [first, second, third, fourth] = scores;

  console.log(first);
  console.log(second);
  console.log(third);
  console.log(fourth);
}

Javascript filter()

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const prices = [100, 150, 200];

  // const pricesOver150 = [];
  // prices.forEach((price) => {
  //   if (price >= 150) {
  //     pricesOver150.push(price);
  //   }
  // });

  const pricesOver150 = prices.filter((price) => {
    return price >= 150;
  });

  console.log(pricesOver150);
}

Javascript map()

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
'use strict';

{
  const prices = [100, 150, 200];

  // const pricesWithTax = [];
  // prices.forEach((price) => {
  //   pricesWithTax.push(price * 1.1);
  // });

  const pricesWithTax = prices.map((price) => {
    return price * 1.1;
  });

  console.log(pricesWithTax);
}

Javascript join()､split()

imdex.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  // const names = ['Taro', 'Jiro', 'Saburo'];

  // // Taro|Jiro|Saburo
  // console.log(names.join('|'));
  // console.log(names.join());
  // console.log(names.join(''));

  const names = 'Taro|Jiro|Saburo';
  console.log(names.split('|'));
}

Javascript オブジェクトの値

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = {
    math: 80,
    english: 90,
  };
  let sum = 0;

  scores.physics = 70;

  const entries = Object.entries(scores);
  // console.log(entries);
  entries.forEach((prop) => {
    // console.log(prop);
    sum += prop[1];
    console.log(`${prop[0]}: ${prop[1]}`);
  });
  console.log(`Sum: ${sum}`);
  console.log(`Average: ${sum / entries.length}`);
}

Javascirpt Object.entries()

'use strict';

{
  const scores = {
    math: 80,
    english: 90,
  };

  const entries = Object.entries(scores);
  entries.forEach((prop) =>{
    //console.log(prop);
    console.log(`${prop[0]}: ${prop[1]}`);
  });
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Javascript プロパティ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = {
    math: 80,
    english: 90,
  };

  scores.physics = 70;
  delete scores.english;
  console.log(scores);
}

Javascript 配列の値

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict';

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];
  let sum = 0;
// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.forEach((score, index) => {
 // console.log(score);
 sum += score;
 console.log(`${index}: ${score}`);
});

console.log(`Sum: ${sum}`);
console.log(`Average: ${sum / scores.length}`);
}

Javascript forEach()

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
'use strict';

{
  const scores = [
    70, 
    95, 
    80, 
    85,
  ];

// console.log(scores[0]);
// console.log(scores[1]);
// console.log(scores[2]);
// console.log(scores[3]);

scores.forEach((score, index) => {
 // console.log(score);
 console.log(`${index}: ${score}`);
});
}