5.数组对象
5.1 数组类型检测0
数组类型检测有两种常用的方式,分别是使用instanceof运算符和使用Array.isArray()方法。示例代码:
var arr = [];
var obj = {};
// 第一种方式
console.log(arr instanceof Array);//输出结果:trueconsole.log(obj instanceof Array);//输出结果:false
//第二种方式
console.log(Array.isArray(arr));//输出结果:trueconsole.log(Array.isArray(obj));//输出结果:false
//第二种方式
console.loa(Array.isArray(arr));//出结果:true
console.log(Array.isArray(obj));//输出结果:false
5.2 添加或删除数组元素
JavaScript数组对象提供了添加或删除元素的方法,可以实现在数组的末尾或开头添加新的数组元素,或在数组的末尾或开头移出数组元素。方法如下:
示例代码:
// push
var arr =['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));//返回的是数组长度 输出结果为:5
console.log(arr);//修改了原来的数组 输出结果为['pink', 'black', 'white', 'yel
// unshift
var arr =['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));//返回的是数组长度 输出结果为:6console.log(arr);//修改了原来的数组 输出结果为['red', 'blue', 'pink', 'black', '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());//返回的是删除的元素(第一个) 输出结果为:pinkconsole.log(arr);// 修改了原来的数组 输出结果为['black','white','yellow']
注意:
• push()和unshift()方法的返回值是新数组的长度,而pop()和shift()方法返回的是移出的数5.3 案例:筛选数组
案例需求:要求在包含工资的数组中,剔除工资达到2000或以上的数据,把小于2000的数
里面。
var arr =[1500, 1200,2000, 2100, 1800];
var newArr =[];
for (var i = 0; i <arr.length; i++) f
if (arr[i] <2000)
newArr.push(arr[i]);//相当于:newArr[newArr.length]=arr[i];
console.log(newArr);
5.4 数组排序
JavaScript数组对象提供了数组排序的方法,可以实现数组元素排序或者颠倒数组元素的顺
下:
示例代码:
sort有两种情况:
1.不传参数
2.传参数:参数是用来指定按某种顺序进行排列的函数
即a和b是两个将要被比较的元素
// sort:如果调用该方法时没有使用参数,按照字符编码的顺序进行排序。
var arr1 =[1, 4, 5,6, 73,32, 22,15];
// 不传参数的情况
console.log(arr1.sort());//输出的结果为:[1,15,22,32,4,5,6,73]
//传参数:参数是用来指定按某种顺序进行排列的函数
*
即a和b是两个将要被比较的元素:
arr1.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(arr1);
注意:
•需要注意的是:reverse()和sort()方法的返回值是排序后的数组
•sort 如果调用该方法时没有使用参数,按照字符编码的顺序进行排序。
5.5 数组索引
在开发中,若要查找指定的元素在数组中的位置,可以利用Array对象提供的检索方法。检索方法如下:
示例代码
var beasts =['ant', 'bison', 'camel', 'duck', 'bison'];console.log(beasts.indexof('bison'));
// 输出结果为: 1
// 找到第二个bison的索引
console.log(beasts.indexof('bison', 2));
// 输出结果为: 4
console.log(beasts.indexof('giraffe'));
// 输出结果为: -1
5.6案例:数组去重
// 声明数组
function unique(arr)
var newArr =[];
// 遍历数组
for (var i = 0; i < arr.length;i++)
// 判断新数组中是否有原数组中的元素
// indexof 结果为-1表示没有该元素
if (newArr.indexof(arr[i]) === -1) f
//没有的话就把该元素push到新数组中
newArr.push(arr[i])
]
]
return newArr;
// 调用数组
var res = unique([1, 2,3,4,3, 2])
console.log(res);
5.7 数组转换为字符串
在开发中,可以利用数组对象的join()和toString0)方法,将数组转换为字符串。方法如下:
示例代码:
toString()
// tostring
var arr =['a', 'b','c']
console.log(arr.tostring));// 输出结果为:a,b,c
join
-- 参数可选:指定一个字符串来分隔数组的每个元素
-- 如果需要,将分隔符转换为字符串()小括号里面填写的是指定的分隔符
--如果省略,数组元素用逗号()分隔。
-- 如果 separator是空字符串("),则所有元素之间都没有任何字符。
// join
console.log(arr.join());// 输出结果为:a,b,c
console.log(arr.join('));// 输出结果为:abc
console.log(arr.join('-'));// 输出结果为:a-b-c
5.8 其他方法
JavaScript还提供了很多其他常用的数组方法。例如,填充数组、连接数组、截取数组元素等。方法如下:
注意:
• slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后皆会对原数
组产生影响。
// fill
var array1 =[1, 2,3,4];
0 1 23
//填充0,从数组索引2(包含)开始到4(不包含)结束
console.log(array1.fil1(0, 2, 4));
// 输出结果为:Array[1,2,0,0]
//填充5,从数组索引1(包含)开始
console.log(array1.fil1(5, 1));
// 输出结果为:Array [1,5,5,5]
// 填充6
console.log(array1.fil1(6));
// 输出结果为:Array [6,6,6,6]
splice
--参数:start deleteCount item1...
-- start:执行修改的开始位置(从0计数)
-- deleteCount:整数,表示要移除的数组元素的个数
-- item1:要添加进去数组的元素
// 从索引2 的位置开始删除0 个元素,插入"小红"
var myFish =["小米","小明","小张","小李"];
var removed =myFish.splice(2, 0,“小红");
console.log(myFish);
console.log(removed);
//运算后的 myFish:[”小米”,“小明”,“小红”,”小张”,”小李”]//被删除的元素:[],没有元素被删除
// 从索引2 的位置开始删除0个元素,插入“小刚”和“小蔡”
var myFish =["小米”,“小明”,”小张”,“小李”];
var removed = myFish.splice(2, 0,‘小刚’,‘小蔡');
console.log(myFish);
console.log(removed);
//运算后的 myFish:[”小米”,”小明”,“小刚”,“小蔡”,”小张”,”小李”]//被删除的元素:[],没有元素被删除
var myFish=[”小米”,“小明”,”小刚”,”小蔡”,”小张”,”小李”];var removed = myFish.splice(3, 1);
console.log(myFish);
console.log(removed);
//运算后的 myFish:['小米’,’小明’,‘小刚’,‘小张’,‘小李']
//被删除的元素:['小蔡’]
// 从索引2 的位置开始删除1个元素,插入“小兰”
var myFish =[”小米”,“小明”,“小刚”,”小蔡”,”小张”,“小李”];var removed = myFish.splice(2, 1,”小兰");
console.log(myFish);
console.log(removed);
//运算后的 myFish:[’小米’,’小明’,‘小兰’,‘小蔡’,’小张’,’小李’]
// 被删除的元素:[”小刚”]
// 从索引0的位置开始删除2 个元素,插入”小兰”、”小蔡”和”小刚”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:['小兰’,’小蔡’]
//被删除的元素:[’小刚’,’小张’,’小李']
// 从索引 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);
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:['小兰’,‘小蔡’,’小刚’,‘小张’,’小李’];/1被截取的元素:['小张’,’小李’]
concat
concat
6.字符串对象
6.1字符串对象的使用
字符串对象使用new String()来创建,在String构造函数中传入字符串,这样就会在返回的字符串对象中保存这个字符串。
语法:
var str = new String('送你一朵小红花')
console.log(str)
console.log(str.length);//输出结果为:7
// 看不到常见的属性和方法
var str1='送你一朵小红花’
console.log(str1)
6.2 根据字符返回位置
字符串对象提供了用于检索元素的属性和方法,字符串对象的常用属性和方法如下:
6.3 根据位置返回字符
字符串对象提供了用于获取字符串中的某一个字符的方法。方法如下:
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++) f
// 获取指定位置处的字符
console.log(str[i]);
了
示例代码:
//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 resl =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
6.4 案例:统计出现最多的字符和次数
案例需求:使用charAt()方法通过程序来统计字符串中出现最多的字符和次数。
for (var i= 0; i < str.length; i++) f
//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+‘次’)
6.5 字符串操作方法
字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。字符串对象的常用属性和方法如下:
var str ='Helloword';
// concat
var res = str.concat('!!');
console.log(res);//Helloword!!
// slice
var resl = str.slice(1, 5);
console.log(res1);//e11o
// 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);//11owo
// 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?
6.6 案例:判断用户名是否合法
案例需求:用户名长度在3~10范围内,不能出现敏感词admin的任何大
var res = prompt('请您输入用户名')
if (res.length< 3 ll res.length > 10) f
alert('用户名长度为3-10位,请您重新输入')
else if (res.toLocaleLowercase().indexof('admin')!=-1 ||res.toUppercase().indexof('admin')!=-1) f
alert('不能出现敏感词admin')
3 else f
alert('恭喜您,该用户名可以使用’);