菜鸟100天逆袭第2天：数组与字符

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('恭喜您，该用户名可以使用’)；