数组对象
Javascript中的数组对象可以使用new Array或字面量"[]"来创建,在创建以后,就可以调用数组对象提供的一些方法来实现对数组的操作了,如添加或删除数组元素、数组排序、数组索引等。接下来将会对此详细讲解。
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
在上述代码中,如果检测结果为true,表示给定的变量是一个数组,如果检测结果为false,则表示给定的变量不是数组。
2、添加或删除数组元素
JavaScript数组对象提供了添加或删除元素的方法,可以实现在数组的末尾或开头添加新的数组元素,或在数组的末尾或开头移出数组元素。具体如下图所示。
方法名 | 功能描述 | 返回值 |
| 在数组的末尾添加一个或多个元素,会修改原数组 | 返回数组的新长度 |
| 数组开头添加一个或多个数组元素,会修改原数组 | 返回数组的新长度 |
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']
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() | 对数组的元素进行排序,该方法会改变原数组,返回新数组 |
代码演示:
//反转数组
let arr = [1,2,3,4]
let arr1 = arr.reverse()
console.log(arr1); //输出结果:[4, 3, 2, 1]
//数组排序
// sort: 如果调用该方法时没有使用参数,按照字符编码的顺序进行排序。
var arr = [1, 4, 5, 6, 73, 32, 22, 15];
// 不传参数的情况
console.log(arr.sort());//输出的结果为:[1, 15, 22, 32, 4, 5, 6, 73]
// 传参数:参数是用来指定按某种顺序进行排列的函数
/*
即 a 和 b 是两个将要被比较的元素:
*/
arr.sort(function (a, b) {
// return b - a;//降序 // [73, 32, 22, 15, 6, 5, 4, 1]
return a - b;//升序 // [1, 4, 5, 6, 15, 22, 32, 73]
})
console.log(arr);
5、数组索引
在开发中,若要查找指定的元素在数组中的位置,可以利用Array对象提供的检索方法。
具体如表所示:
方法名 | 功能描述 |
indexOf() | 返回在数组中可以找到给定值的第一个索引,如果不存在,则返回-1 |
lastlndexOf() | 返回指定元素在数组中的最后一个的索引,如果不存在则返回-1 |
代码演示:
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue')); //输出结果:2
console.log(arr.lastIndexOf('blue')); //输出结果:4
6、【案例】数组中去除重复元素
要求在一组数据中,去除重复的元素。示例代码如下:
function num(arr){
var newArr = [];
for(var i=0; i<arr.length; i++){
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(num([1,2,1,5,6,5])) //输出结果:1,2,5,6
7、数组转换字符串
方法名称 | 功能描述 |
toString() | 将数组转换为字符串,逗号分隔每一项 |
join('分隔符') | 将数组的所有元素连接到一个字符串中 |
示例代码:
var arr = ['a','b','c'];
console.log(arr.toString()); //输出结果:a,b,c
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() | 连接两个或多个数组,不影响原数组,返回一个新数组 |
示例代码:
const arr = [1,2,3,4];
console.log(arr.fill(0,2,4));
console.log(arr.fill(5,1));
console.log(arr.fill(6))
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
months.splice(4, 1, 'May');
console.log(months);
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
console.log(animals.slice(2, 4));
console.log(animals.slice(1, 5));
console.log(animals.slice(-2));
console.log(animals.slice(2, -1));
console.log(animals.slice());
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
字符串对象
1、字符串对象的使用
var str = new String('apple'); //创建字符串对象
console.log(str); //输出结果:String{"apple"}
console.log(str.length); //获取字符串长度,输出结果:5
2、根据字符返回位置
字符串对象提供了用于检索的方法,具体如表所示:
方法 | 作用 |
indexOf(要查找的值,开始的位置) | 返回指定内容在原字符串中的位置, 如果找不到就返回 -1;开始的位置是 index 索引号; 参数2可选,规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
lastIndexOf(要 查找的值,开始 的位置) | 从后往前找,只找第一个匹配的,如果没有找到匹配字符串则返回 -1; 参数2可选,规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开 始检索。 |
示例代码:
var str = 'HelloWorld';
str.indexOf('o'); //获取"o"在字符串中首次出现的位置,返回结果:4
str.lastIndexOf('o'); //获取"o"在字符串中最后出现的位置,返回结果:6
案例:
要求在一组字符串中,找到所有指定元素出现的位置以及次数。代码如下:
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 = 'Apple';
console.log(str.charAt(3)); //输出结果:1
console.log(str.charCodeAt(0)); //输出结果:65
console.log(str[0]); //输出结果:A
4、【案例】统计出现最多的字符和次数
使用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 + '次')
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可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回 的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都 会被分割,不考虑它的长度。 |
replace(str1,str2) | 使用str2替换str1.返回替换结果,只会替换第一个字符 |
示例代码:
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));