数组常用的方法

js中数组常用的方法和属性

创建数组的三种方式

1，常规方法

ini
复制代码
var arr = new Array ();
arr[0]="abc"; 
arr[1]="def"

2,简洁方式

ini
复制代码
var arr = new Array("abc","def");

3，字面量方式

ini
复制代码
var arr = []; 
arr=["abc","def"];
var arr=["abc","def"]

数组对象的属性

属性	描述
constructor	返回对创建此对象的数组函数的引用
length	设置或返回数组中元素的数目
prototype	使您有能力向对象添加属性和方法

数组对象常用的方法

修改原数组

push() 方法和 pop() 方法

push()方法用于向数组末尾添加一个或多个元素，并返回修改后的数组的新长度。

ini
复制代码
const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4

pop() 方法用于删除并返回数组的最后一个元素。

ini
复制代码
const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['苹果', '香蕉']
console.log(lastFruit); //橘子

shift() 方法和 unshift() 方法

unshift() 方法用于向数组的开头添加一个或多个元素，并返回修改后的数组的新长度。

ini
复制代码
const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits);        //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4

shift() 方法用于删除并返回数组的第一个元素。

ini
复制代码
const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits);      //[ '香蕉', '橘子' ]
console.log(firstFruit);  //苹果

splice() 方法

splice() 方法用于从数组中删除、替换或添加元素，并返回被删除的元素组成的数组，它会直接修改原数组。

语法：array.splice(start, deleteCount, item1, item2, ...)

其中，start表示要修改的起始位置，deleteCount表示要删除的元素个数，item1、item2等表示要添加的元素。如果deleteCount为0，则表示只添加元素，不删除元素。

javascript
复制代码
//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2));  //[ 1, 2 ] 返回被删除的元素
console.log(arr);  //[ 3, 4, 5 ]   该方法会改变原数组

//实现添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原数组改变了

// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,"aaa","bbb")); //[ 3 ]  返回被删除的一个元素
console.log(arr3);  //[ 1, 2, 'aaa', 'bbb', 4, 5 ]  可以添加字符串

let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ]  返回被删除的四个元素
console.log(arr4);  //[ 1, 666 ]

fill() 方法

JS中的fill方法可以填充一个数组中的所有元素，它会直接修改原数组。

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

其中，value表示要填充的值，start和end表示要填充的起始位置和结束位置。如果不传入start和end，则默认填充整个数组。该方法返回的是被修改后的原数组。

scss
复制代码
let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

//将数组中从位置2到位置4(不包括位置4)的元素都填充为6
arr.fill(6, 2, 4);
console.log(arr);  //[ 0, 0, 6, 6, 0 ]

sort() 方法

sort() 方法用于对数组进行排序，会直接修改原始数组，而不会创建新的数组。默认情况下，它按照 Unicode 码点进行排序。但是，可以传入自定义的比较函数来实现基于其他规则的排序。

比较函数：比较函数接收两个参数，通常被称为 a 和 b，表示进行比较的两个元素。它应该返回一个负数、零或正数，表示 a 应该在 b 之前、与 b 相同位置还是在 b 之后。比较函数的返回值规则如下：

如果返回值小于 0，则 a 排在 b 前面。
如果返回值等于 0，则 a 和 b 的相对位置不变。
如果返回值大于 0，则 a 排在 b 后面。

css
复制代码
const arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr);  //[1, 2, 3, 4, 5]

//默认排序（按照 Unicode 码点排序）
const arr = ['f', 'k', 'c', 'a', 'b'];
arr.sort();
console.log(arr);  //[ 'a', 'b', 'c', 'f', 'k' ]

//使用比较函数进行自定义排序
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => a - b);
console.log(arr);  //[ 1, 2, 10, 13, 26, 66 ]

const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => b - a);
console.log(arr);  //[ 66, 26, 13, 10, 2, 1 ]

reverse() 方法

reverse() 方法用于反转数组中的元素顺序，即将数组元素进行逆序排列。

ini
复制代码
const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[ 5, 4, 3, 2, 1 ]

不修改原数组

join() 方法

join() 方法用于将数组中的所有元素以指定的分隔符连接成一个字符串（注：默认是以"逗号"分割）。

ini
复制代码
const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits);  //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子

concat() 方法

concat() 方法用于合并两个或多个数组，返回一个新的数组。

ini
复制代码
const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]

slice() 方法

slice() 方法用于从数组中截取指定位置的元素，返回一个新的数组。

语法是：array.slice(start, end)，其中，start和end都是可选参数，表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组，包含从start到end（不包括end）的元素。

ini
复制代码
//slice不改变原数组
const names = ['张三', '李四', '王五', '赵六'];
console.log(names);          //[ '张三', '李四', '王五', '赵六' ] 
const slicedNames = names.slice(1, 3);
console.log(slicedNames);  //[ '李四', '王五' ]
const slicedNames1 = names.slice();
console.log(slicedNames1); //[ '张三', '李四', '王五', '赵六' ] 
const slicedNames2 = names.slice(0);
console.log(slicedNames2); //[ '张三', '李四', '王五', '赵六' ] 
const slicedNames3 = names.slice(2);
console.log(slicedNames3); //[ '王五', '赵六' ]
const slicedNames4 = names.slice(3);
console.log(slicedNames4); //[ '赵六' ]
const slicedNames5 = names.slice(4);
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组

数组查找API

1.includes()方法

includes方法用于检查数组中是否包含某个元素，如果包含则返回 true，否则返回 false。

与 indexOf() 方法不同，includes() 方法不支持指定起始位置，它从数组的开头开始搜索。

arduino
复制代码
const fruits = ['苹果', '香蕉', '橘子', '西瓜', 1, 2, 3];
console.log(fruits.includes('橘子')); //true
console.log(fruits.includes('葡萄')); //false
console.log(fruits.includes(3));      //true
console.log(fruits.includes(4));      //false

2.indexOf()方法

需要注意的是，indexOf方法只会返回第一个匹配项的位置。如果数组中存在多个相同的元素，该方法只会返回第一个元素的位置。

此外，indexOf方法还可以接受一个可选的第二个参数，用于指定从哪个位置开始查找。

arduino
复制代码
js
复制代码
const fruits = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
console.log(fruits.indexOf('橘子', 1));  //2  返回元素下标
console.log(fruits.indexOf('橘子', 3));  //-1  没有该元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 从下标6开始查找元素5
console.log(arr.indexOf(5,6)); //9

3.lastIndexOf()()方法

lastIndexOf() 方法用于查找数组中某个元素最后一次出现的索引（位置），如果找到则返回该索引值，否则返回 -1。

arduino
复制代码
js
复制代码
const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1

4.findIndex()方法

findIndex() 方法用于查找数组中满足条件的元素的索引，如果找到则返回该索引值，否则返回 -1。

ini
复制代码
js
复制代码
const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index);   //3  返回第一个符合条件的元素的下标
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1  不存在符合条件的元素

5.find()方法

find()方法用于在数组中查找符合条件的第一个元素，并返回该元素的值。需要注意的是，如果没有找到符合条件的元素，find()方法会返回undefined。

find()方法接受一个回调函数作为参数，该回调函数会对数组中的每个元素进行调用，直到找到一个使回调函数返回true的元素为止。一旦找到这样的元素，find()方法就会立即返回这个元素的值，而不再继续搜索数组。

下面是一个简单的例子，演示了find()方法的使用：

ini
复制代码
const numbers = [10, 20, 30, 40, 50];

const found = numbers.find(function(number) {
  return number > 25;
});

console.log(found); // 输出 30

在这个例子中，find()方法会找到数组中第一个大于25的元素，并返回它的值。在这种情况下，返回的值是30。

valueOf()方法

valueOf(): 方法返回 Array 对象的原始值，不会改变原数组。

语法: array.valueOf()

返回值：返回的是一个对象，也是原对象本身。

代码示例(如下)

c
复制代码

 let array = [1, 2, 3];
      console.log(typeof array.valueOf()); //object
      console.log(array.valueOf() === array); //true

every()方法

遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false。不改变原数组
注意：若收到一个空数组，此方法在任何情况下都会返回 true。

语法: Array.every(function(currentValue,index,arr), thisValue)

callbackFn: 用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：

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

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

array(可选): every 方法调用的数组。

thisArg(可选)：可选参数。当执行回调函数 callbackFn 时，用作 this 的值。

返回值：如果回调函数的每一次返回都为真值，返回 true，否则返回 false。

代码示例(如下)

javascript
复制代码
[12, 54, 18, 130, 44].every(x => x >= 10); // true


let arr = [] 
let flag = arr.every((item, index) => { 
    return item && item.age > 10 
}) 
console.log(flag) //输出的是true

some()方法

遍历数组每一项,有一项返回true,则停止遍历，结果返回true。不改变原数组

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

语法: Array.every(function(currentValue,index,arr), thisValue)

callbackFn: 用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：

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

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

array(可选): some 方法调用的数组。

thisArg(可选)：可选参数。当执行回调函数 callbackFn 时，用作 this 的值。

返回值：数组中有至少一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。

代码示例(如下)

ini
复制代码
[2, 5, 8, 1, 11].some(x => x > 10);  // true

toString()和toLocaleString()方法

toString方法将数组转换为一个由数组元素组成的字符串，元素之间用逗号分隔。

ini
复制代码
const arr = [1, 2, 3, 4, 5];
console.log(arr.toString());  //1,2,3,4,5
const arr2 = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
const arr3 = ['a', 'null', 'b', 'c', 'undefined', 'd', 'e']
console.log(arr2.toString());  //苹果,蓝莓,橘子,西瓜,葡萄
console.log(arr3.toString());  //a,null,b,c,undefined,d,e

toLocaleString方法将数组转换为一个由数组元素组成的字符串，元素之间同样用逗号分隔，但是它会根据当前环境的语言和地区设置来决定元素的格式。

ini
复制代码
//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
//我补充写作的时间
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19

const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000

数组对象的几种遍历方法

1，普通的for循环

最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

例子1：

ini
复制代码
let arr1 = [1, 2, 3, 4, 5]
for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i])
}

运行结果

cmd-markdown-logo

2，优化版的for循环

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

例子1：

ini
复制代码
let arr = [1, 2, 3, 4, 5];
for (i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

运行结果

cmd-markdown-logo

说明：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

3，forEach()循环

数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

例子1：

javascript
复制代码
var arr = [1,2,3,4,5]
arr.forEach(function (value) {
    console.log(value)
})

运行结果

cmd-markdown-logo

4，for-in循环

在众多的循环遍历方式中,它的效率是最低的；for...in循环会遍历一个object所有的可枚举属性，for...in循环主要是为遍历对象而设计的，不适用于遍历数组

例子1：

css
复制代码
var arr =[1,2,3,4,5]
for(var item in arr){
    console.log(arr[item])
}

运行结果

cmd-markdown-logo

5，map循环

这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

例子1：

javascript
复制代码
var arr =[1,2,3,4,5]
arr.map(function (value) {
    console.log(value)
})

运行结果

cmd-markdown-logo

Array.from() 方法

Array.from() 是 JavaScript 中一个用于从类数组或可迭代对象创建新数组的静态方法。它接收一个可迭代对象或类数组的对象，并返回一个新的数组实例。

Array.from(iterable, mapFn, thisArg)

iterable: 必需，一个可迭代对象或类似数组的对象，用于创建新的数组。
mapFn (可选): 一个映射函数，用于对每个元素进行处理后返回新数组中的元素。
thisArg (可选): 可选参数，执行 mapFn 函数时的 this 值。

python
复制代码
//使用字符串创建数组
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]

javascript
复制代码
//使用类似数组的对象创建数组
const obj = {
  0: "榴莲",
  1: "牛油果",
  2: "蓝莓",
  length: 3
};
const arr = Array.from(obj);
console.log(arr);  //[ '榴莲', '牛油果', '蓝莓' ]

ini
复制代码
//使用映射函数处理数组元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]

es6数组新增方法

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

语法: arr.forEach(callbackFn(currentValue [, index [, array]])[, thisArg]);

callbackFn: 为数组中每个元素执行的，函数函数调用时带有以下参数：

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

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

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

thisArg(可选)：可选参数。当执行回调函数 callbackFn 时，用作 this 的值。

返回值：undefined。

代码示例(如下)

javascript
复制代码
const arr = ['red', 'green', 'blue']
        const result = arr.forEach(function (ele, index) {
            console.log(ele);  // 数组元素  red   green  blue
            console.log(index); // 索引号
        })

map()
map(): 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

语法: array.map(function(currentValue, index, arr), thisIndex)

callbackFn: 生成新数组元素的函数，使用三个参数：

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

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

array: map 方法调用的数组。

thisArg(可选)：可选参数。当执行回调函数 callbackFn 时，用作 this 的值。

返回值：一个新数组，每个元素都是回调函数的返回值。

代码示例(如下)

ini
复制代码
let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

filter（）方法

filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组

ini
复制代码
let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp);
console.log(array);

运行结果

cmd-markdown-logo

reduce() 方法

reduce() 方法是数组对象的一个方法，用于将数组中的所有元素按照指定的规则进行归并计算，返回一个最终值。

语法：array.reduce(callback, initialValue)

该方法接收两个参数，第一个参数是一个回调函数，第二个参数是一个初始值。回调函数中可以接收四个参数，分别是：

accumulator：累加器，用于存储上一次回调函数的返回值或初始值。
currentValue：当前元素的值。
currentIndex：当前元素的索引。
array：数组对象本身。

initialValue是初始值，可选参数。

javascript
复制代码
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
  return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0，则输出15

js数组方法

数组常用的方法

js中数组常用的方法和属性

创建数组的三种方式

数组对象的属性

数组对象常用的方法

修改原数组

push() 方法和 pop() 方法

shift() 方法和 unshift() 方法

splice() 方法

fill() 方法

sort() 方法

reverse() 方法

不修改原数组

join() 方法

concat() 方法

slice() 方法

数组查找API

1.includes()方法

2.indexOf()方法

3.lastIndexOf()()方法

4.findIndex()方法

5.find()方法

valueOf()方法

every()方法

some()方法

toString()和toLocaleString()方法

数组对象的几种遍历方法

1，普通的for循环

2，优化版的for循环

3，forEach()循环

4，for-in循环

5，map循环

Array.from() 方法

es6数组新增方法

filter（）方法

reduce() 方法