カテゴリー: programming

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 moreScores = {
    shiro: 77,
    goro: 88,
  };
  const scores = {
    taro: 80,
    jiro: 70,
    saburo: 90,
    ...moreScores,
  };
  // const {taro, jiro, saburo} = scores;
  const {taro, ...others} = scores;

  console.log(taro);
  // console.log(jiro);
  // console.log(saburo);
  console.log(others);
}

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 moreScores = [77, 88];
  const scores = [70,90,80,85, ...oreScores];
  const [first, ...others] = scores;

  console.log(first);
  console.log(others);
}

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, ...others] = scores;

  console.log(first);
  console.log(others);
}

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>