基础:parseInt,splice,slice
NaN 非数字,属于number类型
parseInt() 参数先一个一个转字符串,再转整数——如果转不了就后面参数不执行
obj.toString() 转化为字符串
obj.join("x") 把数组转为字符串 x——可选,默认,隔开
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
-
var a = 1.335; console.log(a.toFixed(2))
-
// IE 1.34
-
//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 对值的类型和格式有严格的规定。
复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
原始类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和
null
(不能使用NaN
,Infinity
,-Infinity
和undefined
)。字符串必须使用双引号表示,不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面,不能加逗号。
以下都是合法的 JSON。
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]