js数组的一些方法

一、搜索数组元素的四种方法
1、filter    2、find    3、includes    4、includes

①Array.filter() 
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
let newArray = array.filter(callback);
newArray是返回的新数组;
array 是我们要进行查找的数组本身;
callback 是应用于数组每个元素的回调函数
如果数组中没有项目符合条件,则返回一个空数组。
const array = [10,11,3,20,5];
const greaterThanTen = array.filter(element => element > 10);
console.log(greaterThanTen) //[11,20]
有时,我们不需要满足特定条件的所有元素。我们只需要一个符合条件的元素。在这种情况下,需要使用find()方法。
②Array.find()
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值,之后的值不会再调用执行函数。如果数组中没有项目符合条件,则返回undefined.
let element = array.find(callback);
const array = [10,11,3,20,5];
const greaterThanTen = array.find(element => element > 10);
console.log(greaterThanTen) // 11

const mappingList = [
    {id:8090,name:'张三'},
    {id:8091,name:'李四'},
]
const result = mappingList.find(({ id }) => id === 8090)
console.log(result) // {id:8090,name:'张三'}
如果想检查某个元素是否在数组中
③Array.includes()
includes() 方法确定数组是否包含某个值,并在适当时返回 true 或 false。
因此,在下面的示例中,如果我们要检查20是否为数组中的元素之一,则可以执行以下操作:
const array = [10, 11, 3, 20, 5];
const includesTwenty = array.includes(20);
console.log(includesTwenty)//true
此方法接受值而不是回调作为参数。这是 includes 方法的语法:
const includesValue = array.includes(valueToFind, fromIndex)
valueToFind 是要在数组中检查的值(必填)
fromIndex 是要开始从中搜索元素的数组中的索引或位置(可选)
要了解索引的概念,下面的示例。
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, 2);  // true
④Array.indexOf()
indexOf()方法返回可以在数组中找到给定元素的第一个索引。如果数组中不存在该元素,则返回 -1
const indexOfThree = [10, 11, 3, 20, 5].indexOf(3);
console.log(indexOfThree)  // 2
const indexOfElement = array.indexOf(element, fromIndex);
在数组的第fromIndex个位置开始检索
查找数组中 "Apple" 的元素, 在数组的第四个位置开始检索:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
console.log(a) // 6
二、数组元素的 1、splice   2、slice  方法:
splice与slice区别:
共同点:均是删除数组元素并返回结果。
区别:splice会改变原数组,而slice不会。并且splice会导致数组塌陷。
一般来说:slice是做截取用的;splice是做删除、插入用的。
①Array.slice()  
slice() 方法可从已有的数组中返回选定的元素。slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。返回一个新的数组,包含从 start(包括该元素) 到 end (不包括该元素)的 arrayObject 中的元素。
注意: slice() 方法不会改变原始数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(1,3);
console.log(myBest)  // ['Orange','Lemon']
截取字符串
var str="www.runoob.com!";
console.log(str.slice(4)); // 从第 5 个字符开始截取到末尾 // runoob.com!
console.log(str.slice(4,10)); // 从第 5 个字符开始截取到第10个字符 // runoob
②Array.splice()
splice() 方法用于添加或删除数组中的元素。
注意:这种方法会改变原始数组。
array.splice(index,howmany,item1,.....,itemX)
index    (必需) 规定从何处添加/删除元素。
        该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany    (可选) 规定应该删除多少元素。必须是数字,但可以是 "0"。
        如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX    (可选) 要添加到数组的新元素
返回值:
Array    如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
数组中添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
fruits 输出结果:
Banana,Orange,Lemon,Kiwi,Apple,Mango

移除数组的第三个元素,并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
fruits 输出结果:
Banana,Orange,Lemon,Kiwi,Mango

从第三个位置开始删除数组后的两个元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
fruits 输出结果:
Banana,Orange

var arr = [1,2,3,4,5];
//添加
arr.splice(0,0,0);// [0,1,2,3,4,5]
//修改
arr.splice(0,1,23);// [23,1,2,3,4,5]
//删除
arr.splice(0,1);//[1,2,3,4,5]
1

你可能感兴趣的:(javascript,前端,vue.js)