黑馬pink JavaScript學習筆記_JS基礎 Day5

growingbambi發表於2024-07-23
JavaScript筆記JS

物件語法介紹

什麼是物件？

物件是JavaScript的一種資料型別，它是由屬性和方法兩部分組成。

語法

宣告物件

let person = {};

let person = {
    "name": "summer",
    "age": 18
};

物件基本使用

屬性和訪問

  • 屬性都是成對出現的，屬性名和屬性值之間用冒號 : 分隔
  • 多個屬性之間用逗號 , 分隔
  • 屬性就是依附在物件上的變數
  • 屬性名可以使用雙引號 " " 或 單引號 ' ' 包著，一般情況下省略它們
  • 可以使用 物件名.屬性名 或者 物件名['屬性名'] 訪問物件中的屬性 (方括號裡面的屬性名一定要加引號)
let person = {
    name: "dan",
    age: 18,
    hobby: "climbing, reading"
}

使用.訪問屬性：物件.屬性名

let person = {
    name: "dan",
    age: 18,
    hobby: "climbing, reading"
}
console.log("透過 . 訪問物件屬性");
console.log(person.name);
console.log(person.age);
console.log(person.hobby);


console.log("透過 [] 訪問物件屬性");
console.log(person[name]);//undefined
console.log(person[age]);//undefined
console.log(person[hobby]);//undefined

image-20240716225841828

使用[]訪問屬性：物件['屬性名']

let person = {
    name: "dan",
    age: 18,
    hobby: "climbing, reading"
}
console.log("透過 . 訪問物件屬性");
console.log(person.name);
console.log(person.age);
console.log(person.hobby);

console.log("透過 [] 訪問物件屬性");
// console.log(person[name]);//undefined
// console.log(person[age]);//undefined
// console.log(person[hobby]);//undefined

console.log(person["name"]);//undefined
console.log(person["age"]);//undefined
console.log(person["hobby"]);//undefined

console.log(person['name']);//undefined
console.log(person['age']);//undefined
console.log(person['hobby']);//undefined

image-20240716230130321

特殊情況：如果屬性名是這種帶中劃線的命名方式，那麼只能用[]這種形式來訪問屬性。

let phone = {
    "good-name": "xiaomi"
}

console.log(phone['good-name']);

動態新增屬性

let person = {
    name: "dan",
    age: 18,
    hobby: "climbing, reading"
}
person.hometown = "重慶市";
console.log(person);

image-20240717071727212

方法和呼叫

一般物件外面的叫函式，物件裡面的叫方法。方法的本質其實也是函式。

  1. 方法是由方法名和函式兩部分構成，它們之間用 : 分隔
  2. 多個方法之間用 , 分隔
  3. 方法是依附在物件中的函式
  4. 和屬性名一樣，方法名也可以使用雙引號 " " 或 單引號 ' ' 包著，一般情況下省略它們，除非遇到特殊符號，比如空格、中劃線等。
let person = {
    dance: function () {
        console.log("ali真的很會跳舞~~~");
    },

    //方法之間用逗號分隔
    sing: function () {
        console.log("summer在唱課堂上老師教的新歌曲~~~");
    }
}

使用.呼叫物件中的方法：物件名.方法名()

let person = {
    dance: function () {
        console.log("ali真的很會跳舞~~~");
    },

    //方法之間用逗號分隔
    sing: function () {
        console.log("summer在唱課堂上老師教的新歌曲~~~");
    }
}

person.dance();//呼叫方法，這個小括號裡面傳遞的引數為實參
person.sing();

image-20240715210757449

呼叫一個函式的時候，如果函式沒有返回值，則預設會返回一個undefined

let person = {
    dance: function () {
    }
}

var result = person.dance();
console.log("result: " + result);

image-20240717072905489

null

null也是JavaScript中的一種資料型別，通常只用它來表示不存在的物件。

let person = null

console.log("typeof null: " + typeof person);

image-20240717073204450

使用for in遍歷物件

透過for in 遍歷物件，for in語法中的k是一個變數，在迴圈的過程中依次代表物件的屬性名。因為k是變數，所以必須使用[ ]語法解析

image-20240715212706961

let person = {
    name: "dan",
    age: 18,
    hobby: "climbing, reading"
}

for (const key in person) {
    console.log(key);//key依次代表的值為 'name' 'age' 'hobby'
    console.log(person.key);//所以不能透過這種方法訪問
}

image-20240715213503854

let person = {
    name: "dan",
    age: 18,
    hobby: "climbing, reading"
}

for (const key in person) {
    console.log(key);
    //console.log(typeof key);//String
    //console.log(person.key);//獲取到的物件屬性的值為undefined
    console.log(key + "->" + person[key]);
}

image-20240715213811547

案例：遍歷陣列物件

let students = [
    { name: "丹丹", age: 18, gender: '女', hometown: '陝西省' },
    { name: "阿力", age: 19, gender: '男', hometown: '重慶市' }
]


for (let i = 0; i < students.length; i++) {
    let student = students[i];
    console.log("第" + (i + 1) + "號猿神============>");
    console.log("姓名：" + student.name + ", 年齡：" + student.age + ", 性別：" + student.gender + ", 籍貫：" + student.hometown);
}

image-20240716195938652

老師講解之前自己寫的程式碼

let students = [
    { name: "丹丹", age: 18, gender: '女', hometown: '陝西省' },
    { name: "阿力", age: 19, gender: '男', hometown: '重慶市' }
]


for (let i = 0; i < students.length; i++) {
    let student = students[i];
    console.log("第" + (i + 1) + "號猿神============>");
    for (const key in student) {
        console.log(key + "->" + student[key]);
    }
}

image-20240723063520228

案例：渲染學生資訊表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 600px;
      text-align: center;
    }

    table,
    th,
    td {
      border: 1px solid #ccc;
      border-collapse: collapse;
    }

    caption {
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: 700;
    }

    tr {
      height: 40px;
      cursor: pointer;
    }

    table tr:nth-child(1) {
      background-color: #ddd;
    }

    table tr:not(:first-child):hover {
      background-color: #eee;
    }
  </style>
</head>

<body>
  <h2>學生資訊</h2>
  <p>實現將資料渲染到頁面中的功能...</p>

  <table>
    <caption>學生列表</caption>
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
      <th>家鄉</th>
    </tr>
    <script>
      let students = [
        { name: "丹丹", age: 18, gender: '女', hometown: '陝西省' },
        { name: "阿力", age: 19, gender: '男', hometown: '重慶市' }
      ]

      for (let i = 0; i < students.length; i++) {
        let student = students[i];
        //document.write中的write就是一個物件中的方法
        document.write(`
            <tr>
              <td>${i + 1}</td>
              <td>${student.name}</td>
              <td>${student.age}</td>
              <td>${student.gender}</td>
              <td>${student.hometown}</td>
            </tr>
        `)
      }
    </script>
  </table>

</body>

</html>

image-20240723063648763

內建物件

什麼是內建物件？

內建物件是JavaScript內部提供的物件，包含各種屬性和方法供開發者呼叫。

內建物件-Math

Math物件線上文件

Math物件有屬性也有方法

image-20240717080218807

方法 描述
Math.abs() Math.abs(x) 函式返回一個數字的絕對值。
Math.ceil() Math.ceil() 靜態方法總是向上舍入，並返回大於等於給定數字的最小整數。
Math.floor() Math.floor() 函式總是返回小於等於一個給定數字的最大整數。
Math.max() Math.max() 函式返回作為輸入引數的最大數字，如果沒有引數，則返回 -Infinity。
Math.min() Math.min() 函式返回作為輸入引數的數字中最小的一個，如果沒有引數，則返回 Infinity。
Math.pow() Math.pow() 函式返回基數（base）的指數（exponent）次冪，即 base^exponent。
Math.random() Math.random() 靜態方法返回一個大於等於 0 且小於 1 的偽隨機浮點數，並在該範圍內近似均勻分佈，然後你可以縮放到所需的範圍。其實現將選擇隨機數生成演算法的初始種子；它不能由使用者選擇或重置。
Math.round() Math.round() 函式返回一個數字四捨五入後最接近的整數。

生成任意範圍隨機數

生成0-10的隨機數呢？

Math.floor(Math.random() * (10 + 1))

生成5-10的隨機數？

Math.floor(Math.random() * (5 + 1)) + 5

生成N-M之間的隨機數(包含N和M)

Math.floor(Math.random() * (M - N + 1)) + N

隨機點名案例

image-20240717195907665

let arr = ['趙雲', '黃忠', '關羽', '張飛', '馬超', '劉備', '曹操'];
let index = Math.floor(Math.random() * 7);
document.write(arr[index]);

隨機點名案例改進

image-20240717195826579

//隨機抽一個，並且抽完之後將其從陣列中刪掉
let arr = ['趙雲', '黃忠', '關羽', '張飛', '馬超', '劉備', '曹操'];
let index = Math.floor(Math.random() * 7);
console.log("隨機抽出的元素是：" + arr[index]);

//splice(起始位置，要刪除的元素個數)
arr.splice(index, 1);
console.log("移走元素後，陣列所剩的元素有：" + arr);

image-20240717200720282

猜數字遊戲

image-20240717200844136

//Math.floor(Math.random() * (M - N + 1)) + N
let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
console.log(random);

while (true) {
    let userInput = +prompt("請輸入你猜測的數字：");
    if (userInput > random) {
        alert("你猜大了，請繼續猜哦");
    } else if (userInput < random) {
        alert("你猜小了，請繼續猜哦");
    } else if (userInput == random) {
        alert("太棒啦，你猜對啦");
        break;
    }
}

image-20240717202641271

image-20240717202650061

image-20240717202735541

image-20240717202800486

猜數字遊戲最佳化

設定最大猜測次數，最大隻能猜測3次，如果3次都沒有猜對，則彈出提示"次數已經用完啦，請下次再嘗試哦~"。

//Math.floor(Math.random() * (M - N + 1)) + N
let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
console.log(random);

let flag = true;
for (let i = 0; i < 3; i++) {
    let userInput = +prompt("請輸入你猜測的數字：");
    if (userInput > random) {
        alert("你猜大啦");
    } else if (userInput < random) {
        alert("你猜小啦");
    } else if (userInput == random) {
        alert("太棒啦，你猜對啦");
        flag = false;//如果猜對了，將標誌設為false
        break;
    }
}
if (flag) {
    alert("次數已經用完啦，請下次再嘗試哦~");
}

生成隨機顏色

image-20240717203924410

老師講解之前，我自己試著寫了一遍

//Math.floor(Math.random() * (M - N + 1)) + N
let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1;

let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];


function getRandomColor(flag) {
    if (flag = null || flag) {
        //生成一個16進位制的顏色
        let result = "#";
        for (let i = 1; i <= 6; i++) {
            let random = Math.floor(Math.random() * (15 - 0 + 1)) + 0;
            result += arr[random];
        }
        return result;
    } else {
        //生成rgb顏色
        let result = "rgb(";
        for (let i = 1; i <= 3; i++) {
            let random = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
            if (i == 3) {
                result += random;
            } else {
                result += random + ",";
            }
        }
        result.substring(result.length - 3);
        result += ")";
        return result;
    }
}

console.log(getRandomColor(true));
console.log(getRandomColor(false));

image-20240717210123043

看了老師講解之後，按照老師的寫法寫的程式碼

//Math.floor(Math.random() * (M - N + 1)) + N
let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1;

let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];

function getRandomColor(flag = true) {//如果不傳引數，預設為true
    if (flag) {
        //生成一個16進位制的顏色
        let result = "#";
        for (let i = 1; i <= 6; i++) {
            let random = Math.floor(Math.random() * (15 - 0 + 1)) + 0;
            result += arr[random];
        }
        return result;
    } else {
        //生成rgb顏色
        let r = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
        let g = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
        let b = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
        return `rgb(${r},${g},${b})`;
    }
}

console.log(getRandomColor(true));
console.log(getRandomColor(false));
console.log(getRandomColor());

image-20240717210627466

image-20240717210645937

相關文章