[TIL]CSS位置:固定後フルスクリーン充填,JS)変数割り当て待ち,mapメソッドでオブジェクトの部分修正

4554 ワード
async/await main aside first-of-types Map テキストリンク
出典:20個のミニアイテム)
section DOM Array Methods | forEach, map, filter, sort,
reduce, sectionMusic player | HTML5 Audio API
section Menu Slider & Modal | DOM & CSS
-Brad Traversy
HTML Part
aside tag
サイドバーを作るときに役立つラベル!
<aside>
        <button id="add-user">Add User 👨</button>
        <button id="double">Double Money 💰</button>
        <button id="show-millionaires">Show Only Millionaires 💵</button>
        <button id="sort">Sort by Richest ↓</button>
        <button id="calculate-wealth">Calculate entire Wealth 🧮</button>
</aside>
main tag
main part tag
CSS part
first-of-types
同じエレメントの最初のエレメントを選択します.
li : first-of-types{
		text-decoration : none;}
position:fixed後全画面充填
.modal-container{
	position : fixed;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0}
JS part
async/await
async関数でデータ値を求めるためにres.json()まで待機し、変数に値を割り当てます!そうでない場合、promiseはres.json()の値を返します.
async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api");
  const data = await res.json();
  const user = data.results[0];
  const newUser = {
    name: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 100000),
  };
  addData(newUser);
}
map methods
オブジェクトをコピーしていくつかの値を変更する場合は、次の操作を行います.
keyと必要な変更値を直接記入すればいいです.{...object, key : value}
const data = [{name : Hyojeong Kim, money : 200}]
function doubleMoney(){
		data = data.map(user => {
        		return {...user, money:user.money*2;};
                		}
console.log(doubleMoney()); // [{name : Hyojeong Kim, money : 400}]
白俊1010号です.
条件付きRXJS間隔