前端学习笔记(三) 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;
            }

        }
    });