数组常用方法
1.push()
添加一个或多个参数到数组的尾部,原来数组会改变,返回的是添加后的数组的长度
例:
var arr=[1,2,3,4];
movePos.shift()
console.log(arr) 返回 4
2.pop()
从数组尾部删除一个元素,原数组会改变,返回的是被删除的元素
例:
var arr = ["red","green"];
var arr2= arr.pop(); // 取得最后一项并移除了
alert(arr2); 打印结果 //green
3.unshift()
添加一个或多个参数到原来数组的头部,原来的数组会改变,返回的是添加后的数组的长
例:
var arr =[111,222,333,444];
arr.unshift("555")
document.write(arr)// 打印出的数组结果[555,111,222,333,444]
4.shift()
从数组头部删除一个元素,原数组会改变,并返回第一个元素的值
例:
var arr=[1,2,3,4,5];
arr.shift()
console.log(arr)//[2] 返回删除后第一个元素的值
document.write(arr.length);//4 打印删除后1的数组长度
5.slice()
从数组中截取,不传参返回原数组。传一个参数,从头部开始删除,到数组结束,原数组不变;传两个参数,slice(开始截取位置,结束截取位置)
最多接受两个参数。
slice()语法:arrayObject.slice(start,end)
注:
①:start表示从何处开始选取,end表示从何处开始结束选取,表示一个选取的范围
②:start可以为负数,此时它规定从数组尾部开始算起的位置。也就是-1 ,指最后一个元素,-2 指倒数第二个元素,以此类推
③:end如果没有被指定参数,数组会包含从 start 到最后一个数组元素的所有元素
④:slice()方法不会修改数组本身,而是返回所选取范围的数组元素。如果想删除数组中的某一个元素,需要使用splice()
下面来看一些例子
这里的取值范围是0-2(start-end),因为数组的下标是从0开始,所以这里的2就是下面数组中的 javascript元素
这里需要注意的是0-2选取的元素是html和css,并不包括javascript
如果只有start
,则会选择start
开始到end
之间的所有数组元素
如果start是负数,则会从数组尾部开始算起。这里只有start没有end,且start为负数,所以只能获取到最后1个数组元素
6.splice()
截取类 没有参数,返回空数组,原数组不变;一个参数,从该参数表示的索引开始截取,直至数组结束,返回截取的 数组,原数组改变;两个参数,第一个是截取的索引位,第二个表示截取的长度,返回截取的 数组,原数组改变;三个及以后的参数表示要从截取位插入的值。
splice()定义:从数组中添加或删除元素,然后返回被删除的数组元素。
splice()语法:arrayObject.splice(index,howmany,item1,…,itemX)
注:
①:index表示从什么位置开始添加或删除数组元素
②:howmany表示删除的元素数量,如果为0,则表示不删除数组元素
③:tem1,…,itemX表示新增的数组元素
④:slice()方法会改变原始数组
下面来看一些例子:
从第3个元素(即 javascript)开始且不删除元素,并在第3个元素前面新增1个元素hello
从第3个元素开始且删除1个元素(这里删除的元素是 javascript),并在原来第3个元素的位置新增1个元素hello
从最后1个元素开始并删除最后1个元素,同时在删除的最后1个元素的位置新增1个元素hello
从最后1个元素开始且不删除元素,同时在最后1个元素前面新增1个元素hello
7.reverse()
数组翻转 方法用于颠倒数组中元素的顺序。
var nums = [10, 20, 30, 40, 50];
nums.reverse();
8.sort()
数组排序
sort() 方法用于对数组的元素进行排序,并返回数组。 默认排序顺序是根据字符串UniCode码。
因为排序是按照字符串UniCode码的顺序进行排序的, 所以首先应该把数组元素都转化成字符串(如有必要),以便进行比较。
语法:arrayObject.sort(sortby);
参数sortby 可选,用来规定排序的顺序,但必须是函数。
升序:
降序:
按照数组对象中某个属性值进行排序
9.join()
数组拼接
join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串。
str.join(sequence) 函数中的 sequence 中的元素必须的字符串,否则会报错。
str.join(sequence)
参数:sequence – 要连接的元素序列。
返回值: 返回通过指定字符连接序列中元素后生成的新字符串。
以下实例展示了join()的使用方法:
//例:
s1 = "_"
s2 = ""
seq = ("r", "u", "n", "o", "o", "b") # 字符串序列
print(s1.join(seq))
print(s2.join(seq))
# 结果为
r-u-n-o-o-b
runoob
10.isArray()
判断是否是数组
Array 类型的一个静态方法,使用它可以判断一个值是否为数组。
//例:
var a = [1,2,3];
console.log(typeof a); //返回“object”
console.log(Array.isArray(a)); //true
11.toString()
数组转字符串
语法:arr.toString()
概述:
toString() 返回一个字符串,表示指定的数组及其元素。
例:
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.
数组常用的方法(ES6)
一、forEach
:遍历数组
var colors = ["red","blue","green"];
// ES5遍历数组方法
for(var i = 0; i < colors.length; i++){
console.log(colors[i]);//red blue green
}
// ES6 forEach
colors.forEach(function(color){
console.log(color);//red blue green
});
我们再来看个例子:遍历数组中的值,并计算总和
var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15
二、map
:将数组映射成另一个数组
用法:
map通过指定函数处理数组的每个元素,并返回处理后新的数组,map 不会改变原始数组。
注意:
forEach和map的区别在于,forEach没有返回值。 map需要返回值,如果不给return,默认返回undefined
使用场景1 假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
var numbers = [1,2,3];
var doubledNumbers = [];
// es5写法
for(var i = 0; i < numbers.length; i++){
doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers);//[2,4,6]
// es6 map方法
var doubled = numbers.map(function(number){
return number * 2;
})
console.log(doubled);//[2,4,6]
使用场景2 假定有一个对象数组(A),将A数中对象某个属性的值存储到B数组中
var cars = [
{model:"Buick",price:"CHEAP"},
{model:"BMW",price:"expensive"}
];
var prices = cars.map(function(car){
return car.price;
})
console.log(prices);//["CHEAP", "expensive"]
三、filter
:从数组中找出所有符合指定条件的元素
用法:
filter() 检测数值元素,并返回符合条件所有元素的数组。 filter() 不会改变原始数组。
使用场景1:假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中
//操作的数组
var porducts = [
{name:"cucumber",type:"vegetable"},
{name:"banana",type:"fruit"},
{name:"celery",type:"vegetable"},
{name:"orange",type:"fruit"}
];
- es5写法
var filteredProducts = [];
for(var i = 0; i < porducts.length; i++){
if(porducts[i].type === "fruit"){
filteredProducts.push(porducts[i]);
}
}
console.log(filteredProducts);//[{name: "cucumber", type: "vegetable"},
{name: "celery", type: "vegetable"}]
- es6 filter
var filtered2 = porducts.filter(function(product){
return product.type === "vegetable";
})
console.log(filtered2);
使用场景2:假定有一个对象数组(A),过滤掉不满足以下条件的对象 条件: 蔬菜 数量大于0,价格小于10
//默认操作的数据
var products = [
{name:"cucumber",type:"vegetable",quantity:0,price:1},
{name:"banana",type:"fruit",quantity:10,price:16},
{name:"celery",type:"vegetable",quantity:30,price:8},
{name:"orange",type:"fruit",quantity:3,price:6}
];
filter过滤:
products = products.filter(function(product){
return product.type === "vegetable"
&& product.quantity > 0
&& product.price < 10
})
console.log(products);//[{name:"celery",type:"vegetable",quantity:30,price:8}]
使用场景3:假定有两个数组(A,B),根据A中id值,过滤掉B数组不符合的数据
var post = {id:4,title:"Javascript"};
var comments = [
{postId:4,content:"Angular4"},
{postId:2,content:"Vue.js"},
{postId:3,content:"Node.js"},
{postId:4,content:"React.js"},
];
filter 操作
function commentsForPost(post,comments){
return comments.filter(function(comment){
return comment.postId === post.id;
})
}
console.log(commentsForPost(post,comments));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]
四、find
:返回通过测试(函数内判断)的数组的第一个元素的值
它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。 使用场景1 假定有一个对象数组(A),找到符合条件的对象
//默认操作的数据
var users = [
{name:"Jill"},
{name:"Alex",id:2},
{name:"Bill"},
{name:"Alex"}
];
- es5方法
var user;
for(var i = 0; i < users.length; i++){
if(users[i].name === "Alex"){
user = users[i];
break;//找到后就终止循环
}
}
console.log(user);// {name:"Alex",id:2}
- es6 find
user = users.find(function(user){
return user.name === "Alex";
})
console.log(user);// {name:"Alex",id:2}找到后就终止循环
使用场景2:假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
//默认操作的数据
var posts = [
{id:3,title:"Node.js"},
{id:1,title:"React.js"}
];
var comment = {postId:1,content:"Hello World!"};
操作 find
function postForComment(posts,comment){
return posts.find(function(post){
return post.id === comment.postId;
})
}
console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}
五、every&some
- every:数组中是否每个元素都满足指定的条件
- some:数组中是否有元素满足指定的条件
使用场景1:计算对象数组中每个电脑操作系统是否可用,大于16位操作系统表示可用,否则不可用
//ES5方法
//初始化默认数据
var computers = [
{name:"Apple",ram:16},
{name:"IBM",ram:4},
{name:"Acer",ram:32}
];
操作:
var everyComputersCanRunProgram = true;
var someComputersCanRunProgram = false;
for(var i = 0; i < computers.length; i++){
var computer = computers[i];
if(computer.ram < 16){
everyComputersCanRunProgram = false;
}else{
someComputersCanRunProgram = true;
}
}
console.log(everyComputersCanRunProgram);//false
console.log(someComputersCanRunProgram);//true
//ES6 some every
var every = computers.every(function(computer){
return computer.ram > 16;
})
console.log(every);//false
var some = computers.some(function(computer){
return computer.ram > 16;
})
console.log(some);//true
一言以蔽之:Every: 全真即真;Some: 一假即假
六、reduce
:将数组合成一个值
reduce() 方法接收一个方法作为累加器,数组中的每个值(从左至右) 开始合并,最终为一个值。
使用场景1: 计算数组中所有值的总和
//默认初始化的数据
var numbers = [10,20,30];
var sum = 0;
//es5 方法
for(var i = 0; i < numbers.length; i++){
sum += numbers[i];
}
console.log(sum);
// es6 reduce
var sumValue = numbers.reduce(function(sum2,number2){
console.log(sum2);//0 10 30 60
return sum2 + number2;
},0);//sum2初始值为0
console.log(sumValue);
使用场景2: 将数组中对象的某个属性抽离到另外一个数组中
//默认初始化数据
var primaryColors = [
{color:"red"},
{color:"yellow"},
{color:"blue"}
];
var colors = primaryColors.reduce(function(previous,primaryColor){
previous.push(primaryColor.color);
return previous;
},[]);
console.log(colors);//["red", "yellow", "blue"]