数组
1.定义:数组是无序的值做有序的排列然后放在一个集合中,每一个值叫做元素,每个值存储的位置叫做下标,每个值存储的变量叫做下标变量
判断给入的元素是否是数组
var arr=[[1,2,3,[0,4,9,[7,9,0,[5,8,9]]]],[4,5,6]]
console.log(Array.isArray(arr))//true
特点
1.数组是一种紧密结构
2.删除其中一个元素,后面的元素就会往前挪动占位
3.插入一个元素,后面的元素将向后挪动
4.所以删除和插入速度慢,尤其是第一个元素,最后一个元素的插入和删除最快
5.数组因为有序排列,因此,我们可以使用数组做元素排序
6.数组仅用于存储值,至于值做什么,指代什么不需要考虑
7.如果要查找一个元素,需要从前向后一个个查找
8.数组因为有序,所有可以根据当前元素找到相邻的元素
// 当数组中元素不是引用类型（数值、布尔值、字符串、symbol、undefined、null、NaN）无法通过item直接修改值,要通过index修改
var arr=[1,2,3,4,5];
arr.forEach(function(item,index,arr){
arr[index]+=10;
})
console.log(arr);
//(5) [11, 12, 13, 14, 15]
// 但是当数组中元素是引用类型，我们可以通过item修改这个引用地址下的属性
var arr=[
{id:1001,name:"商品1",price:1001,num:1},
{id:1002,name:"商品2",price:1002,num:2},
{id:1003,name:"商品3",price:1003,num:3},
{id:1004,name:"商品4",price:1004,num:4},
]
arr.forEach(function(item){
item.num+=10
})
console.log(arr)
arr.forEach(function(item){
item.total=item.price*item.num;
delete item.price;
})
console.log(arr);
数组的创建
1.字面量创建
var arr=[1,2,3];
2.构造函数实例化创建
var arr=new Array(1,2.,3,4,5)
a)如果构造函数中放入1个以上元素,这些元素都是数组的元素
var arr=new Array(3);
b)如果构造函数中放入的只有一个元素,并且为数值,这个数值就是这个数值的长度,并且创建该长度的数组,里面都是空元素\
c)如果数组放入元素是数值,但不是正整数,则报错,这里必须放入的是正整数
d)如果放入的元素不是数值,则是数组的第0项元素
3.构造函数执行创建
var arr1=Array();
错误:Uncaught RangeError: Invalid array length 无效的数组长度
//无效数组长度
var arr=new Array(3.2);
var arr=new Array(-5);
var arr1=new Array("a");//"a"
var arr2=new Array(null);//null
var arr3=new Array(undefined);//undefined
var arr4=new Array(1);//[empty]
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
最后一个元素为空元素则不算元素
var arr=[,,,]
console.log(arr) //3 [空属性 × 3]
`这两个并不相同 空元素empty仅有下标没有值 undefiend是一个值`
//在使用数组时应该尽量避免使用空元素。可以使用特殊值如 null 或者 NaN 来代替
ar arr=[,];
var arr1=[undefined];
console.log(arr[0]===arr1[0])// true
数组也是对象,下标就是对象的key,元素就是对象的value
var arr=[];
console.log(0 in arr);//false 意思是0这个元素不在arr中
但是console.log(0 == [])//true
Array(5) —>new Array(5)
js中的数组并不是一种数据类型它是后期根据对象创建出来的一种存储单元,继承于对象
数组本身和其他语言不同,数组的长度可以任意改变,数组的元素类型可以任意改变 所以js数组效率更低 建议同一元素做数据类型
数组长度
长度:表示数组中元素的个数,是一个可读可写的属性,但是不能删除
<script>
var arr=[1,2,3,4];
console.log(arr.length);//4
var arr=[1,2,3];
//如果数组长度大于原数组长度,则新增新长度和旧长度差个空元素
arr.length=10;
console.log(arr);//(10) [1, 2, 3, empty × 7]
//如果数组长度小于旧长度,将数组缩小到仅有新长度个数的元素,其他元素丢弃
arr.length=2;
console.log(arr);//(2) [1, 2]
//清空数组
arr.length=0;
console.log(arr);//[]
//添加 修改 删除数组元素
var arr=[1,2,3,4];
//给数组的尾部添加一个新的元素
arr[arr.length]=5;
console.log(arr)//(5) [1, 2, 3, 4, 5]
//修改数组的最后一个元素为0
arr[arr.length-1]=0;
console.log(arr)//(4) [1, 2, 3, 0]
//如果删除数组的最后一个元素,可以将数组的元素减-1
arr.length--;
console.log(arr)//(3) [1, 2, 3]
</script>
数组方法
以下四个方法都会改变原数组,不产生新数组
push 向数组的尾部添加一个或多个元素,并且返回数组的新长度 长度 数值类型
unshift 向数组的头部添加一个或多个元素,并且返回数组的新长度 长度 数值类型
pop 没有参数,删除数组的最后一个元素,并且返回被删除的元素 元素 any
shift 没有参数,删除数组的第一个元素,并且返回被删除的元素 元素 any
数组的添加
push
重构push
是用来在数组的末尾追加一个元素
var arr = [1, 2, 3]
// 使用 push 方法追加一个元素在末尾
arr.push(4)
console.log(arr) // [1, 2, 3, 4]
<script>
1.当添加元素为0时,返回原数组
2.返回新数组长度
3.改变原数组
function arrayPush(array,...arg){
//判断它是不是数组
//array是原数组 arg是要插入的数组
if(!array || array.constructor!==Array) throw new TypeError(array+"is not Array!");
if(arg.length===0) return array.length;
for(var i=0;i<arg.length;i++){
array[array.length]=arg[i];
}
return array.length;
}
var arr=[1,2,3];
var len=arrayPush(arr,4,5,6);
console.log(len,carr);//[1,2,3,4,5,6]
</script>
unshift
是在数组的最前面添加一个元素
var arr = [1, 2, 3]
// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)
console.log(arr) // [4, 1, 2, 3]
重构unshift
<script>
1.当添加元素为0时,返回原数组
2.返回新数组长度
3.改变原数组
4.如果下标大于新增的长度,往后移 ,小于就将原来的
function arrayUnshift(array,...arg){
if(!array || array.constructor!==Array) throw new TypeError(array+"is not Array!");
if(arg.length===0) return array.length;
//下标的总长度
for(var i=array.length+arg.length-1;i>=0;i--){
//因为是向前添加所以前面的长度是新添加的长度,大于新数组的长度,开始添加自己本身的元素
if(i>=arg.length) array[i]=array[i-arg.length];
else array[i]=arg[i];
}
return array.length;
}
// var arr=[4,5,6,1,2,3]
var arr=[1,2,3];
var len=arrayUnshift(arr,4,5,6);
console.log(len,arr);
</script>
数组的删除
pop
是用来删除数组末尾的一个元素
var arr = [1, 2, 3]
// 使用 pop 方法删除末尾的一个元素
arr.pop()
console.log(arr) // [1, 2]
重构pop
<script>
1.返回被删除的元素
2.如果数组长度为0 return
3.修改原数组
function arrayPop(array){
if(!array || array.constructor!==Array) throw new TypeError(array+"is not Array!");
if(array.length===0) return;
var item=array[array.length-1];
array.length--;
return item;
}
var arr=[1,2,3,4,5]
var len=arrayPop(arr)
console.log(arr,len)// (4)[1, 2, 3, 4] 5
</script>
shift
是删除数组最前面的一个元素
var arr = [1, 2, 3]
// 使用 shift 方法删除数组最前面的一个元素
arr.shift()
console.log(arr) // [2, 3]
重构shift
<script>
1.返回被删除的元素
2.如果数组长度为0 return
3.修改原数组
function arrayShift(array){
if(!array || array.constructor!==Array) throw new TypeError(array+"is not Array!");
if(array.length===0) return;
var item=array[0];
for(var i=0;i<array.length-1;i++){
//后面覆盖前面的 最后变成 2,3,4,4
array[i]=array[i+1];
//用后面的把第一个元素覆盖 然后把多余的空位删除
}
//删除最后一个
array.length--;
return item;
}
var arr=[1,2,3,4];
var item= arrayShift(arr)
console.log(arr,item)//(3) [2, 3, 4] 1
</script>
数组的连接
! if(i in array):判断array数组第有没有第i项或者第i项是不是为空
concat
将数组或者元素合并
1.arr.concat(数组或元素…)-----连接数组或元素
var arr=[1,2,3];
var arr1=[1,2,3];
//arr.concat(数组或元素...) 不改变原数组,返回一个新数组,是所有数据合并后的数据
var arr2=arr.concat(arr1);
console.log(arr2);//[1,2,3,1,2,3]
重构concat
<script>
1.不改变原数组
2.返回一个新的数组,所有数据合并后的数组,
3.添加的如果有空元素 还是 空元素
4.连接的可能是数组也可能是元素 分开讨论
function arrayConcat(array,...arg){
// 如果数组不存在(是空数组) 或者不是数组报错
if(!array || array.constructor!==Array) throw new TypeError(array+" not is Array!!");
// 定义一个新的数组
var arr=[];
// 遍历数组
for(var i=0;i<array.length+arg.length;i++){
if(i<array.length){
// 如果i 存在于数组 将它添加到新数组里面
if(i in array) arr[arr.length]=array[i];
// 如果不存在就为空元素
else arr.length++;
}
// 数组长度大于原数组长度
else{
// 添加元素的第一个下标
var k=i-array.length;
// 如果他是空数组 或者是数组对象
if(arg[k] && arg[k].constructor===Array){
// 是数组对象的话 遍历
for(var j=0;j<arg[k].length;j++){
// 如果是空元素的话跳出执行else
if(j in arg[k]) arr[arr.length]=arg[k][j];
else arr.length++;
}
// 不是数组对象的话,直接赋值给新数组
}else{
arr[arr.length]=arg[k];
}
}
}
return arr;
}
var arr=[1,,2,,3];
console.log(arrayConcat(arr,[5,,7,,8],0,[,,,],[])) // [1, 空白, 2, 空白, 3, 5, 空白, 7, 空白, 8, 0, 空属性 × 3]
</script>
join
-
是把数组里面的每一项内容链接起来，变成一个字符串
-
可以自己定义每一项之间链接的内容
join(要以什么内容链接)
1.不改变原数组,返回字符串
2.添加的如果有空元素 还是空元素
<script>
var arr=[1,2,3,4];
console.log(arr.join());//1,2,3,4
console.log(arr.join("#"));//1#2#3#4
console.log(arr.join(""));//1234
console.log(arr.join(undefined));//1,2,3,4
console.log(arr.join(null));//1null2null3null4
console.log(arr.join([]));//1234
console.log(arr.join(1));//1121314
</script>
重构join
<script>
1.不改变原来数组,
2.返回 字符串,
3.添加的如果有空元素 还是 空元素
var arr=[1,2,3,4];
function arrayJoin(array,separator=","){
if(!array || array.constructor!==Array) throw new TypeError(array+" not is Array!!");
separator=String(separator);
var str="";
for(var i=0;i<array.length;i++){
// 第一个位置不能是符号
if(i===0) str+=((i in array) ? array[i] : "");
else str+=separator+((i in array) ? array[i] : ""); 避免出现 ,1,1,1,1这类情况
}
return str;
}
console.log(arrayJoin(arr));//1,2,3,4
console.log(arrayJoin(arr,"#"));//1#2#3#4
console.log(arrayJoin(arr,""));//1234
console.log(arrayJoin(arr,undefined));//1,2,3,4
console.log(arrayJoin(arr,null));//1null2null3null4
console.log(arrayJoin(arr,[]));//1234
console.log(arrayJoin(arr,1));//1121314
console.log(arrayJoin(arr,[,]));//1234
console.log(arrayJoin(arr,[,,]));//1,2,3,4
console.log(arrayJoin(arr,[,,,]));//1,,2,,3,,4
</script>
数组的截取
slice
1.不改变原数组
2.返回一个新的截取得到的新数组
3.start 截取开始位置 end 截取结束位置(截取到end之前) start和end允许又负数存在,负数是从后向前数,两个数都可以缺省,start缺省就是0,end缺省就是数组长度 (两个参数都是负数，所以都加上数组长度转换成正数)
4.若是小数 则向下取整
5.如果start和end超出数组长度 那么为[]
如果没有填写参数，那么等于复制数组，无引用关系
//arr.slice(start,end);
var arr=[1,2,3,4,5,6,7,8];
console.log(arr.slice(0,3));//[1,2,3]
//从下标0开始 截取到下标3之前结束
//只有一个数时 表示的是删除的个数
console.log(arr.slice(3))
重构slice
<script>
var arr = [1, 2, 3, 4, 5, 6, 7];
function arraySlice(array, start, end) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
// 返回一个新数组
var arr = [];
if (start > array.length) return []
// 起始值没有传参的的话是0
if (start === undefined) start = 0;
// 终止值没有传值的话是 数组长度
if (end === undefined || end > array.length) end = array.length;
// 如果有小数 ,向下取整
start = ~~start;
end = ~~end;
// 如果起始值是负数, 则是起始值和数组长度相加 ,要是相加还是小于0 就为0
if (start < 0) start = start + array.length < 0 ? 0 : start + array.length;
if (end < 0) end = end + array.length < 0 ? 0 : end + array.length;
// 只有起始值小于结束值时才能运行
while (start < end) {
if (start in array) arr[arr.length] = array[start];
else arr.length++;
start++;
}
return arr;
}
console.log(arr.slice(2, 6))//[3,4,5,6]
console.log(arraySlice(arr, 2, 6))//[3,4,5,6]
console.log(arr.slice(""))//[1,2,3,4,5,6,7]
console.log(arraySlice(arr, ""))//[1,2,3,4,5,6,7]
</script>
splice
arr.splice(start,deleteCount,...arg);
是截取数组中的某些内容，按照数组的索引来截取
1.start:从什么位置开始删除 缺省时返回新的空数组
2.deleteCount删除几个元素 缺省时到数组尾部
3.arg从start位置开始插入元素,插入的内容
4.返回一个新数组,数组中是被删除的元素组成的
5.原数组因为删除也发生改变
var arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.splice(2,4))//(4) [3, 4, 5, 6]
/*
写全部是3个参数,如果只写1个,那么就是从该索引值的位置到最后,包括本身
写2个参数,表示的是从哪个索引位置开始,截取多少个数据,包括本身
书写3个参数,第3个就是想要替换的元素内容,从哪里开始截取的,就从哪里开始替换
复制
arr.splice(0)；从0开始，并且返回新数组，这表示从一个数组将所有元素传递到新数组。
*/
let arr=[1,2,3,4,5,6]
let arr3=arr.splice(1,3,"你好","小波")
console.log(arr3)//(3) [2, 3, 4]
console.log(arr)//(5) [1, '你好', '小波', 5, 6]
重构splice
<script>
function arraySplice(array, start, deleteCount, ...arg) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
// 创建一个删除数组，存储被删除的元素，最后需要被返回
var deleteArr = [];
// 如果deleteCount默认是undefined或者没给给值，默认是数组的长度，删到最后
if (deleteCount === undefined) deleteCount = array.length;
// 如果start是非整数或者非数值，转换为整数
start = ~~start;
// 如果deleteCount是非整数或者非数值，转换为整数
deleteCount = ~~deleteCount;
//如果 start开始位置小0.则从后向前，但是如果负数+长度后仍然小于0，则等于0，如果start开始位置过小则为0
if (start < 0) start = start + array.length < 0 ? 0 : start + array.length;
// 如果开始位置大于数组的长度，开始位置为数组的长度
if (start > array.length) start = array.length;
// 如果删除的元素小于0，则删除的个数为0
if (deleteCount < 0) deleteCount = 0;
// 如果开始位置+要删除的数量大于数组的长度，设置len为数组从开始到结束剩下的个数，否则就是要删除的数量
var len = start + deleteCount < array.length ? deleteCount : array.length - start;
// 从start开始循环数组
for (var i = start; i < array.length; i++) {
// 如果从开始循环到要删除的个数之前，把这些元素全部存储在删除的数组中
if (i < start + len) deleteArr[deleteArr.length] = array[i];
// 将后面的对应位置的元素挪到当前位置，从当前位置+删除的个数间隔
if (i + len in array) array[i] = array[i + len]
else {
// 如果遇到空元素，先添加任意值，然后使用delete删除，造成空元素
array[i] = null;
delete array[i];
}
}
// 当从后向前挪动完毕后，删除被删除的个数元素的长度
array.length -= len;
// 下面是需要插入元素，所以需要从后向前循环，当前数组的长度+要插入元素的个数，循环到开始位置
for (var j = array.length + arg.length - 1; j >= start; j--) {
// 如果当前时挪动这个过程 ,将从开始+添加个数之后的位置处理挪动
if (j >= start + arg.length) {
if (j - arg.length in array) array[j] = array[j - arg.length];
else {
// 如果是空元素，先添加任意值，然后使用delete删除，造成空元素
array[j] = null;
delete array[j];
}
}
// 如果当前不是挪动的，需要将插入的元素放在当前位置，因为下标从start开始，所以需要-start
else array[j] = arg[j - start];
}
// 最后返回被删除元素的数组
return deleteArr
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.splice(6))//(2) [7, 8]
console.log(arraySplice(arr, 2,4,6))//(4) [3, 4, 5, 6]</script>
数组的遍历
forEach
for 循环一个作用，就是用来遍历数组的(不遍历空元素)
修改item和return返回内容都不会改变数组
语法：arr.forEach(function (item, index, arr) {})
-
item 表示数组内的每一项
-
index 表示数组内每一项的索引
(数组中数据不是引用类型时,可以使用index修改原数组)
-
arr 表示原始数组
返回值：没有返回值，是undefined
- forEach() 的时候传递的那个函数，会根据数组的长度执行
- 数组的长度是多少，这个函数就会执行多少回
利用throw 打断当前代码执行，抛出异常，利用try来处理这个异常，可以让forEach中断循环
thisArg 将forEach中this指向这个thisArg对象
可以通过delete修改原数组
var arr = [100, 200, 300, 400, 500]
arr.forEach(function(item, index, arr) {
// 这个函数会根据数组内有多少成员执行多少回
console.log('我执行了')
console.log(item);
console.log(index);
console.log(arr);
console.log(item, ' ---- ', index, ' ---- ', arr)
})
1. forEach也可以修改原数组
var arr=[1,2,3,4,5];
// 遍历数组 不返回任何内容
arr.forEach(function(item,index,arr){
// 修改item和return返回内容都不会改变数组
// 当数组中元素不是引用类型（数值、布尔值、字符串、symbol、undefined、null、NaN）无法通过item直接修改值
// item=5;
// return 5;
if(!(item&1)) arr[index]=item*10;
});
console.log(arr)
2. 如果数组中的元素是引用类型，可以通过item直接修改每个应用类型的属性或者下标
var arr=[
{id:1001,price:1000,name:"商品1"},
{id:1002,price:2000,name:"商品2"},
{id:1003,price:3000,name:"商品3"},
{id:1004,price:4000,name:"商品4"},
{id:1005,price:5000,name:"商品5"},
]
arr.forEach(function(item,index,arr){
// 直接修改item，意味修改数组元素引用地址，forEach不允许直接修改item，但是可以修改这个引用地址的内容
item.price=item.price/10;
arr[index].id+=10//也可以这样
})
arr.forEach(function(item,index,arr){
// 添加一个名为total的新属性
item.total=item.price*item.id;
})
console.log(arr)
重构forEach
//不改变原数组 无返回值
// thisArg 将forEach中this指向这个thisArg对象
function arrayForEach(array, fn, thisArg) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
for (var i = 0; i < array.length; i++) {
if (i in array) fn(array[i], i, array);
}
}
补充
forEach,map 这种特殊解构叫做桥接模式，所有数组的桥接模式的方法，都不会遍历空元素
map
-
和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组
-
map与forEach区别
(修改原数组使用foeEach,不修改原数组使用map)
-
语法：arr.map(function (item, index, arr) {})
-
返回值：是一个新数组, 并且和原始数组长度一致
- 新数组内每一个数据都是根据原始数组中每一个数据映射出来的
- 映射条件以 return 的形式书写
var arr = [1, 2, 3]
// 使用 map 遍历数组
var newArr = arr.map(function(item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item + 10
//也可以使用index
return arr[index]+=10;
})
console.log(newArr) // [11, 12, 13]
重构map
/*
1. 不改变原数组，
2. 返回一个新数组，新数组中是回调函数返回的结果，按照原数组的下标顺序依次放入的
3. 返回的新数组的长度与原数组的长度相等
4. map不能用于过滤筛选，新的数组长度一定与原数组长度相同*/
<script>
function arrayMap(array, fn, thisArg) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
var arr=[];
for (var i = 0; i < array.length; i++) {
if (i in array) arr[i]=fn(array[i], i, array);
}
return arr;
}
</script>
复制数组
`方法一`
var arr1=Object.assign([],arr);
arr[0].a=10;
console.log(arr1)
`方法二`
var arr1=arr.slice();
arr[0].a=10;
console.log(arr1)
`方法三`
var arr1=arr.concat();
arr[0].a=10;
console.log(arr1);
以上数组元素的引用类型一致
reverse方法
是用来反转数组使用的
var arr = [1, 2, 3]
// 使用 reverse 方法来反转数组
arr.reverse()
console.log(arr) // [3, 2, 1]
sort方法
sort方法默认按照字符的ASCII码进行升序排序
sort按照每个数据中的每一位数据的ASCII码进行排列
是用来给数组排序的
var arr = [2, 3, 1]
// 使用 sort 方法给数组排序
arr.sort()
console.log(arr) // [1, 2, 3]
sort在使用的过程中除了刚才使用的简单写法之外还有2个写法
1 数组名.sort(function(a,b){return a-b}) 是按照从大到小进行排列的
2 数组名.sort(function(a,b){return b-a}) 是按照从小到大进行排列的
sort的底层逻辑
function sort(fn) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (fn(arr[j], arr[j + 1]) > 0) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
// if (arr[j] > arr[j + 1]) {
// var temp = arr[j];
// arr[j] = arr[j + 1];
// arr[j + 1] = temp;
// }
}
}
}
//sort(function(a,b){return a-b})
//其中 a对应arr[j] b对应arr[j + 1]
数组的过滤
some
- 判断数组中是不是有某一个满足条件
- 语法：arr.some(function (item, index, arr) {})
- **返回值：**一个布尔值
- 如果数组中有任何一个满足条件, 终止继续循环,返回 true
- 只有数组中所有的都不满足条件, 才会返回 false
var arr = [100, 200, 300, 400, 500]
console.log(arr)
var res = arr.some(function(item, index, arr) {
console.log(item);
console.log(index);
// 以 return 的形式书写 判断 条件
return item < 50
// return index > 6
})
console.log(res) //false
重构some
function arraySome(array,fn){
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
for(var i=0;i<array.length;i++){
if(i in array && fn(array[i],i,array)) return true;
}
return false;
}
every
- 判断数组中是不是每一个数据都满足条件
- 语法：arr.every(function (item, index, arr) {})
- **返回值：**一个布尔值
- 如果数组中每一个都满足条件, 那么返回值 true
- 只要数组中任何一个不满足条件, 那么返回 false
- 判断条件以 return 的形式书写
var arr = [100, 200, 300, 400, 500]
console.log('原始数组 : ', arr)
var res = arr.every(function(item, index, srr) {
console.log(item)
console.log(index);
// 以 return 的形式书写 判断 条件
return item < 500
// return index > 6
})
console.log('返回值 : ', res) //false
重构some
function arrayEvery(array,fn){
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
for(var i=0;i<array.length;i++){
if(i in array && !fn(array[i],i,array)) return false;
}
return true;
}
filter
-
和 map 的使用方式类似，按照我们的条件来筛选数组
(一般过滤对象型数组 )
([会将满足条件的对象的引用地址放在新数组]所以用filter 时过滤对象型数组时,是修改同一个引用类型的对象型数组)
(要是不想修改同一个引用类型的对象型数组 使用reduce!!!)
var arr=[ {id:1001,name:"商品1",price:1001,num:1}, {id:1002,name:"商品2",price:1002,num:2}, {id:1003,name:"商品3",price:1003,num:3}, {id:1004,name:"商品4",price:1004,num:4}, ] var arr1=arr.filter(function(item){ return item.price>1002; }) arr1[0].num=10; console.log(arr1,arr); //修改了arr1 arr也被修改了
var arr=[
{id:1001,name:"商品1",price:1001,num:1},
{id:1002,name:"商品2",price:1002,num:2},
{id:1003,name:"商品3",price:1003,num:3},
{id:1004,name:"商品4",price:1004,num:4},
]
var arr1=arr.reduce(function(value,item){
if(item.price>1002) value.push({id:item.id,name:item.name,price:item.price,num:item.num})
return value;
},[]);
arr1[0].num=10;
console.log(arr1,arr)
//修改了arr1 但是arr没有被修改
-
语法：arr.filter(function (item, index, arr) {})
-
返回值：把原始数组中满足条件的筛选出来，组成一个新的数组返回
- 我们设置的条件就是 > 1
- 返回的新数组就会是原始数组中所有 > 1 的项
var arr = [1, 2, 3]
// 使用 filter 过滤数组
var newArr = arr.filter(function(item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item > 1
})
console.log(newArr) // [2, 3]
重构filter
/*
1. 不改变原数组，返回一个新数组
2. 当回调函数中的返回值如果是true，将当前的元素放在一个新的数组中，判断当前数组中每一个元素是否满足这个条件，如果满足的就放在这个新数组中*/
function arrayFilter(array,fn){
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
var arr=[]
for(var i=0;i<array.length;i++){
if(i in array && fn(array[i],i,array)) arr[arr.length]=array[i];
}
return arr;
}
filter与reduce在过滤数组时的区别
/*
filter
(一般过滤对象型数组 )
([会将满足条件的对象的引用地址放在新数组]所以用filter 时过滤对象型数组时,是修改同一个引用类型的对象型数组)
*/
(要是不想修改同一个引用类型的对象型数组 使用reduce!!!)
//filter
var arr=[
{id:1001,name:"商品1",price:1001,num:1},
{id:1002,name:"商品2",price:1002,num:2},
{id:1003,name:"商品3",price:1003,num:3},
{id:1004,name:"商品4",price:1004,num:4},
]
var arr1=arr.filter(function(item){
return item.price>1002;
})
arr1[0].num=10;
console.log(arr1,arr);
//这里 改变arr1 也会改变arr
//reduce
返回的新数组与原数组不是同一个引用地址
var arr1=arr.reduce(function(value,item){
if(item.price>1002) value.push({id:item.id,name:item.name,price:item.price,num:item.num})
return value;
},[]);
arr1[0].num=10;
console.log(arr1,arr)
//这个改变arr1 arr不会被改变
find家族
find
查找数组中符合指定条件的第一个元素，并返回该元素
一般用于对象型数组或二维数组
- 语法：arr.find(function (item, index, arr) {})
- 返回值：数组中你查找到的该数据。
- 查找条件以 return 的形式书写
var arr = [100, 200, 301, 400, 500]
console.log(arr)
// 我想找到原始数组中的哪一个 奇数
var res = arr.find(function(item, index, arr) {
console.log(item);
console.log(index);
// 以 return 的形式书写查找条件
return item % 2 === 1
})
console.log(res)
var arr=[
{id:1001,name:"商品1",price:1001,num:1},
{id:1002,name:"商品2",price:1002,num:2},
{id:1003,name:"商品3",price:1003,num:3},
{id:1004,name:"商品4",price:1004,num:4},
]
var o=arr.find(function(item){
return item.id===1002;
})
console.log(o);
//**一般用于对象型数组或二维数组**
var arr=[//二维数组
[1,2,3],
[4,5,6],
[7,8,9]
]
var arr1=arr.find(function(item){
return item.indexOf(5)>-1
})
console.log(arr1);
重构find
function arrayFind(array, fn) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
var arr = []
for (var i = 0; i < array.length; i++) {
// 当遇到第一个满足条件的元素，将这个元素返回出去
if (i in array && fn(array[i], i, array)) return array[i];
}
// 如果没有满足条件的元素，则返回null
return null;
}
findIndex
查找数组中某一个数据(适合查找元素的引用类型的数组)
语法：arr.findIndex(function (item, index, arr) {})
返回值：数组中你查找到的该数据所在的索引位置。
查找条件以 return 的形式书写
var arr = [100, 200, 301, 400, 500]
console.log(arr)
// 我想找到原始数组中的哪一个 奇数
var res = arr.find(function(item, index, arr) {
console.log(item);
console.log(index);
// 以 return 的形式书写查找条件
return item % 2 === 1
})
console.log(res)
重构findIndex
function arrayFindIndex(array, fn) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
for (var i = 0; i < array.length; i++) {
// 当遇到第一个满足条件的元素，将这个元素的下标返回出去
if (i in array && fn(array[i], i, array)) return i;
}
// 如果没有满足条件的元素，则返回-1
return -1;
}
var arr = [
{ id: 1001, price: 1000, name: "商品1" },
{ id: 1002, price: 2000, name: "商品2" },
{ id: 1003, price: 3000, name: "商品3" },
{ id: 1004, price: 4000, name: "商品4" },
{ id: 1005, price: 5000, name: "商品5" },
]
var index=arr.findIndex(function(item){
return item.id===1003
})
console.log(index)
重构findLast
从后往前查找
function arrayFindLast(array, fn) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
var arr = []
for (var i = array.length-1; i>=0; i--) {
// 当遇到第一个满足条件的元素，将这个元素返回出去
if (i in array && fn(array[i], i, array)) return array[i];
}
// 如果没有满足条件的元素，则返回null
return null;
}
重构findLastIndex
function arrayFindLastIndex(array, fn) {
if (!array || array.constructor !== Array) throw new TypeError(array + " not is Array!!");
if (!fn || typeof fn !== "function") throw new TypeError(fn + " not is Function!!");
for (var i = array.length-1; i>=0; i--) {
if (i in array && fn(array[i], i, array)) return i;
}
return -1;
牛逼的reduce
- (归并)进行叠加累计，函数根据数组中的成员进行重复调用
- 语法：arr.reduce(function (prev, item, index, arr) {}, 初始值)
- prev: 上一次归并的值
- item: 每一项
- index: 索引
- arr: 原始数组
- 初始值: 默认是数组索引 0 位置数据, 表示从什么位置开始叠加
- 返回值：返回最终的结果
var arr = [100, 200, 300, 400, 500]
console.log(arr)
var res = arr.reduce(function a(prev, item, index, arr) {
console.log(prev);
console.log(item);
console.log(index);
// 以 return 的形式书写每次的叠加条件
return prev + item
}, 0)
console.log(res)
有无初始值
var arr=[1,2,3,4];
// 没有初始值的情况 value第一次进入是数组的第0项，item是数组的第1项
// 返回值将作为第二次归并的value
var sum=arr.reduce(function(value,item,index,arr){
console.log(value,item);
return 10;
})
// 有初始值，value第一次进入是给入初始值，item是数组的第0项
var sum=arr.reduce(function(value,item,index,arr){
console.log(value,item);
return 10;
},100)
重构reduce
**不改变原数组**，返回一个新的值
**归并** 多个归纳合并为一个
如果reduce有初始值，value第一次就是初始值，item就是从第0项开始遍历
第二次开始，就是前一次return返回的值，item从第1项开始遍历
function arrayReduce(array,fn,initValue){
if(!array || array.constructor!==Array) throw new TypeError(array+" is not Array!!!");
if(!fn || typeof fn!="function") throw new TypeError(fn+" is not Function!!!");
var index=0;
// 如果没有初始值initValue
if(initValue===undefined){
// 遍历数组给 initValue 赋值
while(index<array.length){
// 如果不是空元素才能进
if(index in array){
initValue=array[index];
// 如果取到值就跳出循环
break;
}
index++;
}
// 如果是没有 初始值并且是空数组就会报错 有长度但是空元素的话也会报错 index===数组长度 说明 数组循环完毕没有找到值
if(array.length===0 || index===array.length) throw new TypeError("Reduce of empty array with no initial value");
//如果已经遍历到最后一位并且有初始值就抛出
if(index===array.length-1 && initValue!==undefined) return initValue;
index++;
}
// 如果有初始值
while(index<array.length){
// 如果不为空元素 把每一次的结果赋值给 initValue
if(index in array) initValue=fn(initValue,array[index],index,array);
index++;
}
// 返回初始值
return initValue;
}
reduce的应用
随机颜色
function randomColor(){
var r=~~(Math.random()*256);
var g=~~(Math.random()*256);
var b=~~(Math.random()*256);
return "rgba("+r+","+g+","+b+","+"1)";
}
console.log(randomColor())
map方法
var color="#"+Array(6).fill(1).map(function(){
return (~~(Math.random()*16)).toString(16);
}).join("");
console.log(color)
reduce方法
创建长度为6的数组,不能为空元素所以使用fill
var color=Array(6).fill(1).reduce(function(value){
//16进制是1-15 //转换成16进制
return value+(~~(Math.random()*16)).toString(16);
},"#");
console.log(color)
//两者的区别就是 map直接把"#"放在了最前面 直接拼接即可
// reduce 是让"#" 称为初始值 每一次随机 都会把"#"赋给value
去重
var arr=[1,2,3,1,2,3,5,1,2,3,4,2,1,5,2,1,4,6];
var arr1=arr.reduce(function(value,item){
if(value.indexOf(item)<0) value.push(item);
return value;
},[])
console.log(arr1);
//(6) [1, 2, 3, 5, 4, 6]
返回值为数组
var arr=[1,2,3,4,5];
var arr1=arr.reduce(function(v,t){
v.push(t+100);
return v;
},[]);
console.log(arr1);
进行过滤
var arr=[1,2,3,4,5,6,7];
var arr1=arr.reduce(function(v,t){
if(t>5) v.push(t);
return v;
},[])
console.log(arr1)
统计数组中元素出现了几次,以对象的形式展示
var arr=[1,2,4,5,1,2,3,4,1,2,3,2,1,3,5,2,1,3,4];
var obj=arr.reduce(function(v,t){
//切记 此时的v是对象
//v[t]表示对象中键t对应的值
//!v[t]表示对象中无此值 则让其为0
//否则让值++
if(!v[t]) v[t]=0;
v[t]++;
return v;
},{});
console.log(obj)
统计字符串中字符出现了几次
var str="ajsd kjasdjkasd kasdjkh kahsd ajkhsd kjhasd hkjasdak jdsakjsdh asdjkh";
var obj=str.split("").reduce(function(v,t){
if(t===" ") return v;
if(!v[t])v[t]=0;
v[t]++;
return v;
},{})
console.log(obj)
操作对象
var obj = {
a: 1, b: 2, c: 3, d: 4, e: 5
}
"a=1&b=2&c=3&d=4&e=5"
console.log(Object.keys(obj))
/*
Object.keys()
一个表示给定对象的所有可枚举属性的字符串数组
*/
获取对象的键 以数组的形式展示
var str=Object.keys(obj).reduce(function(v,key,i){
索引
return v+(!i?"":"&")+key+"="+obj[key];
},"");
console.log(str);
扁平化数组
var arr=[[1,2,3],[4,5,6],[7,8,9]];
arr=arr.reduce(function(v,t){
return v.concat(t);
})
console.log(arr);
查找到对象型数组中复合条件的
var item=arr.reduce(function(v,t){
保证是第一个符合条件的
if(t.id===1003 && !v) return t;
return v;
},null);
console.log(item);
// 从右向左归并
var item=arr.reduceRight(function(v,t){
if(t.id===1003 && !v) return t;
return v;
},null);
console.log(item)
from和isArray
1. from不改变原数组，返回 新的数组
2. isArray不改变内容，返回 布尔值
3. 静态方法
4. 将迭代器转换为数组
function max(){
return Array.from_1(arguments).reduce(function(v,t){
if(t>v) return t;
return v;
})
}
isArray 判断是不是数组
查找数组是否存在
indexOf,lastIndexOf includes不改变原数组，返回 下标或者布尔值
indexOf
- 语法: 数组名.indexOf(要查找的数据)
- 语法二: 数组名.indexOf(要查的数据,开始索引)
- 这个语法的意思是.要从指定的索引开始查找该数据,
- 如果有就放回该数据在原数组中第一个出现的位置,如果没有就返回 -1
- 作用: 从前往后在数组中查找该数据第一次出现的位置
- 返回值: 如果该数组中有这个数据就返回这个数据第一个次出现的位置也就是索引,如果没有返回 -1
// indexOf() 方法
// 语法一:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.indexOf(100)
console.log('原始数组:', arr);
console.log('返回值:', res);
// 语法二:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.indexOf(300, 1)
console.log('原始数组:', arr);
console.log('返回值:', res);
重构indexOf
arr.indexOf(被查找的元素,从什么位置开始查找)；
function arrayIndexOf(array,item,from=0){
if(!array || array.constructor!==Array) throw new TypeError(array+"is not Array!!");
// 如果数组是空数组找不到 返回 -1
if(array.length===0) return -1;
// 向下取整
from=~~from;
// 如果是负数
if(from<0) from=from+array.length<0 ? 0 : from+array.length;
while(from<array.length){
if(item===array[from]) return from;
from++;
}
return -1;
}
LasrIndexOf
语法: 数组名.lastIndexOf(要查的数据)
语法二: 数组名.lastIndexOf(要查找的数据,索引)
这个语法的意思是.要从指定的索引开始查找该数据,
如果有就放回该数据在原数组中第一个出现的位置,如果没有就返回 -1
作用: 从后往前在数组中查找这个数据第一次出现的位置
返回值: 如果该数组中有这个数据就返回这个数据第一个次出现的位置也就是索引,如果没有返回 -1
// lastIndexOf() 方法
// 语法一:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.lastIndexOf(400)
console.log('原始数组:', arr);
console.log('返回值: ', res);
// 语法二:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.lastIndexOf(200, 2)
console.log('原始数组:', arr);
console.log('返回值: ', res);
重构LasrIndexOf
function ArrayLastIndexOf(array,item,from=array.length-1){
if(!array || array.constructor !== Array) throw new TypeError('类型错误')
if(array.length === 0) return -1;
from= ~~from
if(from<0) from = from+array.length >0 ? from+array.length: 0;
while(from > 0){
if(item === array[from]) return from ;
from--;
}
return -1
}
重构includes
function arrayIncludes(array,item,from=0){
if(!array || array.constructor!==Array) throw new TypeError(array+"is not Array!!");
if(array.length===0) return false;
from=~~from;
if(from<0) from=from+array.length<0 ? 0 : from+array.length;
while(from<array.length){
if(item===array[from]) return true;
from++;
}
return false;
}
扁平化数组
flat、flatMap不改变原数组，返回新数组
flat如果不得参数,只能扁平化一层 maxLv 默认为1
重构flat
function flat(array,maxLv=1,currentLv=0,arr=[]){
if(!array || array.constructor!==Array) throw new TypeError(array+" is not Array!!!");
for(var i=0;i<array.length;i++){
// 如果当前层级小于最高层级 并且 值不为空 是一个数组
if(currentLv<maxLv && array[i] && array[i].constructor===Array){
// 递归 将当前层级jia1
flat(array[i],maxLv,currentLv+1,arr);
}else{
if(i in array) arr[arr.length]=array[i];
}
}
return arr;
}
var arr=[1,2,3,[4,5,[8,9,[10,11]]],[6,7]];
var arr=[1,2,[3,4]]
console.log(flat(arr,4))
console.log(arr.flat(4))
重构flatMap
function arrayFlatMap(array,fn){
if(!array || array.constructor!==Array) throw new TypeError(array+" is not Array!!!");
if(!fn || typeof fn!="function") throw new TypeError(fn+" is not Function!!!");
var arr=[];
for(var i=0;i<array.length;i++){
// 处理空数组
if(!(i in array)){
arr.length++;
continue;
}
var item=fn(array[i],i,array);
if(item && item.constructor===Array){
for(var j=0;j<item.length;j++){
if(j in item) arr[arr.length]=item[j]
else arr.length++;
}
}else{
arr[arr.length]=item;
}
}
return arr;
}
数组的去重
1.使用双重for循环
let arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
//外层循环执行一次,里面的循环要比较一轮
for (let i = 0; i <= arr.length; i++) {
//内层循环与传进i对应的值一一进行比较
for (let j = i + 1; j < arr.length; j++) {
//判断两个值是否相等
//若相等则把重复的删除
if (arr[i] === arr[j]) {
arr.splice(j, 1)
}
}
}
console.log(arr)//(6) [1, 2, 3, 4, 5, 5]
2.借助另外一个数组
let arr = [20, 34, 89, 12, 20, 20, 89, 34, 11, 100, 20]
//建立一个新数组
let arr1 = []
//遍历数组arr
for (let i = 0; i < arr.length; i++) {
//indexOf()方法 返回值:有返回第一次出现的索引,不是第一次出现或没有 则返回-1
//如果arr1处值的值不是第一次出现则 indexOf()方法会返回-1 说明该元素重复 删除
if (arr1.indexOf(arr[i]) === -1) {
arr1.push(arr[i])
}
}
console.log(arr1)//(6) [20, 34, 89, 12, 11, 100]
3.借助对象和另外一个数组
let arr = [20, 34, 89, 12, 20, 20, 89, 34, 11, 100, 20]
//建立一个新对象
let obj = {}
//遍历数组的值 让数组的值成为对象的key
for (let i = 0; i <= arr.length; i++) {
obj[arr[i]] = "111"
}
//建立一个空数组
let arr1 = []
//遍历对象 把对象的key值放入到新数组中
for (let j in obj) {
/*
//拿到所有的键名
console.log(key);
//拿到所有的键值
console.log(obj[key]);
*/
arr1.push(Number(j))
}
console.log(arr1)
4.使用sort
let arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
//先对数组进行排序 就把相同的元素放到了一起
arr.sort()
for (let i = 0; i < arr.length; i++) {
//若当前元素与其后一个元素相等 则说明重复 删除当前元素
if (arr[i] === arr[i + 1]) {
arr.splice(i, 1)
//防止塌陷(防止有多个重复的元素)
i--
}
}
console.log(arr)//(5) [1, 2, 3, 4, 5]
5.遍历数组
let arr = [20, 34, 89, 12, 20, 20, 89, 34, 11, 100, 20]
for(let i=0;i<arr.length;i++){
//判断有没有重复的
let num=arr.indexOf(arr[i],i+1)
//如果该数组中有这个数据就返回这个数据第一个次出现的位置也就是索引**,如果没有返回 -1
//如果num的值不是-1 说明有重复的,就删除重复的
if(num!==-1){
arr.splice(num,1)
i--
}
}
console.log(arr)
6.使用set
let arr = [20, 34, 89, 12, 20, 20, 89, 34, 11, 100, 20]
//把数组转为set对象
//set中不会有重复的值
let mySet=new Set(arr)
console.log(mySet)//Set(6) {20, 34, 89, 12, 11,100}
//转回数组 方法1
let arr1=[...mySet]
console.log(arr1)//(6) [20, 34, 89, 12, 11, 100]
//方法2
let arr2=Array.from(mySet)
console.log(arr2)//(6) [20, 34, 89, 12, 11, 100]
补充set方法
Set方法
- Set() 数据结构是 ES6 中出现的一个构造函数, 用来生成 Set 数据结构
- Set数据机构是一个 类似于 数组的数据结构
- Set函数可以接受一个数组作为参数
- 特点: 所有元素都是唯一的，没有重复
- 语法: var s = new Set([ 数据1, 数据2, 数据3, … ])
// 原始的数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
// 使用的时候我们需要使用 new Set()把我们去重的数组放进去
// 我们得到的返回值是一个 Set 数据结构
var mySet = new Set(arr)
console.log(mySet);
还原成数组
- Set 数据结构虽然可以去重, 但是去重完毕以后不再是数组了
- 我们还需要把 Set 结构还原成数组
方法1
// 准备一个 Set 数据结构
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
var mySet = new Set(arr)
var res = [ ...mySet ]
cosnole.log(res)
方法2
// 准备一个 Set 数据结构
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
var mySet = new Set(arr)
var res = Array.from(mySet)
cosnole.log(res)
数组的塌陷
塌陷:当数组执行删除单元操作时,被删除单元之后的单元,会前移,进而顶替被删除单元,出现在被删除单元的位置上,造成数组长度减少的情况
//需求: 要求删除掉数组中的所有元素,但是要一个一个的删除
var arr = [3, 4, 44, 65, 56]
console.log('原始数组 : ', arr);
// 遍历循环数组
for (var i = 0; i < arr.length; i++) {
arr.splice(i, 1)
}
console.log('删除后的数组 : ', arr);//[4,65]
解决方法
方法1:倒着循环 删除
var arr = [3, 4, 44, 65, 56]
console.log('原始数组 : ', arr);
// 遍历循环数组
for (var i = arr.length - 1; i >= 0; i--) {
arr.splice(i, 1)
}
console.log('删除后的数组 : ', arr);//[]
方法2:每执行一次 就执行一次i--操作
var arr = [3, 4, 44, 65, 56]
console.log('原始数组 : ', arr);
// 遍历循环数组
for (var i = 0; i < arr.length; i++) {
arr.splice(i, 1)
i-- //这样i会一直等于0 让剩余的数一个个移到下标0 一个个删除即可
}
console.log('删除后的数组 : ', arr);//[]
数组的排序
- 所有的迭代器都有三个方法，keys(),values(),entries();
- console.log(arr.keys());//下标迭代器
- console.log(arr.values());//值的迭代器
- console.log(arr.entries());//迭代器本身
倒序
function arrayReverse(array) {
if (!array || array.constructor !== Array) throw new TypeError(array + " is not Array!!!");
for (var i = 0; i < ~~(array.length / 2); i++) {
var bool = true;
// 将当前值存储起来
var item = array[i];
// 如果i是空数组
if (!(i in array)) bool = false;
// 把前面的值变成后面的值 如果后面的值空元素就删除前面的
if (array.length - 1 - i in array) array[i] = array[array.length - 1 - i];
else delete array[i];
// 如果i不是空元素 把后面的值变成前面的值
bool ? array[array.length - 1 - i] = item : delete array[array.length - 1 - i];
}
return array;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arrayReverse(arr)
console.log(arr)
交换排成倒序
var arr=[1,2,3,4,5,6,7];
for(var i=0;i<~~(arr.length/2);i++){
var temp=arr[i];
arr[i]=arr[arr.length-i-1];
arr[arr.length-i-1]=temp;
}
console.log(arr)
随机排序
var arr=[1,2,3,4,5,6,7,8,9,10];
arr.sort(function(a,b){
return Math.random()-0.5;
})
console.log(arr)
//创建一个长度为100的数组 填充数值1
var arr=Array(100).fill(1).map(function(item,index){
return index
}).sort(function(){
return Math.random()-0.5;
})
console.log(arr)
冒泡排序
/*
i < arr.length - 1 是因为到最后一个时候 后面都的已经排好序了
最后一个没有比较的一定是最小的 无需再进行比较
*/
/*
j < arr.length - 1 - i 是因为每趟都会有一个值被放到最终位置 这些值无需再进行比较
*/
function BubbleSort(array) {
for (var i = 0; i < array.length - 1; i++) {
for (var j = 0; j < array.length - 1 - i; j++) {
if (array[j] > array[j + 1]) {
var temp = array[j]
array[j] = array[j + 1]
array[j + 1] = temp
}
}
}
}
var arr = [5, 1, 6, 8, 2, 0, 3, 7, 2, 4, 1, 5, 2, 4, 9, 7, 8];
BubbleSort(arr)
console.log(arr)
选择排序
/*
j < array.length 因为arr[min]需要与每一个值进行比较
*/
function selectSort(array) {
for (var i = 0; i < array.length - 1; i++) {
var min = i;
// 遍历查找这个里面的最小值
for (var j = i + 1; j < array.length; j++) {
/*
若下标j对应的值 小于下标min对应的值(与数组中每一个值进行比较)
说明j此时对应的值是最小值 把j赋给min 此时的min就是整个数组中最小的
找到最小值之后 再把其放到最前面的位置(i的位置)
*/
if (array[j] < array[min]) min = j;
}
var temp = array[i];
// 把最小值放到最前面
array[i] = array[min];
// 从当前值开始再次遍历
array[min] = temp;
}
}
var arr = [5, 1, 6, 8, 2, 0, 3, 7, 2, 4, 1, 5, 2, 4, 9, 7, 8];
selectSort(arr);
console.log(arr)
//(17) [0, 1, 1, 2, 2, 2, 3, 4, 4, 5, 5, 6, 7, 7, 8, 8, 9]
快速排序
/*
arr.splice(pivotIndex,1)[0] 是在原来数组的基础上进行修改，每次都删除了一个元素
*/
function quickSort(array) {
if (array.length < 2) return array;
//找中间值
var middle = array.splice(~~(array.length / 2), 1)[0];
//设置左数组
var left = [];
//设置右数组
var right = [];
for (var i = 0; i < array.length; i++) {
//当对应小标的值小于中间值时放到左数组
//否则就放到右数组
if (array[i] < middle) left.push(array[i]);
else right.push(array[i]);
}
//递归 对left与right进行同样的操作
return quickSort(left).concat(middle, quickSort(right));
}
console.log(quickSort([5, 1, 6, 8, 2, 0, 3, 7, 2, 4, 1, 5, 2, 4, 9, 7, 8]))
//(17) [0, 1, 1, 2, 2, 2, 3, 4, 4, 5, 5, 6, 7, 7, 8, 8, 9]
桶排序
var arr = [1, 5, 2, 8, 10, 15, 60];
var obj = {}
for (var i = 0; i < arr.length; i++) {
obj[arr[i]] = arr[i]
}
var arr1 = []
for (var key in obj) {
arr1.push(Number(key))
}
console.log(arr1)//(7) [1, 2, 5, 8, 10, 15, 60]
定义二维数组
//方法1
let arr = [[1, 2], [3, 4], [5, 6]]
console.log(arr)
//方法2
let arr2 = new Array();
arr.push([1, 2]);
arr.push([3, 4]);
arr.push([5, 6]);
console.log(arr2)
//方法3
let arr1 = [];
let rows = 5;
let columns = 5
for (let i = 0; i < rows; i++) {
arr1[i] = [];
for (let j = 0; j < columns; j++) {
arr1[i][j] = 0; // 添加初始值
}
}
console.log(arr1)
补充:
arr.from()
将迭代器转换为数组
function fn(){
console.log(arguments)
console.log(Array.from(arguments))
var arr=Array.from(arguments);
arr.sort(function(a,b){
return b-a;
})
console.log(arr)
}
fn(1,2,3,4,5);
不能将对象转换为数组，因为对象不是迭代器，但是可以将含有length属性的对象转换为数组
console.log(Array.from({a:1,b:2}))
//[]
console.log(Array.from({length:10}))
//(10) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
//先把{length:100} 转换为数组 使用数组的map方法 把下标作为值传到数组中
var arr=Array.from({length:100}).map(function(item,index){
return index;
})
console.log(arr)
copyWithin
改变当前数组，将当前数组中指定位置开始到指定位置结束的内容，复制到当前数组中指定的位置开始后的内容中
// 如果省略 开始默认0 结束默认到数组尾部
arr.copyWithin(复制到的目标位置开始,从什么位置开始复制,腌到什么位置结束复制)
/*
返回原数组 改变原数组 不会改变原数组长度
*/
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.copyWithin(4,0,3)//(9) [1, 2, 3, 4, 1, 2, 3, 8, 9]
arr.copyWithin(-1, 0, 5)//(9) [1, 2, 3, 4, 5, 6, 7, 8, 1]
arr.copyWithin(4,0)//(9) [1, 2, 3, 4, 1, 2, 3, 4, 5]
arr.copyWithin(4)//(9) [1, 2, 3, 4, 1, 2, 3, 4, 5]
console.log(arr)
fill
/*
改变原数组,并且返回原数组
*/
// 如果省略 默认从开始0 默认到数组的尾部
arr.fill(要填充的值,从什么位置开始填充,到什么位置结束填充)
//方式1
var arr = [1, 2, 3, 4, 5]
arr.fill(0)//(5) [0, 0, 0, 0, 0]
arr.fill(0,3)//(5) [1, 2, 3, 0, 0]
arr.fill(0, 2, 4)//(5) [1, 2, 0, 0, 5]
console.log(arr)
//方式2
var arr=Array(6).fill(1)
console.log(arr)//(6) [1, 1, 1, 1, 1, 1]
填充引用类型时,填充的都是相同的引用地址
var arr = Array(6).fill({ a: 1 });
arr[0].a = 100
console.log(arr)
//六个对象中对应a属性的值全都改变了 都是相同的引用地址
at
at(下标值) 获得数组对应下标的元素,不改变原数组,返回一个元素
下标可以时负数,负数表示从后向前数
var arr=[1,2,3,4,5]
console.log(arr.at(1))//2
console.log(arr[1])//2
//arr[]形式 其中[]不能为负数
//at() ()中可以是负数
console.log(arr.at(-1))//5
引用地址类型
var arr = [
{ id: 1, price: 1000 },
{ id: 2, price: 2000 },
{ id: 3, price: 3000 },
{ id: 4, price: 4000 }
]
arr.at(-1).name="最后的价格"
console.log(arr)
flat
flat(深度) 深度默认为1 将多维数组扁平化
//将扁平化的新数组返回 原数组不改变 返回新数组
var arr=[[1,2,3,[4,5,6]],7]
var arr1=arr.flat(2);
console.log(arr1)//(7) [1, 2, 3, 4, 5, 6, 7]
var arr=[[1,2,3,[0,4,9,[7,9,0,[5,8,9]]]],[4,5,6]]
var arr1=arr.flat(4)
console.log(arr1)
//(15) [1, 2, 3, 0, 4, 9, 7, 9, 0, 5, 8, 9, 4, 5, 6]
重构flat
var arr = [[1, 2, 3, [0, 4, 9, [7, 9, 0, [5, 8, 9]]]], [4, 5, 6]]
//重构flat
//newArray=[] --> newArray默认值为[]
function flat(array, newArray = []) {
for (var i = 0; i < array.length; i++) {
if (Array.isArray(array[i])) {
flat(array[i], newArray)
} else {
newArray.push(array[i])
}
}
return newArray
}
var arr1 = flat(arr)
console.log(arr1)
//15) [1, 2, 3, 0, 4, 9, 7, 9, 0, 5, 8, 9, 4, 5, 6]
flatMap
只能用于二维数组的扁平化,并且可以在每个元素的遍历时做对应的操作
//flatMap(回调函数,thisArg)返回一个新数组 原数组不变
//flatMap
var arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
//求每一个数组的和
var arr1 = arr.flatMap(function (item, index, arr) {
if (Array.isArray(item)) {
var sum = 0;
for (var i = 0; i < item.length; i++) {
sum += item[i]
}
return sum;
} else {
return item
}
})
console.log(arr1)//(3) [6, 15, 24] */
//求每一个数组的和(借用reduce)
var arr1 = arr.flatMap(function (item, index, arr) {
if (Array.isArray(item)) {
return item.reduce(function (value, t) {
return value + t
})
} else {
return item
}
})
console.log(arr1)//(3) [6, 15, 24] */
//求每个数组的和 并连接到每个数组后
var arr1 = arr.flatMap(function (item) {
return item.concat(item.reduce(function (value, t) {
return value + t
}))
})
console.log(arr1)
//(12) [1, 2, 3, 6, 4, 5, 6, 15, 7, 8, 9, 24]
includes
判断数组中是否存在该元素,如果存在返回true,否则返回false
var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3))//true
console.log(arr.includes(8))//false
var arr = [
{ id: 1, price: 1000 },
{ id: 2, price: 2000 },
{ id: 3, price: 3000 },
{ id: 4, price: 4000 }
]
//因为引用地址不同,这里给入的是一个新对象,所以返回false
//尽量用includes判断非引用类型
console.log(arr.includes({ id: 2, price: 2000 }))//false
Array.of
Array.of(多个元素) 变为数组 返回一个新数组
var arr = Array.of("1", 2, true)
console.log(arr)//(3) ['1', 2, true]
toReserved
反转数组并且返回新数组,原数组不变
区别:reverse会改变原数组
//tosorted 不改变原数组 返回新数组
//tospliced 不改变原数组 返回新数组
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.toReversed()
console.log(arr1)//(5) [5, 4, 3, 2, 1]
with
with(要替换元素的下标,要替换成为的元素)
返回新数组 原数组不改变
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.with(3, 0)
console.log(arr1)//(5) [1, 2, 3, 0, 5]
数组中空元素问题
var arr = [1, 2, , 3, , , 5]
//空元素不是undefined,但是值等同于undefined
for (var i = 0; i < arr.length; i++) {
console.log(arr[i] === undefined)
}
var arr = [1, 2, 3, 4, 5, 6]
delete arr[2]
console.log(arr)//(6) [1, 2, empty, 4, 5, 6]
//通过for(var key in arr) 不会遍历空白值 缺点:自动将值转换为字符串
//所以用 (key in 对象)来判断在对象或数组中是否有该key对应的值(使用此遍历 含义空白值的对象或数组)
var arr=[1,2,,3,,5];
for(var i in arr){
console.log(arr[i])
}
for(var i=0;i<arr.length;i++){
if(i in arr){
console.log(arr[i])
}
}
// key in 对象
var obj={a:1,b:2};
console.log("a" in obj)//true
console.log("c" in obj)//false
//以下全报错
console.log(2 in arr)
console.log(3 in arr)
console.log(1 in arr)
总结
返回值 改变原数组 产生新数组
arr.push();//数组的新长度 改变 不会
arr.pop();// 被删除元素 改变 不会
arr.shift(); //被删除元素 改变 不会
arr.unshift();//数组的新长度 改变 不会
arr.slice();//被截取的元素组成的数组 不改变 会
arr.splice();//被删除元素组成的数组 改变 会
arr.join();// 字符串 不改变 不会
arr.concat();// 连接的新数组 不改变 会
arr.forEach(function(){
// 不返回值 可以改变也可以不改变 不会
})
arr.map(function(){
//返回一个新数组 可以改变也可以不改变 会
})
arr.reduce(function(){
//归并 返回一个新值 可以改变也可以不改变 会
})
arr.filter(function(){
//过滤 返回一个新数组 可以改变也可以不改变 会
})
//判断有一个满足条件返回布尔值
arr.some(function(){
// 布尔值 可以改变也可以不改变 不会
})
//判断所有满足条件返回布尔值
arr.every(function(){
// 布尔值 可以改变也可以不改变 不会
})
//查找 对象型数组
arr.find(function(){
// 返回被查找到的元素 可以改变也可以不改变 不会
})
//查找
arr.indexOf();//返回一个数值>=-1 不会改变原数组 不会
//从后向前查找
arr.lastIndexOf();//返回一个数值>=-1 不会改变原数组 不会
arr.sort(); //排序 返回原数组 改变原数组 不会
arr.reverse();//反转 返回原数组 原数组改变 不会
//查找下标 对象型数组
arr.findIndex(function(){
// 返回被查找到的元素的下标 可以改变也可以不改变 不返回新数组
})
//复制数组
arr.copyWithin()//返回原数组 改变原数组 不会
//填充数组
arr.fill()//返回原数组 改变原数组 不会
//通过下标找值
arr.at(下标)//返回一个元素 不改变原数组 不会
//扁平化数组
arr.flat(深度)//返回扁平化后的新数组 不改变 会
//替换数组中元素
arr.with()//返回新数组 不改变 会
/* 作用
改变原数组 push 尾插
pop 尾删
shift 头删
unshift 头插
sort 排序
reverse 反转
copyWithin 复制
fill 填充
splice 截取
不改变原数组 slice 截取
join 连接
concat 连接
indexof 获取下标
lastindexof 获取下标
at 下标找值
flat 扁平化
with 替换
includes 查找
可改变可不改变 forEach 遍历
map 遍历 更改每一项
reduce 归并
some 一行都行
every 都行才行
filter 筛选
find 查找
findIndex 查找下标
2844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
