javascript中的数组方法

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript中的数组方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

把数组转换为字符串

1.toString()

2.join()

删除元素和添加新元素

3.pop() 

4.Push()

位移元素

5.shift()

6.unshift()

更改元素

7.length

拼接数组

8.splice() 

合并(连接)数组

9.concat()

合并三个数组

将数组与值合并

裁剪数组

10.slice() 

数组排序

11.sort()

数字排序

反转数组

12.reverse()

13.filter()

14.forEach()

15.every()

16.reduce()

17.findIndex()

18.some()

19.map()

20.indexOf()

21.find()

22.isArray()

1.copyWithin()

2.entries()

3.fill()

4.flat()

5.flatMap()

6.from()

7.includes()

8.keys()

9.lastIndexOf()

10.of()

11.reduceRight()

12.toLocaleString()

13.toSource()

14.values()

15.Array[@@species]

16.Array.prototype[@@iterator]()


把数组转换为字符串

1.toString()

把数组转换为字符串

把数组转换为数组值(逗号分隔)的字符串。

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 console.log(fruits.toString());

//  输出结果
//  Banana,Orange,Apple,Mango

2.join()

join() 方法也可将所有数组元素结合为一个字符串。

和toString() 类似 ,但是您还可以规定分隔符:

var fruits = ["Banana", "Orange","Apple", "Mango"];
var res= fruits.join(" * "); 
console.log(res)

// Banana * Orange * Apple * Mango

删除元素和添加新元素

3.pop() 

pop() 方法从数组中删除最后一个元素:

返回值:被“删除”的值:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// fruits.pop();    从 fruits 删除最后一个元素("Mango")
var x = fruits.pop();     
 // x 的值是 "Mango"

4.Push()

push() 方法(在数组结尾处)向数组添加一个新的元素:

返回值:新数组的长度:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

5.shift()

shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。

返回值:被“位移出”的字符串:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  
  // 从 fruits 删除第一个元素 "Banana"          
 // 返回 "Banana"

6.unshift()

unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    
// 向 fruits 添加新元素 "Lemon"
// 返回 5

更改元素

7.length

arr.length :返回或设置一个数组中的元素个数

length 属性提供了向数组追加新元素的简易方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

通过使用它们的索引号来访问数组元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

拼接数组

8.splice() 

splice(index,num,其他参数...) 方法可用于向数组添加新项:

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组:

拼接新元素:

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 var a= fruits.splice(2, 0, "Lemon", "Kiwi");
 console.log(a);
 console.log(fruits);

// []
// ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

使用 splice() 来删除元素

第一个参数(0)定义新元素应该被添加(接入)的位置。

第二个参数(1)定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          var a=fruits.splice(0, 1);        // 删除 fruits 中的第一个元素
          console.log(a); // ['Banana']
          console.log(fruits); // ['Orange', 'Apple', 'Mango']

合并(连接)数组

9.concat()

返回值: 合并之后的新数组

concat() 方法通过合并(连接)现有数组来创建一个新数组.

arr1.concat(要合并的数组名)

合并两个数组

var Girls = ["Cecilie", "Lone"];
var Boys = ["Emil", "Tobias", "Linus"];
var Children = Girls.concat(Boys);   // 连接 myGirls 和 myBoys

console.log(Children); // ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus']

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数:

合并三个数组

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   
// 将arr1、arr2 与 arr3 连接在一起
console.log(myChildren);  
//['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin', 'Morgan']

concat() 方法也可以将值作为参数:

将数组与值合并

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 
console.log(myChildren); 
 // ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus']

裁剪数组

10.slice() 

返回值:裁切出来的新数组

slice() 方法用数组的某个片段切出新数组。

slice() 方法创建新数组。它不会从原数组中删除任何元素。

 1个参数: slice(index) 

从索引为index 的位置开始裁切

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);  
console.log(fruits);  //  ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus);  // ['Apple', 'Mango']

 2个参数: slice(开始位置,结束位置) 

该方法会从开始参数选取元素,直到结束参数(不包括)为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
console.log(fruits);  //  ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus);  //  ['Orange', 'Lemon']

数组排序

11.sort()

返回值:排序后的新数组

sort() :以字母顺序对数组进行排序:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var s= fruits.sort();  
console.log(s );  // ['Apple', 'Banana', 'Mango', 'Orange']

数字排序

默认地,sort() 函数按照字符串顺序对值进行排序。

var points = [40, 100, 1, 5, 25, 10];
var s=  points.sort(function(a, b){return a - b}); 

console.log(s); // [1, 5, 10, 25, 40, 100]

反转数组

12.reverse()

reverse() :翻转数组中的元素。

返回值:翻转之后的数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序  
// ['Apple', 'Banana', 'Mango', 'Orange']
var s= fruits.reverse();         // 反转元素顺序
console.log(s);  //  ['Orange', 'Mango', 'Banana', 'Apple']

13.filter()

arr.filter(callback[, thisArg])

filter()参数介绍:

callback 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array) 返回true表示保留该元素(通过测试),false则不保留。

thisArg 可选。执行 callback 时的用于 this 的值。

返回值:返回一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

14.forEach()

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

返回值 : undefined

callback  为数组中每个元素执行的函数,该函数接收一至三个参数:

currentValue  数组中正在处理的当前元素。

index 可选  数组中正在处理的当前元素的索引。

array 可选  forEach() 方法正在操作的数组。

thisArg 可选  可选参数。当执行回调函数 callback 时,用作 this 的值。

遍历数组

forEach() 方法对数组的每个元素执行一次给定的函数。

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

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

// expected output: "a"
// expected output: "b"
// expected output: "c"

15.every()

arr.every(callback(element[, index[, array]])[, thisArg])

element    当前值。

index       可选  当前值的索引

array  可选   当前数组

thisArg   给回调函数指定的 this 值

遍历数组并查询是否所有元素都符合条件---返回的是布尔值

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。

返回值:返回一个布尔值。

若收到一个空数组,此方法在一切情况下都会返回 true

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

16.reduce()

arr.reduce(sum,item) 遍历元素并求和

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + 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
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reducer 函数接收4个参数:

  1. Accumulator (acc) (累计器)
  2. Current Value (cur) (当前值)
  3. Current Index (idx) (当前索引)   可选
  4. Source Array (src) (源数组)  可选
  5. initialValue  回调函数 第一个参数的初始值   可选

17.findIndex()

findIndex() :查找第一个满足条件的元素的索引值 ==== 没有符合条件的返回-1

findIndex(callback[, thisArg])

callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

element  当前元素。

index  当前元素的索引。

array  调用findIndex的数组。

thisArg  可选。执行 callback 时作为this对象的值.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

18.some()

some() 方法测试数组中是不是至少有1个元素符合条件。它返回的是一个Boolean类型的值。

注意:如果用一个空数组进行测试,在任何情况下它返回的都是false

语法;

arr.some(callback(element[, index[, array]])[, thisArg])

callback  回调函数

element  当前元素

index 可选 当前索引值

array 可选  被调用的数组

thisArg   执行 callback 时使用的 this 值。

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

19.map()

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

返回值:返回经过回调函数处理后组成的新数组。

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

callback  生成新数组元素的函数,使用三个参数:

currentValue  callback 数组中正在处理的当前元素。

index可选           callback 数组中正在处理的当前元素的索引。

array可选           map 方法调用的数组。

thisArg可选       执行 callback 函数时值被用作this

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

20.indexOf()

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

arr.indexOf(searchElement[, fromIndex])

searchElement  要查找的元素

fromIndex 可选

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

21.find()

find() 方法返回数组中满足条件的第一个元素的值。否则返回undefined

arr.find(callback[, thisArg])

callback 执行的回调函数,接收 3 个参数:

element  当前元素。

index 可选  当前索引。

array 可选  数组本身。

thisArg 可选   执行回调时用作this 的对象。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

22.isArray()

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

Array.isArray(obj)

obj   需要检测的值。

返回值: 返回布尔值  如果是数组则为true; 否则为false。

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

以上是常见的数组方法:

下面会更新不常用的方法,尽情期待吧~

1.copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

arr.copyWithin(target[, start[, end]])
const array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

2.entries()

3.fill()

4.flat()

5.flatMap()

6.from()

7.includes()

8.keys()

9.lastIndexOf()

10.of()

11.reduceRight()

12.toLocaleString()

13.toSource()

14.values()

15.Array[@@species]

Array[@@species] 访问器属性返回 Array 的构造函数。

arr[Symbol.species]

返回值: arr的构造函数

16.Array.prototype[@@iterator]()

数组的 iterator 方法,默认情况下,与 values() 返回值相同, arr[Symbol.iterator] 则会返回 values() 函数。

arr[Symbol.iterator]()

脚本宝典总结

以上是脚本宝典为你收集整理的javascript中的数组方法全部内容,希望文章能够帮你解决javascript中的数组方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: