数组对象
一、数组类型检测
在开发中,有时候需要检测变量的类型是否为数组。例如,在函数中,要求传入的参数必须是一个数组,不能传入其他类型的值,否则会出错,所以这时候可以在函数中检测参数的类型是否为数组。
数组类型检测方式有两种:
1.instanceof运算符
2.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
二、添加或删除数组元素
JavaScript数组对象提供了添加或删除元素的方法,可以实现在数组的末尾或开头添加新的数组元素,或在数组的末尾或开头移出数组元素。具体方法如下表所示:
添加或删除数组元素
方法名 | 功能描述 | 返回值 |
---|---|---|
push(参数1...) | 数组末尾添加一个或多个元素,会修改原数组 | 返回数组的新长度 |
unshift(参数1...) | 数组开头添加一个或多个元素,会修改原数组 | 返回数组的新长度 |
pop() | 删除数组的最后一个元素,若是空数组则返回undefined,会修改原数组 | 返回删除的元素的值 |
shift() | 删除数组的第一个元素,若是空数组则返回undefined,会修改原数组 | 返回第一个元素的值 |
代码演示如下
// push
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']
三、【案例】筛选数组
要求:在包含工资的数组中,剔除工资达到 2000 或以上的数据,把小于 2000的数重新放到新的数组里面。其中数组为 [1500,1200,2000,2100,1800]。
var arr=[1500,1200,2000,2100,1800];
var new_arr=[];
for(var i=0;i<arr.length;i++){
if(arr[i]<2000){
new_arr.push(arr[i]) //相当于:newArr[newArr.length]=arr[i];
}
}
console.log(new_arr)
四、数组排序
JavaScript数组对象提供了数组排序的方法,可以实现数组元素排序或者颠倒数组元素的顺序等。具体语法如下所示:
排序方法
方法名 | 功能描述 |
---|---|
reverse() | 颠倒数组中元素的位置,该方法会改变原数组,返回新数组 |
sort() | 对数组的元素进行排序,该方法会改变原数组,返回新数组 |
注意:
sort()不传参,按照字符编码的顺序进行排序;传参,参数是用来指定按某种顺序进行排序
具体代码演示如下:
//反转数组
var arr=['red','green','blue'];
arr.reverse();
console.log(arr);
//数组排序
var arr=[1,5,52,6,12]
arr.sort(function(a,b){
return b-a;
});
console.log(arr)
五、数组索引
在开发中,若要查找指定的元素在数组中的位置,可以利用Array对象提供的检索方法
具体如下所示
方法名 | 功能描述 |
---|---|
indexOf() | 返回在数组中可以找到给定值的第一个索引,如果不存在,则返回-1 |
lasIndexOf() | 返回指定元素在数组中的最后一个的索引,如果不存在则返回-1 |
注意:
indexOf()中,参数1:要查找的元素;参数2:开始查找的位置(如果为-1,表示从最后一个元素开始查找;如果为-2,表示查找倒数两个元素)
代码演示如下:
var arr = ['red', 'yellow', 'blue', 'pink','yellow']
console.log(arr.indexOf('yellow',2))
console.log(arr.indexOf('withe'))
console.log(arr.lastIndexOf('pink'))
console.log(arr.lastIndexOf('withe'))
六、【案例】数组去除重复元素
要求:在一组数据中,去除重复的元素,其中数组为['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);
七、数组转换为字符串
在开发中,可以利用数组对象的joio()和toString()方法将数组转换为字符串。
具体语法如下
数组转换为字符串
方法名 | 功能描述 |
---|---|
toString() | 把数组转换为字符串,逗号分隔每一项 |
join('分隔符') | 将数组的所有元素连接到一个字符串中 |
具体代码演示如下
var arr=['a','b','c']
//使用toString()
console.log(arr.toString())
//使用join()
console.log(arr.join())
console.log(arr.join(''))
console.log(arr.join('~'))
八、其他方法
方法名 | 功能描述 |
---|---|
fill() | 用一个固定值填充数组中指定下标范围内的全部元素 |
splice() | 数组删除,参数为splice(第几个开始,要删除个数),返回被删除项目的新数组 |
slice() | 数组截取,参数为slice(begin, end),返回被截取项目的新数组\nconcat() |
concat() | 连接两个或多个数组,不影响原数组,返回一个新数组 |
slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后 皆会对原数组产生影响。
代码演示如下
var arr=['red', 'yellow', 'blue', 'yellow']
//fill
arr.fill('pink',1,3)
arr.fill(2)
arr.fill('pink',NaN,NaN)
console.log(arr)
//splice
var arr = ['red', 'yellow', 'blue', 'yellow']
arr.splice(1,3,'pink')
arr.splice(1,2)
console.log(arr)
//slice
var arr = ['red', 'yellow', 'blue', 'yellow']
arr.slice(1,3)
console.log(arr)
//concat
const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];
const concatArr = letters.concat(numbers);
console.log(letters);
console.log(concatArr);
字符串对象
一、字符串对象的使用
字符串对象使用new String()来创建
示例代码如下
var str = new String('送你一朵小红花')
console.log(str)
console.log(str.length);//输出结果为:7
// 看不到常见的属性和方法
var str1 = '送你一朵小红花'
console.log(str1)
二、根据字符返回位置
字符串对象提供了用于检索元素的属性和方法
方法 | 作用 |
---|---|
indexOf(‘
要查找 的值’,
开始的位 置)
| 获取searchValue在字符串中首次出现的位置 |
lastIndexOf(‘
要 查找的值’
,开始 的位置)
| 获取searchValue在字符串中最后出现的位置 |
具体代码演示如下
// 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都区分大小写
案例
要求:在一组字符串中,找到所有指定元素出现的位置以及次数。字符串为 ' HelloWorld, Hello JavaScript '。
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)
三、根据位置返回字符
成员 | 作用 |
---|---|
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]);
}
四、【案例】统计出现最多的字符和次数
要求:使用charAt()方法通过程序来统计字符串中出现最多的字符和次数。
示例代码如下
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 + '次')
五、字符串操作方法
成员 | 作用 |
---|---|
concat(str1, str2, str3…)
| 链接多个字符串 |
slice(start,[end])
|
截取从
start
位置到
end
(不包含
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 = '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?
六、【案例】判断用户名是否合法
需求: 用户名长度在 3~10 范围内,不能出现敏感词 admin 的任何大小写形式。
var res = prompt('请您输入用户名')
if (res.length < 3 || res.length > 10) {
alert('用户名长度为3—10位,请您重新输入')
} else if (res.toLocaleLowerCase().indexOf('admin') != -1 ||
res.toUpperCase().indexOf('admin') != -1) {
alert('不能出现敏感词admin')
} else {
alert('恭喜您,该用户名可以使用');
}
值类型和引用类型
在 JavaScript 中,简单数据类型(如字符串型、数字型、布尔型、 undefifined 、 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); // 输出结果:小红
var obj1 = { name: '小明', age: 18 };
var obj2 = obj1;
// obj1指向了一个新创建的对象
obj1 = { name: '小红', age: 17 };
// obj2仍然指向原来的对象
console.log(obj2.name); // 输出结果:小明
注意:
如果在函数的参数中修改对象的属性或方法,则在函数外面通过引用这个对象的变量访问时的结 果也是修改后的。
function change(obj) {
obj.name = '小红'; // 在函数内修改了对象的属性
}
var stu = { name: '小明', age: 18 };
change(stu);
console.log(stu.name); // 输出结果:小红
练习:
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));