JavaScript数组对象与字符串对象的方法

一、数组对象

数组对象的创建使用new Array或者字面量来创建

new arr = new Array();

1.1数组类型的检测

在开发过程中，有时候需要检测变量的类型是否为数组。
数组类型的检测有两种常用的方式，分别是使用instanceof运算符和使用Array.isArray（）方法。

示例代码

var arr = ();
var obj = ();
//第一种方法
console.log(arr instanceof Array);//输出结果True
console.log(obj instanceof Array);//输出结果False
//第二种方法
console.log(Array is.Array(arr));//输出结果True
console.log(Array is.Array(obj));//输出结果False

在上面的代码中如果输出结果为True，表示给定的变量是一个数组，
如果输出结果为False，表示给定的变量不是一个数组。

1.2添加或删除数组元素

JavaScript中为我们提供了对数组对象的添加或删除元素的方法。

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

示例代码

var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));// 返回的是数组长度 输出结果为：5
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white', 'yellow','red']
 
// unshift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));// 返回的是数组长度 输出结果为：6
console.log(arr);// 修改了原来的数组 输出结果为['red', 'blue', 'pink', 'black',
'white', 'yellow']
 
// pop
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.pop());// 返回的是删除的元素 输出结果为：yellow
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']
 
// shift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.shift());// 返回的是删除的元素(第一个) 输出结果为：pink
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']

注意

1.push()和unshift()方法可以指定数组在末尾或开头添加一个或多个元素

2.pop()和shift()方法则只能移出并返回指定数组在末尾或开头的一个元素。

1.3【案例】筛选数组

要求在包含工资的数组中，剔除工资达到2000或以上的数据，把小于2000的数重新放到新的数组里面。

代码示例

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()	对数组的元素进行排序，该方法会改变原数组，返回新数组

示例代码

// 反转数组
var arr = ['red', 'blue', 'green']
console.log(arr.reverse());  //输出的结果为：['green', 'blue', 'red']
console.log(arr);    // 改变原数组['green', 'blue', '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
lastlndexOf()	返回指定元素在数组中的最后一个索引，如果不存在则返回-1

注意

1.默认都是从指定数组索引的位置开始检索。
2.索引方法与运算符“===”相同，即只有全等才会返回比较成功的结果。

示例代码

var arr = ['a','s','d','f','g'];
console.log(arr.indexOf('d'))//输出结果：2
console.log(arr.indexOf('g'))//输出结果：4

注意

1. lastIndexOf()方法用于在数组中从指定下标位置检索到最后一个给定值的下标。

2.与indexOf检索方式不同的是，lastIndexOf()方法默认逆向检索，即从数组的末尾向数组的开头检索

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

要求在一组数据中，去除重复的元素

示例代码

// 声明数组
function unique(arr) {
	var newArr = [];
	// 遍历数组
	for (var i = 0; i < arr.length; i++) {
		// 判断新数组中是否有原数组中的元素
		// indexOf 结果为-1表示没有该元素
		if (newArr.indexOf(arr[i]) === -1) {
			// 没有的话就把该元素push到新数组中
			newArr.push(arr[i])
		}
	}
	return newArr;
}
// 调用数组
var res = unique([1, 2, 3, 4, 3, 2])
console.log(res);//输出结果:[1,2,3,4]

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.join()和toString()方法可以将多维数组转化为字符串，默认情况下使用逗号连接。
2.join()方法可以指定连接数组元素的符号，当数组元素为nudefined、null、或者空数值时，对应元素全部转换为空字符串。

1.8其他方法

除了上述的方法，JavaScript还提供了很多其他也比较常用的数组方法

其他方法

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

注意

1.slice()和 concat() 方法在执行后一个新的数组，不会对原数组产生产生影响，剩余方法在执行后皆会对原数组产生影响

示例代码

//fill()
var arr = [1, 2, 3, 4, 5]       
// fill(value)
console.log("fill(value)填充前:" + arr);
arr.fill('*')
console.log("fill('*')填充后：" + arr); 
// fill(value,start)
console.log("fill(value,start)填充前:" + arr);
arr.fill('*', 2)
console.log("fill('*', 2)填充后：" + arr);
// fill(value,start,end)        console.log("fill(value,start,end)填充前:" + arr);
arr.fill('*', 2, 4)
console.log("fill('*', 2, 4)填充后：" + arr);

//splice()
var arr = [1, 2, 3, 4, 5]
 // splice(start)
console.log("splice(start)删除前："+arr);
arr.splice(2);
console.log("splice(2)删除后："+arr);
// splice(start, deleteCount)
console.log("splice(start, deleteCount)删除前："+arr);
arr.splice(2,1);
console.log("splice(2, 1)删除后："+arr);
// splice(start, deleteCount, item1)
console.log("splice(start, deleteCount, item1)删除前："+arr);
arr.splice(2,1,6);
console.log("splice(2, 1, 6)删除后："+arr);
// splice(start, deleteCount, item1, item2, itemN)
console.log("splice(start, deleteCount, item1, item2, itemN)删除前："+arr);
arr.splice(2,1,6,7);
console.log("splice(2, 1, 6, 7)删除后："+arr);

// slice()
var arr = [1, 2, 3, 4, 5]

console.log("slice()截取全部元素："+arr.slice());
// slice(start)
console.log("slice(start)截取前："+arr);
console.log("slice(2)截取后："+arr.slice(2));
// slice(start, end) 不包括end
console.log("slice(start)截取前："+arr);
console.log("slice(2,4)截取后："+arr.slice(2,4));
 
// concat() 
var arr1= ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
console.log("arr1.concat()后的新数组："+arr1.concat());
// concat(value0)
console.log("arr1.concat(arr2)后的新数组："+arr1.concat(arr2));

二、字符串对象

2.1创建字符串对象

var str1 = new String("abcdefg"); 
var str2 = String("abcdefg"); 
var str3 = "abcdefg";

2.2根据字符串返回位置

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

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

示例代码

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

案例演示

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

注意

1.字符串中的空格会被当做一个字符来处理。

2.3根据位置返回字符

在JavaScript中，字符串对象提供了用于获取字符串中某一个字符的方法。

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

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

示例代码

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【案例】统计出现最多的字符和次数

 var strNum = 'Apple';
// 创建一个空对象，统计每个字符出现的次数
var obj = {};
for (var i = 0; i < strNum.length; i++) {
var chars = strNum.charAt(i);  // 利用chars保存字符串中的每一个字符
// 判断属性有无值
if (obj[chars]) {
    obj[chars]++;   // 有则自增
} else {
   obj[chars] = 1; // 没有赋值为1
}
}
console.log(obj);
var max = 0;       // 出现最多的次数
var ch = '';        // 出现最多的字符
for (var k in obj) {
   if (obj[k] > max) {
      max = obj[k];
      ch = k;
}
}
console.log('出现最多的字符是：' + ch + '，共出现了' + max + '次');

2.5字符串操作方法

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

成员	作用
concat(str1, str2, str3…)	concat() 方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 该方法没有改变原有字符串，会返回连接两个或多个字符串新字符串
slice(start,[ end])	截取从start位置到end（不包含end）位置之间的一个子字符串 可提取字符串的某个部分，并以新的字符串返回被提取的部分
substring(start[, end])	截取从start位置到end位置之间的一个子字符串，基本和slice相同，但是不 接收负值
substr(start[, length])	截取从start位置开始到length长度的子字符串 从起始索引号提取字符串中指定数目的字符
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split([separator[, limit])	使用separator分隔符将字符串分隔成数组，limit用于限制数量 separator可选。 limit可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回 的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都 会被分割，不考虑它的长度

示例代码

var str = 'HelloWord';
// concat
var res = str.concat('!!');
console.log(res);//HelloWord!!
// slice
var res1 = str.slice(1, 5);
console.log(res1); //ello
// substring
var res2 = str.substring(3);//截取从下标为3开始，之后的内容
console.log(res2);//loWord
var res3 = str.substring(3, 7);//截取从下标为3开始，到7结束的内容（不包含7）
console.log(res3);//loWo
// substr
var res4 = str.substr(2, 5);
console.log(res4);//lloWo
// toLowerCase
var res5 = str.toLocaleLowerCase();
console.log(res5);//helloword
// toUpperCase
var res6 = str.toLocaleUpperCase();
console.log(res6);//HELLOWORD
// split
var str1 = 'How are you doing today?'
var res7 = str1.split(' ');
console.log(res7);// ['How', 'are', 'you', 'doing', 'today?']
var res8 = str1.split();
console.log(res8);//['How are you doing today?']
var res9 = str1.split(' ', 3);
console.log(res9);// ['How', 'are', 'you']
// replace
var res10 = str1.replace(' ', ',');
console.log(res10);//How,are you doing today?

三、练习

var url = 'http://www.martinhan.com/login?name=zs&age=18 ';

最后的输出结果为{name:zs;age:18 }

var url = 'http://www.martinhan.com/login?name=zs&age=18';
function getParams(url) {
	// 1. 首先把 网址分为2部分 用 ? 分割
	// 2. 得到 ？+ 1 的索引位置
	var index = url.indexOf('?') + 1;
	// 3. 得到 ？ 后面的字符串
	var params = url.substr(index);
	console.log(params); // name=zs&age=18
	// 4. 把 得到 这串字符 继续用 & 分隔开
	var arr = params.split('&');
	// console.log(arr);
	var o = {};
	// 5. 把 数组里面的每一项，继续用 = 分割
	for (var i = 0; i < arr.length; i++) {
		var newArr = arr[i].split('=');
		// console.log(newArr);
		// 完成赋值 操作
		o[newArr[0]] = newArr[1];
		}
		return o;
	}
console.log(getParams(url));