10-第十章 字符串方法和数组

String即文本(字符串),字符串方法都不改原字符串;

创建 字符串 的三种办法: new String(), String(), 直接量,三种方式创建出来可以创建

去掉字符串的前后空格

trim()方法会删除一个字符串两端的空白字符。
不兼容IE8及其以下

          str.trim();

直接写值的 字面量形式定义的字面量

var str = new String('hello');
var str = String('hello');
var str = 'hello'; 直接量

  • 数字没有length

1、string.length 属性可以返回字符串长度

2、string[index] 通过下标获取字符串,不兼容IE 7 及其以下

        let a = "sadasdasd4564465as";
        console.log(a[5]);

3、str.charAt(index ) 返回指定索引的字符串 只能读取值 不能修改值 兼容IE

        let a = "sadasdasd4564465as";
        console.log(a.charAt(5));

一、String方法

var  str = 'hello';
str.length 

字符串中字符长度(个数)汉字也占一个字符

1、字符串拼接

1、用于把一个或多个字符串连接 到一块,返回拼接好的字符串
        str.concat( str,str...) 
        let a = "123";
        let b = "456";
        console.log(a.concat(b));
2、从左往右查找字符串,返回查找字符串首次出现的位置 ,第二个参数是开始查找的位置,方法对大小写敏感!

value 匹配字符
index 开始检索的位置, 合法值是 0 到 string.length - 1, 默认 0
匹配失败返回 -1

        str.indexOf(value,index )
        let a = "sadasdas";
        console.log(a.indexOf("a",5));
3、从后向前搜索,合法值是 0 到 string.length - 1,默认 string.length - 1 ,匹配失败返回 -1
        str.lastIndexOf(value,index) 
        let a = "bacdaefag";
        console.log(a.lastIndexOf("a",3));
        //  输出
4、返回指定索引的ASCII编码

str.charCodeAt(index)String.fromCharCode(unic)是相反的

str.charCodeAt(index)

        let str = "casdasdsad";
        console.log(str.charCodeAt(5));    

返回指定ASCII编码的字符串,从字符编码创建一个字符串。一个或多个 ASCII编码的 值

String.fromCharCode(unic,unic,unic )

        let str = "casdasdsad";
        console.log(String.fromCharCode(105));  
5、截取字符串,从start 开始,截止到end前,不包含end

如果没有end则从num开始整个查找;
如果 startstop 大,那么该方法在提取子串之前会先交换这两个
[) 倒过来切会自动把传进来的序号从小到大排序,而slice不行

        `str.substring(start,end ) `
        `str.slice(start, end)`

包头不包尾 可以理解为离开的是一个区间
截取字符串,从start开始,截止到end前,不包含end
substring用法一样,从左往右截取
start / end可以为负值,负值时,倒着从最后数
startend任何时候都不会交换位置,能截取才有值,截取不到则无值

        `str.substr(strat, lendth);` 

从哪一位开始截取 只有一个参数时,从这个位置开始,以后的数据都截取下来

slice, substring, substr 这三个方法只有一个参数的时候都是从这个位置开始,截取到结束

        str.toLocaleUpperCase()  
        str.toLocaleLowerCase()

str.toUpperCase() 把字符串转换为大写。 Upper /'ʌpə/ 大写
str.toLowerCase() 把字符串转换为小写。 lower /'ləʊə/ 小写

方法二 可用于字符串亦可以用正则(RegEXP)

以下方法 可以用正则(RegExp)代替字符串进行匹配,

1、str.match( )

str.match( value/RegExp )
查找指定的值,返回匹配的值。未找到返回 null .正则可以找一个或多个表达式

      var  str = 'hello world';
      str.match('o') // 字符串 
      var  str = 'hello world';
      str.match(/o/i) // 正则 
2、str.search( )

str.search( value/RegExp )
返回 检索字符串首次出现的位置;未找到返回 -1

      var  str = 'hello world';
      str.search('o') // 字符串中字符长度(个数)   
3、str.replace( )

str.replace( value/RegExp,new )
用一些字符替换另一些字符, new 可以是字符串,也可以是函数

        var str = 'hello world';
        str.replace('o', '千寻') // 字符串中字符长度(个数)   
        var str = 'hello world';
        //字符串中字符长度(个数) 
        function fn() {
            return '帅气';

        }
        var call = str.replace(/o/g, fn) // 字符串中字符长度(个数)       
        alert(call);
4、 字符串转数组

str.split( ) 不会改变原字符串 /splɪt/ 分开,分割
str.split(value/RegExp,length-1)
方法用于把一个字符串分割成字符串数组, 返回分割后的数组

1.第二个参数是可选参数,是指定返回数组的长度,最大为 str.length - 1,不写默认 str.length - 1

        var  str = 'hello world';
        str.split('o',str.length) // 字符串中字符长度(个数)   

二、Array() 数组

创建 数组 的三种办法: new Array(), Array(), []三种方式创建出来都是一样的

数组里面可以是任何数据,都是通过下标去取值,里面里面还是一个数组,那么再通过下标去取值

var arr = new Array();
var arr = Array();
var arr = []; 直接量

1、arr.length 可以访问数组的长度

创建即指定数组长度 Array( length )及 new Array( length ),length 是 数字的时候,创建的并不是数组的项,而是数组的长度,项的内容为 undefined

            let arr = Array(2);
            console.log(arr[0]);    //  undefined
            let arr = Array(2);
            console.log(arr.length);    //  2
2、拼接数组只能用concat,+ 号无法使用
            /arr.concat( [arr1, arr2], [arr1, arr2] );   
3、通过数组索引,访问值
            var arr = [1,2,3,4,5]
            arr[0];  //1
4、修改数组指定索引下的值
            var arr = [1,2,3,4,5]
            arr[2] = 8888;  //  此时数组的值为 [1, 2, 8888, 4, 5]
5、在数组后面添加项
            var arr = [1,2,3,4,5]
            arr[arr.length] = 8888;
            console.log(arr);  //  arr = [1, 2, 3, 4, 5, 8888];
6、查找项 检索某一个值的存在
            arr.indexOf(value,index);   
7、返回的是一个全新的数组,不会去影响原来的数组 (切割) 跟字符串的方法一样
            arr.slice() 
8、数组去重
            var arr = [1,2,3,4,5,6,5,4,3,2,1];
            var arr2 = [];
            //  i = 12
            for(var i = 0; i < arr.length; i++){
                if( arr2.indexOf( arr[i] ) == -1 ){
                    console.log(arr[i])
                    arr2.push(arr[i]);
                }
            }
            alert(arr2);

三、Array() 数组方法

1、在数组的第一位添加,不会覆盖之前的第一位

arr.unshift( item1,item1,…. )
向数组的头部添加一个或更多元素,并返回(新的长度)。

2、删除在数组的第一位,不会覆盖之前的第一位,会改变原数组

arr.shift()
删除数组的第一个元素(返回删除对象);

3、往一个数组最后面去增加数据,可以一次添加多个值 push /pʊʃ/ 增加

arr.push(value,value...)
向数组的尾部添加一个或更多元素,并返回(新的长度)。

4、不用传任何参数进去,删除的是数组的最后一个数据,输出的是被删除掉的值 pop /pɒp/ 突然,取出

arr.pop( )
删除数组的最后一个元素(返回删除对象)。

splice /splaɪs/ 拼接;接合

5、arr.splice(index,howmany,item1,…..,itemX) (删除/添加) 元素,然后(只返回删除对象)。

index 必需。整数,规定添加/删除项目的索引,可以使用负数,如果是添加,原有元素会往高位移动。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。

6、首位添加 / 删除

(1) 删除数组的第一位 arr.splice(start, 删除个数);
(2) 在数组的第一位之前添加 arr.splice(start, 删除个数,添加的内容);

7、末位添加 / 删除

(3) 在数组的最后添加 arr.splice(arr.length,删除个数,添加的内容);
(4) 删除数组的最后一位 arr.splice(arr.length -1, 删除个数)

8、 arr.sort()排序 会修改原数组

sort 接受一个回调函数,回调函数有两个形参,
return第一个形参 - 第二个形参 是升序。反之是 降序
sort 排字符串不需要传参数,是按 unicode 编码排序的

sort 方法本质上相减的是数字,当数组里面的子数据是一个数组的时候,会先把数组转化为字符串,再把字符串转化为数字。

1、当子数据结构为数组时,且数组里面有多项数据时,再转化数字时就会失败。

        let arr = [[1, 2], 2, [3, 2]];
        arr.sort((a, b) => a - b);  //  转化数字失败, '1,2' 转化数字失败
        console.log(arr);

2、当子数据结构为对象时,且对象里面有多项数据时,我们可以用对象下面的属性互减,本质上还是使用数字相减。

        let arr = [
            {
                "abc": 3 
            },
            {
                "abc": 1 
            },
            {
                "abc": 2 
            }
        ];
        arr.sort((a, b) => a.abc - b.abc);

当一个函数被当做参数传到另外一个函数里面去的时候,被传进去的函数称为回调函数

            let arr = [11, 22, 33, 44, 55, 2, 10, 78911];
            arr.sort( (a, b) = > a - b)
            a - b 会 从小到大排序
            b - a 会 从大到小排序
            console.log(arr);

如果return的值是一个 小于 0 ,那么 a 会被排列到 b 之前;
如果return的值是一个 等于 0 , a 和 b 的相对位置不变
如果return的值是一个 大于 0 , b 会被排列到 a 之前。

默认arr.sort() 以首字符编码大小排序
数组length小于10以冒泡排序
冒泡排序下依次比较,
return >0 调换位置,=0不调换位置,<0 不调换位置
数组length大于10以二分排序

arr.reverse()反转数组

reverse()
颠倒 数组中元素的顺序
修改原数组

三、Array() 数组方法

!!!!以上方法不创建新的创建,而是--------------------------直接修改原有的数组,同时索引会变化

1、arr.concat() 数组拼接

arr.concat(arr1,arr2,…,arrN) : 数组拼接 连接两个或更多的数组,(并返回拼接成的新数组)
该数组是通过把所有 arrX 参数添加到 arr 中生成的。
如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组 ——不修改原数组

  1. // 情况一,
  2.    var a = [1,2,3];
    
  3.    alert(a.concat(4,5));
    
  4. // 情况二,不会改变a1,而是生成一个新的数组!!!
  5.        var a1 = [1,2,3];
    
  6.        var a2 = [4,5,6];
    
  7.        alert(a1.concat(a2));
    
2、arr.slice()截取

arr.slice(start,end)方法从已有的数组中返回选定的元素。————————不修改原数组

3、数组转字符串

arr.join()拼接成字符串 /dʒɒɪn/ 连接,结合
不修改原数组,不传参数默认切整个字符串

4、Array.isArray( ) 判断是不是数组

Array.isArray( object ) 返回一个布尔值
不兼容IE8 及其以下

四、ECMAscript5 的遍历数组方法

以下下方法都能实现遍历,语法也都一样,只是返回值不一样
不修改原数组
array.xxxx( function(currentValue,index,arr ), thisValue )

参数 描述
currentValue——必须。当前元素的值
index ——–可选。当期元素的索引值
arr————可选。当期元素属于的数组对象
thisValue ——可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue”this” 的值为 “undefined”

function(currentValue, index,arr)必须。函数,数组中的每个元素都会执行这个函数

1、forEach()

/iːtʃ/ 每个

就是一个 for 循环,什么值都不返回,就是单纯的迭代
arr.forEach()从头至尾遍历数组 无返回值

        let arr = [1,2,3,4];
        let news = arr.forEach( (items,index,arr) => console.log(items,index,arr) );

image.png
2、map() 返回值数组

arr.map() 返回一个数组,包含函数所有返回值 返回数组
map 对数组的每一项都调用一次回调函数, 返回一个全新的数组, 全新的每一项数据是回调的返回值。

3、filter() true数组

arr.filter() 返回值是一个return值为true或能转化为true的值
返回数组
every() ,some() 是数组逻辑判定:返回 truefalse

会一层一层的过滤,如果 return true 就证明每个数都存在,返回新数组
不会对空数组进行检测
filter() 不会改变原始数组

      var  arr = [1,2,3,4];
      var _new = arr.filter( function(x) {
            return x > 3 ;
      })
4、every() 返回值

arr.every()针对所有元素,即都为 true 则返回 true
some相对。some只要有一个通过就返回true,而every必须所有项目通过才会返回true
只要有一个没通过就是false

var  arr = [1,2,3,4];
var _new = arr.every(function(x){ return x < 10;})   // true  都小于10
var _new = arr.every(function(x){ return x%2 == 0;}) //false 是不是都是偶数
5、some() 返回值

对数组的每一项调用一次回调,如果返回true 。some停止并返回true

var  arr = [1,2,3,4];
var _new = arr.some(function(x){ return x%2 === 0;})   // true  有偶数

五、数组方法

1、把一个 类数组 转化为 数组

Array.from(obj);

2、查找匹配成功的第一个(不是数组) 返回值

find ()

3、跟 find 类型 ,不过不返回数据而是返回数据的序号

findIndex ()

4、该 includes()方法确定数组是否在其条目中包括特定值,返回truefalse

/ɪnk'luːdz/ 包含
arr.includes

5、fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

let arr = [];
Array(100).fill(9) Array(数组长度).fill(添加的值)
如果 start 是个负数, 则开始索引会被自动计算成为 length+start,
[1, 2, 3].fill(value, start, end); 包头不包尾巴 左闭右开区间

6、判断一个对象是不是数组

Array.isArray()
obj instanceof Array

7、数组的 reduce 用于累加,不会修改原数组

arr.reduce((a, b) => a + b, 0);
a 为上一次加的结果
b 为每一项数据
0 为初始值 a 的 初始值
reduce /rɪ'djuːs/ 减少

        let arr = [1, 2, 3, 4, 5];
        let a = arr.reduce((a, b) => a + b, 0);
        console.log(a); // 15
8、ES6 数组去重方法

new Set(target) 括号里面为判断目标值, 不允许出现重复,
不修改原数组

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

推荐阅读更多精彩内容