JavaScript数组与字符串方法小小总结

1. 一般的增加,删除,替换

接口名 参数列表 返回值 原数组是否改变 新数组长度 备注
array.push(item) 实参 新数组长度 改变 +1 相当于 array[array.length] = item
delete array[index] 实参 true 改变 不变 删除的索引处使用undefined占位 *
array.pop() 弹出的元素 改变 -1 删除数组最后一个元素
array.unshift(item) 实参 新数组长度 改变 +1 在数组头部添加一项
array.shift() 被删除的元素 改变 -1 删除数组首项

* delete操作后的数组:

var array = [1, 2, 3];
delete array[1]; // 移除 2  原数组:【1,undefined,3】
alert(array); // "1 , , 3"
alert(array.length); // but the length is still 3
array.forEach(alert); // 弹出的仅仅是1和3

2. 用splice()实现增加/插入、删除和替换

  • 插入/增加:splice(index, 0, item...)

    • index 前插入要添加的内容,内容个数、类型。
    • 3+个参数,第二个参数为 0 以达到插入目的。
    • 返回空数组 [ ]
    • 原始数组发生改变,变成插入要添加内容的新数组。
  • 删除:splice(index, deleteCount)

    • index 开始删除 deleteCount 个(包括索引位置的值)。
    • 2 个参数(指定的索引值后面,删除的个数)。
    • 以一个新数组的形式返回被删除的内容。
    • 原始数组发送改变,变成删除内容后的新数组。
  • 替换:splice(index, deleteCount, 'angular', 'h5+c3')

    • index 开始,删除 delectCount 个,并替换为要替换的内容(长度不限)。
    • 3 个参数(要删除的索引位置,删除的个数,在删除的索引位置上添加的内容)。
    • 返回被替换掉的内容,也就是被删除的内容,以一个新数组的形式返回。
    • 原始数组发送改变。

3. 克隆、截取和查找

  • slice(n, m)

    • 从索引 n 开始,查找到索引 m,包前不包后。
    • 两个参数。
    • 返回要查找索引所对应的内容,个数为 m-n
    • 原始数组没有改变。
    • 面试题:请找到数组中[n,m]项,包括nm
    • 考题:array.slice(n-1, m)
    • 克隆功能:array.slice(0)或者array.slice()或者array.concat()或者array.splice(0)或者for循环。
  • concat()

    • 数组拼接/克隆array.concat()
    • 参数不确定,想拼接几个数组,里面参数就写几个数组名,也可以写成数组的形式,在数组后面拼接
      返回拼接的新数组。
    • 原始数组没有发生改变。
    • 不传入参数就是克隆。

4. 数组转字符串

  • 数组转字符串

    • toString()
      • 数组转字符串
      • 不用参数
      • 默认返回用逗号分割的新字符串
      • 原始数组没有改变
    • join(拼接形式)
      • 数组转换字符串
      • 拼接形式可以是任何运算符号
      • 返回用指定的拼接形式分割的新字符串
      • 原始数组没有改变
      • 如果拼接形式为+的类型,需要实现运算,可以用eval(),里面传入array.join("+")返回的字符串就行
    • eval():把字符串作为js代码来执行
  • 数组的翻转和排序

    • 数组翻转array.reverse()

      • 实现数组的翻转
      • 没有参数
      • 返回被翻转的数组
      • 原始数组发生改变
    • 数组排序:array.sort(func)
      里面有一个函数,函数里面有两个参数:

      array.sort(function (a, b) {
        return a - b;
      });
      

5. 数组循环

  • forEach():遍历数组。

    IE里面的Array没有这个方法:Array.prototype.forEach返回的是undefined;使用return退出循环。特点:原始数组不变,没有返回值。
    两个参数
    • callback:回调函数,函数的定义阶段

    • context :改变回调函数里面this的指向(改变this指向的方法有:apply(), call(), bind()),可传可不传,如果不传默认是window

    • callback中有三个参数:item (遍历的数组内容),index(内容对应的数组索引),input(数组本身)

      [].forEach(function(value, index, array) {
        console.log(array[index] == item); // true
      });
      
    • 对比与jQuery中的$.each方法,前面两个参数正好相反,$.map也是如此:

      [].forEach(function(index, value, array) {
      
      });
      
      // 数组求和:
      var sum = 0;
      [1, 2, 3, 4].forEach(function (item, index, array) {
        console.log(array[index] == item); // true
        sum += item;
      });
      alert(sum); // 10
      
      // 说明第二个参数的例子:
      var database = {
        users: ["张含韵", "江一燕", "李小璐"],
        sendEmail: function (user) {
          if (this.isValidUser(user)) {
            console.log("你好," + user);
          } else {
            console.log("抱歉," + user + ",你不是本家人");
          }
        },
        isValidUser: function (user) {
          return /^张/.test(user); //正则方法检测
        }
      };
      
      // 给每个人发邮件
      database.users.forEach( // database.users数组中人遍历
        database.sendEmail, // 发送邮件(函数)
        database // 使用database代替上面的this
      );
      // 结果:
      // 你好,张含韵
      // 抱歉,江一燕,你不是本家人
      // 抱歉,李小璐,你不是本家
      

6. 数组其它重要方法

  • map():遍历数组,映射 [].map()

    • forEach()功能一样,但是有返回值

    • array.map(callback,[thisObject]);

    • callback中的参数与forEach()类似

      [].map(function(value, index, array) {
        // ...
        return; //需要返回值
      });
      
    • 原数组被“映射”成对应新数组,例子:

      var data = [1, 2, 3, 4];
      var arrayOfSquares = data.map(function (item) {
        return item * item;
      });
      alert(arrayOfSquares); // 1, 4, 9, 16
      
    • 在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。

      var users = [{
          name: "张含韵",
          "email": "zhang@email.com"
        },
        {
          name: "江一燕",
          "email": "jiang@email.com"
        },
        {
          name: "李小璐",
          "email": "li@email.com"
        }
      ];
      var emails = users.map(function (user) {
        return user.email;
      });
      console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com
      
  • map()

    map方法用于遍历数组,有返回值,可以对数组的每一项进行操作并生成一个新的数组,有些时候可以代替forforEach循环,简化代码,比如:

    let arr3 = [1, 2, 3, 4, 5];
    let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10
    console.log(newArr3); // [10, 20, 30, 40, 50]
    
  • filter()

    filter方法同样用于遍历数组,顾名思义,就是过滤数组,在每一项元素后面触发一个回调函数,通过判断,保留或移除当前项,最后返回一个新的数组,比如:

    let arr4 = [1, 2, 3, 4, 5];
    let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数
    console.log(newArr4); // [2,4]
    
  • some()

    some方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个满足条件就返回true,否则返回false,类似于 || 比较,比如:

    let arr5 = [{result: true}, {result: false}];
    let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为true
    console.log(newArr5); // true
    
  • every()

    every方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个不满足条件就返回false,否则返回true,类似于 && 比较,比如:

    let arr6 = [{result: true}, {result: false}];
    let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为false
    console.log(newArr6); // false
    

7. 关于字符串常用方法

  • 通过下标找对应的字符

    • charAt():通过下标找对应的字符
    • charCodeAt():通过下标找对应的字符编码
  • 通过字符找下标

    • indexOf():从前往后找,找到就返回,不再继续查找,是兼容的;数组里面的indexOf()方法是不兼容的
    • lastIndexOf():从后面往前面找
  • 字符串截取

    • slice(n,m):从索引n截取到索引m;不包含m;包前不包后;但是slice可以取负值;数组里面也有这个方法;截取这个数组的部分,包前不包后。
    • substr(n,m):从索引n开始,截取m个字符,m变量可以省略,省略就是截取到末尾,nm不写的话,就是截取整个字符串,返回截取的
    • substring(n,m):从索引n截取到索引m;但是不包括m包前不包后,与slice()差不多,但是slice()可以取得负数。
  • 字符串转数组

    • split(切割形式):把字符串按照切割形式切割,返回分割好字符串的数组
  • 字符串转大小写

    • toUpperCase():转大写

    • toLowerCase():转小写

      //需求:把 icessun-----> Icessun
      var str='icessun';
      var str2=str.charAt(0).toUpperCase()+str.substr(1);//从位置1开始截取后面的全部全部
      var res=str.replace("i","I");
      
  • 字符串的面试题

    把一个字符串变成一个对象输出,方便我们操作里面的数据

    var str = "name=bob&age=10&sex=boy";
    
    function str2obj(str) {
      var ary = str.split('&'); //返回的是拆分后形成的数组
      var obj = {};
      for (var i = 0; i < ary.length; i++) {
        var ary2 = ary[i].split('=');
        obj[ary2[0]] = ary2[1]; //对象的属性(ary2[0])设置为属性值(ary2[1])
      }
      return obj;
    }
    var res = str2obj(str);
    
  • 跟正则匹配的方法

    • split():切割字符串方法
    • match():找到的情况下,把你要找的内容提出来,找不到返回 null
    • replace('',''):后面替换前面,返回替换的数组
    • search():找到的情况下,返回对应内容的索引,找不到就返回-1

参考资料:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351