VUE常用方法

来源:https://www.cnblogs.com/rsg-zxh/archive/2022/12/23/17000652.html
-Advertisement-
Play Games

VUE常用方法 前言 總結了一些比較常用的方法，不全，僅供參考。 splice 簡介 splice(index,len,item)：是vue中數組變異的方法之一，可以用來刪除，更新，和增加數組內容，會改變原數組。 參數說明 | 參數名 | 描述 | | | | | index | 數組下標 | | ...


VUE常用方法

前言

總結了一些比較常用的方法，不全，僅供參考。

splice

簡介

splice(index,len,item)：是vue中數組變異的方法之一，可以用來刪除，更新，和增加數組內容，會改變原數組。

參數說明

參數名 描述
index 數組下標
len 為1或0
item 新增或修改的內容

使用方法

類型 描述
刪除：splice(index,1) 刪除下標為index的內容
更新：splice(index,1,item) 用新的值item更新替換掉下標為index的值
新增：splice(index,0,item) 在下標為index的位置增加一項值為item

案例

<template>
  <div>
    <a-button type="primary" @click="add(1, { name: '馬七', age: 24 })">添加</a-button>
    <a-button @click="update(2, { name: '牛八', age: 25 })">修改</a-button>
    <a-button type="dashed" @click="deleteitem(1)">刪除</a-button>
    <ul>
      <li v-for="item in items" :key="item.name">
        <p>{{ item.name }}:{{ item.age }}</p>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    data() {
      return {
        val: '',
        items: [
          { name: '張三', age: '20' },
          { name: '李四', age: '21' },
          { name: '王五', age: '22' },
          { name: '趙六', age: '23' },
        ],
      };
    },
    methods: {
      deleteitem(index) {
        this.items.splice(index, 1);
        //結果
        //張三：20
        //馬七：24
        //李四：21
        //王五：22
        //趙六：23
      },
      update(index, item) {
        this.items.splice(index, 1, item);
        //結果
        //張三：20
        //馬七：24
        //牛八：25
        //王五：22
        //趙六：23
      },
      add(index, item) {
        this.items.splice(index, 0, item);
        //結果
        //張三：20
        //牛八：25
        //王五：22
        //趙六：23
      },
    },
  });
</script>

slice

簡介

slice(startIndex,endIndex) ：可以截取數組和字元串，左閉右開，不會影響原數組。

參數說明

參數名 描述
startIndex 截取開始位置的索引，包含開始索引
endIndex 截取結束位置的索引，不包含結束索引，該參數可以省略不寫，此時會截取從開始索引往後的所有元素。也可以傳遞負值，-1即為倒數第一個

案例

     let arr1 =[1,2,3,4];
     let arr2 =arr1.slice(2,3);
     console.log(arr2);//[3] //從從第二位開始，截取到第三位
     console.log(arr1);//[1,2,3,4]// 原數組不發生變化

split

簡介

split(' ')：是分裂的意思，也就是把一個字元串分割成字元串數組。

split(' ')：會把數據拆分為一個數組,括弧里的' '是把數據拆分為每個字元串的意思，如果不用就不會拆分成每個字元串

案例

var data="Not split";
console.log(message.split(' '));
結果：[ "N", "o", "t", " ", "s", "p", "l", "i", "t" ]

pop

簡介

pop()：從後面刪除元素, 只能是一個, 返回值是刪除的元素，改變原數組；

案例

let arr = [1,2,3,4,5]
console.log(arr.pop())     
// 5
console.log(arr)  
//[1,2,3,4]

shift

簡介

shift()：從前面刪除元素, 只能刪除一個, 返回值是刪除的元素，改變原數組；

案例

let arr = [1,2,3,4,5]
console.log(arr.shift())  
// 1
console.log(arr)   
// [2,3,4,5]

unshift

簡介

unshift()：從前面添加元素, 返回值是添加完後的數組的長度，改變原數組；

let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    
// 6
console.log(arr)  
//[2,1,2,3,4,5]

delete

簡介

delete() ：刪除掉數組元素後，會把該下標處的值置為undefined,數組的長度不會變。

let arr = [1,2,3,4,5]
console.log(delete arr[1])    
//[2,,2,3,4,5]

concat

簡介

concat()：連接兩個數組，返回值為連接後的新數組，不改變原數組。

案例

var array_1 = ['reese','root','fusco'];
var array_2 = ['finch','shaw','bear'].concat(array_1);
consol.log(array_2);
//["finch", "shaw", "bear", "reese", "root", "fusco"]

sort

簡介

sort()：將數組進行排序,返回值是排好的數組，預設是按照最左邊的數字進行排序。

案例

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   
// [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   
// [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)  
// [22, 10, 6, 4, 3, 2, 1]

reverse

簡介

reverse( )：是翻轉的意思，把數據反過來。只會對數組產生作用，改變原數組。

案例

let arr = [1,2,3,4,5]
console.log(arr.reverse())    
// [5,4,3,2,1]
console.log(arr)    
// [5,4,3,2,1]

join

簡介

join() ：方法用於把數組中的所有元素放入一個字元串，可搭配split('')使用。

includes

簡介

includes() 方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false

    const a = ['a12', 'a23', 'a33', 'a34']
    const b = ['a12', 'a23', 'a34']
    let c = a.filter(item =>{
        return !b.includes(item)
    })
    console.log(c);

indexof

簡介

includes() ：方法用來判斷一個數組中是否有這一項,返回此項的索引值.沒有返回 -1

    const a = ['12', '23', '33', '34']
    const b = ['12','23', '34']
    let c = a.filter(item =>{
        return b.indexOf(item) === -1
    })
    console.log(c);

註意

如果數組中有NaN. 則 indexOf無法匹配到. 而includes可以匹配到

map

簡介

map()：函數定義在JS的array中，它返回一個新的數組，數組中的元素為原生數據用函數處理後的值，不會對空數組進行檢測，不會改變原始數組。

let temp=[];
that.caseTagsList.map(item=>{
	if(that.execParams.tagIdList.indexOf(item.id) < 0){
		temp.push(item);
     }
});

案例

案例一：取數組的某一欄位組成新數組

[   //data的數據
	{"time":"09:00-12:00","Id":"1"},
	{"time":"13:00-16:00","Id":"2"},
	{"time":"18:00-20:00","Id":"3"}
]
let time = data.map(item =>(item.time))
console.log(time) 
//控制台輸出如下
//['09:00-12:00', '13:00-16:00', '18:00-20:00']

案例二：取數組的某些欄位重命名並組成新數組

[   //data的數據
	{"time":"09:00-12:00","Id":"1"},
	{"time":"13:00-16:00","Id":"2"},
	{"time":"18:00-20:00","Id":"3"}
]
//只需一行map()
let resion = data.map(item =>({name: item.Id}))
console.log(resion) 
//控制台輸出
//[{ name: '1' }, { name: '2' }, { name: '3' }]

find

簡介

find()：用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。

find()：回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組。

案例

//舉例
//定義一個數組，有兩條數據
  companyOptions: [
    {
      label: '餓了麽',
      value: 0,
    },
    {
      label: '美團',
      value: 1,
    },
  ]
//需要找到value為1，label為美團的數組
let obj=this.companyOptions.find(item=>item.value===1)

findIndex

簡介

findIndex()：用法與find()非常類似，返回第一個符合條件的數組成員位置，如果所有成員都不符合條件，則返回-1。

let items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
items.findIndex((n) => n > 5)
//返回符合條件的值的位置（索引）
// 5
const fruits = [
   {name: 'apples', quantity: 2},
   {name: 'bananas', quantity: 0},
   {name: 'cherries', quantity: 5}
];
const index = fruits.findIndex(fruit => fruit.name === 'cherries');
console.log(index); // 3
console.log(fruits[index]);

註意

find()和findIndex()都可以發現NaN，彌補了數組的IndexOf()的不足。

let item = [NaN]
item.indexOf(NaN)
// -1
item.findIndex(y => Object.is(NaN, y))
// 0

indexOf()無法識別數組的NaN成員，但是findIndex()可以藉助Object.is方法做到。

filter()

簡介

filter()使用指定的函數測試所有元素，並創建一個包含所有通過測試元素的新數組。
filter() 為數組中的每個元素調用一次 callback 函數，並利用所有使得 callback 返回 true 或 等價於 true 的值元素創建一個新數組。那些沒有通過 callback 測試的元素會被跳過，不會被包含在新數組中。filter() 不會改變原數組。

var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); 
//[40, 50]

forEach()

簡介

遍曆數組全部元素，利用回調函數對數組進行操作，自動遍歷整個數組，且無法break中途跳出迴圈，不可控，不支持return操作，return只用於控制迴圈是否跳出當前迴圈。

回調有三個參數：第一個參數是遍歷的數組內容，第二個參數是對應的數組索引，第三個參數是數組本身。

var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index){
  console.log(item);
});
//該方法無返回值，僅僅是遍曆數組中的每一項，不對原來數組進行修改,可以自己通過數組索引來修改原來的數組；
var ary = [12,23,24,42,1];  
var res = ary.forEach(function (item,index,input) {  
   input[index] = item*10;  
})  
console.log(res);
//--> undefined;  
console.log(ary);
//--> 通過數組索引改變了原數組；

every()

簡介

判斷數組中是否每個元素都滿足條件，只有都滿足條件才返回true，只要有一個不滿足就返回false；

// 判斷數組arr1是否全是偶數
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
  arr1.every(function(value, index, array){
      return value % 2 == 0;
  })
);   
// false

some()

簡介

判斷數組中是否每個元素都滿足條件，只要有一個滿足條件就返回true，都不滿足就返回false；

// 判斷數組arr2是否至少有一個偶數
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
  arr2.some(function(value, index, array){
      return value % 2 == 0;
  })
);    
// true

reduce

簡介

array.reduce(callback, initialValue)接收一個函數作為累加器,數組中的每個值(從左到右)開始合併,最終為一個值.

參數說明

參數名 描述
previousValue 上一次調用回調返回的值,或者是提供的初始值(initialValue);
currentValue 數組中當前被處理的元素;
index 當前元素在數組中的索引;
array 調用reduce的數組; 
// 獲取購物車中商品列表的價格總和
let goodList = [
				{id: 1, price: 10, qty: 5}, 
				{id: 2, price: 15, qty: 2}, 
				{id: 3, price: 20, qty: 1}
				]
 
let totalPrice = goodList.reduce((prev, cur) => {
	return prev + cur.price * cur.qty
}, 0)
 
console.log(totalPrice) 
// 100

var arrString = 'abcdaabc'
// 獲取字元中中每個字母出現的次數
let count = arrString.split('').reduce(function(res, cur) {
	res[cur] ? res[cur]++ : res[cur] = 1
	return res
}, {})
 
console.log(count) 
// {a: 3, b: 2, c: 2, d: 1}

array去重

簡介

set() 函數中會先調用對象的hash() 方法，獲取 hash 結果，如果 hash 結果相同，用比較操作符 =（也就是調用函數 eq()）判斷二者的值是否相等，如果都相等，去重；否則，set() 認為二者不同，兩個都保留到結果中。

這個是目前最簡單的去重方法，但是這個方法不支持對象方法，可以支持一些簡單的數據格式去重。

案例

let arr = [a,b,c,c,d];
let set = new Set(arr);
let newArr = Array.from(set);
最後得出結果newArr=[a,b,c,d]

擴展

名稱 描述
Object.preventExtensions() 方法讓一個對象變的不可擴展，也就是永遠不能再添加新的屬性。
Object.isExtensible() 方法判斷一個對象是否是可擴展的（是否可以在它上面添加新的屬性）。
Object.seal() 方法封閉一個對象，阻止添加新屬性並將所有現有屬性標記為不可配置。當前屬性的值只要原來是可寫的就可以改變。
Object.is(value1, value2); 方法判斷兩個值是否為同一個值。
Object.entries() 返回一個數組，其元素是與直接在object上找到的可枚舉屬性鍵值對相對應的數組。屬性的順序與通過手動迴圈對象的屬性值所給出的順序相同。
Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和正常迴圈遍歷該對象時返回的順序一致 。
Object.assign() 用於對象的合併，將源對象的所有可枚舉屬性，複製到目標對象,簡單來說就是可以將兩個對象中不同的屬性進行合併。（註意為淺拷貝)
(...)運算符 用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中

例子 Object.is()

console.log(Object.is(NaN,NaN))
//true
console.log(Object.is(+0, -0))
//false

例子 Object.keys()

//數組
var arr = [1, 2, 6, 20, 1];
console.log(Object.keys(arr), "arr")
//["0", "1", "2", "3", "4"] "arr"
//返回的數組元素的下標集合

//對象
var obj = {
        "name": 'lily',
        "age": '18',
        "work": 'student'
    };
    console.log(Object.keys(obj));
// ["name", "age", "work"]
// 返回對象的屬性名，即鍵名；

例子 Object.assign()

註意

  • 如果目標對象中有和源對象同名的屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性:
  • 如果源對象中只有一個參數那麼assign()會直接返回這個參數，如果遇到這個參數不是對象，assign()會先將這個參數轉換成為對象，然後返回。
  • 由於undefined和null無法轉成對象，所以如果它們作為目標對象參數，就會報錯。所以我們在選擇目標對象的時候要儘量避開undefined和null。
const object1 = {
        a: 1,
        b: 2,
        c: 3
    };
const object2 = Object.assign({
        c: 4,
        d: 5
    }, object1);
 
console.log(object2, "-", object1); 
//{c: 3, d: 5, a: 1, b: 2} - {a: 1, b: 2, c: 3}
//源對象跟目標對象有相同的屬性時，以源對象為準；
//源對象越越靠後，權重級越大，越以誰為準，object3在最後，所以屬性c的值，以object3為準，為9；
const object1 = {
        a: 1,
        b: 2,
        c: 3
    };
    const object3 = {
        c: 9
    };
    const object2 = Object.assign({
        c: 4,
        d: 5
    }, object1, object3);
 
    console.log(object2); //{c: 9, d: 5, a: 1, b: 2}

例子(...)

//一 將字元串轉化為數組
const str = 'asdasd';
let arr1 = [...str];
console.log(arr1); //['a','s','d','a','s','d']

//二 可用於傳遞多個的參數，且將參數合併成數組
function funmerge(...prompt) {
  console.log(prompt);
  //[1,2,1,4,4,5]
}
funmerge(1, 2, 1, 4, 4, 5);

//三 脫衣服(將數組或對象里的值擴展出)
let arr2 = ['Hello', 'World'];
let arr3 = ['!!!!'];
let arr4 = [...arr2, ...arr3]; //合併數組
console.log(arr4); // ['Hello', 'World', '!!!!']

//四 複製
let bar = { a: 1, b: 2 };
let baz = { ...bar };
// { a: 1, b: 2 }
//等價於
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar);
// { a: 1, b: 2 }

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CloudCanal實戰-五分鐘搞定Oracle到StarRocks數據遷移與同步
    簡述 CloudCanal當前最新版本已經支持源端Oracle、SqlServer等主流傳統資料庫作為源端遷移同步數據到StarRocks來構建實時數倉。本文簡要介紹如何快速構建一條Oracle->StarRocks數據鏈路。 技術要點 基於StreamLoad的導入方式 CloudCanal 採用 ...
  • 解密小程式雲開發資料庫
    小程式雲開發（Tencent CloudBase）擁有易接入、高性能、高可用等特性，其中雲資料庫作為核心組件之一，可以有效降低運維成本，幫助開發者實現業務快速上線與迭代。本文將簡要介紹如何通過 TEG 雲架構平臺部的高性能分散式 NoSQL 資料庫，為近百萬小程式雲開發用戶提供完整的原生雲端資料庫能... ...
  • 1 月 25 日見｜Flutter Forward 活動日程表正式發佈！
    在先前舉辦的華為開發者大會2022（HDC）上，華為通過3D數字溪村展示了自有3D引擎“HMS Core 3D Engine”（以下簡稱3D Engine）的強大能力。作為一款高性能、高畫質、高擴展性的3D引擎，3D Engine不僅能通過實時光追、水體渲染、體積雲霧、多維GPU粒子系統等技術還原真 ...
  • css面試題一
    1.繼承 css的繼承：就是給父級設置一些屬性，子級繼承了父級的該屬性，這就是我們css中的繼承。官方的解釋，繼承是一種規則，它允許樣式不僅應用於特定的html標簽元素，而且應用於其後代元素。 a.有繼承的屬性 1.字體系列屬性 font:組合字體 font-family:規定元素的字體系列 fon ...
  • JS數組和字元串方法（API總結與應用）
    Array API 數組方法在JS中是一個重要的知識點。本文將重點講解一些方法的使用細節和使用場景。以下是對數組方法的分類 靜態方法 | 方法 | 說明 | | | | | Array.from() | 從數組類對象或可迭代對象創建一個新的 Array 實例。 | | Array.isArray() ...
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3
    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被髮明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發佈。2020 年 HTTP3 或能正... ...
  • JavaScript：原型(prototype)
    面向對象有一個特征是繼承，即重用某個已有類的代碼，在其基礎上建立新的類，而無需重新編寫對應的屬性和方法，繼承之後拿來即用； 在其他的面向對象編程語言比如Java中，通常是指，子類繼承父類的屬性和方法； 我們現在來看看，JS是如何實現繼承這一個特征的； 要說明這個，我們首先要看看，每個對象都有的一個隱 ...
  • 教你用JavaScript實現計數器
    案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個計數器。點擊按鈕數字改變，點擊重置數字歸0。通過實戰我們將學會forEach迴圈、contains方法、textContent屬性。 案例演示 點擊加號按鈕數字增加，點擊減號數字減少， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類