字符串&数组方法

介绍一些项目常用到的数组和字符串方法,这些方法方便我们灵活运用请求的数据中的数组或者字符串。

数组方法

  1. 字符串转换为数组
  • split():
    作为字符串方法,我们提供一个参数,作为字符串分割的字符,并返回分隔符之间的字串,作为数组中的项。

    (1)创建字符串

     let myData = 'Manchester,London,liverpool,leeds'
    

    (2)用逗号分隔:

    let myArray = myData.split(',');
    console.log(myArray)
    

    (3)可以使用join() 方法进行相反的操作

    let myNewString = myArray.join(',');
    
  • toString():
    将数组转换为字符串的另一种方法,可以比join()更简单,因为它不需要一个参数,但更有限制,使用join()可以指定不同的分隔符

    let dogNames = ["Rocket","Flash","Bella","Slugger"];
    dogNames.toString(); //Rocket,Flash,Bella,Slugger
    
  1. 添加和删除数组项
  • push()
    需要添加一个或多个到数组末尾的元素时使用

    myArray.push('Cardiff');
    
  • pop()
    从数组中删除最后一个元素,直接使用

    myArray.pop();
    
  • unshift()、 shift()
    从功能上与 push() 和 pop() 完全相同,只是它们分别作用于数组的开始,而不是结尾。

  1. 其他
  • map():
    创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不修改调用它的原数组本身。
    map为同步函数,遍历数组中每一项请求数据时,要注意使用

    var new_array = arr.map(function callback(currentValue[ index[, array]]) { 
      }[, thisArg])
    
     //举个例子: 拿到请求数据data之后,给content数组中的每一项添加key;
     const list = data.content.map(item =>({...item, key: uuidv1()}))
    

    callback:生成新数组元素的函数,使用三个参数:
    currentValue:callback 数组中正在处理的当前元素。
    index可选:callback 数组中正在处理的当前元素的索引。
    array可选:callback map 方法被调用的数组。
    thisArg可选:执行 callback 函数时使用的this 值。

  • every():
    测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

    arr.every(callback[, thisArg])  
    

    例子:

      function isBigEnough(element, index, array) {
      return element >= 10;
      }
      [12, 5, 8, 130, 44].every(isBigEnough);   // false
      [12, 5, 8, 130, 44].every(x => x >= 10); //箭头函数 false
    
  • some()
    测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型。
    依次执行数组的每个元素,如果有一个元素满足条件,则返回true,剩余的元素不再会执行检测。
    不会对空数组进行检测,不会改变原始数组。

    var ages = [3, 10, 18, 20]
    ages.some(item => item>18)   //true 
    
  • find()
    返回数组中满足提供的测试函数的第一个元素的,之后的值不再进行检测。没有找到时返回 undefined

    var ages = [3, 10, 18, 20]
    ages.find(item => item>18)   //20
    
  • findIndex()
    返回数组中满足提供的测试函数的第一个元素的值的下标,之后的值不再进行检测。没有找到时返回 -1

    var ages = [3, 10, 18, 20]
    ages.findIndex(item => item>30)   //-1
    
  • filter()
    创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])  
    const result = words.filter(word => word.length > 6);
    
  • sort()
    数组自带的排序方法,默认情况下会将元素按照字符串进行比较。
    (1)当元素为字符串时:
    将元素从字符串的第一位开始比较,第一位相同时比较后

    var arr = ["cb","a","g","cy"];
    arr.sort();
    console.log(arr); //["a","cb","cy","g"]
    

    (2)当元素为数字时:
    默认将数字元素当做字符串比较,从第一位开始比较,第一位相同时比较后

    var arr2 = [20,13,11,8,0,11];
    arr2.sort();
    console.log(arr2); //[0,11,11,13,20,8]
    

    (3)控制sort()方法的排序方式:

     var arr2 = [20,13,11,8,0,11];
     //按升序排列
     arr2.sort(function(a,b){
      //a,b表示相邻的两个元素
      //若返回值>0,数组元素将按升序排列
      //若返回值<0,数组元素将按降序排列
      return a-b; 
     });
     console.log(arr2); //[0,8,11,11,13,20]; 新数组按升序排 
     列
    //按降序排列
     arr2.sort(function(a,b){
      return b-a; 
     });
     console.log(arr2); //[20,13,11,11,8,0]; 
    
  • splice()
    通过删除替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

    // 示例场景是:
    // 数据按页获取 
    // 在列表页对某个item进行操作修改了该item数据
    // 为达到重新更新单个item数据 ,页面所处页数不变de效果
    // 在commit之前先删掉那一页的数据,在相同的位置插入获取到的
      
        let currentList = [...state.pubAllOrder];
        if (isReload) {    //利用isReload判断是要覆盖数组 还是 初次加载该页数据
           const {page, size} = pubOrders;
           currentList.splice((page)*size, size, ...list)
         } else {
           currentList = [...currentList, ...list]
        }
    

    语法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
    start: 指定修改的开始位置(从0计数).如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位
    deleteCount(可选):整数,表示要移除的数组元素的个数。
    如果 deleteCount 被省略了,或者如果它大于或者等于start之后的所有元素的数量,那么start之后数组的所有元素都会被删除。
    如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
    item1,item2...(可选):要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

字符串方法

首先定义一个字符串:

let browserType = 'mozilla';
  • indexOf()
    找出一个较小的字符串是否存在于一个较大的字符串中

    browserType.indexOf('zilla');//output:2
    browserType.indexOf('vanilla');//output:-1
    
  • slice()
    提取字符串中的子字符串,知道开始的位置,以及结束的字符。

    browserType.slice(0,3); //output:moz  
    

    如果想知道在某个字符之后提取字符串中的所有剩余字符,则不必包含第二个参数,而只需要包含要从中提取的字符位置 字符串中的其余字符。

    browserType.slice(2);//output:'zilla'
    
  • toLowerCase()、toUpperCase()
    将所有字符分别转换为小写或大写

  • replace()
    将字符串中的一个子字符串替换为另一个子字符串,它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。

    browserType = browserType.replace('moz','van');。
    
  • match()
    在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
    返回值:存放匹配结果的数组。

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

推荐阅读更多精彩内容

  • 数组的方法 1.push(); 方法:在数组的最后面添加内容,返回值是添加后数组的长度 2.pop() 方法:把数...
    code武阅读 737评论 0 0
  • 其实这个东西吧,可以用来做一定的兼容处理,但更多是为了加深对语言本身的理解,毕竟原生方法更高效,锻炼一下你灵活运用...
    西兰花伟大炮阅读 521评论 0 0
  • 第五章******************************************************...
    fastwe阅读 679评论 0 0
  • 尊敬的黄校长,亲爱的老师们,今天是我日精进第58天,分享如下: 比学习:今天学习《自律力》,不知道想要什么,就永远...
    冰雨天涯阅读 97评论 0 0
  • 大爱的老师,智慧美丽的班主任,亲爱的众学兄们:大家好!我是来自山东桓台姜博士眼镜的李艳,今天是2019.7.4我的...
    姜博士明润视光李艳阅读 191评论 0 0