字符串与数组

大家好，我是讯享网，很高兴认识大家。

1. 字符串

1.1 包装对象

点语法只有引用数据可以使用。基本数据调用点语法时，有一个隐式操作，将基本数据转化成对象。字符串的所有方法，都保存在String.prototype中，所以可以用点语法。

例：var re=str.toUpperCase隐式操作是new String(str).toUpperCase，也就是把string包装成一个对象。

案例：

 var str="hello"; str.x=100; //系统自动隐式转换，创建对象 console.log(str.x);//打印undefined var str2=new String();//手动创建对象 str2.x=90; console.log(str2.x); //打印90 function Person(){ }; var p1=new Person(); var p2=new Person(); console.log(p1==p2);//false //p1和p2是两个不同的对象，只是它们的原型对象一样

讯享网

1.2 常用方法：参考W3C

1. 转大写：str.toUpperCase()

2. 转小写：str.toLowerCase()

3. 取单个字符：str[0];当数组来取，通过下标来取

str.charAt(0)

4. str.trim()：去掉前导空格和后导空格

5. 取编码：str.charCodeAt(下标) a:97 A:65

案例：

讯享网 var str="afdQHbdAx"; function fn(str){ var str2=""; for(var i=0;i<str.length;i++){ if(str[i].charCodeAt(0)>=97){ str2+=str[i].toUpperCase() } else{ str2+=str[i].toLowerCase() } } return str2; } var a = fn(str); console.log(a); //AFDqhBDaX

字符串的截取
1. str.substring(start:number , end?:number) ?可选，可写可不写
  end默认为到最后一个字符
  
  包含start，不包含end；取非负数；取负数仍然是从第一个开始截取

两个参数可交换位置；

2. str.substr(from:number , length?:number)

length：默认为到最后一个字符

from：为正，包含；为负，从后往前数第几个开始截取

包含length；取非负数；

两个参数不能交换位置

3. str.slice(start?:number , end?:number)

包含start，不包含end，均可正可负

两个参数不能交换位置，字符串只能从左往右截取

4. str.split("-")。以-为分界线来剪切。str.split(" ")，将字符串转换成数组

案例：

 var str="dgs-dv-wfs-cxzzdf-w"; var arr=str.split("-"); console.log(arr) //['dgs', 'dv', 'wfs', 'cxzzdf', 'w']

经典笔试题：把当前页面地址中的url的参数转化为obj对象

讯享网var str ="http://www.hqyj.com/index.html?uid=123&page=12&dt=04071826&name=jcm";
function fn(str) {
    var arr1 = str.split("?");
    var arr2 = arr1[1].split("&"); //["uid=123","page=12","dt=04071826","name=jcm"]
    var obj = {};
    for (var i = 0; i < arr2.length; i++) {
       var arr3 = arr2[i].split("="); //第一次分割成["uid","123"]  第二次分割成["page","12"]
       obj[arr3[0]] = arr3[1];
       }
       return obj;
     }
var urlobj = fn(str); 
console.log(urlobj); //{uid: '123', page: '12', dt: '04071826', name: 'jcm'}

2. 子串的查找

1. str.includes("子串",从哪个字符开始查)：返回布尔值 es6

2. str.indexof("子串",从哪个字符开始查)：查找到，返回子串的下标；没查到就返回-1

案例：

 var str = `中新网5月5日电 据秘鲁《公言报》报道,秘鲁总理托雷斯表示,他将于当地时间5月12日出席国会接受质询,对此,他已经做好了一切准备。据报道,托雷斯说：“国会最终可能会对我发起谴责,我现在还不知道,但我将出席国会为所发生的一切作证。”托雷斯将出席国会回答7个问题,要关于政府处理公民**的措施,以及4月5日在利马和Callao进行宵禁的最高法令。托雷斯还表示,他与总统府前秘书长布鲁诺·帕切科举行的会面是在总统卡斯蒂略不知情的情况下进行的,而且没有任何证人,会见的目的是为了查明在帕切科办公室卫生间发现的2万美元的来源。托雷斯说:“他告诉我,那2万美元是他从银行取的,他有银行收据。”`; var FirstStartPosition = str.indexOf("托雷斯"); var SecondStartPosition = str.indexOf("托雷斯", FirstStartPosition + 2); var tls1 = str.substring(FirstStartPosition + 3, SecondStartPosition); console.log(FirstStartPosition, SecondStartPosition); //24 69 var firstWord = str.indexOf("“"); var secondWord = str.indexOf("”"); var tls2 = str.substring(firstWord + 1, secondWord); //document.write(tls2); 在网页上显示 console.log(tls2); //国会最终可能会对我发起谴责,我现在还不知道,但我将出席国会为所发生的一切作证。

3.字符串的填充 es6

str.padStart(number,"")：如果字符串位数不够number，则在开头填充内容，直到满足位数。

str.padEnd()：在后面填充

案例：

讯享网 var str="afdQHbdAx"; var str1=str.padStart(15); // 没有第二个参数，默认在字符串前面用空格填充够15位 console.log(str1); // afdQHbdAx var str2=str.padStart(15,"jcm"); console.log(str2); //jcmjcmafdQHbdAx var str3=str.padEnd(15,"jcm"); //在后面填充 console.log(str3); //afdQHbdAxjcmjcm

4. 重复字符串 es6

str.repeat(n) //将str字符串重复n次，不改变原来的字符串

5. str.startsWith("子串"); //目标字符串是不是以子串开头返回值为布尔值

str.endWith("子串"); //目标字符串是不是以子串结尾

es6

4和5的案例：

 var str = "hello"; console.log(str.repeat(2)); //hellohello console.log(str); //hello console.log(str.startsWith("h")); //true console.log(str.endsWith("h")); //false console.log(str.endsWith("o")); //true

2. 数组

2.1 基础用法

1. 添加元素

arr.push(57)，原数组后面添加元素，会改变原数组，返回值为数组元素个数

arr.unshift(57)，原数组前面添加元素，会改变原数组

2. 删除元素

arr.pop()，删除数组最后一个元素，返回值为删除的元素

讯享网

arr.shift()，删除数组第一个元素，返回值为删除的元素

arr.splice(从下标几开始删除，删除几个元素，在该位置插入的元素)，可以表示前面四个功能，返回值为删除的元素，但不常用。

arr.slice(开始截取的下标，结束截取的下标），返回值为截取的元素。

案例：

讯享网 var arr = [3,12,1,54,2,13,66]; arr.push(10086); //在数组末尾添加10086 console.log(arr); //[3, 12, 1, 54, 2, 13, 66, 10086] arr.unshift(10087); //在数组开头添加10087 console.log(arr); //[10087, 3, 12, 1, 54, 2, 13, 66, 10086] var re1 = arr.pop(); //删除数组最后一个元素，返回值为删除的元素 console.log(arr); //[10087, 3, 12, 1, 54, 2, 13, 66] console.log(re1); //10086 var re2 = arr.shift(); // 删除数组第一个元素，返回值为删除的元素 console.log(arr); //[3, 12, 1, 54, 2, 13, 66] console.log(re2); //10087 var re3 = arr.splice(2,2,"hi"); //从下标2开始删除，删除两个元素，并在结束位置增加“hi”,返回值是删除的元素 console.log(arr); //[3, 12, 'hi', 2, 13, 66] console.log(re3); //[1,54] var re4 = arr.slice(1,3); //从下标1开始截取，截取到下标3之前，不包括下标3的元素 console.log(arr); //[3, 12, 2, 13, 66] console.log(re4); //[12, 2]

3. 数组转为字符串 arr.join()

返回值为字符串（将数组的元素用逗号连接，成为一个字符串）

4.反转数组元素 arr.reverse()

返回值为数组，改变原数组

案例：

//数组转为字符串 var arr = [3,12,2,13,66]; var re1 = arr.join(); console.log(re1); //3,12,2,13,66 console.log(typeof(re1)); // string //反转数组 var re2 = arr.reverse(); console.log(arr); //[66, 13, 2, 12, 3] console.log(re2); //[66, 13, 2, 12, 3]

笔试题：判断某个字符串是不是回文

讯享网 var str="雾锁山头山锁雾"; var arr=str.split(""); console.log(arr); var arr1 = arr.reverse(); if(arr1 == arr){ console.log(true); } //true

5. 查找子元素

arr.indexOf("要查找的元素",从下标几开始查)，在数组中查找元素，如果找到，返回该元素的下标；没有，返回-1。

arr.includes("要查找的元素",从下标几开始查)，在数组中查找元素，如果找到，返回true；没有，返回false。

6. 拼接数组 arr.concat(数组名)，将数组拼接到arr数组上

案例：

var arr = [4, 534, 32, 36, 72, 6, { age: 66 }]; //语法糖，生成一个数组 var arr2 = [1, 32, 5, 65]; var arr3 = [1, 3, 5, 6]; //查找子元素，找到返回子元素的下标，找不到返回-1 var re1 = arr.indexOf({ age: 66 }); //indexOf()隐式操作,生成了一个新的对象，和arr的原型对象一样，但不是同一个对象 var re2 = arr.indexOf(32); console.log(re1, re2); //-1 2 //查找子元素，找到返回true,找不到返回false var re3 = arr.includes(36); console.log(re3); //true var re4 = arr.includes(50); console.log(re4); //false //拼接数组 var re3 = arr2.concat(arr3, 1, 51); console.log(re3); // [1,32,5,65,1,3,5,6,1,51]

7. 按顺序排列元素

数组按升序排列：arr.sort(function(n1,n2){ return n2-n1 }

数组按降序排列：arr.sort(function(n1,n2){ return n1-n2 }

案例：

讯享网var arr = [51,43,78,1,435,4,76,9]; var re = arr.sort(); console.log(re); // [1, 4, 43, 435, 51, 76, 78, 9] //升序 var re1 = arr.sort(function (n1, n2) { return n1 - n2; }); console.log(re1); //[1, 4, 9, 43, 51, 76, 78, 435] //降序 var re2 = arr.sort(function (n1, n2) { return n2 - n1; }); console.log(re2); //[435, 78, 76, 51, 43, 9, 4, 1]

2.2 遍历数组

将数组的每个元素取出来，一遍后面使用

2.2.1 for语句

1. for循环兼容性最好

2. for-in 兼容性不好，旧浏览器可以。可以遍历对象，但会遍历出原型

for(el in arr){ console.log(el) } //遍历数组的下标

for(el in arr){ console.log(arr[el]) } //遍历数组每一个元素

for(el in obj){ console.log(el) } //遍历对象的成员名

var arr=[1,34,6,3,457,0] var obj={age:123,name:"karen"} for(el in arr){ console.log(el,arr[el]) //遍历数组下标和元素，打印数组下标及元素 } for(el in obj){ console.log(el) //遍历对象的属性名，打印age name }

2.2.2 arr数组的API（官方提供）

1. arr.map(function(){ } ) ，map会回调函数。调用一次函数，就传一个元素进来，数组有几个元素，就调用几次函数。函数形参可以是多个，返回值为一个新数组。

2. arr.forEach( function(el,index?,arr?){ } ) 没有返回值

3.arr. find( function(el,index?,arr?){ if(){ } } ) 搭配if语句，查找满足条件的元素

4. arr.some( function(){ } )只要有元素通过就返回true

5. arr.every( function(){ } )每一个元素都通过就返回true，有不符合的就返回false

6. arr.filter( function(){ } ) 返回筛选通过的元素

案例：

讯享网 var arr=[1, 34, 6, 13, 0]; arr.map(function(el){ console.log(el) }); arr.forEach(function(el) { console.log(el) }); var a=arr.find(function (el){ if(el>13) { return true } }) console.log(a); //34 满足条件的第一个元素 var b=arr.some(function (el){ if(el>13) { return true } }) console.log(b); //true 布尔值 var c=arr.every(function (el){ if(el>13) { return "hi" } }) console.log(c); //false 布尔值 var d=arr.filter(function (el){ if(el>13) { return "hi" } }) console.log(d); // 34

7. reduce 从前往后遍历

array.reduce(callback[,initialValue])

1. 传了initialValue，那preReturnVal第一次就等于初始值，后续就是上一次的return值（上一次的调用结果）

2. 没传initialValue，name默认把数组的第一项作为初始值，然后从数组第二项开始循环

reduce的调用结果：把循环到数组最后一项的调用结果作为reduce的调用结果

应用：数组求和

var arr = [1, 34, 6, 13, 0]; var re = arr.reduce(function (n1, n2) { return n1 + n2; }, 0); console.log(re); //1+34+6+13+0=54 var re2 = arr.reduceRight(function(n1,n2){ console.log(n1,n2); //0 13 13 6 6 34 92 34 1 });

实例：购物车算总价

讯享网 var arr = [{price:1}, {price:34},{price: 6},{price: 13}, {price:0}]; var sum = arr.reduce(function (n1, n2) { return n1 + n2.price; //去对象的price属性值 }, 0); console.log(sum); //1+34+6+13+0=54

8. reduceRight 从后往前遍历。案例看“应用：数组求和”

2.3 es6新提供的功能

Array.of() 将参数中所有值作为元素形成数组

arr.fill( "填充内容" ,从哪里开始填?,从哪里结束填?)，修改了原数组 ?表示可写可不写

arr.entries() 遍历键值对，调用结果为一个迭代器对象，可以通过.next()获取到键值对。迭代器对象可以通过for..of来循环取值。

 var arr = [10, 20, 30, 40]; console.log(arr.entries(), 8888); for (const v of arr.entries()) { console.log(v); }

arr.flat(转几层，默认1层) 数组扁平化，将多维数组降维

讯享网var arr=[[1,2],13,45,[23,4,31],10]; console.log(arr.flat(1)); // [1,2,13,45,23,4,31,10] var arr1 = [[1, [2,0]], 13, 45, [23, [4,22], 31], 10]; console.log(arr.flat(2)); //[1, 2, 0, 13, 45, 23, 4, 22, 31, 10]