数组方法和字符串方法

1. 数组对象

1.1 数组类型检测

数组类型检测有两种常用的方式，分别是使用instanceof运算符和使用Array.isArray()方法

var arr = [];
var obj = [];
//第一种方式
console.log(arr instanceof Array); // 输出方式:true
console.log(obj instanceof Array); // 输出方式:false
//第二种方式
console.log(Array.isArray(arr));   //输出方式:true
console.log(Array.isArray(obj));   //输出方式:false

 1.2 添加或删除数组元素

添加或删除数组元素

方法名	功能描述	返回值
push(参数1.....)	数组末尾添加一个或多个元素，会修改原数组	返回数组的新长度
unshift(参数1.....)	数组开头添加一个或多个元素，会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组则返回undefined，会修改原数组	返回删除元素的值
shift	删除数组的第一个元素，若是空数组则返回undefined，会修改原数组	返回第一个元素的值

需要注意的是，push()和unshift()方法的返回值是新数组的长度，而pop()和shift返回的是移出的数组元素。下面我们通过代码来演示。

<script>
var arr = ['Rose','Lily'];
console.log('原数组:'+arr);
var last = arr.pop();
console.log('在末尾移出元素:'+last+'-移出后数组:'+arr);
var len = arr.push('Turlip','Jasmine');
console.log（'在末尾添加元素后长度变为:'+len+'-添加后数组:'+arr);
var first = arr.shift();
console.log('在开头移出元素:'+first+'-移出后数组:'+arr);
len = arr.unshift('Balsam','sunflower');
console.log('在开头添加元素后长度变为:'+len+'-添加后数组:'+arr);
<script>

 1.3 【案例】筛选数组

接下来我们通过一个案例来演示数组对象的使用。要求在包含工资的数组中，剔除工资达到2000或以上的数据，把小于2000的数重新放到新的数组里面。其中数组为[1500,1200,2000,2100,1800]。

var arr = [1500,1200,2000,2100,1800];
var newArr = [];
for(var i = 0;i < arr.length;i++){
  if(arr[i] < 2000){
    newArr.push(arr[i]);    //相当于:newArr[newArr.length] = arr[i];
  }
}
console.log(newArr);        //输出结果:[1500,1200,1800]

 1.4 数组排序

JavaScript数组对象提供了数组排序的方法, 可以实现数组元素排序或者颠倒数组元素的顺序等。

排序方法

方法名	功能描述
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()	对数组的元素进行排序，该方法会改变原数组，返回新数组

 需要注意的是，reverse()和sort()方法的返回值是新数组的长度。下面我们通过代码进行演示。

//反转数组
var arr = ['red','green','blue'];
arr.reverse();
console.log(arr);        //输出结果:['blue','green','red']
//数组排序
var arr1 = [13,4,77,1,7];
arr1.sort(function(a,b){
  return b-a;            //按降序的顺序排列
}); 
console.log(arr1);       //输出结果:[77,13,7,4,1]

 1.5 数组索引

在开发中，若要查找指定的元素在数组中的位置，则可以利用Array对象提供的检索方法。

检索方法

方法名	功能描述
indexOf()	返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在则返回-1

 上述方法中，默认都是从指定数组索引的位置开始检索，并且检索方式与运算符"===" 相同，即只有全等时才会返回比较成功的结果。下面我们通过代码进行演示。

var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));           //输出结果:2
console.log(arr.lastIndeOf('blue'));        //输出结果:4

 1.6 【案例】数组去除重复元素

接下来我们通过一个案例来演示数组索引的使用。要求在一组数据中，去除重复的元素。

function unique(arr){
  var newArr = [];
  for (var i = 0; i <arr.length;i++){
     if(newArr.indexOf(arr[i]) === -1){
       newArr.push(arr[i]);
     }
  }
  return newArr;
}
var demo = unique(['blue','green','blue']);
console.log(demo);         //输出结果：["blue","green"]

 1.7 数组转换为字符串

在开发中，若需要将数组转换为字符串，可以利用数组对象的join()和toString()方法实现。

数组转换为字符串

方法名称	功能描述
toString	把数组转换为字符串，逗号分隔每一项
join('分隔符')	将数组中的所有元素连接到一个字符串中

 为了让大家更加清楚地了解数组转换为字符串的使用，下面我们用代码示例

// 使用toString()
var arr = ['a','b','c'];
console.log(arr.toString());       //输出结果：a,b,c
// 使用join()
console.log(arr.join());           //输出结果：a,b,c
console.log(arr.join(''));         //输出结果：abc
console.log(arr.join('-'));        //输出结果：a-b-c

 1.8 其他方法

除了前面讲解的几种常用方法外，JavaScript还提供了很多其他比较常用的数组方法。例如，填充数组 ，连接数组，截取数组元素等。

其他方法

方法名	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	数组删除，参数为splice(第几个开始，要删除个数)，返回被删除项目的新数组
slice()	数组截取,参数为silce(begin,end)，返回被截取项目的新数组
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

 接下来我们以splice()为例，演示如何在指定位置添加或删除数组元素。

var arr = ['sky','wind','snow','sun'];
//从索引为2的位置开始，删除2个元素
arr.splice(2,2);
console.log(arr);        //输出结果：["sky","wind"]
//从索引为1的位置开始，删除一个元素后，在添加snow元素
arr.splice(1,1,'snow');
console.log(arr);        //输出结果：["sky","snow"]
//从索引为1的位置开始，添加数组元素
arr.splice(1,0,'hail','sum');
console.log(arr);        //输出结果：["sky","hail","sun","snow"]

 2. 字符串对象

2.1 字符串对象的使用

字符串对象使用new String()来创建，在String构造函数中传入字符串，就会在返回的字符串对象保存这个字符串。

var str = new String('apple');     //创建字符串对象
console.log(str);                  //输出结果：String {"apple"}
console.log(str.length);           //获取字符串长度，输出结果：5

2.2 根据字符串返回位置

字符串对象提供了用于检索元素的方法，具体如表所示。

字符串对象用于检索元素的方法

方法	作用
indexOf(searchValue)	获取searchValue在字符串中首次出现的位置
lastIndexOf(searchValue)	获取searchValue在字符串最后出现的位置

 为了让大家更加清楚地了解indexOf()和lastIndexOf()方法的使用，下面我们通过代码示例进行演示。

var str = 'HelloWorld';
str.indexOf('o');        //获取"o"在字符串首次出现的位置，返回结果：4
str.lastIndexOf('o');    //获取"o"在字符串最后出现的位置，返回结果：6

接下来我们通过案例来演示。要求在一组字符串中，找到所有指定元素出现的位置以及次数。字符串为'Hello World，Hello JavaScript'。示例代码如下。

var str = 'Hello World, Hello JavaScrcript';
var index = str.indexOf('o');
var sum = 0;
while (index != -1){
  console.log(index);               //依次输出：4，7，17
  index = str.indexOf('o',index+1);
  num++;
}
console.log('o出现的次数：'+num);    //'o'出现的次数是：3

 需要注意的是，字符串中的空格也会被当作一个字符来处理。

2.3 根据位置返回字符 

在JavaScript中，字符串对象提供了获取字符串的某一个字符的方法，具体可以看下表。 

字符串对象用于获取某一个字符的方法

成员	作用
charAt(index)	获取 index 位置的字符，位置从0开始计算
charCodeAt(index)	获取 ndex 位置的字符的 ASCII码
str[index]	获取指定位置处的字符(HTML5新增)

 为了让大家更加清楚地了解charAt()，charCodeAt()， str[下标]的使用，下面我们用代码示例进行演示。

var str = 'Apple';
console.log(str.charAt(3));           //输出结果：1
console.log(str.charCodeAt(0);        //输出结果：65(字符A的ASCII码为65）
console.log(str[0]);                  //输出结果：A

 2.4 【案例】统计出现最多的字符和次数

接下来我们通过一个案例来演示charAt()方法的使用。通过程序来统计字符串中出现最多的字符和次数。

var str = 'Apple';
//第一步，统计每个字符的出现次数
var o = {};
for (var i = 0;i < str.length;i++){
  var chars = str.charAt(i);        //利用chars保存字符串中的每一个字符
  if (o[chars]){                    //利用对象的属性来方便查找元素
    o[chars]++;
  }else {
    o[chars] = 1;
  }
}
console.log(o);                     //输出结果：{A:1,p:2,l:1,e:1}
var max = 0;                        //保存出现次数最大值
var ch = '';                        //保存出现次数最多的字符 
for (var k in o){
  if(o[k] > max){
   max = o[k];
   ch = k;
 }
}
//输出结果："出现最多的字符是：p，共出现了2次"
console.log('出现最多的字符是：'+ch+'，共出现了'+max+'次');

  

 2.5 字符串操作方法

字符串对象提供了一些用截取字符串，连接字符串，替换字符串的属性和方法，具体如表下所示。

字符串对象用于截取，连接和替换字符串的方法

成员	作用
concat(str1,str2,str3...)	连接多个字符串
slice(start,[end])	截取从start位置到end位置之间的一个子字符串
substring(start,[end])	截取从start位置到end位置之间的一个子字符串，基本和slice相同，但是不接受负值
substr(start,[length])	截取从start位置开始到length长度的子字符串
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split([separator,[limit])	使用separator分隔符将字符串分隔成数组，limit用于限制数量
replace(str1,str2)	使用str2替换字符串的str1，返回替换结果，只会替换第一个字符

 在使用表中的方法对字符串进行操作时，处理结果是通过方法的返回值直接返回的，并不会改变字符串本身。下面我们用代码示例演示。

var str = 'HelloWorld';
str.concat('!');            //在字符串末尾拼接字符，结果：HelloWorld!
str.slice(1,3);             //截取从位置1开始到位置3范围内的内容，结果：el
str.substring(5);           //截取从位置5开始到最后的内容，结果：World
str.substring(5,7);         //截取从位置5开始到位置7范围内的内容，结果：Wo
str.substr(5);              //截取从位置5开始到字符串结尾的内容，结果：World
str.substring(5,7);         //截取从位置5开始到位置7范围内的内容，结果：Wo
str.toLowerCase();          //将字符串转换为小写，结果：helloworld
str.toUpperCase();          //将字符串转换为大写，结果：HELLOWORLD
str.split('l');             //使用"l"切割字符串，结果：["He","","oWor","d"]
str.split('l',3);           //限制最多切割3次，结果：["He","","oWor"]
str.replace('World','!');   //替换字符串，结果："Hello!"

2.6 【案例】判断用户名是否合法

在开发用户注册和登录功能时，经常需要对用户名进行格式验证。本案例要求用户名长度在3~10范围内，不允许出现敏感词 admin 的任何大小写形式。代码如下

var name = prompt('请输入用户名');
if (name.length < 3 || name.length > 10) {
  alert('用户名长度必须在3~10之间。');
} else if (name.toLowerCase().indexOf('admin') !== -1) {
  alert('用户名不能包含敏感词：admin。');
} else {
  alert('恭喜您，该用户名可以使用');
}

 先把用户名转换为小写，这样不管用户名大写小写都可以查找是否有敏感词，indexOf()方法在查找失败后会返回-1，因此可以用此方法的返回值来查找用户名是否包含敏感词。

2.7 值类型和引用类型 

在JavaScript中，基础数据类型（如字符串型，数字型，布尔型，undefined，null）又称值类型，复杂数据类型（对象）又称为引用类型。引用类型的特点是，变量中保存的仅仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向了同一个对象的引用。例如，下列代码中的obj1 和obj2 指向了同一个对象。 

//创建一个对象，并通过obj1保存对象的引用
var obj1 = {name:'小明',age:18};
//此刻并没有复制对象，而是obj2和obj1两个变量引用了同一个对象
var obj2 = obj1;
//比较两个变量是否引用同一个对象
console.log(obj2 === obj1);            //输出结果：true
//通过obj2修改对象的属性
obj2.name = '小红';
//通过obj1访问对象的name属性
console.log(obj1.name);                //输出结果：小红

 上述代码执行后，obj1和obj2两个变量引用了同一个对象，此时，无论是使用obj1操作对象还是使用obj2操作对象，实际操作的都是同一个对象。

 当obj1和obj2两个变量指向了同一个对象后，如果给其中一个变量（如obj1）重新赋值为其他对象，或者重新赋值为其他值，则obj1将不再引用原来的对象，但obj2仍然在引用原来的对象，示例代码如下。

var obj1 = {name:'小明',age:18};
var obj2 = obj1;
// obj1指向了一个新创建的对象
obj1 = {name:'小红',age:17};
// obj2仍然指向原来的对象
console.log(obj2.name);           //输出结果：小明

  当一个对象只被一个变量引用的时候，如果这个变量又被重新赋值，则该对象就会变成没有任何变量引用的情况，这时候就会由JavaScript的垃圾回收机制自动释放。

  当引用类型的变量作为函数的参数来传递时，其效果和变量之间的赋值类似。如果在函数的参数中修改对象的属性和方法，则在函数外面通过引用这个对象的变量访问到的结果也是修改后的，示例代码如下。

function change(obj) {
   obj.name = '小红';             //在函数内修改了对象的属性
}
var stu = {name:'小明',age:18};
change(stu);
console.log(stu.name);            //输出结果：小红

  在上述代码中，当调用change()函数后，在change()函数中修改了obj.name的值。修改后，在函数外面通过stu变量访问到的结果是修改后的值，说明变量stu和参数obj引用的是同一个对象。