JavaScript数组Array常用方法

拼搏现实的明天。 2022-09-16 01:19 273阅读 0赞

## 常用内置方法 ##

### fill() ###

将一个固定值替换数组的元素，并返回一个新的数组，`不改变原数组`。

> 语法：array.fill(value, start, end)

![在这里插入图片描述][d1b8de347ffb425786c2dbcda5b8d39f.png]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var a = fruits.fill("JS", 2, 4);
    console.log(a)  // ["Banana", "Orange", "JS", "JS"]

### find() ###

`检测数组中满足指定条件的第一个元素`：当数组中的元素在测试条件时返回 true 时, find() `返回符合条件的元素`，之后的值不会再调用执行函数；如果没有符合条件的元素`返回 undefined`。  
**注意：不会对空数组进行检测。**

> 语法：array.find(function(currentValue, index, arr),thisValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16]

var ages = [3, 10, 18, 20];
    var age = ages.find(function(item) { 
        return item >= 18;
    })
    console.log(age)  // 18

### filter() ###

`筛选符合条件的所有元素`，并返回一个新的数组，`不改变原数组`。  
**注意：不会对空数组进行检测。**

> 语法：array.filter(function(currentValue,index,arr), thisValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 1]

var ages = [32, 33, 16, 40];
    ages = ages.filter(function(item) { 
        return item >= 18;
    })
    console.log(ages)  // [32, 33, 40]

### forEach() ###

循环遍历，调用数组的每个元素，并将元素传递给回调函数，`总是返回undefined`。  
**注意：不会对空数组进行检测。**

> 语法：array.forEach(function(currentValue, index, arr), thisValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 2]

var array = ['a', 'b', 'c'];
    array.forEach(function(item) { 
    	console.log(item);
    });
    // 输出结果:
    // a
    // b
    // c

### push() ###

添加新元素到数组末尾，`会改变原数组`。  
**注意**： 此方法改变数组的长度。

> 语法：array.push(item1, item2, …, itemX)  
> 参数：item1, item2, …, itemX  
> 描述：必需。要添加到数组的元素。

var array = ['Hello']
    array.push('JavaScript')
    console.log(array)  // ['Hello', 'JavaScript']

### pop() ###

删除数组的最后一个元素并返回删除的元素，`会改变原数组`。  
**注意**： 此方法改变数组的长度。

> 语法：array.pop()

var numbers = [1, 2, 3, 4];
    var lastNum = numbers.pop();
    console.log(numbers)  // [1, 2, 3]
    console.log(lastNum)  // 4

### unshift() ###

添加新元素到数组开头，`会改变原数组`。

> var array = \[‘Hello’\]  
> array.unshift(‘JavaScript’)  
> console.log(array) // \[‘JavaScript’， ‘Hello’\]

### shift() ###

删除数组的第一个元素并返回删除的元素，`会改变原数组`。  
**注意**： 此方法改变数组的长度。

> 语法：array.shift()

var numbers = [1, 2, 3, 4];
    var firstNum = numbers.shift();
    console.log(numbers)  // [2, 3, 4]
    console.log(firstNum)  // 1

### concat() ###

合并数组，`不会改变原数组，返回一个新的数组`。

> 语法：array1.concat(array2,array3,…,arrayX)  
> 参数：array2, array3, …, arrayX  
> 描述：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var kai = ["Robin"];
    var children = hege.concat(stale,kai);
    console.log(children) // ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]

### join() ###

把数组中的所有元素转换为一个字符串，`返回一个字符串`。

> 语法：array.join(separator)  
> 参数：separator  
> 描述：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var energy = fruits.join("|");
    console.log(energy)  // Banana|Orange|Apple|Mango

### isArray() ###

判断一个对象是否为数组，`对象是数组返回 true，否则返回 false`。

> 语法：Array.isArray(obj)  
> 参数：obj  
> 描述：必需，要判断的对象。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var isarray = Array.isArray(fruits);
    console.log(isarray)  // true

### includes() ###

判断数组是否包含一个指定的值，如果是返回 true，否则false。

> 语法：arr.includes(searchElement, fromIndex)

![在这里插入图片描述][1c0dbd5c597f45f9a44f3cd67947314e.png]

var array = ['hello', 'javascript'];
    var bool = array.includes('javascript');
    console.log(bool)  // true

### indexOf() ###

`查找数组中指定元素第一次出现的索引位置`：如果找到一个指定元素 item，则返回 item 的第一次出现的位置；如果没找到指定元素则返回 -1。开始位置的索引为 0。

> 语法：array.indexOf(item,start)

![在这里插入图片描述][7d610d6ffd4643e1be013a16a91390a3.png]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var index = fruits.indexOf("Apple");
    console.log(index)  // 2

### lastIndexOf() ###

`查找数组中指定元素最后一次出现的索引位置`：该方法将从尾到头地检索数组中指定元素 item，如果找到一个指定元素 item，则返回 item 从尾到头检索的第一次出现的位置；如果没找到指定元素则返回 -1。开始位置的索引为 0。

> 语法：array.lastIndexOf(item,start)

![在这里插入图片描述][ff0ac6fc0e5d4cdcae45942f7522eabb.png]

var fruits = ["Banana", "Apple", "Orange", "Apple", "Mango"];
    var index = fruits.lastIndexOf("Apple");
    console.log(index)  // 3

### map() ###

通过`指定函数处理数组的每个元素`，并`返回处理后的数组`，`不改变原数组`。  
**注意：不会对空数组进行检测。**

> 语法：array.map(function(currentValue,index,arr), thisValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 3]

var numbers = [4, 9, 16, 25];
    numbers = numbers.map(function(item) { 
    	return item + 1
    })
    console.log(numbers)  // [5, 10, 17, 26]

### every() ###

`检测数组中的所有元素是否都符合指定条件`：如果`数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测`；如果`所有元素都满足条件，则返回 true`。  
**注意：不会对空数组进行检测。**

> 语法：array.every(function(currentValue,index,arr), thisValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 4]

var ages = [32, 33, 16, 40];
    var bool = ages.every(function(item) { 
        return item >= 18;
    })
    console.log(bool)  // false

### some() ###

`检测数组中的元素是否满足指定条件`：如果`有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测`；如果`没有满足条件的元素，则返回false`。  
**注意：不会对空数组进行检测。**

> 语法：array.some(function(currentValue,index,arr),thisValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 5]

var ages = [3, 10, 18, 20];
    var bool = ages.some(function(item) { 
        return item >= 18;
    })
    console.log(bool)  // true

### reduce() ###

数组元素求和，接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。  
**注意：不会对空数组进行检测。**

> 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 6]

var numbers = [65, 44, 12, 4];
    var total = numbers.reduce(function(total, num) { 
    	return total + num;
    }, 0)
    // 简写：var total = numbers.reduce((total, num) => total + num, 0)
    console.log(total)

### reverse() ###

数组倒序，`会改变原数组`。

> 语法：array.reverse()

var numbers = [1, 2, 3, 4]
    numbers.reverse()
    console.log(numbers)  // [4, 3, 2, 1]

### sort() ###

对数组的元素进行排序，默认排序顺序为按字母升序。使用数字排序，必须通过一个函数作为参数来调用。`会改变原数组`。

> 语法：array.sort(sortfunction)

![在这里插入图片描述][9cb269e149194e5aa43c952ee21aaa5f.png]

var numbers = [40,100,1,5,25,10];
    numbers.sort(function(a, b){ return a-b});
    console.log(numbers)  // [1, 5, 10, 25, 40, 100]

### slice() ###

从已有的数组中返回选定的元素，返回一个新的数组，`不会改变原始数组`。

> 语法：array.slice(start, end)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 7]

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

### splice() ###

添加或删除数组中的元素，`会改变原数组`。

> 语法：array.splice(index,howmany,item1,…,itemX)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 8]

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

[d1b8de347ffb425786c2dbcda5b8d39f.png]: /images/20220828/776295b04cdf40319b9e775018de8d1b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/766075ee32db4e61b5da5719348a049d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/1b26da108cf945b79bf7e2c03f875ece.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/29a22a6193be4ee5aaddea6582f69b1e.png
[1c0dbd5c597f45f9a44f3cd67947314e.png]: /images/20220828/f4281c09178e4d20b4be2e3cbd818903.png
[7d610d6ffd4643e1be013a16a91390a3.png]: /images/20220828/a41080ce4c044f6b98a8d72c54ffcd9b.png
[ff0ac6fc0e5d4cdcae45942f7522eabb.png]: /images/20220828/b9d1adcdc9b24c40a5fd26cc5fa35a0d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/e8e92900b24147738afbead8f2c0b98f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/3cfc0d7e03f84cb983313cba21de93aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/b8ed48178da243a4a37a97ace0bbc106.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/8e21b1c6fe6e44b89e9c3c63ccd4752b.png
[9cb269e149194e5aa43c952ee21aaa5f.png]: /images/20220828/fdb498976ed34903aac88ddc3c3c2fcb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/a49628e38b484a5eafa703f630632477.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/6395585c2f014ebaa745c40a540740f3.png