欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue操作數(shù)組的幾種常用方法小結(jié)

 更新時(shí)間：2023年09月13日 16:01:31   作者：夢(mèng)之歸途  
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下

一、map方法 （返回一個(gè)新的數(shù)組 新數(shù)組中的元素是經(jīng)過map函數(shù)內(nèi)部代碼塊處理過的數(shù)據(jù)）

代碼示例：

testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=>{
?? ??? ?return item += 1;
?? ??? ?});
?? ??? ?console.log(newArray);
?? ?}

結(jié)果：

在這里插入圖片描述

注意點(diǎn)：map函數(shù)內(nèi)部必須要有return 將數(shù)據(jù)返回 否則默認(rèn)返回 undefined如果不加 return 如下：
代碼示例：

testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=>{
?? ??? ?item += 1;
?? ??? ?});
?? ??? ?console.log(newArray);
?? ?}

結(jié)果：

在這里插入圖片描述

還有種省略寫法 箭頭函數(shù)省略return （不推薦這種寫法）代碼示例：

testMap() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.map(item=> item += 1 );
?? ??? ?console.log(newArray);
?? ?}

結(jié)果：

在這里插入圖片描述

 可以看到和第一種帶return的相比 item=>{return item += 1; }
少了大括號(hào) 和 return 即 item=> item += 1
不推薦這種省略寫法

二、filter方法 （返回 符合過濾條件的元素組成的新數(shù)組）

代碼示例：

testFilter() {
?? ??? ?let array = [1, 2, 3, 4];
?? ??? ?let newArray = array.filter(item=>{
?? ??? ?return item > 2 ;
?? ??? ?});
?? ??? ?console.log(newArray);

結(jié)果：

在這里插入圖片描述

類似于map函數(shù) 也需要有返回值 否則會(huì)返回一個(gè)空數(shù)組
例：

testFilter() {
	let array = [1, 2, 3, 4];
	let newArray = array.filter(item=>{
	item > 2 ;
	});
	console.log(newArray);
}

結(jié)果：

在這里插入圖片描述

三、forEach方法 （無返回值 遍歷數(shù)組的每一個(gè)元素 適用于不處理數(shù)組下標(biāo)或者不需要使用break的情況）

代碼示例：

結(jié)果：

在這里插入圖片描述

注意 改變item值 并不會(huì)改變?cè)瓟?shù)組中的元素值

例如：

testForEach() {
		let array = [1, 2, 3, 4];
		array.forEach(item => {
		item = item +1;
		});
		console.log(array);
}

結(jié)果：

在這里插入圖片描述

并且forEach函數(shù)內(nèi) 不支持 continue 和 break 操作 （普通for 循環(huán)支持這兩個(gè)操作）

直接語法校驗(yàn)不通過

在這里插入圖片描述

在這里插入圖片描述

如果想在forEach中使用 continue 操作 可以 使用return 即可 （注意這里的return 功能和 continue一樣 是結(jié)束本次循環(huán)開始下一次循環(huán)）

testForEach() {
		let array = [1, 2, 3, 4];
		let newArray = [];
		array.forEach(item => {
		if(item ===2 ){
		return;
		}
		newArray.push(item);
		});
		console.log(newArray);
}

結(jié)果：

在這里插入圖片描述

四、find方法 （返回符合條件的第一個(gè)元素 如果沒有符合條件的 返回undefined） findIndex方法（返回符合條件的第一個(gè)元素位置 如果沒有符合條件的返回 -1） 

 testFindAndFindIndex() {
	let array = [1, 2, 3, 4];
	let item1 = array.find(item=> item > 3);
	console.log(item1);
	let index1 = array.findIndex(item=> item > 3);
	console.log(index1);
	let item2 = array.find(item=> item > 4);
	console.log(item2);
	let index2 = array.findIndex(item=> item > 4);
	console.log(index2);
}

結(jié)果：

在這里插入圖片描述

五、some方法 （如果有任何一個(gè)符合條件的元素 返回true 否則返回fasle） every方法（所有元素都符合條件才返回true 否則返回false）

代碼示例：

testSomeAndEvery() {
	let array = [1, 2, 3, 4];
	let flagSome = array.some(item=> item > 3);
	console.log(flagSome);
	let indexEvery = array.every(item=> item > 3);
	console.log(indexEvery);
}

結(jié)果：

在這里插入圖片描述

六、includes方法

參數(shù)：數(shù)值 -------- 返回值：true/falseincludes()方法------是查看數(shù)組中是否存在這個(gè)元素，存在就返回true,不存在就返回false

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//對(duì)象合并，把后面對(duì)像合并到第一個(gè)對(duì)象，對(duì)象里相同的屬性會(huì)覆蓋
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}

七、Array.from()方法

作用：將一個(gè)類數(shù)組對(duì)象或者可遍歷對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組
類數(shù)組對(duì)象：最基本的要求就是具體length屬性的對(duì)象；

類數(shù)組對(duì)象中必須具有l(wèi)ength屬性，用于指定數(shù)組的長(zhǎng)度。如果沒有l(wèi)ength屬性，那么類數(shù)組轉(zhuǎn)換后的數(shù)組是一個(gè)空數(shù)組;
類數(shù)組對(duì)象的屬性名必須為數(shù)值型或者是字符串型的數(shù)字

Array.from還可以接收第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來對(duì)數(shù)組中每個(gè)元素進(jìn)行處理，然后再將處理后的值放入返回一個(gè)新的數(shù)組

let arr = [2,4,5,6,1,7];
let set = new Set(arr);
console.log(Array.from(set,item=>item+1));// [3,5,6,7,2,8]

將Set結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換為真正的數(shù)組

let arr = [2,4,5,6,1,7];
let set = new Set(arr);
console.log(Array.from(set));// [2,4,5,6,1,7]

將字符串轉(zhuǎn)換為數(shù)組

let str = “hello world!”
console.log(Array.from(str));//[“h”, “e”, “l(fā)”, “l(fā)”, “o”, " ", “w”, “o”, “r”, “l(fā)”, “d”, “!”]

函數(shù)可接受3個(gè)參數(shù)（后兩個(gè)參數(shù)可以沒有）：

第一個(gè)表示將被轉(zhuǎn)換的可迭代對(duì)象(如果只有一個(gè)參數(shù)就是把形參轉(zhuǎn)變成數(shù)組)

第二個(gè)是回調(diào)函數(shù)，將對(duì)每個(gè)數(shù)組元素應(yīng)用該回調(diào)函數(shù)，然后返回新的值到新數(shù)組，

第三個(gè)是回調(diào)函數(shù)內(nèi)this的指向。

let arr = [1, 2, 3];
let obj = {
    double(n) {
        return n * 2;
    }
}
console.log(Array.from(arr, function (n){
    return this.double(n);
}, obj)); // [2, 4, 6]
//拿到選中的去重
hasMulitIds = Array.from(new Set(hasMulitIds))

到此這篇關(guān)于Vue操作數(shù)組的幾種常用方法小結(jié)的文章就介紹到這了,更多相關(guān)Vue操作數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論