JavaScript的数组对象和字符串对象

数组对象

JavaScript内的数组对象 可以使用new Array或者**字面量“[ ]”**来创建,并且可以通过调用数组对象提供的一些方法来实现对数组的操作,比如添加或者删除数组元素,数组排序,数组索引等等.

数组类型检测

在开发中,有时候需要检测变量的类型是否为数组,数组检测有两种常见的方式:分别是使用instanceof运算符和使用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
//在上述代码中,检测结果为true,说明给定的变量是一个数组,为false说明给定的变量不是一个数组

添加或删除数组元素

JavaScript数组对象提供了添加和删除元素的方法,可以实现在数组的末尾或开头添加新的数组元素,或者在数组的末尾或开头一处数组元素

注意: push()和unshift()方法的返回值是新数组的长度,而pop()和shift()方法返回的是移出的数组元素.

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

示例代码

//push
var arr1=['pink','black','white','green']
console.log(arr1.push('purple'));//返回的是数组长度输出结果为：5
console.log(arr1);
//修改了原来的数组,输出结果是['pink','black','white','green','red']

//unshift
var arr2=['pink','black','white','brown']
console.log(arr2.unshift('purple','blue'));//返回的是数组长度输出结果为：6
console.log(arr2);
//修改了原来的数组输出结果为['purple','blue','pink','black','white','brown']

//pop
var arr3=['pink','black','white','green']
console.log(arr3.pop());//返回的是删除的元素输出结果为：green
console.log(arr3);
//修改了原来的数组输出结果为['pink','black','white']

//shift
var arr4=['a','b','c','d']
console.log(arr4.shift());//返回的是删除的元素(第一个)输出结果为：a
console.log(arr4);//修改了原来的数组输出结果为['b','c','d']

[案例]筛选数组

要求: 在包含工资的数组中,剔除工资达到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)
//输出结果是:(3)[1500,1200,1800]

数组排序

JavaScript数字对象提供了数组排序的方法,可以实现数组元素排序或者颠倒数组元素的顺序等.

排序方法

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

注意: reverse()和sort()方法的返回值是新数组的长度

示例代码

//reverse
var arr=['red','blue','green']
console.log(arr.reverse());//输出的结果为：['green','blue','red']
console.log(arr);//改变原数组['green','blue','red']

//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){
    //returnb-a; //降序 //[73,32,22,15,6,5,4,1]
    return a-b;  //升序  //[1,4,5,6,15,22,32,73]
})
console.log(arr1);

**注意:**如果调用sort()方法时没有传入参数,则按照字符编码的顺序进行排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D3JpHV0X-1682170289560)(file:///C:\Users\17208\Documents\Tencent Files\1720815204\Image\C2C\95DCB6C0C441961AA493CBB7212BD3D5.jpg)]

数组索引

在开发中,如果要查找指定的元素在数组中的位置,中科院利用Array对象提供的检索方法,

检索方法

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

默认都是从指定数组的索引的位置开始检索,并且检索方式与运算符“===”仙童,即是只有全等时才会返回比较成功的结果

示例代码:

var arr=['a','b','c','d','b']
console.log(arr.indexOf('b'))//输出结果为：1
//找到第二个b的索引  
console.log(arr.indexOf('b',2));//输出结果为：4
console.log(arr.indexOf('g'));//输出结果为：-1

var color=['pink','green','purple','pink']
console.log(color.lastIndexOf('pink'));//输出结果为：3
console.log(color.lastIndexOf('green'));//输出结果为：1

[案例]数组去除重复元素

//声明数组
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) //输出结果是:(4) [1, 2, 3, 4] 

数组转换成字符串

方法	功能描述
toString()	把数组转换为字符串，逗号分隔每一项
join(‘分隔符’)	将数组的所有元素连接到一个字符串中

示例代码:

//toString
var arr=['a','b','c']
console.log(arr.toString());//输出结果为:a,b,c
//join
console.log(arr.join());//输出结果为:a,b,c
console.log(arr.join(''));//输出结果为:abc
console.log(arr.join('-'));//输出结果为:a-b-c

注意: join()和toString()方法可将多维数组转换成字符串默认情况下用逗号连接.join()方法可以将指定的连接数组元素的符号.另外,当数组元素为undefined,null或空数组,对于的元素会被转换成空字符串

其他方法

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

注意: slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,了我的方法是在执行之后对原数组返回新数组

示例代码:

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

//splice 
//从索引2的位置开始删除0个元素，插入“drum”
var myFish=["小米","小明","小张","小李"]
var removed=myFish.splice(2,0,"小红")
console.log(myFish)
console.log(removed);//运算后的myFish:["小米","小明","小红","小张","小李"]
//被删除的元素：[],没有元素被删除

//从索引2的位置开始删除0个元素，插入“drum”和"guitar"
var myFish=["小米","小明","小张","小李"]
var removed=myFish.splice(2,0,'小刚','小蔡')
console.log(myFish)
console.log(removed);//运算后的myFish:["小米","小明","小刚","小蔡","小张","小李"]
//被删除的元素：[],没有元素被删除

//从索引3的位置开始删除1个元素
var myFish=["小米","小明","小刚","小蔡","小张","小李"]
var removed=myFish.splice(3,1)
console.log(myFish)
console.log(removed);
//运算后的myFish:['小米','小明','小刚','小张','小李']
//被删除的元素：['小蔡']

//从索引2的位置开始删除1个元素，插入“trumpet”
var myFish=["小米","小明","小刚","小蔡","小张","小李"]
var removed=myFish.splice(2,1,"小兰")
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)
console.log(array3)
console.log(getArr)
//运算后的array3:['小兰','小蔡','小刚','小张','小李'];
//被截取的元素:['小刚','小张']
//截取后两个元素vararray3=['小兰','小蔡','小刚','小张','小李'];
var getArr=array3.slice(-2)
console.log(array3)
console.log(getArr);
//运算后的array3:['小兰','小蔡','小刚','小张','小李'];//被截取的元素:['小张','小李']

//concat 
//连接两个数组
const letters=['a','b','c']
const numbers=[1,2,3]
const concatArr=letters.concat(numbers)
console.log(letters);//['a','b','c']
console.log(concatArr);//['a','b','c',1,2,3]
//连接三个数组
const num1=[1,2,3]
const num2=[4,5,6]
const num3=[7,8,9]
const numArr=num1.concat(num2,num3)
console.log(numArr);//[1,2,3,4,5,6,7,8,9]
//将值连接到数组
const arr1=['a','b','c']
const newArr1=letters.concat(1,[2,3])
console.log(newArr1);//['a','b','c',1,2,3]

练习：var url=’http://www.martinhan.com/login?name=zs&age=18’

最后输出结果是:{name:zs;age:18}

var wz='http://www.martinhan.com/login?name=zs&age=18'
        function getNameAge(wz){
            //1.首先把网址 分为2部分用?分割
            //2.得到？+1的索引位置
            var index1=wz.indexOf('?')+1;
            //3.得到？后面的字符串
            var nameAge=wz.substr(index1)
            console.log(nameAge);//name=zs&age=18
            //4.把得到这串字符继续用&分隔开
            var arr=nameAge.split('&');
            
            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(getNameAge(wz));
        

字符串对象

在JavaScript中,字符串对象提供了一些用于对字符串进行处理的属性和方法,可以很方便地实现字符串的查找,截取,替换,大小写转换等操作

字符串对象的使用

字符串对象使用new String()来创建，在String构造函数中传入字符串，这样就会在返回的字符串对象中保存这个字符串。

####示例代码：

var str=new String('When you come around（当你靠近）')
console.log(str)
console.log(str.length);//输出结果为：26
//看不到常见的属性和方法
var str1='When you come around（当你靠近）'
console.log(str1)
console.log(typeof str1)//输出结果:string
console.log(str instanceof String)//输出结果:false

根据字符返回位置

字符串对象对于检索元素的方法

方法	功能描述
indexOf(‘要查找的值’,开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回 -1；开始的位置是index 索引号;，开始参数2可选，规定在字符串中开始检索的位置。它的合法取值是 0 到的位置)stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。
lastIndexOf(‘要从后往前找，	从后往前找,只找第一个匹配的，如果没有找到匹配字符串则返回 -1；参数2可选，规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

示例代码

		//indexOf：参数1：要搜索的子字符串；参数2：可选
        var str=new String('When you come around，When you come around');
        //查找d首次出现的位置
        var res1=str.indexOf('d');
        //查找d从第19个位置查找d，第一次出现的位置
        var res2=str.indexOf('d',23)
        console.log(str)
        console.log(str.length);//41
        console.log(res1);//输出结果：19
        console.log(res2);//输出结果：40
        //lastIndexOf：参数1：要搜索的子字符串；参数2：可选
        var str1=new String('zzxsdsgzzx');
        //查找z从最后一个字符开始，第一次出现的位置
        var res3=str1.lastIndexOf('z');
        //查找z从第8个位置开始倒数，第一次出现的位置
        var res4=str1.lastIndexOf('z',8);
        console.log(str1)
        console.log(res3)//输出结果是:8
        console.log(res4)//输出结果是:8

**注意:**indexOf()和lastIndexOf()都区分大小写

案例

var str=new String('When you come around')
var str=new String('When you come around')
        var index=str.indexOf('o')
        var num =0
        while (index!=-1){
            console.log(index)    //依次输出:6,10,16
            index =str.indexOf('o',index+1)
            num++
        }
        console.log('o出现的次数是:'+num)  //o出现的次数是:3

根据位置返回字符

字符串对象用于获取某一个字符的方法:

成员	作用
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])
}

[案例]统计出现最多的字符和次数

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…)	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='Howareyoudoingtoday?'
var res7=str1.split('');
console.log(res7);//['How','are','you','doing','today?']
var res8=str1.split()
console.log(res8);//['Howareyoudoingtoday?']
var res9=str1.split('',3)
console.log(res9);//['How','are','you']
//replace
var res10=str1.replace('',',')
console.log(res10);//How,areyoudoingtoday?

[案例]判断用户名是否合法

**要求:**长度在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中,基本数据类型(字符串型,字符型,数字型,布尔型,undefined,null)又被称为值类型,复杂数据类型(对象)又被称为引用类型

引用类型:变量中保存的是一个引用的地址,当对变量进行赋值时,并不是将对象复制了一份,而是将两个变量指向了同一个对象的引用

示例代码:

var str='abc';str='hello';
//当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str=''
for(var i=0;i<100000;i++){
    str+=i
}
console.log(str);//这个结果需要花费大量时间来显示因为需要不断的开辟新的空间

var obj1={name:'小明',age:18}
var obj2=obj1
//obj1只想了一个新创建的对象
obj1={name:'小红',age:17}
//obj2仍然指向原来的对象
console.log(obj2.name)  //输出结果是:小明

当一个对象只被一个变量引用时,如果中国变量又被重新赋值,则该对象就会变成没有任何变量引用的取款,这个时候就会由JavaScript的垃圾回收机制自动释放

当引用类型的变量作为函数的参数来传递时,其效果和变量之间的赋值类似;如果在函数的参数中修改变量的属性或方法,则在函数外面通过引用这个对象的变量访问到的结果也是修改之后的

示例代码:

function change(obj){
    obj.name='小红'  //在函数内修改了变量的属性
}
var stu={name:'小明',age:18}
change(stu)
console.log)(stu.name)  //输出结果:小红