数组对象与字符串对象的使用

一.数组对象

数组类型检测有俩种常用的方式，分别是使用instanceof运算符和使用Array.isArray()方法。

示例代码：

var arr = [];

var ojb = {};

console.log(arr instanceof Array);

console.log(obj instanceof Array);

console.log(Array.isArray(arr));

console.log(Array.isArray(obj));

2.添加或删除数组元素

JavaScript数组对象提供了添加或删除元素的方法，可以实现在数组的末尾或开头添加新的数组元素，或在数组的末尾和开头移出数组元素。方法如下：

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

示例代码：

---

//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);//修改了原来的数组， 输出结果为 ['pink','black','white','yellow','red','blue']

//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);//修改了原来的数组， 输出结果为 ['black','white','yellow']

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

3.案例：筛选数组

案例需求：要求包含工资中的数组，剔除工资达到2000或以上的数据，把小于2000的数量新改到新的数组里。

---

var arr = [1500,1200,2000,2100,1800];

var newArr = []

for (var i =0;i < arrlength;i++){

    if(arr[i] < 2000){

     newArr.push(arr[i]);

}

}

console.log(newArr)；

 

4.数组排序

JavaScript数组对象提供了数组排列的方法，而pop()和shift()方法返回的是移出数组元素

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

示例代码：

reverse

---

//reverse

var arr = ['red','blue','green']

console.log(arr.reverse());//输出结果为：['green','blue','red']

console.log(arr);//改变原数组['green','blue','red']

sort有俩种情况：

不传参数；

传参数：参数是用来指定按某种顺序进行排列的函数

.即a和b是俩个将要被比较的元素

---

sort：如果调用该方法时没有使用参数，按照字符编码的顺序进行排序。
var arr1 = [1,4,5,6,73,32,22,15];

//不传参数的情况
console.log(arr1.sort());

//传参数：参数是用来指定按某种顺序进行排列的函数

/*

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);

5.数组索引

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

示例代码：

indexOf()

-参数1:要查找的元素  -参数2:开始查找的位置
--注意:如果第二个参数是-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查  找，以此类推。

---

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; 

console.log(beasts.indexof('bison'));
//输出结果为:1

//找到第二个bison的索号
console.loq(beasts.indexof('bison'， 2)); 

//输出结果为:4
console.log(beasts.indexof('giraffe')); 

//输出结果为:-1

lastIndexOf()
-如果该值大于或等于数组的长度，则整个数组会被查找。
-如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。  --如果该值为负时，其绝对值大于数组长度        ，则方法返回-1，即数组不会被查找.

]
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];  console.log(animals.lastIndexof('Dodo'));
//输出结果为:3
console.log(animals.lastIndexof('Tiger')); 

//输出结果为:1

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

6 案例:数组去重
案例需求:要求在一组数据中，去除重复的元素

//声明数组
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数组转换为字符串
  在开发中，可以利用数组对象的join()和toString()方法，将数组转换为字符串。方法如下:

示例代码
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

8.其他方法
JavaScript还提供了很多其他常用的数组方法。例如，填充数组、连接数组、截取数组元素等。方  法如下:

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

示例代码：

//fill

var array1 = [1, 2, 3, 4];
// 填充0，从数组索引2(包含)开始到4(不包含)结束
console.1og(array1.fill(0,2,4));// 输出结果为: Array [1，2，0，0]
 
//填充5，从数组索引1(包含)开始
console.1og(array1.fill(5.1);
// 输出结果为: Array[1，5，5，5]
 
// 填充6
console.1og(array1.fill(6));
// 输出结果为: Array[6，6，6，6]

 //splice
        var myFish = ["小刘 ","小王","小邹","小梦"];
        var removed = myFish.splice(2,0,"小黄");
        console.log(myFish);     //输出结果：(5)["小刘 ","小王","小黄","小邹","小梦"]
        console.log(removed);    //输出结果：(0) []
 
        var myFish = ["小米","小宝","小葛","小娜"];
        var removed = myFish.splice(2,0,"小安","小沛");
        console.log(myFish);    //输出结果：(6) ['小米', '小宝', '小安', '小沛', '小葛', '小娜']
        console.log(removed);    //输出结果：(0) []
 
        var myFish = ["小米","小宝","小葛","小娜"];
        var removed = myFish.splice(3,1);
        console.log(myFish);    //输出结果：(3) ['小米', '小宝', '小葛']
        console.log(removed);   //输出结果：(1) ['小娜']

 

        var myFish = ["小米","小宝","小葛","小娜"];
        var removed = myFish.splice(0,2,"小安","小沛","小豪");
        console.log(myFish);    //输出结果：(5) ['小安', '小沛', '小豪', '小葛', '小娜']
        console.log(removed);   //输出结果：(2) ['小米', '小宝']
 
        var myFish = ["小米","小宝","小葛","小娜"];
        var removed = myFish.splice(myFish.length - 3,2);
        console.log(myFish);    //输出结果：(2) ['小米', '小娜']
        console.log(removed);   //输出结果：(2) ['小宝', '小葛']
 
        var myFish = ["小米","小宝","小葛","小娜"];
        var removed = myFish.splice(2);
        console.log(myFish);   //输出结果：(2) ['小米', '小宝']
        console.log(removed);  //输出结果：(2) ['小葛', '小娜']
 
 

//slice

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

 
  //concat
        const letters = ['a','b','c'];
        const numbers = [1,2,3];
 
        const concatArr = letters.concat(numbers);
        console.log(letters);    //输出结果：(3) ['a', 'b', 'c']
        console.log(concatArr);   //输出结果：(6) ['a', 'b', 'c', 1, 2, 3]
 
        const num1 = [1,2,3];
        const num2 = [4,5,6];
        const num3 = [7,8,9];
 

 

二.字符串对象：

1.字符串对象的使用

  示例代码：

 var str = new String('送你一朵小红花')
  console.log(str);
  console.log(str.length);    //输出结果：7
   //看不到常见的属性和方法
  var str1 =  '送你一朵小红花'
  console.log(str1);

 2.根据字符返回位置

成员	作用
indexOf(searchValue)	获取searchValue在字符串中首次出现的位置
LastIndexOf(searchValue)	获取searchValue在字符串中最后出现的位置

示例代码：

// indexof:参数1:要搜索的子字符串;参数2:可选
var str = new string('送你一朵小红花，送你一朵小红花'); // 查找 花首次出现的位置
var res = str.indexof('花');
// 查找花从第七个位置查找 花，第一次出现的位置
var res2 =str.indexof('花'，7);
 
console.1og(str);
console.1og(str.1ength);//7
console.1og(res);//输出结果:6
console.1og(res2);//输出结果:14

案例：判断用户名是否合法

案例需求:用户名长度在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('恭喜您，该用户名可以使用');
}

根据位置返回字符

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

 示例代码：
// 获取index位置的字符
console.log(str.charAt(0));//输出的结果为:a
 
// 获取index位置的字符的ASCII码
conso le.loa(str.charCodeAt(0))； //输出结果为:97(a的ASCTT码是97
for (var i=0:i<str.length;i++){
         //获取指定位置处的字符

console.log(str[i]);

}
 

 统计出现最多的字符和次数

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.1og('出现最多的字符是:"+maxstr +'，共出现了'+ max +'次')
 

 字符串操作方法方法

方法	作用
concat(str1, concat()	方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用，该方法没有改变原有字符串，会返回连接两个或多个字符串新字符串。
slice(start）	[截取从start位置到end(不包含end)位置之间的一个子字符串可提取字符串的某个部分，并以新的字符串返回被提取的部分
substring(start[,end]）	截取从start位置到end位置之间的一个子字符串，基本和slice相同，但是不接收负值
substr(start[,length])	截取从start位置开始到length长度的子字符串,从起始索引号提取字符串中指定数目的字符
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split([separator[ limit])	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.1og(res1);
 
// substring
var res2=str.substring(3);
var res3 =str.substring(3，7);
console.1og(res3);
 
// substr
var res4 =str.substr(2. 5); console.log(res4);//11oWo
 
// tolowerCase
var res5=str.toLocaleLowerCase0: console.1og(res5);//helloword
 
// toupperCase
var res6=str.toLocaleUpperCase(; console.1og(res6);//HELLOWORD
 
// split
var str1 = 'How are you doing today? var res7 = str1.split('');var str = 'abc';
str = 'he1lo';
var str = '';
for (var i = 0; i < 100000; i++) {
   str += i;
}
console.1og(str);
console.1og(res7);// ['How','are', 'you', 'doing', 'today?']
var res8 =str1.split():
console.1og(res8);//['How are you doing today?']
var res9 =str1.split(' '. 3);
console.1og(res9);// ['How', 'are', 'you']
// replace
var res10 =str1.replace('',',');
console.log(res10);//How,are you doing today?

判断用户名是否合法

示例代码:

var str = 'abc';
str = 'he1lo';
var str = '';
for (var i = 0; i < 100000; i++) {
   str += i;
}
console.1og(str);