目录
数组的属性和方法
属性:
length属性:获取数组的长度。
var arr=["apple","red",12345,true,789];
console.log(arr.length);//数组长度为5
方法:
1、改变原数组的方法(!important)
①push() 向数组中添加数组元素到数组最后,然后返回当前数组的长度(可以添加一个或多个)
②pop() 删除数组最后一个元素(每次只能删除一个),并返回删除的数据
这里我们可以发现,①②方法如果在一起用,就能实现类似于栈的数据结构。这在《JavaScript高级程序设计》这本书中也有讲解。
③unshift() 向数组头部添加数据,可以是单个元素也可以是数组,然后返回当前数组的长度
④shift() 删除数组第一个元素,每次只能删除一个,返回被删除的元素
有了前面实现栈操作的想法,这里我们看到shift() 删除数组第一元素,也能想到,将它和①push()方法搭配就能实现另一种数据结构---队列("first-in-first-out-先进先出")的数据结构。课本讲解如下:
var arr=["apple","red",12345,true,789];
console.log(arr.length);//输出数组长度:结果 7
arr.push("banana","yellow");//向数组中添加数组元素到数组最后,然后返回当前数组的长度
console.log(arr);//结果:["apple", "red", 12345, true, 789, "banana", "yellow"]
arr.pop();// 删除数组最后一个元素,每次只能删除一个
console.log(arr);//["apple", "red", 12345, true, 789, "banana"]
arr.unshift(['a','b','c']);
arr.unshift("fruits");// 向数组头部添加数据,可以是单个元素也可以是数组,然后返回当前数组的长度
console.log(arr);//结果:["fruits", Array(3), "apple", "red", 12345, true, 789, "banana"]
arr.shift();//删除数组第一个元素,每次只能删除一个
console.log(arr);//结果: [Array(3), "apple", "red", 12345, true, 789, "banana"]
⑤reverse() 对数组进行倒序处理(会修改原数组)
var arr1=["apple","red",80,true];
var arr2 = arr1.reverse();
console.log(arr2);//结果:[true, 80, "red", "apple"]
⑥sort() 排序
//sort排序
var arr=[1,13,2,7,3,9,0];
arr.sort();//默认按照字符串排序的
console.log(arr);//[0,1,13,2,3,7,9]
应用一:sort自定义排序(冒泡排序)
// 改变排序方式
// 1.必须有两个形参(a,b)
// 2.看返回值,返回值为负,前面的数放在前面;为正时,后面的数在前面;为0不动
var arr=[1,13,2,7,3,9,0];
arr.sort(function(a,b){//每次传两个值
return a-b; //升序 前面和后面比较,生出正负值
//return b-a; //降序
});
console.log(arr); // [0, 1, 2, 3, 7, 9, 13]
应用二:用sort给一个有序数组乱序
// 知识点:Math.random()//返回[0,1)开区间数,包括0不包括一
var arr=[1,2,3,4,5,6];
arr.sort(function(){
return Math.random()-0.5;
});
console.log(arr);//随机排序
例子:定义三个对象,每个对象有姓名,年龄,性别属性,实现按属性值排序。
根据年龄排序,根据姓名长度排序,根据姓名字节长度排序。
var person1={
name:"mynameisshort",
age:18,
sex:"male",
}
var person2={
name:"我的名字最长yeah",
age:28,
sex:"female"
}
var person3={
name:"我的名字还好",
age:38,
sex:"male"
}
var arr=[person1,person2,person3];
//计算字节函数
function nameBytes(str){
var num=str.length;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>255){
num++;
}
}
return num;
}
//排序
arr.sort(function(a,b){
// return a.age-b.age;//按年龄升序
// return a.name.length-b.name.length;//按姓名字符串长度排序
// return nameBytes(a.name)-nameBytes(b.name);//按姓名字符串字节长度排序
})
console.log(arr);
⑦splice() 删除、修改或向数组中添加数据。
- 删除数据:第一个参数是从什么位置开始,第二个参数是删除多少个元素
var arr1 = [1,2,3,4];
console.log(arr1);
var arr2 = arr1.splice(1,2);//从下标为1的位置开始删除,删除2个元素
console.log(arr1) // [1,4]
console.log(arr2) // [2,3] 返回被删除的元素
- 修改数据:第一位是从什么位置开始,第二位是需要替换多少位,第三位开始是替换成的新的内容
var arr2 = arr1.splice(1,2,'aa');//从下标为1的地方开始,将之后的2个元素修改为 'aa'
console.log(arr1) // [1, "aa", 4]
var arr2 = arr1.splice(1,2,'aa','bb','cc');
//从下标为1的地方开始将之后的2个元素修改为 'aa','bb','cc'
console.log(arr1) // [1, "aa", "bb", "cc", 4]
- 添加数据:综合了删除数据和修改数据,三个参数分别是,第一位是从什么位置开始(0代表从头部开始,arr.length代表从尾部开始),第二位参数改为0,表示不替换,第三位开始是要添加的内容。
var arr2 = arr1.splice(1,0,'aa');
console.log(arr1) // [1, "aa", 2, 3, 4]
var arr2 = arr1.splice(1,0,'aa','bb','cc'); // 除了头部和尾部的添加
console.log(arr1) // [1, "aa", "bb", "cc", 2, 3, 4]
var arr2 = arr1.splice(0,0,'aa','bb','cc'); // 头部添加
console.log(arr1) // ["aa", "bb", "cc", 1, 2, 3, 4]
var arr2 = arr1.splice(arr2.length,0,'aa','bb','cc'); // 尾部添加
console.log(arr1) // [1, 2, 3, 4, "aa", "bb", "cc"]
⑧清空数组:
- arr=[];
- arr.length=0;
- splice(0,arr.length)
2、不改变原数组的方法
①concat() 将两个或多个数组组合成一个数组。
var arr1=["apple","red",80,true];
var arr2=["banana","yellow",100,false];
var arr3=["melon","green",800,true];
var arr4 = arr3.concat(arr2, arr1);//arr3连接arr2和arr1
console.log(arr4)
//结果:["melon", "green", 800, true, "banana", "yellow", 100, false, "apple", "red", 80, true]
数组连接也可以用数组解构扩展符来实现,同样不会修改原有数组
var arr1=["apple","red",80,true];
var arr2=["banana","yellow",100,false];
var res=[...arr1,...arr2]
console.log(res)//(8) ["apple", "red", 80, true, "banana", "yellow", 100, false]
②slice(m,n) 截取数组 从m位开始截取,截取到n位,负数表示倒数第几位(包含开始的m,不包含结束的n)
var arr1 = [1,2,3,4];
console.log(arr1);
var arr2=arr1.slice(0,2);//从第0位开始截取到第2位,负数表示倒数第几位
console.log(arr2);
③ join() 将数组转换为字符串(可以在括号里指定连接符号,例如join("-")如果没有指定参数,默认调用toString()方法
逆方法<——>split()字符串方法,spilt() 将字符串拆分成数组,与join()可逆
var arr1 = [1,2,3,4];
console.log(arr1);
console.log(typeof arr1);// object
var str = arr1.join();//连接
console.log(str);//1,2,3,4
console.log(typeof str);// string
var str = arr1.join('-');//可以在括号里指定连接方式,用-连接
console.log(str);//1-2-3-4
var str = arr1.join('');/空字符串连接
console.log(str);//1234
split() 将字符串拆分成数组,与join可逆
var arr1 = [1,2,3,4];
var str = arr1.join('-');//可以在括号里指定连接方式,用"-"连接
console.log(str);//1-2-3-4
var arr2=str.split("-");//让截取符消失
console.log(arr2);//["1", "2", "3", "4"]
join方法应用
//题目:拼接下列企业名称字符串
var str1="alibaba";
var str2="tencent";
var str3="toutiao";
var str4="wangyi";
var str5="meituan";
//方法一:使用循环连接(不建议)
//理由:字符串:栈中存储,使用for循环拼接,特点:"first in last out" (频繁拿出,内存占用过多,不建议)
//方法二:join()方法
var arr=[str1,str2,str3,str4,str5];
// 数组:散列结构,在堆中,效率高,占用内存小
var str=arr.join(" ");//传空字符串,省略连接符;不传,默认按","连接;这里用空格作为连接符
console.log(str);//alibaba tencent toutiao wangyi meituan
3、数组的位置方法
数组类型有两个位置方法:indexOf和lastIndexOf。这两个方法都接收两个参数,要查找的项和(可选的)表示查找起点位置的索引。 indexOf 方法从数组开头(位置0)开始向后查找,lastIndexOf 方法则是从数组末尾向前查找。
下面是参数的详细信息:
- searchValue : 一个字符串,表示要搜索的值
- fromIndex : 在调用字符串内的位置,从开始搜索。它是介于0-字符串的长度任意整数。缺省值是0。
返回值:
这两个方法都返回要查找的项在数组中的位置,找到了就会停止查找,或者在没找到的情况下返回 -1。在比较第一个参数与数组中的每一项时,使用全等操作符(===)。
直白一点的理解就是:
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,是正向查询。
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,是逆向查询。
这里有一个问题:
indexOf与lastIndexOf的区别仅仅在于顺序的问题,一个是从前往后查询该项第一次出现的位置,一个是从后往前查找该项第一次出现的位置。但这个位置是指的在原数组中的位置,不以方向为改变的。也就是当indexOf的参数只出现一次时,lastIndexOf与indexOf是一样的。
数组中没有重复值时,
var arr=[11,22,33,44,55,66];
console.log(arr.indexOf(11));//0
console.log(arr.indexOf(44));//3
console.log(arr.lastIndexOf(11));//0
console.log(arr.lastIndexOf(44));//3
数组中存在重复值时,
var arr1=[11,22,33,11,44,55,44,66];
console.log(arr1.indexOf(11));//0
console.log(arr1.indexOf(44));//4
console.log(arr1.lastIndexOf(11));//3
console.log(arr1.lastIndexOf(44));//6
利用这一点也可以判断重复数组。原理:indexOf()和lastIndexOf()所返回的index不一致则说明有重复值
function isRepeat(array,val){
if (!Array.isArray(array)) return false;
if(array.indexOf(val)===array.lastIndexOf(val)){
return false;
}
return true;
}
4、数组的迭代方法
具体例子:
var arr=[1,0,3,2,6,0.5];
//筛选数组中>2的元素
var filterResult=arr.filter(function(item,index,array){return (item>2);});
console.log(filterResult);//[3, 6]
//对数组元素进行-2处理并输出处理后的新数组
var mapResult=arr.map(function(item,index,array){return (item-2);});
console.log(mapResult);// [-1, -2, 1, 0, 4, -1.5]
//判断数组中是否每一项都>2 ,如果成立,返回true,不成立,返回false
var everyResult=arr.every(function(item,index,array){return (item>2);});
console.log(everyResult);//false
//判断数组中是否存在有一项>2 ,如果成立,返回true,不成立,返回false
var someResult=arr.some(function(item,index,array){return (item>2);});
console.log(someResult);//false
//遍历数组
var forEachResult=arr.forEach(function(item,index,array){console.log(index,array);})
console.log(forEachResult);
结果: