JavaScript数组与字符串的常用方法

2019-05-04 本文已影响0人无尾树袋熊

数组的常用方法

JS中数组是一个引用类型,也就是一个对象

    var arr1 = [1, 3, 5];
    var arr2 = new Array(2, 4, 6);

length属性, 可以获取长度

    console.log(arr1.length);

判断一个对象是否是数组

1. 利用instanceof判断某个对象时候是某个构造函数创建出来的
2. 利用Array提供的内置方法isArray来判断某个对象时候是Array构造函数创建出来的

注意点:isArray有兼容性的问题, 支持H5标签的浏览器才支持

    console.log(arr1 instanceof Array);
    console.log(Array.isArray(arr2));

添加元素

数组名[索引];

    var arr1 = [];
    arr1[0] = 1;
    arr1[1] = 3;
    arr1[2] = 5;

arr.push(值); 在末尾追加

    console.log(arr1); //1,3,5
    arr1.push(2);
    arr1.push(4);
    arr1.push(6);
    console.log(arr1);//1,3,5,2,4,6

arr.unshift(值); 在头部插入

    console.log(arr1); //1,3,5
    arr1.unshift(2);
    arr1.unshift(4);
    arr1.unshift(6);
    console.log(arr1);//6, 4, 2, 1, 3, 5

arr.pop(); 从末尾取出
不仅可以取出数据,还会将取出的数据从数组中删除

    console.log(arr1);//6, 4, 2, 1, 3, 5
    console.log(arr1.pop());
    console.log(arr1.pop());
    console.log(arr1.pop());
    console.log(arr1);//[6, 4, 2]

arr.shift(); 从头部取出
不仅可以取出数据,还会将取出的数据从数组中删除

    console.log(arr1);//6, 4, 2, 1, 3, 5
    console.log(arr1.shift());
    console.log(arr1.shift());
    console.log(arr1.shift());
    console.log(arr1);//[1, 3, 5]

清空数组

arr = []; 推荐
arr.length = 0;
arr.splice(0, arr.length);
参数一:开始位置参数二:删除个数

    var arr = [1,3,5,7];
    console.log(arr);//[1, 3, 5, 7]
    // arr = []; //方法一 推荐
    // arr.length = 0; //方法二
    arr.splice(0, arr.length); //方法三 
    console.log(arr);//[]

删除数组元素的注意点:

数组中的元素被删除之后, 数组的length属性获取的长度会变化
数组中前面的元素被删除之后, 后面元素的索引会发生变化
从后往前删除最好

    var arr = [1, 3, 4, 5, 6];
    // for(var i = 0;i < arr.length;i++){
    //     arr.splice(i, 1);
    // }
    for(var i = arr.length;i >= 0;i--){
        arr.splice(i, 1);
    }
    console.log(arr);

数组拼接

数组1.concat(数组2); 返回拼接好的数组
注意点:数组不支持直接用于+号来拼接,如果使用+号来拼接数组, 会先调用数组的toString方法,然后再将转换后的字符串进行拼接
toString方法会返回保存内容的字符串,valueOf方法会返回数组本身

    var arr1 = [1,3,5];
    var arr2 = [2,4,6];
    // var res = arr1 + arr2;//返回string
    var res = arr1.concat(arr2);
    console.log(res);
    console.log(res.toString());//返回string
    console.log(res.valueOf());//返回自己本身

数组查找

indexOf(需要查找的内容); 返回找到的索引从左至右
不存在,返回-1,只返回找到的第一个

    var arr = [1, 3, 5, 4, 5, 7, 9];
    var res = arr.indexOf(5);
    console.log(res); //2

lastIndexOf(需要查找的内容);返回找到的索引从右至左

    var arr = [1, 3, 5, 4, 5, 7, 9];
    var res = arr.lastIndexOf(5);
    console.log(res);//4

find(回调函数); 有兼容问题, 返回找到的元素
find方法需要传递一个函数,内部会遍历调用者(数组),取出每一个元素传递给调用函数,==只要有一个元素满足函数中的条件就会停止查找==
注意点: 在IE浏览器中会有问题

    var arr = [1, 3, 5, 4, 5, 2, 9];
    var res = arr.find(test);
    function test(ele) {
        return ele >= 4;
    }
    console.log(res); //5

findIndex(回调函数); 有兼容问题, 返回找到的元素的索引

    var arr = [1, 3, 5, 4, 5, 2, 9];
    var res = arr.findIndex(test);
    function test(ele) {
        return ele >= 4;
    }
    console.log(res); //2

filter(回调函数); 没有兼容问题, 返回存放==所有==找到元素的数组

    var arr = [1, 3, 5, 4, 5, 2, 9];
    var res = arr.filter(function(ele) {
        return ele >= 4
    });
    console.log(res);//[5, 4, 5, 9]

数组截取

slice(开始索引, 结束索引); 包头不包尾, 返回截取的数组

    var arr = [1,2,3,4,5,6];
    var arr1 = arr.slice(0, 4);
    console.log(arr1); //[1, 2, 3, 4]

数组转换为字符串

join方法可以用指定的连接符号将数组中所有的元素连接起来, 转换为一个字符串之后返回给我们

    var arr = [1, 3, 5, 7];
    // console.log(arr.toString());//"1,3,5,7"
    console.log(arr.join("-"));//1-3-5-7

every()

测试数组的所有元素是否都通过了指定函数的测试
会遍历数组

    var arr = [2, 3, 5, 4, 5, 7, 9];
    var res = arr.every(function (ele) {
        return ele >= 2;
    });
    console.log(res); //true

some()

测试是否至少有一个元素通过由提供的函数实现的测试。
会遍历数组

    var arr = [2, 3, 5, 4, 5, 7, 9];
    console.log(arr.some(function (ele) {
        return ele >= 8;
    }));//true

数组排序

sort()
会对调用者进行排序,会直接修改调用者
注意点:默认排序顺序是根据字符串Unicode码点

    var arr = [2, 3, 5, 4, 5, 7, 9, 11];
    // console.log(arr.sort());//[11, 2, 3, 4, 5, 5, 7, 9]

1.如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变
如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。

.sort(function (a, b) {
        // 直接return, 用第一个参数减去第二个参数的结果, 就是升序排序
        // 直接return, 用第二个参数减去第一个参数的结果, 就是降序排序
        // return a - b;
        return b - a;
    });

    var arr = [2, 3, 5, 4, 5, 7, 9, 11];
    // console.log(arr.sort(function (a, b) {
    //     return a - b;
    // })); //[2, 3, 4, 5, 5, 7, 9, 11]
    console.log(arr.sort(function (a, b) {
        return b - a;
    })); //[11, 9, 7, 5, 5, 4, 3, 2]

reverse可以对数组进行翻转

    var arr = [1, 2, 3, 4];
    console.log(arr.reverse());//[4, 3, 2, 1]

遍历数组

传统遍历数组

    var arr = [1, 3, 5, 7];
    for(var i = 0;i < arr.length;i++){
        console.log(arr[i]);
    }

==forEach==
依次取出调用者的每一个元素, 每取出一个元素就执行一次回调函数,且将元素传递给回调函数

    var arr = [1, 3, 5, 7];
    arr.forEach(function (ele) {
        console.log(ele);
    })

==map==
注意点:
1. 和filter函数差不多,都用于过滤元素,只有满足添加的元素才会被添加到新的数组中
2. 区别是,filter返回的数组中只有满足添加的元素,map返回的数组中不满足条件的元素会存储一个undefined

    var arr = [1, 3, 5, 7];
    console.log(arr.map(function (ele) {
        if (ele >= 2) {
            return ele
        }
    }));//[undefined, 3, 5, 7]

字符串的常用方法

基本类型

Number 12 3.14
Boolean false true
null
undefined
String "zx" "a"

基本类型的包装类型

通过Number/Boolean/String类型的构造函数创建的对象,就称之为包装类型

    var num = new Number(999);
    var bl = new Boolean(true);
    var str = new String("zx");

常用方法

通过字面量创建的字符串,是一个常量, 是不可以修改的

var str1 = "abc";
var str2 = 'cde';
var str3 = new String("fgh")

由于每次定义字符串都会重新开辟一块存储空间,在企业开发中, 一定要尽量避免频繁的拼接字符串

字符串拼接

    var str1 = "hello";
    var str2 = "world";
    console.log(str1 + str2);//推荐
    console.log(str1.concat(str2));

获取字符串中的字符

    var str = "helloworld";
    console.log(str.charAt(5)); //w
    console.log(str.charCodeAt(5)); //119
    console.log(str[5]);//w 兼容性问题, 支持H5才支持

截取子串

.slice()
从指定索引开始截取到结束索引, 不包括结束的索引

    var str = "www.it666.com";
    console.log(str.slice(1, 6)); //ww.it

.substr()
从指定索引开始截取多少个字符

    var str = "www.it666.com";
    console.log(str.substr(1, 6)); //ww.it6

.substring()
从指定索引开始截取到结束索引, 不包括结束的索引

    var str = "www.it666.com";
    console.log(str.substring(1, 6)); //ww.it

字符串查找

.indexOf()
.lastIndexOf()

    var str = "www.it666.com";
    console.log(str.indexOf("6")); //6
    console.log(str.lastIndexOf("6")); //8

字符串切割

.split()

    var str = "www.it666.com";
    console.log(str.split(".")); //["www", "it666", "com"]

练习

调用方法之前,JS解析器会自动将基本数据类型包装成包装类型

var str = "www.it666.com"; // 基本类型
var _str = new String(str);
_str.split(".");
str.split(".");
_str = null;

字符串是常量不可变

var str1 = "hello";
str[1] = "d";//不可修改

获取http://www.it666.com?name=lnj&age=13;中的参数

    function getEle(url) {
        var idx = url.indexOf("?");
        var str = url.substring(idx + 1, url.length);
        var arr = str.split("&");
        arr.forEach(function (ele) {
            var tempArr = ele.split("=");
            console.log(tempArr);
        });
    }
    getEle("https://www.it666.com?name=zx&age=13;");
    
    //["name", "zx"]
    //["age", "13;"]

JavaScript数组与字符串的常用方法

数组的常用方法

判断一个对象是否是数组

添加元素

清空数组

删除数组元素的注意点:

数组拼接

数组查找

数组截取

数组转换为字符串

every()

some()

数组排序

遍历数组

字符串的常用方法

基本类型

基本类型的包装类型

常用方法

字符串拼接

获取字符串中的字符

截取子串

字符串查找

字符串切割

练习

猜你喜欢

热点阅读