前端學習筆記(三) Javascript 字元串函數 數組函數

Javascript 字元串和數組的常用函數總結

• 1. 字元串函數
• 2 數組函數

1. 字元串函數

/*
   第一個字元位置為 0, 第二個字元位置為 1
   傳回在指定位置的符
 */
testCharAt() {
    const str = "Hello World!";
    let a = str.charAt(0);//H
    let b = str.charAt(30);//""
    console.log(a);
    console.log(b);
},
//連接配接兩個或更多字元串，并傳回新的字元串。
testConcat() {
    let a = "Hello ";
    let b = "World";
    let c = a.concat(b);
    console.log(a);//Hello
    console.log(b);//World
    console.log(c);//Hello World
},
//傳回某個指定的字元串值在字元串中首次出現的位置。
//不包含則傳回-1
testIndexOf() {
    let a = "Hello World";
    console.log(a.indexOf("ll"));//2
    console.log(a.indexOf(" "));//5
    console.log(a.indexOf("Wor"));//6
    console.log(a.indexOf("wor"));//-1
    console.log(a.indexOf("www"));//-1
},
//查找字元串中是否包含指定的子字元串
testIncludes() {
    let a = "Hello World";
    console.log(a.includes("Wor"));//true
    console.log(a.includes("wor"));//false
},
testLastIndexOf() {
    let a = "Hello World";
    console.log(a.lastIndexOf("Wor"));//6
    console.log(a.lastIndexOf("wor"));//-1
},
testReplace() {
    let a = "Hello World";
    console.log(a.replace("World", "Pigg"));//Hello Pigg
},
//slice(start, end) 方法可提取字元串的某個部分，并以新的字元串傳回被提取的部分。
//使用 start（包含） 和 end（不包含） 參數來指定字元串提取的部分。
//字元串中第一個字元位置為 0, 第二個字元位置為 1, 以此類推。
testSlice() {
    let a = "Hello World";
    let b = a.slice(1, 3);
    console.log(a);//Hello World
    console.log(b);//el
},
//把一個字元串分割成字元串數組
testSplit() {
    let a = "Hello World";
    let b = a.split(" ");
    console.log(a);//Hello World
    console.log(b);//["Hello", "World"]
},
testStartsWith() {
    let a = "Hello World";
    console.log(a.startsWith("Hel"));//true
    console.log(a.startsWith("hel"));//false
},
//substr() 方法可在字元串中抽取從 開始 下标開始的指定數目的字元。
//statr參數必需。要抽取的子串的起始下标。必須是數值
//第二個參數length可選。子串中的字元數。必須是數值。如果省略了該參數，那麼傳回從 stringObject 的開始位置到結尾的字串。
testSubstr() {
    let a = "Hello World";
    let b = a.substr(1, 3);
    let c = a.substr(1);
    console.log(a);//Hello World
    console.log(b);//ell
    console.log(c);//ello World
},
//substring() 方法用于提取字元串中介于兩個指定下标之間的字元。
//substring() 方法傳回的子串包括 開始 處的字元，但不包括 結束 處的字元。
testSubstring() {
    let a = "Hello World";
    let b = a.substring(1, 3);
    let c = a.substring(1);
    console.log(a);//Hello World
    console.log(b);//el
    console.log(c);//ello World
}
           

2 數組函數

let vm = new Vue({
        el: "#app1",
        data: {
            arr: [1, 2, 3, 4],
            message: "hello vue.js!!!"
        },
        methods: {
            checkMoreThanTwo(num) {
                return num > 2;
            },
            //concat() 方法用于連接配接兩個或多個數組。
            //該方法不會改變現有的數組，而僅僅會傳回被連接配接數組的一個副本。
            testContact() {
                let a = ["a", "aa"];
                let b = ["b", "bb"];
                let c = a.concat(b);
                console.log(a);//["a", "aa"]
                console.log(b);//["b", "bb"]
                console.log(c);//["a", "aa", "b", "bb"]
            },
            //判斷一個數組是否包含一個指定的值
            testIncludes() {
                let a = ["a", "aa"];
                console.log(a.includes("a"));//true
                console.log(a.includes("aaa"));//false
            },
            //通過指定函數處理數組的每個元素，并傳回處理後的數組。
            //map不改變原始數組，不對空數組檢測
            //它傳回一個新數組
            testMap() {
                let newMapArr = this.arr.map(function (item) {
                    return item * 2;
                })
                this.message = newMapArr;
            },
            //删除數組的最後一個元素并傳回删除的元素
            testPop() {
                let a = ["a", "aa"];
                let b = a.pop();
                console.log(a);//["a"]
                console.log(b);//aa
            },
            //push() 方法可向數組的末尾添加一個或多個元素，并傳回新的長度
            testPush() {
                let a = ["a", "aa"];
                let b = a.push("aaa", "aaaa");
                console.log(a);//["a", "aa", "aaa", "aaaa"]
                console.log(b);//4
            },
            testFind() {
                //find是找到第一個符合條件的成員
                let arr2 = this.arr.find((n) => n > 1);
                this.message = arr2;
            },
            testFindIndex() {
                //findIndex是找到第一個符合條件的成員位置，index從0開始
                let index = this.arr.findIndex((n) => n > 0);
                this.message = index;
            },
            testFilter() {
                //filter建立符合條件的新數組
                let filterArr = this.arr.filter((n) => n > 3);
                this.message = filterArr;
            },
            testSome() {
                //隻要有一個滿足條件就傳回true
                let someMoreThanTwo = this.arr.some(this.checkMoreThanTwo);
                this.message = someMoreThanTwo;
            },
            testEvery() {
                //所有滿足條件就傳回true
                let allMoreThanTwo = this.arr.every(this.checkMoreThanTwo);
                this.message = allMoreThanTwo;
            },
            testForEach() {
                this.arr.forEach(function (item, index, input) {
                    input[index] = item * 2;
                })
                this.message = this.arr;
            }

        }
    });