VUE常用方法
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 }
