js删除数组中某一条数据-JavaScript的Array常用方法汇总

创建数组

const colors1 = new Arrray('red','blue')
const colors2 = ['red','blue']
// 填充
const colors3 = new Array(3).fill(6) // [6, 6, 6]

遍历数组-forEach/map

const colors = ['red','blue']
colors.forEach(function(item,index,array) {
  console.log(item, index)
})
// red 0
// blue 1
colors.map(function(item,index) {
  console.log(item, index)
})
// red 0
// blue 1

添加元素到数组末尾-push

const colors = ['red','blue']
colors.push('yellow') 
// colors为['red','blue','yellow']

删除数组末尾的元素-pop

const colors = ['red','blue']
colors.pop()  // colors为['red']

删除数组头部元素-shift

const colors = ['red','blue']
colors.shift()
// colors为['blue']

添加元素到数组头部-unshift

const colors = ['red','blue']
colors.unshift('yellow')
// colors为['yellow','red','blue']

找出某个元素在数组中的索引-indexOf

const colors = ['yellow','red','blue']
const index = colors.indexOf('blue') // 2

转换字符串-toString

colors.toString() // 'red,blue'

转换字符串且拼接字符-join

colors.join(',') // 'red,blue'
colors.join('-') // 'red-blue'

通过索引删除/添加某个元素-splice

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

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

start: 指定修改的开始位置（从0计数）

如果超出了数组长度js删除数组中某一条数据，则从末尾开始添加内容

如果是负数js删除数组中某一条数据，则表示从数组末尾开始的第几位

如果负数的绝对值大雨数组的长度，则表示开始位置为0

deleteCount: 表示要移除的数组元素个数

item1,item2,….,itemn: 要添加的数组元素，从start位置开始。如果不指定，则splice方法只删除数组元素

返回值：被删除的元素组成的数组。

const colors1 = ['yellow','red','blue'] // 初始化
const ans1 = colors.splice(1,1) // 删除下标为1的1个元素
console.log(ans1) // red
console.log(colors1) // ['yellow', 'blue']
const colors2 = ['yellow','red','blue'] // 初始化
const ans2 = colors2.splice(1,2) // 删除下标为1的2个元素
console.log(ans2) // ['red', 'blue']
console.log(colors2) // ['yellow']
const colors3 = ['yellow','red','blue'] // 初始化
const ans3 = colors3.splice(1,0,'gray','pink') // 从索引1位置插入两个颜色
console.log(ans3)  // ['yellow', 'gray', 'pink', 'red', 'blue']
console.log(colors3) // []

拼接数组-concat

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

var new_array = old_array.concat(value1[, value2[, …[, valueN]]])

const colors1 = ['red']
const colors2 = ['blue']
const colors3 = colors1.concat(colors2)
console.log(color1) // ['red']
console.log(color3) // ['red', 'blue']

判断数组所有元素条件都符合-every

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

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

callback用来测试每个元素的函数，接受三个参数

element： 用于测试当前值

index：用来测试当前值得索引

array：调用的数组

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

const nums = [5,6,7,8,9]
const flag1 = nums.every((num) =>  {
  return num > 4
})
const flag2 = nums.every((num) =>  {
  return num > 9
})
const flag3 = nums.every((num) =>  {
  return num < 4
})
console.log(flag1) // true
console.log(flag2) // false 存在不大于9的数
console.log(flag3) // false 不存在小于4的

判断数组某个元素条件符合-some

测试一个数组内的存在某个元素能通过某个指定函数的测试。它返回一个布尔值。

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

callback: 用来测试数组的每个元素的函数。返回true保留元素，false则不保留

element：当前处理的元素

index：当前处理的元素索引

array：调用了some的数组本身

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

function isBiggerThan10(element, index, array) {
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

过滤-filter

过滤符合条件的数组

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

callback: 用来测试数组的每个元素的函数。返回true保留元素，false则不保留

element：当前处理的元素

index：当前处理的元素索引

array：调用了filter的数组本身

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

返回符合条件的第一个元素的值-find

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

arr.find(callback[, thisArg])

callback：在数组每一项上执行的函数，接收 3 个参数：

element：当前遍历到的元素

index：当前遍历到的索引

array：数组本身

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];
function isCherries(fruit) {
  return fruit.name === 'cherries';
}
// { name: 'cherries', quantity: 5 }
console.log(inventory.find(isCherries));

找到符合条件的一个元素的索引-findIndex

方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

arr.findIndex(callback[, thisArg])

callback：在数组每一项上执行的函数，接收 3 个参数：

element：当前遍历到的元素

index：当前遍历到的索引

array：数组本身

返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1

const index = [4, 6, 8, 12].findIndex(function(element) {
  return element > 6
})
console.log(index) // 2

排序-sort

对数组的元素进行排序，并返回数组。

arr.sort([compareFunction])

compareFunction：用于指定排序逻辑的函数

firstEl：第一个用于比较的元素

secondEl：第二个用于比较的元素

返回值：排序后的数组。

const nums = [9,2,4,1,3,5,6]
nums.sort(function(a,b) {
  return a - b
})
console.log(nums) // [1, 2, 3, 4, 5, 6, 9]

扁平化-flat

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

var newArray = arr.flat([depth])

depth：指定要提取嵌套数组的结构深度，默认值为 1。

返回值：一个包含将数组与子数组中所有元素的新数组。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

判断数组是否包含一个指定的值-includes

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

arr.includes(valueToFind[, fromIndex])

valueToFind：需要查找的值

fromIndex：从哪个索引开始寻找

返回值：true表明有找到，false没有

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688