数组对象与字符串对象

最新推荐文章于 2023-05-30 19:24:10 发布

fid007

最新推荐文章于 2023-05-30 19:24:10 发布

阅读量137

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/fid007/article/details/130375234

版权

一.数组对象

Javascript中的数组对象可以使用new Array或字面量"[]"来创建，在创建以后，就可以调用数组对象提供的一些方法来实现对数组的操作了，如添加或删除数组元素、数组排序、数组索引等。接下来将会对此详细讲解。

1、数组类型检测

在开发中，有时候需要检测变量的类型是否为数组。例如，在函数中，要求传人的参数必须是一个数组，不能传人其他类型的值，否则会出错，所以这时候可以在函数中检测参数的类型是否为数组。数组类型检测有两种常用的方式，分别是使用instanceof运算符和使用Array.isArray()方法。示例代码如下。

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

2.添加或删除数组元素

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

示例代码：

// push
var arr = ['aa', 'bb', 'cc', 'dd']
console.log(arr.push('ee'));// 返回的是数组长度 : 5
console.log(arr);// 输出['aa', 'bb', 'cc', 'dd', 'ee']

// unshift
var arr = ['aa', 'bb', 'cc', 'dd']
console.log(arr.unshift('ee', 'ff'));// 返回的是数组长度 ：6
console.log(arr);// 输出['ee','ff','aa', 'bb', 'cc', 'dd']

// pop
var arr = ['aa', 'bb', 'cc', 'dd']
console.log(arr.pop());// 返回的是删除的元素 ：dd
console.log(arr);// ['aa', 'bb', 'cc']

// shift
var arr = ['aa', 'bb', 'cc', 'dd']
console.log(arr.shift());// 返回的是删除的元素(第一个) ：aa
console.log(arr);// 输出['bb', 'cc', 'dd']

注意：

push()和unshift()方法的返回值是新数组的长度，而pop()和shift()方法返回的是移出的数组元素。

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

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]

4. 数组排序

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

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

示例代码:

// reverse
var arr = ['red', 'blue', 'green']
console.log(arr.reverse());//输出的结果为：['green', 'blue', 'red']
console.log(arr);// 改变原数组['green', 'blue', 'red']

5.数组索引

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

检索方法

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

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

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

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

在一组数据中，去除重复的元素，其中数组为[‘blue’,‘green’,‘blue’]

代码如下：

// 声明数组
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);

7. 数组转换为字符串

在开发中，可以利用数组对象的joio（）和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

代码如上

8.其他方法

方法	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	通过删除或替换现有元素或者原地添加新的元素来修改数组，返回被删除项目的新数组
slice()	数组截取，参数为slice(begin, end)，包含begin ，但不包含end ，返回被截取项目的新数组
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

注意：

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

fill()

参数:value start end
value:用来填充数组元素的值
start:基于零的索引，从此开始填充，转化为整数。
end:基于零的索引，在此结束填充，转换为整数。fill()填充到但不包含end索引。

示例代码：

// fill
const array1 = [1, 2, 3, 4];
// 填充0,从数组索引2(包含)开始到4(不包含)结束

console.log(array1.fill(0, 2, 4));
// 输出结果为： Array [1, 2, 0, 0]

// 填充5,从数组索引1(包含)开始
console.log(array1.fill(5, 1));
// 输出结果为： Array [1, 5, 5, 5]

// 填充6
console.log(array1.fill(6));
// 输出结果为： Array [6, 6, 6, 6]

splice

参数:start deleteCount item1…
start:执行修改的开始位置(从0计数)
deleteCount:整数,表示要移除的数组元素的个数

item1:要添加进去数组的元素

// 从索引 2 的位置开始删除 0 个元素，插入“drum”
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(2, 0, "小红");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["小米", "小明", "小红", "小张", "小李"]
// 被删除的元素：[], 没有元素被删除

// 从索引 2 的位置开始删除 0 个元素，插入“drum”和 "guitar"
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(2, 0, '小刚', '小蔡');
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["小米", "小明", "小刚", "小蔡", "小张", "小李"]
// 被删除的元素：[], 没有元素被删除

// 从索引 3 的位置开始删除 1 个元素
var myFish = ["小米", "小明", "小刚", "小蔡", "小张", "小李"];
var removed = myFish.splice(3, 1);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小米', '小明', '小刚', '小张', '小李']
// 被删除的元素：['小蔡']

// 从索引 2 的位置开始删除 1 个元素，插入“trumpet”
var myFish = ["小米", "小明", "小刚", "小蔡", "小张", "小李"];
var removed = myFish.splice(2, 1, "小兰");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小米', '小明', '小兰', '小蔡', '小张', '小李']
// 被删除的元素：["小刚"]

// 从索引 0 的位置开始删除 2 个元素，插入"parrot"、"anemone"和"blue"
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(0, 2, '小兰', '小蔡', '小刚');
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡', '小刚', '小张', '小李']
// 被删除的元素：['小米', '小明']

// 从索引 2 的位置开始删除 2 个元素
var myFish = ['小兰', '小蔡', '小刚', '小张', '小李'];
var removed = myFish.splice(myFish.length - 3, 2);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡', '小李']
// 被删除的元素： ['小兰', '小蔡', '小李']

// 从索引 2 的位置开始删除所有元素
var myFish = ['小兰', '小蔡', '小刚', '小张', '小李'];
var removed = myFish.splice(2);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡']
// 被删除的元素：['小刚', '小张', '小李']

slice

参数:begin end
begin : 从该索引开始提取原数组元素(包含)

end : 在该索引处结束提取原数组元素(不包含)

// 从索引 2 的位置开始截取
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张', '小李']

// 从索引 2 的位置开始 截取到 索引4 的位置(包含2 不包含4)
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2, 4);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张']

// 从索引 2 的位置开始 截取到 数组的倒数第一个元素(不包含)
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2, -1);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张']

// 截取后两个元素
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(-2);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小张', '小李']

concat

// 连接两个数组
const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

const concatArr = letters.concat(numbers);
console.log(letters);//['a', 'b', 'c']
console.log(concatArr);//['a', 'b', 'c', 1, 2, 3]

// 连接三个数组
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numArr = num1.concat(num2, num3);
console.log(numArr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

// 将值连接到数组
const arr1 = ['a', 'b', 'c'];
const newArr1 = letters.concat(1, [2, 3]);

console.log(newArr1);//['a', 'b', 'c', 1, 2, 3]

二.字符串对象

1、创建字符串对象

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

总结：任何一个数据类型，只要用引号包裹起来，就是一个字符串对象

2、根据字符返回位置

方法	功能描述
indexOf(要查找的值，开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回 -1；开始的位置是 index 索引号；参数2可选，规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。
lastIndexOf(要查找的值，开始的位置)	从后往前找，只找第一个匹配的，如果没有找到匹配字符串则返回 -1；参数2可选，规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

代码如下：

// indexOf：参数1：要搜索的子字符串；参数2：可选
var str = new String('送你一朵小红花，送你一朵小红花');
// 查找 花 首次出现的位置
var res = str.indexOf('花');
// 查找 花 从第七个位置查找 花 ，第一次出现的位置
var res2 = str.indexOf('花', 7);
console.log(str);
console.log(str.length);//7
console.log(res);//输出结果：6
console.log(res2);//输出结果：14
// lastIndexOf：参数1：要搜索的子字符串；参数2：可选
var str1 = new String('to be or not to be');
// 查找 e 从最后一个字符开始，第一次出现的位置
var res1 = str1.lastIndexOf('e');
// 查找 e 从第8个位置开始倒数，第一次出现的位置
var res3 = str1.lastIndexOf('e', 8);
console.log(str1);
console.log(str1.length);//15
console.log(res1);//输出结果：17
console.log(res3);//输出结果：4

注意：

indexOf和lastindexOf都区分大小写

案例：

在一组字符串中，找到所有指定元素出现的位置以及次数。

var str = new String('To be, or not to be, that is the question.');
var index = str.indexOf('e');
console.log(index);// 输出e出现的位置，此处输出结果为：4（首次出现）
var num = 0;
while (index != -1) {// index !=-1 表示可以找到o的时候
console.log(index);// 输出e出现的位置，此处输出结果为：4 18 31 35
index = str.indexOf('e', index + 1);//indexOf('要查找的对象',位置)
// 从第一次出现的位置，之后开始查找，再赋值给index;
num++;
}
console.log('e出现的次数是：' + num)

3、根据位置返回字符

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

示例代码：

var str = 'andy';
// 获取index位置的字符
console.log(str.charAt(0));//输出的结果为；a
// 获取index位置的字符的ASCII码
console.log(str.charCodeAt(0));//输出结果为：97（a的ASCII码是97）
for (var i = 0; i < str.length; i++) {
// 获取指定位置处的字符
console.log(str[i]);
}

案例：

使用chartAt()方法通过程序来统计字符串出现最多的字符和次数

for (var i = 0; i < str.length; i++) {
// 3. 利用chars保存字符串中的每一个字符
var chars = str.charAt(i);
console.log(chars);
// 4. 利用对象的属性来方便查找元素
// obj[chars]获取对象的属性的属性值
if (obj[chars] != true) {//如果没有获取到当前字符串，值为undefined（转为布尔值为
false）
obj[chars] = 1;//给当前对象的属性对应的属性值赋值为1
} else {
obj[chars]++; //如果获取到了当前字符串，即对应的属性值+1
}
}
console.log(obj);
// 2. 统计出现最多的字母
var max = 0; // 保存出现次数最大值
var maxStr = ''; // 保存出现次数最多的字符
// 2.1 遍历对象的属性和方法
for (var key in obj) {
// 2.2 将对象中属性的值和max进行比较
if (obj[key] > max) {
max = obj[key];
maxStr = key
}
}
console.log('出现最多的字符是：' + maxStr + ' ，共出现了' + max + '次')

4、字符串操作方法

方法	作用
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 ';

var url = 'http://www.martinhan.com/login?name=zs&age=18';
function getParams(url) {
var index = url.indexOf('?') + 1;
var params = url.substr(index);
console.log(params); // name=zs&age=18
var arr = params.split('&');
var o = {};
for (var i = 0; i < arr.length; i++) {
var newArr = arr[i].split('=');
o[newArr[0]] = newArr[1];
}
return o;
}
console.log(getParams(url));