Array类型也很常用,
ECMAScript数组的每一项可以保存任何类型的数据,数组的大小也是可以动态调整的,既可以随着数据的增加自动增长以容纳新数据
创建数组的方式
1.使用Array构造函数
var names = new Array(20) //创建length为20的数组
var colors = new Array("red","blue","green") //创建一个包含3个字符串值的数组
2.使用对象字面量的方式
var colors = ["red","blue","green"] //创建一个包含3个字符串值的数组
var names = [] //创建一个空数组
检测数组
可以使用 instanceof 判断
if(value instanceof Array){
//对数组执行某些操作
}
ES5 新增了 isArray()方法判断变量是否为数组
var a=[];
var b={};
Array.isArray(a);//true
Array.isArray(b)//false
转换方法
1.数组转字符串方法
var arr1 = ['bangbang',18,'programmer'];
console.log(arr1.toString()); //bangbang,18,programmer
console.log(arr1.toLocaleString());//bangbang,18,programmer
console.log(arr1.join()); //bangbang,18,programmer
console.log(arr1.join('-')); //bangbang-18-programmer
console.log(arr1.valueOf()); //[ 'bangbang', 18, 'programmer' ]
console.log(typeof arr1.valueOf()); //Object
toString、toLocaleString、join的返回值都是字符串,toString()和toLocaleString()把数组变成了以逗号分隔的字符串
join()默认的也是将数组合并成字符串,但是,join可以改变合并的分隔符,上个例子就是把数组合并成用’-‘连接的字符串. 但是valueOf返回 Array 对象的原始值。
var a, b,c;
a = new Array(a,b,c,d,e);
b = a.join('-'); //a-b-c-d-e 使用-拼接数组元素
c = a.join(''); //abcde
2.字符串转数组
实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回
var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]
栈方法
1.push()
push方法可以接收任意数量的参数,把他们逐个添加到数组末尾,并返回修改后数组得到长度
var colors = new Array()
var count = colors.push("red","green")
console.log(count) //2个
2.pop方法从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
var colors = new Array()
var count = colors.push("red","green")
console.log(count) //2个
var item = colors.pop()
console.log(item) //返回移除的项,返回green
队列方法
队列数据结构的访问规则是FIFO(先进先出),队列在列表的末端添加项,从列表的前端移除项
1.shift() 他能够移除数组的第一个项并返回该项
var colors = new Array()
var count = colors.push("red","green")
console.log(count) //2个
var item2 = colors.shift()
console.log(item2) // 返回移除的项,返回red
2.unshift() 在数组前端添加任意项并返回数组的长度
var colors = new Array()
var count = colors.unshift("red","green")
console.log(count)
重排序方法
1.reverse() 反转数组项的顺序
var values = [1,2,3,4,5]
values.reverse()
console.log(values) //[5,4,3,2,1]
2.sort() 按升序排列数组项
sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的,所以首先应该把数组元素都转化成字符串(如有必要),以便进行比较。
var values = [0,1,56,23,34,3];
values.sort(function compare(value1,value2){
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
}else{
return 0;
}
});
console.log(values); //[0, 1, 3, 23, 34, 56]
对于compare函数的解释:比较函数在第一个值应该位于第二个之后的情况下返回1,而在第一个值应该在第二个之前的情况下返回-1。交换返回值的意思是让更大的值排位更靠前,也就是对数组按照降序排序
操作方法
1.concat()基于当前数组中的所有项,创建一个新的数组
var arr1 = [1,2,3,4];
var arr2 = ["a","b","c"];
var c = arr1.concat(arr2,"sv",4,{"a":18,"ss":"ddd"});
console.log(arr1);//[1,2,3,4]
console.log(c);//[1,2,3,4,"a","b","c","sv",4,{"a":18,"ss":"ddd"}]
该方法不会改变原有的数组。参数可以是array,string,number,object。
返回一个新的数组,如果有数组作为参数传入concat()方法里时,添加的是数组中的元素而不是数组本身。
2.slice()
基于当前数组的一个或者多个项,创建一个新数组
slice()通过索引位置获取新的数组,该方法不会修改原数组,只是返回一个新的子数组
arrayObject.slice(start,end)
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素
arrayObj - 原始数组;
start - 必填;设定新数组的起始位置;如果是负数,则表示从数组尾部开始算起(-1 指最后一个元素,-2 指倒数第二个元素,以此类推)。
end - 可选;设定新数组的结束位置;如果不填写该参数,默认到数组结尾;如果是负数,则表示从数组尾部开始算起(-1 指最后一个元素,-2 指倒数第二个元素,以此类推)
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
console.log(colors2); // green, blue, yellow, purple
console.log(colors3); // green, blue, yellow
例1:获取仅包含最后一个元素的子数组
var arr=[1,2,3,4,5];
arr.slice(-1);//[5]
例2:获取不包含最后一个元素的子数组
var arr=[1,2,3,4,5];
arr.slice(0, -1);//[1,2,3,4]
例3:获取包含 从第二个元素开始的所有元素的子数组
var arr=[1,2,3,4,5];
arr.slice(1);//[2,3,4,5]
3.splice()
作用:删除、插入、替换
需要注意的是: splice()方法是直接修改原数组的
(1)删除
语法: array.splice(start,n)
start 指的是从哪个位置开始(不包含start)
n指的是需要删除的个数
var array=[1,2,3,4,5];
var deletes = array.splice(3,2);
console.log(array); //[1,2,3] 索引为3的位置删除2项
console.log(deletes) //[4,5]
(2)插入
插入需要三个参数:起始位置、0(要删除的项数)和要插入的项
在哪个位置插入,原来插入位置的值向后顺移
var colors = ["red", "green", "blue"];
var removed = colors.splice(1,0,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
console.log(removed); // 返回空
(3)替换
替换需要三个参数:起始位置、要删除的项数和要插入的任意数量的项。
var colors = ["red", "green", "blue"];
var removed = colors.splice(1,1,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "blue"]
console.log(removed); // ["green"]
4.位置方法
indexOf()方法从数组的开头(位置为0)开始向后查询。indexOf()方法返回指定数组项在数组中找到的第一索引值。如果通过indexOf()查找指定的数组项在数组中不存在,那么返回的值会是-1
lastIndexOf()方法和indexOf()刚好相反,从一个数组中末尾向前查找数组项,并且返回数组项在数组中的索引值,如果不存在,则返回的值是-1。著作权归作者所有。
let arr = ['orange', '2016', '2016'];
arr.indexOf('orange'); //0
arr.indexOf('o'); //-1
arr.indexOf('2016'); //1
arr.indexOf(2016); //-1
arr.indexOf(‘orange’) 输出 0 因为 ‘orange’ 是数组的第 0 个元素,匹配到并返回下标。
arr.indexOf(‘o’) 输出 -1 因为此方法不会在每一个元素的基础上再次执行 indexOf 匹配。
arr.indexOf(’2016′) 输出 1 因为此方法从头匹配直到匹配到时返回第一个数组元素的下表,而不是返回全部匹配的下标。
arr.indexOf(2016) 输出 -1 注意:这里不会做隐式类型转换。
5.迭代方法
(1)every()
方法测试数组的所有元素是否都通过了指定函数的测试
对数组中的每一项运行给定函数,如果每一项的运行结果都返回 true,则返回 true
//检测数组元素的大小
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
(2)some()
与 every 方法作用类似,但 every 是只有每一项都为 true 才整体返回 true,而 some 是只要数组任何一项返回 true 则整体返回 true
只要有一个数组成员的返回值是true,就返回true,否则false
let arr = [1, 2, 3];
arr.some(value => value > 2);
// true
(3)fliter()
filter用于把Array的某些元素过滤掉,然后返回剩下的元素。Array的filter()可以接收一个函数
var arr = [1,2,3,4,5,6,7];
var ar = arr.filter(function(elem){
return elem>5;
});
console.log(ar);//[6,7]
console.log(arr);//[1,2,3,4,5,6,7]
filter可以解决数组去重问题
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
return self.indexOf(x)===index;
});
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]
filter(x,index,self)可以为数组提供过滤功能,其中x代表元素,index是与X一同传入元素的索引,而self代表数组本身
(4)find()
回通过测试的数组的第一个元素的值
返回值:返回符合测试条件的第一个数组元素的值,如果没有符合条件的则返回undefined
var arr = [1,2,3,4,5,6,7];
var ar = arr.find(function(elem){
return elem>5;
});
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]
(5)Foreach()
array.forEach(function(value, index, arr),thisValue)
用于调用数组每个元素,并将元素传递给回调函数(注意没有办法跳出或终止forEach语句,除非抛出异常)
var arr = [1,2,3,4,5,6,7];
var sum = 0;
var ar = arr.forEach(function(elem){
sum+=elem*4;
});
console.log(ar);//undefined
console.log(arr);//[1,2,3,4,5,6,7]
console.log(sum);//112
(6) map()
array.map(function(value, index, arr),thisValue)
返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()方法按照原始数组元素顺序依次处理元素
var arr = [1,2,3,4,5,6,7];
var ar = arr.map(function(elem){
return elem*4;
});
console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]
归并方法
reduce()
reduce()方法是处理数组的方法,它接收一个函数和一个初始值,然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理,最后返回和初始值相同类型的值
例如,将某个值减去数组中的每个元素:
var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
return minusSum - item;
}
var total = items.reduce(reducer, 61);
console.log(total); // 31
上例中初始值为number类型,所以返回的结果也是number类型的,如果我们想返回object类型的值,也可以传入object类型的初始值
var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
minusSum.sum = minusSum.sum - item;
return minusSum;
}
var total = items.reduce(reducer, {sum: 61});
console.log(total); // {sum: 31}
let sum = [1, 2, 3, 4, 5, 6].reduce((prev, item) => { return prev + item }, 1);
console.log(sum) //22
reduce()是一个很强大的方法,我们还可以用它来处理更复杂的业务逻辑 ,
例如,求购物车中商品的总价,购物车数据如下
var goodList = [
{
good: 'paper',
price: 12
},
{
good: 'book',
price: 58
},
{
good: 'CD',
price: 15
}
]
然后运用reduce()方法可以轻松的获得所有商品的总价格:
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, 0);
console.log(count); // 85
如果用户有10元的优惠券的话,我们只需要将 -10作为初始值传入reduce()方法中就可以了
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, -10);
console.log(count); // 75
我们给例子增加一点难度,商城在搞促销,对商品有一定的折扣,我们应该如何求得商品的总价格呢?利用reduce方法也可以很容易解决的。
var goodList = [
{
good: 'paper',
price: 12
},
{
good: 'book',
price: 58
},
{
good: 'CD',
price: 15
}
];
var dis = {
paper: 0.5,
book: 0.8,
CD: 0.2
}
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, -10);
var qcount = goodList.reduce(function(prev, cur) {
return cur.price * dis[cur.good] + prev;
}, 0);
console.log(count, qcount); // 75 55.400000000000006
求一串字符串中每个字母出现的次数,传统的求法
var arrString = 'fghffgaga';
var strArr = arrString.split('');
var rel = {};
var count = 1;
for (var i = 0; i < strArr.length; i++) {
for (var j = i + 1; j < strArr.length; j++) {
if (strArr[i] == strArr[j]) {
count++;
strArr.splice(j, 1);
j = j - 1;
}
}
var qcount = count;
count = 1;
rel[strArr[i]] = qcount;
}
利用reduce()方法的代码如下:
var arrString = 'fghffgaga';
var rel = arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
console.log(rel); // {f: 3, g: 3, h: 1, a: 2}
//reduce解决js数组扁平化问题
var arr = [1, 2, [3, 4, 5, [6, 7], 8], 9, 10, [11, [12, 13]]]
function flatten(arr){
return arr.reduce(function(prev,item){
return prev.concat(Array.isArray(item)?flatten(item):item)
},[])
}
var result= flatten(arr)
console.log(result)
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]