JavaScript回顧00:字串,陣列,物件和ES6新特性

GrandNovice發表於2020-10-31

3 資料型別

3.1 字串

1.正常字串我們使用單引號’'或者雙引號""包裹
2.注意轉義字元\

\'
\n
\t
\u4e2d  \\Unicode字元
\x41  \\AscII字元

3.多行字串編寫

var msg =
    `
    hello
    world
    你好
    中國
    `;

使用的是tab上面的那個鍵 ``
4.模板字串

let name = "GrandNovice";
let age = 3;
let person = `你好,${name}`;

輸出:“你好,GrandNovice”

5.字串長度
str.length

6.字串每個元素
str[0]

7.字串的可變性
不可變

8.大小寫轉換

9.indexOf()

10.subString()同樣遵循前閉後開
在這裡插入圖片描述

3.2 陣列

JavaScript中的Array可以包含任意的資料型別,類比於python的list型別。

1.長度
arr.length

注意:陣列元素賦值可以改變陣列內容,陣列長度賦值可以改變陣列長度,變長補空,變短擷取
在這裡插入圖片描述
2.indexOf 通過元素獲得下標索引

arr.indexOf(3)  //表示3出現在index=2的位置
//輸出2

字串的"1"和數字1是不同的
在這裡插入圖片描述
3.slice()擷取陣列的一部分,返回一個新的陣列。(常用)
arr.slice(a)擷取從第三個開始的後續陣列。
在這裡插入圖片描述
4.push pop
push方法的引數是要新增的元素,push方法在尾部新增元素
pop方法沒有引數,彈出尾部的元素
在這裡插入圖片描述
5.unshift() shift()
unshift() 壓入到頭部
shift() 彈出頭部的元素
在這裡插入圖片描述
6.sort()排序
7.reverse() 元素反轉
8.concat() 拼接
在這裡插入圖片描述
拼接不會改變原陣列,會返回一個新陣列
9.連線符join
將arr通過’-'將所有元素連線成一個字串
在這裡插入圖片描述
10.多維陣列

在這裡插入圖片描述

3.3 物件(對比JSON字串)

若干個鍵值對

var 物件名 = {
	屬性名1: 屬性值,
	屬性名2: 屬性值,
	屬性名3: 屬性值
}

        var person = {
            name: "dongyang",
            age: 20,
            email: "12138@qq.com",
            score: 100
        }

在這裡插入圖片描述
1.物件賦值

person.name = "dy"
person.name
"dy"

2.使用一個不存在的物件屬性,不會報錯! undefined

person.haha
undefined

3.動態的刪減屬性
通過delete刪除物件的屬性

4.動態的新增,直接給新的屬性新增值即可
在這裡插入圖片描述
5.判斷屬性值是否在這個物件中 xxx in xxx!
JavaScript中的鍵都為字串型別,值為任意型別
在這裡插入圖片描述
6.判斷一個屬性是否是這個物件自身擁有的 hasOwnProperty()
在這裡插入圖片描述
由此可知,age是本身存在的,toString是繼承的

3.4 流程控制

if else 判斷

var age = 3;
        if (age > 3) {
            alert("haha")
        }else if(age < 3){
            alert("wuwuwu")
        }else {
			alert("hawu")
		}

while和do…while迴圈

        while (age<100) {
            age++;
            console.log(age);
        }

		do {
            age++;
            console.log(age);
        }while(age<100)

for迴圈

        for (let i = 0; i < 10; i++) {
            console.log(i);
        }

forEach迴圈 ES>5.1

age.forEach(function (value) {
            console.log(value);
        })

forin迴圈等效於java的增強for迴圈

        'use strict';
        var age = [12, 13 ,11 ,14, 15, 16];

        for (let index in age) {
            if (age.hasOwnProperty(index)) {
                console.log("存在索引" + index);  //索引
                console.log(age[index]);  //輸出值
            }
        }

在這裡插入圖片描述

3.5 Map 和 Set

ES6新特性 Map Set
Map

//ES6 新出Map和Set
//學生的成績,學生的名字
// var names = ["Tom", "Jack", "James"];
// var score = [100, 99, 98];

var map = new Map([["Tom", 100], ["Jack", 99], ["James", 98]]);
var name = map.get("Tom");  //通過key獲得value
map.set("admin", 123456);  //增加
map.set("Tom", 0);  // 修改
map.delete("Tom");   // 刪除
console.log(name);    

Set:無序不重複的集合

var set = new Set([3, 1, 1, 1, 1, 1]);  //set可以去重複
set.add(2);  //新增
set.delete(1);  //刪除
console.log(Array.from(set));  //輸出set元素
console.log(set.has(3));  //判斷是否包含3這個元素

3.6 iterator使用

ES6新特性
迭代遍歷
1.for of 實現

'use strict';


//for of 實現 , for in 輸出的是下標
//陣列
var arr = [3, 4, 5];
for (let x of arr) {
    console.log(x);
}

//map
var map = new Map([["A", 100], ["B", 90], ["C", 80]]);
for (let x of map) {
    console.log(x);
}

//set
var set = new Set([1, 2, 3, 4, 5, 5, 1]);
for (let x of set) {
    console.log(x);
}

相關文章