前端常用 api

1.Vue变更数组 vm.$set

let array=[]; 
vm.$set(array,0,'newVal') 
//expected output: ['newVal'];

Vue重写的数组方法：

push  pop  shift(队首删除)  unshift  splice  sort  reverse(反转)

2.JSON.parse()

将得到的json数据转化为对象：

const json = '{"result":true, "count":42}'; 
const obj = JSON.parse(json); 
console.log(obj.count); 
// expected output: 42

3.JSON.stringify()

将对象转化为字符串

console.log(JSON.stringify({ x: 5, y: 6 })); 
// expected output: "{"x":5,"y":6}"

4.Object.assign(target, source)实现对象合并

const target = { a: 1, b: 2 }; 
const source = { b: 4, c: 5 }; 
const returnedTarget = Object.assign(target, source); 
console.log(target); // expected output: Object { a: 1, b: 4, c: 5 }

重复的 key 以后面的结果 value 为准，该方法是浅拷贝

5. Date()时间函数

var d = new Date() // Wed Oct 27 2021 08:45:50 GMT+0800 (中国标准时间)
d.getFullYear(); // 2021
d.getMonth()+1; // 12
var n = d.getDate(); // 27
d.getHours(); // 17
d.getMinutes(); // 12
d.getSeconds(); // 22
(new Date()).valueOf() // 1638436486394
new Date(1472048779952) // Wed Aug 24 2016 22:26:19 GMT+0800 (中国标准时间)

给时间加 1 天

let dateTime = new Date()
dateTime = dateTime.setDate(dateTime.getDate()+1) // 时间戳
let minTime = new Date(dateTime)

6.splice方法

array.splice(index,howmany,item1,.....,itemX)

index 从何处开始删除/新增
howmany 删除几个元素
item… 新增元素

7.this.$refs.Ref_name.resetFields() 重置表单

重置引用为 addFormRef 的表单

this.$refs.addFormRef.resetFields()

8.split() 方法

切割字符串：

'string'.split('')
// output: ['s', 't', 'r', 'i', 'n', 'g']

9.join() 方法

拼接字符串

['2021','12','18'].join('-')
// output: '2021-12-18'

10.自定义正则校验

自定义函数：

let validcodeName = (rule, value, callback) => {
  let reg = /[0-9a-zA-Z]{4,9}/
  if (!reg.test(value)) {
    callback(new Error('账号必须是由4-9位数字和字母组合'))
  } else {
    callback()
  }
}

11.sort()

sort()用来实现排序

let arr = [23, 12, 32, 5, 21, 7, 1]
arr.sort()
// output: [1, 12, 21, 23, 32, 5, 7]

对象数组排序

var data = [{
   name: "deron",
   age: 21
 }, {
   name: "miaolun",
   age: 23
  }, {
   name: "pipi",
   age: 18
}, {
     name: "yujia",
    age: 22
}, {
    name: "huangze",
    age: 29
}];
data.sort((a,b)=>{return(a.age-b.age)})

12.reduce()

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

 

reducer 函数接收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。

13.push.apply() 和 concat()

var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var Volvo = sedan.concat(SUV);
// 返回新的数组 output: ['S60', 'S90', 'XC40', 'XC60', 'XC90'],
sedan.push.apply(sedan,SUV)
// 在 sedan 数组后面追加 output: SUV :['S60', 'S90', 'XC40', 'XC60', 'XC90']

14.Vue 中 class 样式使用

1.数组形式

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2.数组中使用三元运算符，对象语法不适用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

3.数组中使用嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4.直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>