正则,indexOf,filter,valueOf,join,concat,reverse,sort,splice,slice,parseInt,random

基础:parseInt,splice,slice

NaN   非数字,属于number类型
parseInt()    参数先一个一个转字符串,再转整数——如果转不了就后面参数不执行

obj.toString()  转化为字符串
obj.join("x")  把数组转为字符串 x——可选,默认,隔开

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

  1. var a = 1.335;       console.log(a.toFixed(2))

  2. // IE   1.34

  3. //chorme    1.33

obj.split(x,y)   把一个字符串分割成字符串数组  x以什么样的形式分割,y可选——分割到第几位
 

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

index => 必需。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany => 	可选。规定应该删除多少元素。必须是数字,但可以是 "0"。
item1, ..., itemX => 可选。要添加到数组的新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

// Banana,Orange,Lemon,Kiwi,Mango


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);

// Banana,Orange

obj.slice(start,end)  数组,字符串选值(切割,选取)   不改变原字符串,数组,

'JavaScript'.substring(0,4)   //  "Java"    跟slice方法相似,但返回结果不含该位置

map遍历数组不会中断,直至遍历完整个数组(前提:已知value 需要展示label)

//find方法 map遍历不会中断,不能阻止 直至整个数组遍历完,可以使用find方法查找数组,只要符合条件就return出去
  findJs(newVal,oldVal){ //newVal 数组 ,oldVal符合条件值
    const result = newVal.find(item => +item.value === +oldVal || item.value === oldVal)
    return result ? result.label : '-'
  },

vue防止多次点击

1.自定义preventReClick.js文件

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
})

export { preventReClick }
// 2023.07.14 防抖 -- 争对不是button按钮
import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  bind: (el, binding) => {
    let throttleTime = binding.value; // 防抖时间
    if (!throttleTime) { // 用户若不设置防抖时间,则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});

export { preventReClick }

2.在main.js中引用

import { preventReClick } from './utils/preventReClick.js'

Vue.use(preventReClick)

3.使用

<el-button @click="putHandler(2)" v-preventReClick>完 成</el-button>

css写法 - 防止多次点击

button{
  animation: throttle 2s step-end forwards;
}
button:active{
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

* 数组中替换对象属性

    const questionList = [
        {id:1, questionName:'问题1', type:1 , answer:[{val:'索嘎',key:1}], option:'测试'},
        {id:2, questionName:'问题2', type:2 , answer:[{val:'索嘎',key:2}], option:'测试'}
    ]
    const res = questionList.map(item=>({ questionId: item.id, questionName: item.questionName, questionType: item.type, answerList: item.answer}))

// 保留原来对象属性
const res = questionList.map(item=>({...item, questionId: item.id, questionName: item.questionName, questionType: item.type, answerList: item.answer}))

1.sort方法对数组成员进行排序

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
//简写:[10111, 1101, 111].sort((a,b)=> a-b)
// [111, 1101, 10111]

方法二:对象
var arr = [
    {name:"张三",val:2}
    ,{name:"张四",val:8}
    ,{name:"张五",val:6}
    ]
arr.sort(function (a, b) {
  return a.val - b.val;
})

//  [
    {name:"张三",val:2}
    ,{name:"张五",val:6}
    ,{name:"张四",val:8}
    ]



//2020-08-26 11:30:03 排序
list.sort(function (a, b) {
    return  (new Date(b.createTime)).getTime() - (new Date(a.createTime)).getTime() 
})

//小程序 android系统可行 ios系统不可行
// list = {
    contentName: "抓获"
    contentTime: "2020-08-26 11:30:03"
    coverPic: "http://oss-cn-80a4.jpg"
    id: 1576
    sourceId: 5072119755723776
    url: "http://zjfzol.zj.gov.cn/sys/news/api/newsInfo/5072119755723776"
}
list.sort(function(a, b) {
    let p = a.createTime.split(' '), q = b.createTime.split(' ')
    if (p[0].split('-').join('') !== q[0].split('-').join('')) {
        return q[0].split('-').join('') - p[0].split('-').join('')
    } else {
        return q[1].split(':').join('') - p[1].split(':').join('')
    }
})

1.1去重

数组://
//1. new Set 去重
function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}

//2.利用双for循环,发现重复元素,利用数组方法splice()删除重复元素
   var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
   function norepeat(arr) {
       for(var i = 0; i < arr.length-1; i++){
           for(var j = i+1; j < arr.length; j++){
               if(arr[i]==arr[j]){
                   arr.splice(j,1); 
                   j--;
               }
           }
       }
       return arr;
   }
   var arr2 = norepeat(arr);
   console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]



数组中对象去重
export function deteleObject(obj) {
    var uniques = [];
    var stringify = {};
    for (var i = 0; i < obj.length; i++) {
        var keys = Object.keys(obj[i]);
        keys.sort(function(a, b) {
            return (Number(a) - Number(b));
        });
        var str = '';
        for (var j = 0; j < keys.length; j++) {
            str += JSON.stringify(keys[j]);
            str += JSON.stringify(obj[i][keys[j]]);
        }
        if (!stringify.hasOwnProperty(str)) {
            uniques.push(obj[i]);
            stringify[str] = true;
        }
    }
    uniques = uniques;
    return uniques;
}

数组中对象去重,转载 js 去掉数组对象中的重复对象 - echo丶若梦 - 博客园

2.reverse方法用于颠倒排列数组元素

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

3.concat方法用于多个数组的合并。

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

4.join()方法以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

5.valueOf方法是一个所有对象都拥有的方法,表示对该对象求值。不同对象的valueOf方法不尽一致,数组的valueOf方法返回数组本身。

var d = new Date();

d.valueOf() // 1362790014817
d.getTime() // 1362790014817


console.log(d)  //VM395:2 Sun May 12 2019 21:43:55 GMT+0800 (中国标准时间)
var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

 6.filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

7.indexOf方法返回给定元素在数组中第一次出现的位置,如果没有出现则返回-1 

     index() 对应元素 索引值

// 删除对应的数组对象

const remove = val => {
    const index = arr.indexof(val)
    arr.splice(index,1)
}

8.Math.random()返回0到1之间的一个伪随机数,可能等于0,但是一定小于1。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(1, 6) // 5

9.Math对象提供以下一些静态方法。

  • Math.abs():绝对值
  • Math.ceil():向上取整
  • Math.floor():向下取整
  • Math.max():最大值
  • Math.min():最小值
  • Math.pow():指数运算
  • Math.sqrt():平方根
  • Math.log():自然对数
  • Math.exp()e的指数
  • Math.round():四舍五入
  • Math.random():随机数

10.正则表达式

正则实例对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。

/cat/.test('cats and dogs') // true


var regex = /b/;
var str = 'abba';

regex.test(str); // true

新建正则表达式有两种方法。一种是使用字面量,以斜杠表示开始和结束。

var regex = /xyz/;

另一种是使用RegExp构造函数。

var regex = new RegExp('xyz');

11.JSON 对值的类型和格式有严格的规定。

  1. 复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。

  2. 原始类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和null(不能使用NaNInfinity-Infinityundefined)。

  3. 字符串必须使用双引号表示,不能使用单引号。

  4. 对象的键名必须放在双引号里面。

  5. 数组或对象最后一个成员的后面,不能加逗号。

以下都是合法的 JSON。

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["张三", "李四"] }

[ { "name": "张三"}, {"name": "李四"} ]

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值