数组方法
目录
一、ES4的数组方法
join( )
是将数组内的所有元素转化为字符串并拼接在一起，最后返回生成的字符串。可以指定一个可选的字符串，来分隔数组得各个元素，默认使用 “,” 相隔
实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>join()</h2>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
结果：
Banana * Orange * Apple * Mango
sort( )
- 目的：将数组的元素按照一定规则排序.
- 参数：传超过1个的函数，默认取第一个函数，没参数的时候数组元素默认按照字母表顺序排序.
- 函数参数：
1.你必须给sort()方法传递一个比较函数，所以一般传递2个参，PS:第3个默认undefined.
2. 假设第一个参数应该在前，你应该返回一个小于0的数值，否则，你应该返回一个大于0的数值,
3.假设两个值相等，函数应该返回0.
4.数组元素是从前到后 俩俩比较.
- 是否改变原数组: 改变原来的数组.
例子：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
结果：
George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
reverse( )
- 目的：
将数组中的元素颠倒顺序. - 参数：
没有参数. - 是否改变原数组:
改变原来的数组.
例子：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.reverse())
</script>
结果：
George,John,Thomas
Thomas,John,George
concat( )
- 目的：像胶水一样，将参数粘合在数组后面
- 参数：字符串或数组
- 是否改变原数组:不改变原数组, 返回一个新的数组.
例子：
<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
结果：
1,2,3,4,5
slice( )
- 目的：返回数组的一个片段或子数组.
- 参数：一个或者两个参数
- 是否改变原数组: 不改变原数组, 返回一个新的数组
例子：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
</script>
结果：
George,John,Thomas
John,Thomas
George,John,Thomas
splice();
- 目的：从数组中删除元素、插入元素、或者同时完成这俩种操作.
- 参数：前俩个参数指定了删除，从第三个参数开始，指定拼接。
- 是否改变原数组: 改变原来的数组.
例子：
结果：
push( )和pop( )
目的：向数组中插入或删除元素.
参数：push()方法不限制参数，不会扁平化数组。pop()方法不传参数.
行为：从尾部插入或删除值，push()方法返回数组长度，pop()方法返回被删除的值.
是否改变原数组: 改变原来的数组.
例子：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
结果：
George,John,Thomas
4
George,John,Thomas,James
unshift( )和shift( )
- 目的：向数组中插入或删除元素.
- 参数：unshift()方法不限制参数，在数组的头部，而不是改变参数的顺序。shift()方法无视参数.
- 行为：在数据的头部操作.
- 是否改变原数组: 改变原来的数组.
例子：
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)
</script>
结果：
George,John,Thomas
4
William,George,John,Thomas
toString( )和toLocaleString( )
- 目的：将数组的每个方法转化为字符串，并且输出用逗号分隔的字符串列表.
- 参数：俩个方法无视参数.
- 是否改变原数组: 不改变原数组, 返回一个新的字符串.
两者区别
var a=1234
a.toString() //"1234"
a.toLocaleString() //"1,234"
//当数字为四位数时，toLocaleString()把数字按每3个用','分割。
ES5的数组方法
indexOf( )和lastIndexOf( )
- 目的：搜索数组中具有给定值的元素。
- 参数：第一个参数指的是需要搜索的值，返回则找到第一个元素的索引
- lastIndexOf() 指从前往后查询. lastIndexOf() 指从后往前查询.
例子：
//indexOf()与lastIndexOf()的区别
public static void main(String[] args) {
String name = "123456789";
String name1 = "888888888";
String name0 = "123456778";
System.out.println(name1.indexOf("8"));//0
System.out.println(name1.lastIndexOf("8"));//8
}
结果：
indexOf()是从左往右找，lastIndexOf()是从右往左找第一个。
map( )
- 目的：将数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值．
- 参数：一个带有return的函数（函数中的return的值将被传递给新数组）．
- 是否改变原数组: 不改变原数组，返回一个新数组。
例子：
var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);
结果：
> Array [2,8,18,32]
filter( )
- 目的：将数组的每个元素传递给指定的函数，并返回一个数组.
- 参数：一个带有return的函数．
- 是否改变原数组: 不改变原数组，返回一个新数组，新数组是原数组的子集
例子：
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
结果：
32,33,40
every( )和some( )
- 目的：对数组元素应用指定的函数判定.
- 参数：二者都需要一个函数.
- 是否改变原数组: 不改变原数组，返回一个新数组。
例子：
<script>
//--------some------------
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.some(function (item, index) {
console.log('item=' + item + ',index=' + index);
return item > 2;
}));
//some的结果
//item=1,index=0
//item=2,index=1
//item=3,index=2
//true
//-------every--------
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index){
console.log( 'item=' + item + ',index='+index);
return item > 2;
}));
//every结果
//item=1,index=0
//false
</script>
结果：
ES6的数组方法
Array.from( )
- 目的：将类数组对象和可遍历对象转化为数组．
- 参数：第二个参数类似于数组中的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组.
- 用法：const toArray = (() => Array.from ? Array.from : obj => [ ].slice.call(obj) )().
例子：
console.log(Array.from('foo'));
// Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// Array [2, 4, 6]
Array.of( )
- 目的：将一组值转化为数组．
- 参数：无或无限(无时返回一个空数组).
例子：
Array.of(element0[, element1[, ...[, elementN]]])
find( )和findIndex( )
- 目的：在数组内部, 找到第一个符合条件的数组成员．
- 参数：回调函数接受三个参数，表示当前值，当前位置，原数组.
例子：
var stu = [
{
name: '张三',
gender: '男',
age: 20
},
{
name: '王小毛',
gender: '男',
age: 20
},
{
name: '李四',
gender: '男',
age: 20
}
]
<script>
stu.find((element) => (element.name == '李四'));
//返回的是{name: "李四", gender: "男", age: 20}这个元素
stu.findIndex((element)=>(element.name =='李四'));
//返回的是索引下标：2
</script>
fill( )
-
目的：如其意，
填充一个数组． -
参数：
1.第一个参数表示
被填充的元素.
2.第二个参数表示填充的起始位置.
3.第三个参数表示填充的结束位置.
例子：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
结果：
Runoob,Runoob,Runoob,Runoob
ES7的数组方法
includes( )
- 目的：表示某个数组是否包含给定的值，与字符串的includes()方法类似.
- 参数：第一个参数
表示要查找的数，第二个参数表示搜索的起始位置，返回一个布尔值.
例子：
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
定义和用法：
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
