isNaN(num) 函数用于检查其参数是否是非数字值。 返回不是为true是为false
Array.isArray( arr ) 方法用于判断一个对象是否为数组。如果对象是数组返回 true,否则返回 false。
break跳出循环 <==> return跳出函数
message.split('').reverse().join('') //字符串反转小技巧
data-aa = '123321' --------------------- xx.dataset.aa
document.getElementById("d1").style.cssText = "color:red; font-size:13px;"; //写css方法
var str = '自动打字小技巧-----';
var divText = document.querySelector("#divTyping"); var i = 0;
function typing(){
....if( i<= str.length ){ divText.innerHTML = str.slice(0,i++)+'_'; setTimeout(typing(),200 )
....}else{ divText.innerHTML = str; }
} typing()
JSON排序 jsonSort( JSON,"id",true||false ) <==> JSON,要排序的属性,是否反转
function jsonSort(array, field, reverse) { if(array.length < 2 || !field ||typeof array[0] !=="object") return array; //数字类型排序 if(typeof array[0][field] === "number" ) { array.sort(function(x, y) {return x[field] - y[field]}); } //字符串类型排序 if(typeof array[0][field] === "string") { array.sort(function(x, y) {return x[field].localeCompare(y[field])}); } //倒序 if(reverse) { array.reverse(); } return array; }
for of 遍历数组 for in 遍历对象
for( var key of Object.keys(arr) ){ console.log(key, arr[key]) } //遍历对象得到 key value
for (var key in arr){ console.log(key, arr[key]) } //遍历对象得到 key value
call apply bind -- call&&apply会直接调用函数
myFun.call(db,'成都','上海'); call 的第二第三第 n 个参数全都用逗号分隔,
myFun.bind(db,'成都','上海')(); bind 除了返回是函数以外,它 的参数和 call 一样。
obj.myFun.apply(db,['成都','上海']); apply 的所有参数都必须放在一个数组里面传进去
或与 || &&
在JavaScript逻辑运算中0、”“、null、false、undefined、NaN都会判为false,其他都为true。
只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。
只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;
数值方法
num. toString(2,8,10) 使用指定进制,将一个数字转换为字符串。
num. toFixed() 将一个数字转换为包含指 定小数位数的字符串。
字符串方法
str.trim(); 删除字符串两端空格, 中间的不去除; 返回新的字符串
str. toLowerCase(): 把字符串转为小写,返回新的字符串。
str. toUpperCase(): 把字符串转为大写,返回新的字符串。
str. charAt(1): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间,返回空字符串。
str. charCodeAt(1): 返回 指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。
str. indexOf( ' a ' ): 返回某个指定的子字符串在字符串中第一次出现的位置。区分大小写。没有返回 -1。
str. lastIndexOf( ' a ' ): 返回某个指定的子字符串在字符串中最后出现的位置。区分大小写。没有返回 -1。
str. slice(1, 2): 返回字符串中提取的子字符串。
str. split( ' , ' ): 把字符串分割成字符串数组。
str. match( ' a ' ): 返回所有查找的第一个关键字内容的数组。可以使用正则查找所有/aaa/ig i区分大小写
str. replace( / abc /ig,"cbc" ); 第一个参数被第二个参数替代
str. fromCharCode(104,101,108,108,111);//"hello" 接收字符编码转换成字符串
数组方法
数组浅拷贝
var arr = [1,2,3,4];
var arr1 = arr.slice(0);
var arr1 = arr.concat();
var [...arr1] = arr;
数组深拷贝技巧
var arr1 = JSON.parse( JSON.stringify(arr) )
arr. slice(0,1) 方法可从已有的数组中返回选定的元素。返回一个新的数组。不会改变原始数组。
arr. splice(0,1,"a","b") 方法用于添加或删除数组中的元素。返回的是含有被删除的元素的数组。会改变原始数组。
arr. join( ' - ' ): 将数组的元素组起一个字符串,以第一个参数为分隔符,省略的话则用默认用逗号为分隔符。
arr. push( " a " ): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。改变原始数组。
arr. pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。 改变原始数组。
arr. shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。 改变原始数组。
arr. unshift( " a " )将参数添加到原数组开头,并返回数组的长度 。 改变原始数组。
arr. reverse():反转数组项的顺序。 改变原始数组。
arr. concat(arr2) :将参数添加到原数组中。返回新构建的数组。 改变原始数组。
arr. indexOf( 5 ) 接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。最先出现的位置。
arr. lastIndexOf( 5 ) 接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。最后出现的位置。
arr. forEach( ( item, index, data ) =>{ ) 遍历的数组内容;第对应的数组索引; 数组本身。 没有返回值。return 不会阻止遍历
arr. map( (item)=>item*item ) 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。return 不会阻止遍历
arr. filter( (item, index)=>item>10 ) “过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。return 不会阻止遍历
arr. every( (item)=>item<5 ) 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。return 不会阻止遍历
arr. some( (item)=>item<5 ):判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。return 为 true 会阻止遍历, 效率更高
arr. sort() 字符串排序。改变原始数组。
function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } // 升序
function compare(value1, value2) { if (value1 < value2) { return 1; } else if (value1 > value2) { return -1; } else { return 0; } }arr2 = [13, 24, 51, 3];
Math方法
Math.max(3,4,5,6,7); Math.max.apply(this,arr) // 7 返回最大值
apply第一位改变this,第二位接收数组
Math.min(1,3,5,7,9); //1 返回最小值
Math.ceil( 1.1 ) //2 执行向上舍入
Math.floor(1.8) //1 执行向下舍入
Math.round(1.5) // 2 执行四舍五入
Math.random() 返回大于等于0 小于1的数值
1--10之间数值Math.floor(Math.random()*10+1)
Math.floor(Math.random() * (max - min + 1)) + min;
function selectFrom(lowerValue,upperValue){
var choices = upperValue - lowerValue + 1;
return Math.floor(Math.random() * choices + lowerValue)
}
selectFrom(2,10) // 返回2到10(包含2,10)之间随机数
对象方法Object.defineProperty()定义对象中心属性或修改原有的属性
Object.defineProperty( obj, prop, descriptor )
obj: 必须,目标对象
prop: 必须,需定义或修改的属性的名字
descriptor: 必须,目标属性所拥有的特性{
value : '设置值为',
writable: '如果为false 不允许修改这个属性值,默认也是false'
}
合并两个对象方法
① var aa = {...obj1,...obj2 }; //返回新对象 , 修改会改变原对象
②Object.assign({},obj1,obj2,obj3) //返回新对象 ,修改会改变原对象,
对象的深浅拷贝
浅拷贝只改变复杂数据类型内部分的指针指向,也就是不完全改变;深拷贝彻头彻底地改变所有指针指向,也就是完全改变。
//浅拷贝 for(var i in father) { copy[i] = obj[i]; } <==> var copy = Object.assign({},obj) <==> {...obj}
//深拷贝 ①var copy = JSON.parse( JSON.stringify( obj) );
②function objectClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ /*判断ojb子元素是否为对象,如果是,递归复制*/ if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = objectClone(obj[key]); }else{ /*如果不是,简单复制*/ objClone[key] = obj[key]; } } } } return objClone; }
js-cookie插件 <==> Cookie
npm install js-cookie --save //#下载
import Cookie from 'js-cookie' //#引入
Cookies.set('name', 'value', { expires: 7, path: '' }); //#expires:有效期 path:路径
Cookies.set('name', { foo: 'bar' });//#设置一个json
Cookies.get('name'); // => 'value' =>{foo:'bar'} //#读取某个key
Cookies.get(); #读取所有的cookie
Cookies.remove('name'); #删除cookie时必须是同一个路径。
lockr插件 <==> localStorage
npm i lockr --save //#下载
import Lockr from 'lockr'//#引入
Lockr.set('username', 'Coyote');//#设置一个指定的值,可以是任意类型
Lockr.get('username'); //#通过给定的键返回被保存的值
Lockr.rm('username'); //#删除指定的键值对
Lockr.set("Json",[{"a":"1"}]); //#追加一个值在之前的基础上面
Lockr.sadd("Json",{"b":"2"}); //#[{"a":"1"},{"b":"2"}]
Lockr.getAll();//#获取本地存储中所有的键值对
Lockr.flush();//#清空本地存储所有的键值对
进度条NProgress( 页面载入 )
npm install --save nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => { NProgress.start(); next(); })
router.afterEach((to,from,next) => { NProgress.done(); })
颜色修改App.vue #nprogress .bar {background: red !important; } //自定义颜色
前端 crypto-js aes 加解密https://www.jianshu.com/p/a47477e8126a
moment日期插件https://www.jianshu.com/p/e5b7c0606a3f
js-md5加密https://blog.csdn.net/skyblacktoday/article/details/80255348
js-base64加密https://www.cnblogs.com/wuheng1991/p/7602600.html
fastclick移动端点击300ms延迟https://www.cnblogs.com/cangqinglang/p/9948880.html
Vue scrollBehavior滚动行为,使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。https://www.cnblogs.com/sophie_wang/p/7880261.html
vue-count-to数字滚动(商品价格)https://www.cnblogs.com/tuspring/p/9801603.html
vue项目中使用echartshttps://blog.csdn.net/mr_wuch/article/details/70225364
import
export function test(){ return '返回是test 内容'; }
export function login(){ return '返回login 内容'; }
import * as obj from 'xx' 这种写法是把所有的输出包裹到obj对象里);
export default api;
import api from 'xx'
解构赋值
// a.js import { foo, bar } from "./b"
// b.js let foo = "foo" let bar = "bar"
export { foo, bar }
import b from './b'
let { foo, bar } = b
解构赋值
var [ variable1, variable2, ..., variableN ] = array;
var [foo, [[bar], baz]] = [1, [[2], 3]]; // foo == 1 bar == 2 baz == 3
var [head, ...tail] = [1, 2, 3, 4]; // head == 1 tail == 234