亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

代碼示例：

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

結果：

在這里插入圖片描述

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

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

結果：

在這里插入圖片描述

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

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

結果：

在這里插入圖片描述

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

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

代碼示例：

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

結果：

在這里插入圖片描述

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

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

結果：

在這里插入圖片描述

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

代碼示例：

結果：

在這里插入圖片描述

注意 改變item值 并不會改變原數(shù)組中的元素值

例如：

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

結果：

在這里插入圖片描述

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

直接語法校驗不通過

在這里插入圖片描述

在這里插入圖片描述

如果想在forEach中使用 continue 操作 可以 使用return 即可 （注意這里的return 功能和 continue一樣 是結束本次循環(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);
}

結果：

在這里插入圖片描述

四、find方法 （返回符合條件的第一個元素 如果沒有符合條件的 返回undefined） findIndex方法（返回符合條件的第一個元素位置 如果沒有符合條件的返回 -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);
}

結果：

在這里插入圖片描述

五、some方法 （如果有任何一個符合條件的元素 返回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);
}

結果：

在這里插入圖片描述

六、includes方法

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

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

七、Array.from()方法

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

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

Array.from還可以接收第二個參數(shù)，作用類似于數(shù)組的map方法，用來對數(shù)組中每個元素進行處理，然后再將處理后的值放入返回一個新的數(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結構的數(shù)據(jù)轉換為真正的數(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]

將字符串轉換為數(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個參數(shù)（后兩個參數(shù)可以沒有）：

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

第二個是回調函數(shù)，將對每個數(shù)組元素應用該回調函數(shù)，然后返回新的值到新數(shù)組，

第三個是回調函數(shù)內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))

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

相關文章

最新評論