首页 > 文章 > web前端 > JS常用的数组方法总结

JS常用的数组方法总结

php中世界最好的语言原创: 2018-03-07 14:51:052087浏览

这次给大家带来JS常用的数组方法总结，在JS中使用数据时注意事项有哪些，下面就是实战案例，一起来看一下。

1、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

示例：
var array1 = ['a', 'b', 'c'];

var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));

// ["a", "b", "c", "d", "e", "f"]

2、filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 (可用于筛选)

示例：
function isBigEnough(value) {
return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

// ES6 way

const isBigEnough = value => value >= 10;

let [...spread]= [12, 5, 8, 130, 44];

let filtered = spread.filter(isBigEnough);

3、find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

示例：
function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

4、findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough);
// index of 4th element in the Array is returned,
// so this will result in '3'

5、forEach() 方法对数组的每个元素执行一次提供的函数。（相当于JavaScript里的for循环）

示例：

const arr = ['a', 'b', 'c'];

arr.forEach(function(element) {
console.log(element);
});

arr.forEach( element => console.log(element));

// a
// b
// c

6、indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

示例：
let a = [2, 9, 7, 8, 9];
a.indexOf(2); // 0
a.indexOf(6); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1

if (a.indexOf(3) === -1) {
// element doesn't exist in array
}

7、map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

示例：
// ES6
let numbers = [1, 5, 10, 15];
let doubles = numbers.map( x => x ** 2);

// doubles is now [1, 25, 100, 225]
// numbers is still [1, 5, 10, 15]

const numbers = [2, 4, 8, 10];
let halves = numbers.map(x => x / 2);

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

8、pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

示例：
let a = [1, 2, 3];
a.length; // 3

a.pop(); // 3

console.log(a); // [1, 2]
a.length; // 2

9、reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

示例：

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator +currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

// expected output: 10
// 5 + 1 + 2 + 3 + 4

console.log(array1.reduce(reducer, 5));
// expected output: 15
// filtered is [12, 130, 44]

10、Array.isArray() 用于确定传递的值是否是一个 Array

示例：

Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

11、Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组示例。

示例：
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

12、fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

示例：
var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

语法：
arr.fill(value[, start[, end]])
即（填充的值，开始值（索引），结束值（从1开始））

13、includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

示例：
let a = [1, 2, 3];

a.includes(2);
// true

a.includes(4);
// false

14、join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。

示例：
let a = ['Wind', 'Rain', 'Fire'];

console.log(a.join());
// 默认为 ","
// 'Wind,Rain,Fire'

console.log(a.join(""));
// 分隔符 === 空字符串 ""
// "WindRainFire"

console.log(a.join("-"));
// 分隔符 "-"
// 'Wind-Rain-Fire'

15、push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。

示例：
var numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

numbers.push(5, 6, 7);

console.log(numbers);
// [1, 2, 3, 4, 5, 6, 7]

16、reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。与 Array.prototype.reduce() 的执行方向相反

示例：
let flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduceRight((a, b) => {
return a.concat(b);
}, []);

// flattened is [4, 5, 2, 3, 0, 1]

17、shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

示例：
let a = [1, 2, 3];
let b = a.shift();

console.log(a);
// [2, 3]

console.log(b);
// 1

18、slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

示例：
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

19、some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

示例：
const isBiggerThan10 = (element, index, array) => {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);
// false

[12, 5, 8, 1, 4].some(isBiggerThan10);
// true

20、sort() 方法用就地（ in-place ）的算法对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

示例：
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort();
// ['apples', 'bananas', 'cherries']

21、splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

示例：
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）
// myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

语法：
array.splice(start)

array.splice(start, deleteCount)

array.splice(start, deleteCount, item1, item2, ...)

参数：
start
指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从1计数）；若只使用start参数而不使用deleteCount、item，如：array.splice(start) ，表示删除[start，end]的元素。
deleteCount 可选
整数，表示要移除的数组元素的个数。如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果deleteCount被省略，则其相当于(arr.length - start)。
item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
splice方法使用deleteCount参数来控制是删除还是添加：
start参数是必须的，表示开始的位置（从0计数），如：start=0从第一个开始；start>= array.length-1表示从最后一个开始。
①、从start位置开始删除[start，end]的元素。
array.splice(start)
②、从start位置开始删除[start，Count]的元素。
array.splice(start, deleteCount)
③、从start位置开始添加item1, item2, ...元素。
array.splice(start, 0, item1, item2, ...)

22、toString() 返回一个字符串，表示指定的数组及其元素。

23、unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

示例：

let a = [1, 2, 3];
a.unshift(4, 5);

console.log(a);
// [4, 5, 1, 2, 3]

24、substring() 方法用于提取字符串中介于两个指定下标之间的字符。
示例：
var str="Hello world!";
document.write(str.substring(3)+"
");//lo world!
document.write(str.substring(3,7));//lo w

语法：
string.substring(from, to)

参数
from
必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。
to
可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。

25、substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
示例
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3,7));p//lo worl
语法：
stringObject.substr(start,length)

参数：
start
必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length
可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！