数组
什么是数组:
- 一系列的数据集合
定义数组
字面量: var arr = [];
内部构造函数:var arr = new Array();
length: 表示数组的长度(数组中数据的个数)
arr[index]:数组中的索引值(下标),数组中表示数据的唯一值,从0开始
创建数组
var arr = [10];//创建一个数据只有10的数组
var arr = new Array(10);//创建一个长度为10的空数组
var arr = new Array(10,20);//创建一个数据包含10,20的数组
数组的简单操作
不使用数组的方法给数组添加值
只能通过索引的方式添加
var arr = [];
arr[0] = 10;
arr[1] = 20;
arr[0] = 'abc';//没有就添加abc,有就修改为abc
delete arr[0];//删除
清空数组
arr.length = 0;
二维数组
var arr = [10,20,'a',true,[1,2,3,4]];
console.log(arr[4][0]);
//1
数组的方法:
数组方法用来操作数组
- push() 向数组中追加一个元素/数据
返回值:添加之后数组的长度
改变原始数组
var arr = [1,2,3];
var res = arr.push(6);
console.log(res);//4
console.log(arr);//[1,2,3,6]
- pop() 删除数组中最后一个元素
返回值:删除的那个元素
改变原始数组
var arr = [1,2,3];
var res = arr.pop();
console.log(res);//3
console.log(arr);//[1,2]
- unshift() 在数组中的最前面添加数据
返回值:添加之后的长度
改变原始数组
var arr = [1,2,3];
var res = arr.unshift('a');
console.log(res);//4
console.log(arr);//['a',1,2,3]
- shift() 删除数组中的第一个元素
返回值:删除的那个元素
改变原始数组
var arr = [1,2,3];
var res = arr.shift();
console.log(res);//1
console.log(arr);//[2,3]
- splice(index,length) 删除任意位置的数据
index:删除元素的开始位置(索引) 必填
length:删除的个数,选填,当不写length的时候,删除后面的所有数据
返回值:以数组的形式返回被删除的数据
改变原始数组
var arr = [1,2,3,4,5,6]
var res = arr.splice(2,1);//从索引为2的位置开始删除1个数据
console.log(res);//[3]
console.log(arr);//[1, 2, 4, 5, 6]
附:
splice(index,length,value替换)
用value替换删除的数据
//用'a'来替换索引为2的数据
var res = arr.splice(2, 1, 'a');
console.log(res);[3]
console.log(arr);[1, 2, "a", 4, 5, 6]
//在索引为2的位置添加一个数据为'a',其他数据往后移动
var res = arr.splice(2, 0, 'a');
console.log(res);//[]
console.log(arr);//[1, 2, "a", 3, 4, 5, 6]
//在索引为2的位置删除两个数 并用'a'替换
var res = arr.splice(2,2,'a');
console.log(res);//[3,4]
console.log(arr);//[1, 2, "a", 5, 6]
- slice(startIndex,endIndex) 截取数组,包括开始位置索引值但不包括结束位置索引值
startIndex:开始的索引 必填
endIndex:结束的索引 选填 不写时从索引值到最后截取
返回值:截取出来的值
不改变原始数组
var arr = [1,2,3,4,5,6];
var res = arr.slice(1,2);
console.log(res);//[2]
console.log(arr);//[1, 2, 3, 4, 5, 6]
var arr = [1,2,3,4,5,6];
var res = arr.slice(1);
console.log(res);//[2,3,4,5,6]
console.log(arr);//[1, 2, 3, 4, 5, 6]
- reverse() 反转数组
返回值:反转之后的数组
改变元素数组
var arr = [1, 2, 3, 4, 5, 6];
var res = arr.reverse()
console.log(arr);//[6, 5, 4, 3, 2, 1]
console.log(res);//[6, 5, 4, 3, 2, 1]
- concat() 合并数组
返回值:合并后的数组
不改变原始数组
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = ['a', 'b'];
var res = arr.concat(arr1);
console.log(res);//[1, 2, 3, 4, 5, 6, "a", "b"]
var res = arr.concat(10,20,30);
console.log(res);//[1, 2, 3, 4, 5, 6, 10, 20, 30]
var res = arr.concat(arr1,[10,20,30]);
console.log(res);//[1, 2, 3, 4, 5, 6, "a", "b", 10, 20, 30]
- sort() 数组排序
改变原数组
当sort()不传递参数的时候,默认按照字符ASCII码进行排序
如果要排序数字的大小,需要给sort添加一个回调函数,回调函数中有两个参数
回调函数中:
return 参数1 - 参数2 升序
return 参数2 - 参数1 升序
var arr = [2,4,5,3,1];
arr.sort(function(a,b){
return a - b; //升序
return b - a; //降序
})
console.log(arr);//[1,2,3,4,5]
- join() 把数组转换为字符串
返回值:转换好的字符串,默认以逗号连接数组中的每一个数据
不改变原始数组
join(’ ') 表示用空字符串拼接数组中的数据
var arr = [1,2,3,4]
var res = arr.join('')
console.log(res);//1234
- indexOf() 判断数组中是否存在某个数据
返回值:如果存在就返回这个数据的索引值
如果不存在就返回 -1
var arr = [1,2,3,4];
console.log(arr.indexOf(3));//2
ES5中数组的方法
- map() 映射
语法:
数组.map(function(item,index,arr){
return 你要写的操作
})
item: 数组中每一个数据
index:索引
arr:原始数组
案例:
var arr = [1, 2, 3, 4, 5, 6];
var res = arr.map(function (item, index, arr) {
console.log(item);//1;2;3;4;5;6
console.log(index);//0;1;2;3;4;5
console.log(arr);//[1, 2, 3, 4, 5, 6]
return item + 10;
})
console.log(res);//[11, 12, 13, 14, 15, 16]
- forEach() 循环
语法:
数组.forEach(function(item,index,arr){
})
item: 数组中每一个数据
index:索引
arr:原始数组
案例:
var arr = [10, 20, 30, 40, 50];
var res = arr.forEach(function (item, index, arr) {
//不需要有return
//循环的次数:数组的长度是多少就会循环多少次
//forEach循环中 不可以写 break 和 continue
if (item == 20) {
//虽然不可以添加返回值 但是可以用return来终止函数的执行.
return;
}//10 30 40 50
if(item >= 20){
return;
} //10
console.log(item);
});
- filter() 过滤器
语法:
数组.filter(function(item,index,arr){
return 条件
})
item: 数组中每一个数据
index:索引
arr:原始数组
案例:
var arr = [10, 20, 30, 40, 50];
//从原始数组中过滤出满足条件的元素 并且返回一个新的数组
var res1 = arr.filter(function (item) {
return item > 10 && item < 40;
})
console.log(res1);//[20, 30]
- some() 判断数组中是否有满足条件的数据
返回值:布尔值
语法:
数组.some(function(item,index,arr){
return 条件
})
当数组中有一个数据满足条件就返回true,所有数据都不满足条件返回false
案例:
var arr = [10, 20, 30, 40, 50];
var res2 = arr.some(function (item) {
return item % 8 == 0;
})
console.log(res2);//true
- every() 判断数组中所有的数据是否满足条件
返回值:布尔值
语法:
数组.every(function(item,index,arr){
return 条件;
})
当数组中所有数据都满足条件就返回true,其中有一个数据不满足条件就返回false
案例:
var arr = [10, 20, 30, 40, 50];
var res3 = arr.every(function (item) {
return item % 10 == 0;
})
console.log(res3);//true
- reduce() 累加器
语法:
数组.reduce(function(pre,item,index,arr){
},value)
pre:初始值
value:就是给pre设置初始值,不写value的话,pre的初始值默认为数组中第一个元素,并且整个循环少循环一次
item:数组中的每一项
index:索引值
arr:原始数组
正常累加:
var arr = [1, 2, 3, 4];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log(sum);//10
使用reduce累加:
var arr = [1, 2, 3, 4];
var res = arr.reduce(function (pre, item) {
// 前一次的循环 return pre + item 会把这个结果给到pre
//下一次循环 return pre + item 这个pre的值为上一次循环果
return pre + item;
//一定要有return,否则下一次循环的时候pre的值为undefined
}, 0);
console.log(res);
reduce 配合 箭头函数实现累加累乘:
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
console.log( sum ); //10
var mul = arr.reduce((x,y)=>x*y)
console.log( mul ); //24
利用reduce去重:
var arr = [1, 1, 2, 3, 4, 4, 2, 1, 3, 5];
var res = arr.reduce(function (pre, item) {
// 把pre当成新数组,pre的默认值为空数组
if (pre.indexOf(item) == -1) {
// 如果pre数组中不存在item这个数据,就需要把item添加到pre中
// push()返回值是一个数组的长度(数字),相当于下一次循环 pre的值为数字,不是数组 不能进行判断
// return pre.push(item);
// concat() 函数的返回值为数组
return pre.concat(item);
}
return pre;
}, [])
console.log(res);