JS内置对象数组的一些方法及使用

内置对象

数组Array

Array.length属性

Array.length。length是array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号32-bit整数,并且大于数组最高项的下标。

通常在使用中用来看数组的长度,也可以是类数组用来模拟真正的数组

const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];

console.log(clothing.length);
// expected output: 4

Array.at()方法

该方法接收一个数值并返回该索引的项目,允许负数和正数。负数从数组最后一个项目开始倒数。

// 数组及数组元素
const cart = ['apple', 'banana', 'pear'];

// 一个函数,用于返回给定数组的最后一个项目
function returnLast(arr) {
  return arr.at(-1);
}

// 获取 'cart' 数组的最后一项
const item1 = returnLast(cart);
console.log(item1); // 'pear'

// 在 'cart' 数组中添加一项 
cart.push('orange');
const item2 = returnLast(cart);
console.log(item2); // 'orange'

Array.concat()方法

用于数组的合并,可以是两个或者多个。此方法不会改变原有数组,而是返回一个新数组。

语法:
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

参数:
valueN可选
数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。详情请参阅下文描述。
示例:
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]

Array.copyWithin()方法

该方法浅复制数组的一部分到同一数组中的另一个位置,并返回它(简单的说返回值就是改变后的数组),不会改变原数组的长度。

语法:
arr.copyWithin(target[, start[, end]])

参数
target
0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。
start
0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。如果 start 被忽略,copyWithin 将会从0开始复制。
end
0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。如果 end 被忽略,copyWithin 方法将会一直复制至数组结尾(默认为 arr.length)。
示例:
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"]

Array.every()方法

测试一个数组内所有元素是否都能通过某个指定函数的测试。返回布尔值(true/false),如果接收到的是一个空数组,此方法在一切情况下都会返回true。

语法:
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"]

参数:
callback
用来测试每个元素的函数,它可以接收三个参数:
element
用于测试的当前值。
index可选
用于测试的当前值的索引。
array可选
调用 every 的当前数组。
thisArg
执行 callback 时使用的 this 值。
示例:
const isBelowThreshold = (currentValue) => currentValue < 40;

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

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

Array.fill()方法

用一个固定值填充一个数组从起始索引到终止索引内的全部元素。不包含终止索引( [)] )。返回值是修改后的数组

语法:
arr.fill(value[, start[, end]])

参数:
value
用来填充数组元素的值。
start 可选
起始索引,默认值为0。
end 可选
终止索引,默认值为 this.length。
返回值
修改后的数组。
示例:
const 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]

Array.filter()方法

过滤器,返回一个新数组,这个新数组是通过测试用例的所有元素组成。

语法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数:
callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:
element
数组中当前正在处理的元素。
index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时,用于 this 的值。
示例:
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"]

Array.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

Array.findIndex()方法

该方法返回数组通过测试函数的第一个元素的索引。没找到则返回-1.

用法跟Array.find()使用类似。

Array.flat()方法

按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的子元素合并为一个新数组返回

语法:
var newArray = arr.flat([depth])

参数:
depth 可选
指定要提取嵌套数组的结构深度,默认值为 1。
示例:
const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

Array.forEach()方法

该方法对数组中的每个元素执行一次给定的函数,没有返回值

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

参数:
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:
currentValue
数组中正在处理的当前元素。
index 可选
数组中正在处理的当前元素的索引。
array 可选
forEach() 方法正在操作的数组。
thisArg 可选
可选参数。当执行回调函数 callback 时,用作 this 的值。
示例:
const array1 = ['a', 'b', 'c'];

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

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

注意:如果想要终止或者跳出forEach循环,可以使用抛出异常的方式。

forEach()被调用时,不改变原数组,也就是调用它的数组(虽然在回调函数中数组被修改了)

Array.from()方法

该方法对一个数组或可迭代对象创建一个新的,浅拷贝的示例。可以用来实现类数组到数组的转化。返回的是一个新的数组实例。

语法:
Array.from(arrayLike[, mapFn[, thisArg]])

参数:
arrayLike
想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选
如果指定了该参数,新数组中的每个元素会执行该回调函数。
thisArg 可选
可选参数,执行回调函数 mapFn 时 this 对象。
示例:
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

Array.includes()方法

该方法用来判断一个数组是否包含一个指定的值,根据情况返回一个布尔值

语法:
arr.includes(valueToFind[, fromIndex])

参数:
valueToFind
需要查找的元素值。

fromIndex 可选
从fromIndex 索引处开始查找 valueToFind。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。
示例:
const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

注意:使用 includes()比较字符串和字符时是区分大小写的。

Array.indexOf()方法

该方法用于查找指定元素的索引,返回找到的元素的下标,没找到返回-1

语法:
arr.indexOf(searchElement[, fromIndex])

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

Array.isArray()方法

用于判断是否是数组,如果是返回true,不是返回false

语法:
Array.isArray(obj)

参数:
obj
需要检测的值。
示例:
Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

Array.join()方法

将数组或类数组转化的所有元素连接成一个字符串并返回这个字符串,如果是一个空数组,返回空字符串。

语法:
arr.join([separator])

参数:
separator 可选
指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串(""),则所有元素之间都没有任何字符。
示例:
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

如果一个元素为null/undefined,就会被转化为空字符串。

Array.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]

Array.of()方法

该方法创建一个具有可变参数的新数组实例,不考虑参数的数量或类型。返回值是新的Array实例

语法:
Array.of(element0[, element1[, ...[, elementN]]])

参数:
elementN
任意个参数,将按顺序成为返回数组中的元素。
示例:
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.pop()方法

该方法弹出最后一个数组元素,并返回该元素,当数组为空是返回undefined。此方法可更改数组的长度(区别与delete)

实例:
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

Array.push()方法

将一个或多个元素添加到数组的末尾,并返回新数组的长度

示例:
const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

Array.reduce()方法

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

示例:
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

Array.reduceRight()方法

reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

返回之后的返回值

示例:
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]

Array.revese()方法

reverse()方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

const a = [1, 2, 3];

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

a.reverse();

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

Array.shift()方法

shift()方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。(弹出首位)

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

Array.slice()方法

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。(相当于 [ start,end) )

arr.slice([begin[, end]])
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Array.some()方法

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

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

arr.some(callback(element[, index[, array]])[, thisArg])
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

Array.sort()方法

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

arr.sort([compareFunction])
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

Array.splice()方法

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

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

参数
start
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。
deleteCount 可选
整数,表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
返回值
由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Array.unshift()方法

unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组**)**。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值