VUE常用方法

前言

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

splice

簡介

splice(index,len,item)：是vue中陣列變異的方法之一，可以用來洗掉，更新，和增加陣列內容，會改變原陣列，

引數說明

使用方法

案例

<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) ：可以截取陣列和字串，左閉右開，不會影響原陣列，

引數說明

案例

     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="https://www.cnblogs.com/rsg-zxh/archive/2022/12/23/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=https://www.cnblogs.com/rsg-zxh/archive/2022/12/23/==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)接收一個函式作為累加器,陣列中的每個值(從左到右)開始合并,最終為一個值.

引數說明

// 獲取購物車中商品串列的價格總和
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.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 }

標籤：其他

上一篇：教你用JavaScript實作背景影像滑動

下一篇：教你用JavaScript實作計數器