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

数组的常用方法

  • JS中数组是一个引用类型,也就是一个对象
    var arr1 = [1, 3, 5];
    var arr2 = new Array(2, 4, 6);
  1. length属性, 可以获取长度
    console.log(arr1.length);

判断一个对象是否是数组

1. 利用instanceof判断某个对象时候是某个构造函数创建出来的
2. 利用Array提供的内置方法isArray来判断某个对象时候是Array构造函数创建出来的
  1. 注意点: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);//[]

删除数组元素的注意点:

  1. 数组中的元素被删除之后, 数组的length属性获取的长度会变化
  2. 数组中前面的元素被删除之后, 后面元素的索引会发生变化
  3. 从后往前删除最好
    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. 1.如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
  2. 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变
  3. 如果 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";//不可修改

    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;"]
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。