前端字符串和数组的常用方法(基础知识回顾)

回顾一下基础知识。有些方法时间长不用都忘了...

字符串的常用方法

var str = 'abc';
  • charAt 返回指定索引处的字符
console.log(str.charAt(1));
//'b'
  • charCodeAt 返回指定索引处的unicode字符
console.log(str.charCodeAt(1));
//98
  • indexof 判断传入的字符第一次出现在字符串当值出现的位置,如果包含返回它的索引,反之返回-1
console.log(str.indexOf('b'));
//1
  • concat 拼接两个字符串,返回一个新字符串
  var str1='123';
  var str2=str.concat(str1);
   console.log(str2);
   //"123abc"
  • substr(n,m) 从n开始截取m个字符,将截取的字符返回,对原字符串没有任何改变。
console.log(str.substr(1,2));
//'bc'
  • substring(n,m) 从索引n开始,截取到索引m,不包括m.将截取的字符返回,对原字符串没有任何改变.
console.log(str.substring(1,2));
//'b'
  • slice(n,m) 从索引n开始截取到m, 如果只有一个参数截取到字符串末尾,原字符串保持不变。
console.log(str.slice(1,2));
//'b'
console.log(str.slice(1));
//'bc'
  • split 用指定字符分割字符串,返回一个数组,原字符串保持不变
console.log(str.split(''));
//[ 'a', 'b', 'c' ]
  • replace(n,m) 使用m字符替换指定字符n,一般搭配正则使用,改变原字符串
console.log(str.replace(reg,1));
//'1bc'
  • match() 在字符串内检测指定的值,找到一个或多个正则表达式的匹配,把找到的字符串放在一个数组里,返回数组。
console.log(str.match(reg));
//['a']
  • includes('a') 传入指定字符,返回布尔值,匹配到返回true 第二个参数表示开始搜索的位置
console.log(str.includes('a'));
//true
  • startsWith() 传入字符是否存在原字符串的开始位置,匹配到返回true 第二个参数表示开始搜索的位置
console.log(str.startsWith('b'));
//false
console.log(str.startsWith('b',1)); 
//true
  • endsWith() 传入字符是否存在原字符串的末尾位置,匹配到返回true 第二个参数表示开始搜索的位置
console.log(str.endsWith('c'));
//true
console.log(str.endsWith('b',2));
//true
  • repeat() 方法返回一个新字符串,表示将原字符串重复n次。
console.log(str.repeat(2));
//'abcabc'
  • padStart(),padEnd()字符串补全长度的功能, padStart()用于头部补全,padEnd()用于尾部补全。
    第一个参数表示字符串最小长度,第二个参数是用来补全的字符串。
console.log(':12'.padStart(5,'00'));
//'00:12'
console.log(':12'.padEnd(5,'00'));
//':1200'

如果原字符串加上补齐后的字符串长度大于或等于参数设置的最小长度,窃取超出的部分,返回原字符串长度

console.log('1234'.padEnd(5,'00'));
//'12340'

数组的常用方法

var arr =[1,2,3,4];

转化方法

  • toString() toLocaleString()
    将数组转换成字符串,以逗号分隔
console.log(arr.toLocaleString());
console.log(arr.toString());
//'1,2,3,4,2,4,1'
  • join()方法 通过指定分割符分割返回一个字符串
console.log(arr.join('-'));
//'1-2-3-4'
  • pop 删除数组最后一项,返回删除那一项,改变原数组
  • push 向数组末尾添加一项,返回添加那一项,改变原数组
console.log(arr.push(5));
//[ 1, 2, 3, 4, 5 ]
console.log(arr.pop(5));
//[ 1, 2, 3, 4]
  • shift() 删除数组第一项,返回删除这一项,改变原数组
  • unshift() 如果不传参数,返回数组的长度,不改变数组,如果传递参数,向数组第一项添加指定参数,改变数组,返回新数组。
console.log(arr.shift(3))
//[ 2, 3, 4 ]
console.log(arr.unshift(11,22),arr);
//6 [ 11, 22, 1, 2, 3, 4 ]

排序方法

  • reverse() sort() 正序和倒序排列数组,但是会存在问题因为
    如果省略参数,数组项会先根据toString()函数将其值转换成字符串在进行比较,是按UNICODE进行比较的。所以一般情况下,使用下面代码进行比较。
//正序
console.log(arr.sort(function (a,b) {
    return a-b
}),arr);
//[ 1, 2, 3, 34, 100, 415 ]
//倒叙
console.log(arr.sort(function (a,b) {
    return b-a
}),arr);
//[ 415, 100, 34, 3, 2, 1 ]

操作方法

  • concat() 连接两个数组,返回新数组,不变异原数组
  • slice(satrt,end) start必须从指定索引位置开始读取到结尾,如果是负数,从尾部开始位置-1是最后一个,-2为倒数第一个加上倒数第二个,以此类推。并且原数组不变异。
    end 可选,从指定索引位置结束读取。并且不保含指定位置的元素
console.log(arr.slice(2),arr);
//[ 3, 4 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(1,3),arr);
[ 2, 3 ] [ 1, 2, 3, 4 ]
  • splice() 方法用于插入、删除或替换数组的元素 变异原数组
    • 删除 传递两个参数(start,end) 开始元素的索引和结束元素的索引,包含结束位置,返回删除的数组
    console.log(arr.splice(1,2),arr);
    //[ 2, 3 ] [ 1, 4 ]
    
    • 插入 三个参数 第一个参数开始的索引,第二个参数要删除几项,如果为0,就是不删除,添加。第三个参数要添加的元素。返回删除那一项
    console.log(arr.splice(1,0,23),arr);
    //[] [ 1, 23, 2, 3, 4 ]
    console.log(arr.splice(1,2,23),arr);
    // [ 2, 3 ] [ 1, 23, 4 ]
    
    • 替换
    console.log(arr.splice(1,1,22),arr);
    //[ 2 ] [ 1, 23, 3, 4 ]
    

遍历方法

  • every
  • some()
  • fifter()
  • reduce()
  • map()
  • includes()
  • find()
  • 以上方法对原数组都不变异

map 映射(将原有数组映射成新数组)

let arr2 = arr.map(function(item){
     return item *= 3
})
//[3,6,9,10]

filter() 返回为true的这一项,并把它放入新数组中。

 var  arr = [1,2,3,4,5] 
 let newArr = arr.filter(function(item){
    return item<5&&item >2
 })   
 console.log(newArr)   
// 3,4

every() 如果一个条件为false,停止遍历,返回false

some() 如果一个条件为true,停止遍历,返回true

includes 查找数组中有没有某值

let arr3 = [1,2,3,4,55];
console.log(arr3.includes(5));
//false

返回false 说明这个方法无法匹配多位的,我们还有一个方法可以解决这个方法的不足

find() 返回为true的这一项,并把它放入新数组中

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

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 3,992评论 0 6
  • 垂直居中有几种实现方式 父元素上下padding设置成一样大小代码2.绝对定位position: absolute...
    饥人谷_wanpp阅读 602评论 0 47
  • 微信群,你有吧?上来就是,拉我进群,进群,拉我!烦恼吗?无数的微信群拉你进去做客,有股票的、有微商的、有基金的、有...
    乐乐奇遇记阅读 172评论 0 0
  • 今天看到一片文章,文字很美,内容有些悲情,文章中提到过叔本华悲观主义影响到主人公。于是我在想这种悲情是否是种自卑心...
    2608阅读 555评论 0 0