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="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)接收一个函数作为累加器,数组中的每个值(从左到右)开始合并,最终为一个值.

参数说明

// 获取购物车中商品列表的价格总和
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 }

热门相关：地球第一剑   仗剑高歌   第一神算：纨绔大小姐   网游之逆天飞扬   寂静王冠