存

// Math:
Math.abs(-12)：取绝对值
Math.ceil(12.1)：向上取整
Math.floor(12.1)：向下取整
Math.round(12.1)：四舍五入
Math.random()：获取[0,1)随机小数
获取n到m之间的随机数
Math.round(Math.random()*(m-n)+n)

Math.max(1,2,'3')：获取最大值
Math.min(1,2,'3')：获取最小值
Math.PI：π
Math.pow(2,3)：2的3次幂
Math.sqrt(9)：开平方=>3
Math.trunc(12.123)：保留整数
Number.isInteger(12.5)：判断是否为整数
// 
// 
// String:
var str = '123123eeeuuu2323oop'
str.charAt(0)：返回指定索引位置的字符
str[索引]不存在undefined
str.charAt(索引)不存在''

str.charCodeAt(0)：返回的是unicode编码值
String.fromCharCode(119)：unicode对应值

str.substr(n,m)：从索引索引n开始截取m个字符
str.substring(n,m)：从索引n开始截取到索引m位置（不包含m）
str.slice(n,m)：和substring一样，但支持负数索引，length加负数
如果只传n，从索引n截取到末尾；如果m超出范围，也是截取到末尾；如果不传值是克隆

str.toUpperCase()：转为大写
str.toLowerCase()：转为小写

str.indexOf('x')：获取第一次出现的索引
str.lastIndexOf('x')：获取最后一次出现的索引
没有出现过结果为-1

split：按照某个字符，分隔成数组的每一项
str.split()：不传值，得到一项的合并数组
str.split('')：传空字符串，得到每一个字符为一项的数组

str.replace(/zf/g,'9')：字符替换
str.match(/\d+/g)：捕获匹配的字符（小分组不行），不加全局只能捕获第一次

str.trim()：去除首尾空格
str.trimLeft()：去除开始空格
str.trimRight()：去除末尾空格
str.repeat(3)：重复3遍字符串拼接


//Array
var ary = [1,'2',3,'4',asd,'ggg']

ary.push()：末尾追加，返回值：length，原数组改变，参数1-多个
ary.unshift()：开头追加，返回值：length，原数组改变，参数1-多个
ary.pop()：删除最后一项，返回值：被删除的那一项，原数组改变，参数无
ary.shift()：删除第一项，返回值：被删除的那一项，原数组改变，参数无

Array.isArray()：判断是否为数组
ary.length--   同pop

ary.splice(索引，个数，值)
ary.splice(n,m)从索引n开始删除m个，m不写是删除到末尾，返回值：被删除的内容，以一个新数组保存，原数组改变
ary.splice(0)清空数组
ary.splice()一项都不删，返回一个新的空数组
ary.splice(n,m,x)在删除的基础上，用x代替被删除内容
ary.splice(n,0,x)在修改的基础上，一项都不删，把x插入到索引n项的前面
ary.splice(n)从索引n开始到末尾全部删除，返回被删除项，原数组改变

ary.splice(ary.length,0,x)向末尾追加，    同push
ary.splice(0,0,x)向开头追加，                同unshift
ary.splice(ary.length-1)删除最后一项，    同pop
ary.splice(0,1)删除第一项，                同shift

ary.slice(n,m)：从索引n开始找到索引m，不包含m，返回值：找到的部分以新数组返回，原数组不变
ary.slice(n)返回从索引n开始到末尾的新数组，原数组不变

ary.concat(ary1)：数组拼接
ary.toString()：数组转为字符串，逗号分隔
ary.join()：数组转为字符串，指定分隔，空为逗号分隔
ary.indexOf(12)：获取在数组中第一次出现索引
ary.lastIndexOf(12)：获取在数组中最后一次出现索引
ary.reverse()：数组倒过来排列
ary.sort(function(a,b){return a-b})：数组排序
ary.forEach(function(item,index){})：数组遍历
ary.map(function(item,index){return xxx})：映射，遍历数组并且把每一项改为return后的结果
ary.fill('x',2,4)：从索引2开始，到索引(4-1)，全部用x填充
ary.filter(function(item){return item==xxx})：返回过滤的新数组
ary.includes(值，开始索引)：判断数组中是否包含，返回boolean，可以判断是否包含NaN
ary.find(function(item,index){return item==xxx})：返回查找到的那一项
ary.some(function(item,index){return item==xxx})：找true，找到true后停止，返回true，找不到返回false
ary.every(function(item,index){return item==xxx})：找false，找到false后停止，返回false，只要有一个false返回false，全是true才返回true
ary.reduce：收敛，迭代，返回叠加后的结果
ary.reduce(function(prev,next,index,item){
    return prev + next
},0)//指定第一次的prev为0
ary.flat(2)：数组打平，传参嵌套级数[1,2,3,[4,5,[6,7]]]
Array.from(obj)//类数组转数组，obj必须有length属性，必须是数字key
Array.isArray()：判断是否为数组
new Array(3).join(" ")//" "两个空格
new Array(3).fill('x')//快速生成3个x的数组
new Array(10).fill('').map((item, index) => index+1);//快速生成1-10的数组

获取数组末尾项：ary[ary.length-1] 　　ary.slice(-1) 　　ary.at(-1)
获取数组第一项：ary[0] 　　ary.at() 　　ary.at(0)


Object.prototype.toString.call()
Object.assign(obj1,obj2)    //对象合并，浅拷贝
Object.fromEntries(ary)//数组转对象，[['a',1],['b',2]] => {a:1,b:2}

Object.keys(obj)//键的数组
Object.values(obj)//值的数组
Object.entries(obj)//对象转数组，键值以数组的形式遍历出来，[[键,值],[键,值]]，值不会变

Object.freeze(data数据)//给vue数据做冻结，不用响应式

Object.keys(obj).length != 0//判断对象是否为空

Reflect.ownKeys(obj).length != 0//判断对象是否为空
//判断是对象
Object(obj) === obj
var isObject = (obj) => typeof obj === 'object' && obj !== null
isObject(obj)

let a = '12'
let b = 12
let c = /\d/g
let d = [1,2,3]
let e = {a:12}
let f = function(){}
console.log(typeof a === 'string')
console.log(typeof b === 'number')
console.log(typeof f === 'function')
console.log(c instanceof RegExp)
console.log(d instanceof Array)
console.log(e instanceof Object)
console.log(f instanceof Function)
console.log(a.constructor) => ƒ String() { [native code] }
console.log(Object.prototype.toString.call(b) === '[object Number]')

//修饰符
g: 全局
i: 忽略大小写
m: 多行
//元字符
?: 0-1
*: 0-多次
+: 1-多次
{n}: n次
{n,}: n-多次
{n,m}: n-m次

\: 转义
.: 除了\n的任意字符
\d: 0-9
\D: 非0-9
\w: 0-9或字母或_  [A-Za-z0-9_]
\W: 非单词字符    [^A-Za-z0-9_]
\n: 换行符
\s: 空白字符
\S: 非空白字符
\r: 回车符
\b: 边界符
\t: 制表符

x|y: x或y
[a-z]: a-z
[^a-z]: 非a-z
[xyz]: x或y或z
[^xyz]: 非x或y或z
(): 小分组
^: 开始
$: 结束
?:: 不捕获
?=: 正向预查
?!: 负向预查

//去掉字符串空格
str.replace(/ /g,'')
//空格换行
str.replace(/ *\n*/g,'')
str.replace(/( |\n)/g,'')

str.replace(/^0/,'')    //不能以0开头
str.replace(/^\./,'')    //不能以小数点开头
str.replace(/[^0-9.-]/g,'')    //不能包含减号小数点和数字之外的字符
str.replace('.','$#$')    //将第一个小数点转其他字符
str.replace(/\./g,'')    //删除字符中所有的小数点
str.replace('$#$','.')    //将某个字符替换成小数点
str.replace(/^-/,'$#$')    //将开头的减号转其他字符
str.replace(/-/g,'')    //删除字符中所有的减号

str.replace(/(<[^<>]*>)/g,'')//替换字符串里的标签

document.getElementById()
content.querySelector()
content.querySelectorAll()

//Ajax
//GET请求把参数写在路径的问号传参里
//POST请求把参数写在send里是拼接字符串
var url="index.php?id=" + username;
var xhr = new XMLHttpRequest;//创建
xhr.open('GET',url,true);//打开地址
xhr.onreadstatchange = function(){//监听状态
    if(xhr.readystate === 4 && /^2\d{2}$/.test(xhr.status)){
        var val = xhr.responseText;
        var data = JSON.parse(val)
    }
};
xhr.send(null);//发送请求

//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST要设置请求头
//xhr.send("user_id=" + user_id + "&user_pwd=" + user_pwd);

// 200成功
// 301永久重定向
// 302临时重定向
// 304获取缓存数据

// 400参数错误
// 401无权访问
// 404地址不存在
// 500服务器错误
// 503服务器超负荷

 

 

function deepClone2(obj,hash = new WeakMap()){//记录拷贝前后的对应关系
  if(obj == null) return obj;
  if(obj instanceof Date) return new Date(obj);
  if(obj instanceof RegExp) return new RegExp(obj);
  if(typeof obj !== 'object') return obj;
  if(hash.has(obj)) return hash.get(obj);//解决循环引用问题，返回上次拷贝的结果，不再递归了
  let cloneObj = new obj.constructor;//创建实例[]或{}
  hash.set(obj,cloneObj)
  for(let key in obj){
      if (obj.hasOwnProperty(key)) {
          cloneObj[key] = deepClone2(obj[key],hash);
      }
  }
  return cloneObj
}
//循环引用
let obj = {a:'1'}
obj.b = {}
obj.b.a = obj.b
console.log(deepClone2(obj))

 

 

//深度克隆
function deepClone(obj) {
  let newObj = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = (obj && typeof obj[key] === 'object' && obj[key] != null) ? deepClone(obj[key]) : obj[key];
      }
    }
  }
  return newObj
}
//URL地址解析
function URLPar(str){
    let obj = {};
    str.replace(/([^?&#=]+)=([^?&#=]*)/g,function(){
        obj[arguments[1]] = arguments[2];
    });
    str.replace(/#([^?&#=]+)/g,function(){
        obj['hash'] = arguments[1]
    });
　　str.replace(/(&)([^=]+)([&|#$])/g,function(){
　　　　obj[arguments[2]] = undefined
　　})
    return obj
}
let strr = "http://kbs.sport.qq.com/kbsweb.htm?mid=10000&wd=&cid=1467086&app=1.0&c#teacher";

//任意数求和
function sum(){
    let total = null;
    for(let i=0;i<arguments.length;i++){
        let cur = arguments[i];
        if(!isNaN(cur)){
            total+=cur
        }
    }
    return total
}
console.log(sum(1,2,3,4))

function sum1(){
    let ary = Array.prototype.slice.call(arguments);
    return eval(ary.join('+'))
}
console.log(sum1(1,2,3,4,5))

let sum2 = (...arg) => eval(arg.join('+'));
console.log(sum2(1,2,3,4,6))

function add(){
    let arg = [...arguments];   //获取传入的所有参数
    function fn(){
        arg.push(...arguments); //使用闭包，保留arg引用，防止被销毁
        return fn
    }
    fn.toString = function(){   //进行类型比较时会调用对象的toString方法进行隐式转换
        return arg.reduce((sum,cur) => sum + cur);
    }
    return fn;  //在函数调用一次后返回fn函数
}
add(1)(2,3)(4)

//转数组
function toArray(){
    let ary = [];
    for(let i=0;i<arguments.length;i++){
        ary[ary.length] = arguments[i]
    }
    return ary
}
console.log(toArray(1,2,3,4,5))

//数组去重
function unique(ary){
    for(let i=0;i<ary.length-1;i++){
        let cur = ary[i]
        for(let j=i+1;j<ary.length;j++){
            if(cur===ary[j]){
                ary.splice(j,1)
                j--
            }
        }
    }
    return ary
}
function unique1(ary){
    let obj = {};
    for(let i=0;i<ary.length;i++){
        let cur = ary[i];
        if(typeof obj[cur] !== 'undefined'){
            ary[i] = ary[ary.length - 1];
            ary.length--;
            i--;
            continue;
        }
        obj[cur] = cur;
    }
    return ary
}
console.log(unique([1,5,4,6,5,4,2,3,1,1]))
console.log([...new Set([1,5,4,4,NaN,NaN,3,2,2,1])])

//求平均数
function avgFn(){
    let ary = Array.prototype.slice.call(arguments).sort((a,b)=>a-b);
    ary.pop();
    ary.shift();
    return (eval(ary.join('+')) / ary.length).toFixed(2)
}
console.log(avgFn(4,5,6,1,2,4,5,9,6,7,4,5))

function loadScript(url){
    let script = document.createElement('script');
    script.src = url
    document.body.appendChild(script)
}

//数组转对象，可能会改变顺序
function ao(ary){
    let obj = {};
    for(let i=0;i<ary.length;i++){
        let cur = ary[i];
        let curn = ary[i+1];
        if(i%2===0 && (i+1)%2===1){
            obj[cur] = curn;
        }
    }
    return obj
}
//对象转数组
function oa(obj){
    let ary = [];
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            ary.push(key);
            ary.push(obj[key]);
        }
    }
    return ary
}

//遍历对象
for(let key in obj){
    console.log(key,obj[key])//键，值
}
//遍历数组
for(let value of ary){
    console.log(value)//值
}
for(let key in ary){
    console.log(key,ary[key])//索引,值
}

<style>
　　[v-cloak]{
　　　　display:none;
　　}
</style>
<div id="app" v-cloak>{{money}}<child :m="money" @zdychange="Fn"></child></div>
<template id="tempchild"><div @click="childclick">{{m}}</div></template>
let child = {
    template:'#tempchild',
    props:{
        m:{
            type:Number,
            default:0,
        }
    },
    methods:{
        childclick(){
            this.$emit('zdychange',200)
        }
    }
}
let vm = new Vue({
    el:'#app',
    data:{
        money:50
    },
    directives:{
        Fn(val){
            this.money += val
            this.$forceUpdate();//按照最新数据渲染一次
        },
        //自定义指令拖拽
        dlag(el){
            el.onmousedown = function(e){
                let disx = e.pageX - el.offsetLeft;
                let disy = e.pageY - el.offsetTop;
                document.onmousemove = function(e){
                    el.style.left = e.pageX - disx + "px";
                    el.style.top = e.pageY - disy + "px";
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
                e.preventDefault();
            }
        }
    }
})

 

两个对象合并

var obj1 = {a:1,b:2,c:3}
var obj2 = {d:4,e:5,f:6}
for(var key in obj2){
    obj1[key] = obj2[key]
}
console.log(obj1)

 

url地址解析es6方法

let strr = "http://kbs.sport.qq.com/kbsweb.htm?mid=10000&wd=&cid=1467086&app=1.0#teacher";
let objs = new URL(strr)
// {
//     hash: "#teacher"
//     host: "kbs.sport.qq.com"
//     hostname: "kbs.sport.qq.com"
//     href: "http://kbs.sport.qq.com/kbsweb.htm?mid=10000&wd=&cid=1467086&app=1.0#teacher"
//     origin: "http://kbs.sport.qq.com"
//     password: ""
//     pathname: "/kbsweb.htm"
//     port: ""
//     protocol: "http:"
//     search: "?mid=10000&wd=&cid=1467086&app=1.0"
//     searchParams: z
//     username: ""
//     __proto__: URL
// }
objs.searchParams.get('mid')// -> 10000