1.数组对象
JavaScript中的数组对象可以使用new Array或自变量"[]"来创建。
-
1.1数组类型检测
数组类型检测有两种：instanceof运算符和使用Array.isArray()方法。
示例代码：
var arr=[]; var obj={}; //第一种方法 console.log(arr instanceof Array);//输出结果:true console.log(obj instanceof Array);//输出结果:false //第二种方法 console.log(Array.isArray(arr));//输出结果:true console.log(Array.isArray(obj));//输出结果:false1.2添加或删除数组元素
JavaScript数组对象提供了添加或删除元素的方法，可以实现在数组的末尾或开头添加新的数组元素，或在数组的末尾或开头移出数组元素。
方法名 功能描述 返回值 push(参数1...) 数组末尾添加一个或多个元素，会修改原数组 返回数组的新长度 unshift(参数1...) 数组开头添加一个或多个元素(把数组长度-1，无参数)，会修改原数组 返回数组的新长度 pop() 删除数组的最后一个元素，若是空数组则返回undefine，会修改原数组 返回删除元素的值 shift() 删除数组的第一个元素，若是空数组则返回undefine，会修改原数组 返回第一个元素的值 示例代码：
//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'));//返回的是数组长度 输出结果为：6 console.log(arr);//修改原来的数组 输出结果为['red','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);//修改原来的数组 输出结果为['black','white','yellow']注意：
-
push()和unshift()方法的返回值是新数组的长度，而pop()和shift()方法返回的是移出的数组元素。
1.3案例：筛选数组
案例需求：要求在包含工资的数组中，剔除工资达到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);1.4数组排序
JavaScript数组对象提供了数组排序的方法，可以实现数组元素排序或者点到数组元素的顺序等。方法如下：
方法 功能描述 reverse() 颠倒数组中元素的位置，该方法会改变原数组，返回新数组 sort() 对数组中元素进行排序，该方法会改变原数组，返回新数组 示例代码：
//reverse var arr=['red','blue','green']; console.log(arr.reverse()); console.log(arr);
sort有两种情况：
-
不传参数
-
传参数：参数是用来指定按某种顺序进行排列的函数
- 即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,3,1]
return a-b;//升序 //[1,4,5,6,15,22,32,73]
})
console.log(arr1);
注意：
-
需要注意的是：reverse()和sort()方法的返回值是排序后的数组
-
sort如果调用该方法时没有使用参数，按照字符编码的顺序进行排序
1.5数组索引
在开发中，若要查找指定的元素在数组中的位置，可以利用Array对象提供的检索方法。检索方法如下：
| 方法 | 功能描述 |
|---|---|
| indexOf() | 返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1 |
| lastlandexOf() | 返回指定元素在数组中的最后一个索引，如果不存在则返回-1 |
示例代码：
indexOf()
--参数1：要查找的元素
--参数2：开始查找的位置
--注意：如果第二个参数是-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。
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
lastlndex()
--如果改制大于或等于数组的长度，则整个数组会被查找
--如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组任然会被从后向前查找。
--如果该值为负时，其绝对值大于数组长度，则方法返回-1，技术组不会被查找。
var animals=['Dodo','Tiger','Penguin','Dodo'];
console.log(animals.lastlndex('Dodo'));//输出结果为：3
console.log(animals.lastlndex('Tiger'));//输出结果为：1
注意：
-
默认都是从指定数组索引的位置开始检索，并且检索方式与运算符“===”相同，即全等时才会返回比较成功的结果。
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);
1.7数组转换为字符串
在开发中，可以利用数组对象的join()和toString()方法，将数组转换为字符串。方法如下：
| 方法 | 功能描述 |
|---|---|
| toString() | 把数组转换为字符串，逗号分割每一项 |
| join() | 将数组的所有元素连接到一个字符串中 |
示例代码：
//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
1.8其他方法
JavaScript还提供了很多其他常用的数组方法。例如，填充数组、链接数组、截取数组元素等，方法如下：
| 方法 | 功能描述 |
|---|---|
| fill() | 用一个固定值填充数组中指定下标范围内的全部元素 |
| splice() | 通过删除或替换现有元素或者原地添加新的元素来修改数组，返回被删除项目的数组 |
| slice() | 数组截取，参数为slice(begin,end),包含begin，但不包含end,返回被截取得新数组 |
| concat() | 连接两个或多个数组，不影响原数组，返回一个新数组 |
注意：
-
slice()和concat()方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会对原数组产生影响。
示例代码：
fill
--参数：value start end
--value:用来填充数组元素的值
--start:基于零的索引，从此开始填充，转换为整数。
--end:基于零的索引，自此结束填充，转换为整数。fill()填充到但不包含end索引。
//fill var array1=[1,2,3,4]; 0 1 2 3 //填充0，从数组索引2（包含）开始到4（不包含）结束 console.log(array1.fill(0,2,4)); //输出结果为： Array[1,5,5,5] //填充6 console.log(array1.fill(6)); //输出结果为： Array[6,6,6,6]
splice
--参数：start deleteCount item1...
--start:执行修改的开始位置（从0计数）
--deleteCount：整数，表示要移除的数组元素个数
--item1：要添加进去数组的元素
//从索引2的位置开始删除0各元素，插入'小红' 0 1 2 3 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：['小米','小明','小刚','小蔡','小张','小李'] //被删除的元素：[],没有元素被删除 //从索引3的位置开始删除1个元素 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：['小兰','小蔡'] //被删除的元素：['小刚','小张','小李']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:['小兰','小蔡','小刚','小张','小李']; //被删除的元素：['小张','小李']
concat
//连接两个数组 const letters=['a','b','c']; const number=[1,2,3]; const concatArr=letter.concat(numbers); console.log(letters);//['a','b','c'] console.log(concatArr);//['a','b','c',1,2,3] //连接3个数组 const num1=[1,2,3]; const num2=[4,5,6]; const num2=[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 = www.martinhan.com/login?name=.... 最后的输出结果为name:zs;age:18}
var url = 'http://ww.martinhan.com/login?name
最后的输出结果为{name:zs;age:18}
var url ='http://www.martinhan.com/login?name:function getParams(url) {
//1.首先把 网址分为2部分 用 ? 分割
// 2。得到 ?+ 1 的索引位置
var index = url.index0f('?') + 1;
// 3.得到 ? 后面的字符串
var params = url.substr(index);console.log(params);
// name=zs&age=18
// 4.把 得到 这串字符 继续用 & 分隔开
var arr = params.split('&');// console.log(arr);
var o=;
// 5.把 数组里面的每一项，继续用 = 分割
for (var i = 0;i < arr.length; i++) {var newArr = arr[i].split('=');// console.log(newArr);
// 完成赋值 操作
o[newArr[o]] = newArr[1];
return o;
console.log(getParams(url));
2.字符串对象
2.1字符串对象的使用
字符串对象使用new String()来创建，在String构造函数中传入字符，这样就会在返回的字符串对象中保存这个字符串。
语法:
var str=new String('送你一朵哟小红花');
console.log(str);
console.log(str.length);//输出结果为：7
//看不到常见的属性和方法
var str1='送你一朵哟小红花';
console.log(str1);
2.2根据字符返回位置
字符串对象提供了用于检索元素的属性和方法，字符串对象的常用属性和方法如下：
| 方法 | 功能描述 |
|---|---|
| IndexOf('要查找的值'，开始的位置) | 发明会指定内容在原字符串中的位置，如果找不到就反悔-1，开始的位置是index索引号；参数2可选，规定在字符串中开始检索的位置。它的合法取值是0到stringObject.length-1。如果省略该参数，则将从字符串的首字符开始检索。 |
| lastlndexOf('要查找的值'，开始的位置) | 从后往前找，只找第一个匹配的，如果没有找到匹配字符串则返回-1；参数2可选，规定在字符串中开始检索的位置。它的合法取值是0到stringObject.length-1。如果省略该参数，则将从字符串的首字符开始检索。 |
示例代码：
//indexOf:参数1:要搜索的字符串；参数2：可选
var str=new String('送你一朵小红花，送你一朵小红花');
//查找 花 首次出现的位置
vae 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);//16
console.log(res1);//输出的结果：17
console.log(res3);//输出的结果：4
注意：
-
indecOf和lastlndexOf都区分大小写
案例代码：
案例需求：要求在一组字符串中，找到所有指定元素出现的位置及次数。字符串为'Hello World,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表示可以找到0的时候
console.log(index);//输出e出现的位置，此处输出结果为：4 18 31 35
index=str.indexOf('e',index+1);//indexOf('要查找的对象'，位置)
//从第一次出新的位置，之后开始查找，在赋值给index;
num++;
}
2.3根据位置返回字符
字符串对象提供了用于获取字符串中的某一个字符的方法。方法如下：
| 成员 | 作用 |
|---|---|
| charAt(index) | 获取index位置的字符，位置从0开始计算 |
| charCodeAt(index) | 获取index位置的字符的ASCLL码 |
| str[index] | 获取指定位置处的字符（HTML5新增）和charAt等效 |
示例代码：
var str='andy';
//获取index位置的字符
console.log(str.charAt(0));//输出结果为：a
//获取index位置的字符的ASCLL码
console.log(str.charCodeAt(0));//输出结果为：97
for(var i=0;i<str.length;i++){
//获取指定位置处的字符
console.log(str[.charCodeAt[i]);
}
2.4案例：统计出现最多的字符和次数
案例需求：使用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){
obj[chars]=1;//给当前对象的属性对应的属性赋值为1
}else{
obj[chars]++//如果获取得到了当前字符串，即对应的属性值为+1
}
}
console.log(obj);
//2.统计出出现最多的字母
var max=0; //保存出现次数最大值
varvmaxStr=''; //保存出现次数最多的字符
//2.1遍历对象的属相和方法
for(var key in obj){
//2.2将对象中属性的值和max进行比较
if(obj[key]>max){
max=obj[key];
maxStr=key;
}
}
console.log('出现次数最多的字符:'+maxStr+',共出现了'+max+'次');
2.5字符串操作方法
字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。字符串对象的常用属性和方法如下：
| 方法 | 作用 |
|---|---|
| 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);//helloworld
//toUpperCase
var res6=str.toUpperCase();
console.log(res6);//HELLOWORLD
//split
var str1='How are you doing today?';
var res7=str1.split(' ');
console.log(res7);//['How','are','you','doig','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?
2.6案例：判断用户名是否合法
案例需求：用户名长度在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('恭喜您，该用户名可以使用')；
}
3.值类型与引用类型
在JavaScript中，简单数据类型（如字符串型、数字型、布尔型、undefined、null）又称为值类型，在存储时，变量中存储的实质本身，因此叫做值类型。
复杂数据类型（对象）又成为引用类型
引用类型的特点是，变量中保存的仅仅是一个引用的地址，党对变量进行赋值时，并不是将对象赋值了一份，而是将两个变量指向了同一个对象的引用。
示例代码：
字符串的不可变质的是里面的值不可变，看上去可以改变内容，其实是地址变了，新开辟了以和内存空间。
var str='abc';
str='hello';
//当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str=' ';
for(var i=0;i<100000;i++){
str+=i;
}
console.log(str);//这个结果需要花费大量时间来显示因为需要不断的赖皮新的空间
案例代码：
代码中的obj和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);//输出结果：小红
上述代码运行后，obj1和obj2两个变量引用了同一个对象，此时，无论是使用obj操作对象还是使用obj2操作对象，实际操作的都是同一个对象。
当obj1和obj2两个变量指向了同一个对象后，如果给其中一个变量（如obj）重新赋值为其他对象，或者重新赋值为其他值，则obj将不再引用原来的对象，但obj2仍然在引用原来的对象。
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);//输出结果：小红
扫一扫
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
