JavaScript: 字元串、數組、對象 的基本使用

文章目錄

• • • 資料類型:
    • • number:
      • 3.1、字元串:
      • 3.2、數組
      • 3.3、對象:

資料類型:

數值、文本、圖形、音頻、視訊

number:

js 不區分小數和整數

123 // 整數123
123.123 // 浮點數
1.123e3 // 科學計數法
-99     // 負數
NaN     // not a numbwe
Infinity // 表示無限大
           

3.1、字元串:

1、正常字元串我們使用 單引号,或者雙引号包裹。

*2、注意轉義字元 *

\'
\n     // 換行
\t     // 制表符
\u4e2d // \u#### unicode 字元
\x41   // ascii 字元
           

3、多行字元串編寫:

let msg = `
            Hello
            World
         `
        console.log(msg);
           

4、模闆字元串(字元串的拼接)

let name = "小潘同學";
   console.log(`你好,${name}`);

   // result: 你好,小潘同學
   // 注意: 不是單引号,也不是雙引号,是 tab 鍵 上面的符号。
   // 與 EL 表達式類似,不再使用 '+' 進行連接配接字元串。
           

5、字元串長度:

<script>
        "use strict"
         let student = "student";
         // 擷取字元串的長度
         console.log(student.length);
         // 擷取字元串指定下标的值
         console.log(student[2]);
         // 字元串的可變性,不可變
         student[2] = "a";
         console.log(student);
    </script>
           

6、大小寫轉換:

// 注意,這裡是方法,不是屬性了,有傳回值,轉換後的結果是傳回值,需要将傳回值進行輸出
// 轉換為大寫
student.toUpperCase();
// 轉換為小寫
student.toLowerCase();
           

7、student.indexOf(‘t’):

// 傳回指定字元的下标  
console.log(student.indexOf('t'));
// result: 1
           

8、截取字元串:

// 從start 到最後
console.log(student.substr(2));

// 從 start 開始向後 length 個字元
console.log(student.substr(2,4));

// [) start --> end (不包括end)
console.log(     student.substring(2,5));
           

3.2、數組

Array 可以包含任意的資料類型。

1、定義一個數組:

2、數組的長度:

arr.length
           

數組的長度是可變的,可以改變某個位置的值。

<script>
        "use strict"

        let arr = [1,2,3,4,5,6,7];

        arr[2] = 90;

        console.log(arr);

    </script>

	// result: [1, 2, 90, 4, 5, 6, 7]
           

注意:假如給 arr.length 指派,數組大小就會發生改變,如果指派過小,元素就會丢失。

arr.length=10;
console.log(arr);
//result:(10) [1, 2, 90, 4, 5, 6, 7, empty × 3]
           

3、indexOf: 通過元素獲得下标索引

console.log(arr.indexOf(5));
 // result: 4
           

4、slice: 字元串的截取:

類似 String 中 substring.

// 從 2 到最後
console.log(arr.slice(2));
// [): start -- > end(不包括end)
console.log(arr.slice(2,4));
           

5、push()、pop()、向數組尾部壓入或彈出:

arr.push("a","b");
 console.log(arr);
 // result:(12)[1, 2, 90, 4, 5, 6, 7, empty × 3, "a", "b"]

 arr.pop();
 arr.pop();
 console.log(arr);
 // result:(10) [1, 2, 90, 4, 5, 6, 7, empty × 3]
           

6、unshift、shift、向數組頭部壓入或彈出:

arr.unshift("a","b","c");
console.log(arr);
// result:(13) ["a", "b", "c", 1, 2, 90, 4, 5, 6, 7, empty × 3]
arr.shift();
arr.shift();
console.log(arr);
// result:(11) ["c", 1, 2, 90, 4, 5, 6, 7, empty × 3]
           

7、排序:

console.log(arr.sort());
// result:(11) [1, 2, 4, 5, 6, 7, 90, "c", empty × 3]
           

8、反轉:

console.log(arr.reverse())
// result:(11) [empty × 3, "c", 90, 7, 6, 5, 4, 2, 1]
           

9、連接配接兩個數組concat():

console.log(arr.concat([8,9,10]));
  // result:(14) [empty × 3, "c", 90, 7, 6, 5, 4, 2, 1, 8, 9, 10]
           

注意: concat() 并沒有修改數組.隻是會傳回一個新的數組。

10、連接配接符 join

列印拼接字元,使用特定的字元串連接配接:

console.log(arr.join('+'));
 // result:+++c+90+7+6+5+4+2+1
           

11、列印多元數組:

arr = [[1,2],[3,4],["a","b"]];
 console.log(arr[2][1]);
 // result: b
           

3.3、對象:

由若幹個鍵值對組成。

JavaScript總所有的鍵都是字元串,值是任意對象。

let 對象名 = {
    屬性名:屬性值,
    屬性名:屬性值,
    屬性名:屬性值,
    ......
}
    
 <script>
        // 定義了一個Person對象,有 4 個屬性
        let person = {
            name:"小潘同學",
            age:12,
            sex:'M',
            score:96
        }
        console.log(person);
 </script>
           

1、給對象的屬性指派:

person.name = "小藍";
person.age = 23;

/*  result:
    {name: "小藍", age: 23, sex: "M", score: 96}
*/

           

2、使用一個不存在的屬性時:不會報錯！ undefined.

person.haha
undefined
           

3、動态的删減屬性:

delete person.name;
  console.log(person);
  // result:{age: 23, sex: "M", score: 96}
           

4、動态的添加屬性:

// 直接給新的屬性添加值即可
person.ha = "hello";
console.log(person);
// result:{age: 23, sex: "M", score: 96, ha: "hello"}
           

5、判斷某個屬性是否在該對象中:

console.log('age' in person);
// result: true        
console.log('a' in person);
// result: false

// 繼承
console.log('toString' in person);
// result: true,g
           

6、判斷一個屬性是否是這個對象自身擁有的 hasOwnProperity()

console.log(person.hasOwnProperty("toString"));
// result:false
console.log(person.hasOwnProperty("age"))
// result:true