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;"]
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342