javaScript

119 阅读6分钟

语法

try { 
    //在此运行代码 
} catch(err) {
    //在此处理错误 
}

while

while (i<5) {
    i++
} 

var cars = ["BMW","Volvo","Saab","Ford"]; 
var i=0; 
while (cars[i]) { 
    document.write(cars[i] + "\"); 
    i++; 
}

do while

do { 
    i++; 
} while (i<5); 

axios 方法

    axios({ 
        method, 
        url, 
        headers:{ 
            authorization:JowoMods.getToken() 
        }, 
        data 
    }).then(function(response){ 
        if(response){ 
            Stage.message.success( "成功") 
            history.go(-1) } 
    }).catch((err)=> { 
        err.response.data.message 
    })

switch

switch(表达式) { 
    case n: 代码块 
        break; 
    case n: 代码块 
        break; 
    default: 默认代码块 
}

模块化语法

模块化语法
CommonJS :module.exports , require()
ESMexport ,import

Math

    // 0-1的随机数
    Math.random() 
    Math.floor(Math.random()*100000000) // 
    
    Math.max(5,7) // 7 
    Math.abs(7.25-10) // 2.75
    
    //丢弃小数部分,保留整数部分
    parseInt(7/2) =3
    
    //向上取整,有小数就整数部分加1
    Math.ceil(7/2) =4
    
    //四舍五入
    Math.round(7/2) = 4
    
    //向下取整
    Math.floor(7/2) = 3
    
    // 方法可把 Number 四舍五入为指定小数位数的数字。//数字会变成字符串
    (数字).toFixed(0-20位)
    
    // 字符串转数字
    parseInt()或Number( "5.5 ") 
    

    

JSON

    JSON.stringify()// 转JSON字符串 
    JSON.parse() 

方法

Set去重

    let list = [1,2,3,4,2,3,6,4,66,4,8,6] 
    let newSet = new Set(list)
    let newArr = [...newSet]
    
    let newArray_ = newArray.filter((item,index,self)=> { 
        return self.findIndex(el => el.deviceId == item.deviceId ) === index 
    })

跳转上一页

    history.go(-1) 
    history.back()

模糊搜索

    // 模糊搜索 (查询有没有‘宾’)
    str.indexOf("宾") != -1

创建数组

    var arr = new Array(10).fill(0)   // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    // JS创建连续元素的数组
    Array.from(Array(10), (x, i) => ++i) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

对象 转 数组

    var obj = { foo: 'bar', baz: 42 };
    Object.values(obj) // ['bar', 42]
    
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    Object.values(obj) // ['a', 'b', 'c']
    
    var arr = ['a', 'b', 'c'];
    Object.keys(arr) // ['0', '1', '2']
    
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    Object.keys(obj) // ['0', '1', '2']
    
    var anObj = { 100: 'a', 2: 'b', 7: 'c' };
    Object.keys(anObj) // ['2', '7', '100']

合并对象

    Object.assign() 
    
    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 }

将伪数组转化成标准数组

    Array.from(obj) ES6的新语法 
    var newArr.from(arguments)

排序

    content.sort((a,b)=>{
        return (a.transCode + '').localeCompare(b.transCode + '')
    })
    
    
    arr.sort(function(a,b){ return a - b }) // 小到大 
    arr.sort(function(a,b){ return b - a }) // 大到小 
    
    //按字符排序 
    var arr = ['babc', 'abcd', '012', '123', '啊', '不']; 
    alert(arr); 
    arr.sort(function(a, b){return (a + '').localeCompare(b + '')}); 
    alert(arr)

深拷贝

    const copyedObject = lodash.cloneDeep(originObject)

判断 数组 里有无该元素

[3,7,8].includes(state)

判断 数组还是对象

    let arr = [] 
    let obj ={} 
    arr instanceof Array // true 
    obj instanceof Array // false

判断 对象里有没有 属性

    var obj = {name:'jack'}; 
    obj.hasOwnProperty('name');     //  true 
    obj.hasOwnProperty('toString');    // false
    
    3.使用undefined判断 
    var o={x:1}; 
    o.x!==undefined; //true 
    o.y!==undefined; //false 
    o.toString!==undefined //true

对象遍历

    for (let key in obj) { 
        console.log(obj[key]) // foo, bar 
    }

isNaN

isNaN('') //false 
isNaN('1') //false 
isNaN(1) //false 
isNaN('a') // true 
isNaN('给') // true

base64

window.btoa('dsdfgs') 
//中文 
window.btoa(window.encodeURI('中文')) 
window.btoa(window.encodeURIComponent('中文?')) 
window.encodeURI({}) // encodeURI编码

获取url地址?后面的值

    类似于js中window.location.search

打开新页面

    使用window.open()方法在新窗口打开图片,
    window.open()方法参数为图片的链接和设置的参数。

判断数据类型

Object.prototype.toString.call() // 判断数据类型

数组

push 添加 尾部 内容

arr.push(需要添加的内容)

      // 作用: 往数组的尾部添加内容
      // 参数: 需要添加的内容 可以是一个或者多个
      // 返回值: 新的数组长度

pop 删除 尾部 内容

arr.pop()

      // 作用: 往数组的尾部删除内容
      // 参数: 无
      // 返回值: 被删除的元素

unshift 添加 头部 内容

arr.unshift(需要添加的内容)

      // 作用: 往数组的头部添加内容
      // 参数: 需要添加的内容 可以是一个或者多个
      // 返回值: 新的数组长度

shift 删除 头部 内容

arr.shift()

      // 作用: 往数组的头部删除内容
      // 参数: 无
      // 返回值: 被删除的元素

reverse 翻转数组

arr.reverse()

      // 作用: 翻转数组 操作的是原数组
      // 参数: 无
      // 返回值: 颠倒后的数组  修改的是原数组

indexOf 查询的元素的下标

arr.indexOf(查询的元素, 操作的下标)

      // 作用: 查询对应的元素是否在对应的数组中,
               如果存在,返回查询到的第一个的下标,如果不存在 返回-1
      // 参数: 查询的元素, 操作的下标(可选)
      // 返回值: 查询的下标或者-1

lastIndexOf 查询的元素的下标

arr.lastIndexOf(查询的元素, 操作的下标)

      // 和arr.indexOf一样,只是从右往左查询 而indexOf是从左往右

合并的数组

arr.concat(数组1,数组2,...)

     拼接合并(不改变原数组,返回合并的数组)
          // 作用: 将多个数组连接成一个
          // 参数: 需要连接的数组, 可以是一个或者多个
          // 返回值: 连接好的新数组  对原数组没有影响

提取数组里面的内容

arr.slice(操作的起始下标, 结束下标)

         直接复制这数组。(n),从下标 n 开始到结束。 
                        (n,m),从下标 n 开始到 m (不包括m)
                        
      // 作用: 提取数组里面的内容, 对原数组没有影响
      // 参数: 操作的起始下标, 结束下标
      // 参数的三种情况
      // 1. 不传递参数, 直接复制原数组 => 两个相同的数组 但是地址是不一样的
      // 2. 传递一个下标, 从这个下标开始一直提取到最后 包括最后一项
      // 3. 传递两个下标, 从起始下标开始提取到结束下标 但是不包括结束下标
      // 返回值: 提取的新数组. 对于原数组没有影响

裁切数组里面的内容

arr.splice(操作的下标, 删除的个数, 新增的内容)

操作的是原数组
      // 作用: 可以实现数组的任意位置的删除, 替换, 和新增
      // 参数: 操作的下标, 删除的个数, 新增的内容
      // 新增的情况: 删除的个数为0
      // 返回值: 返回删除元素的数组
      
      var fruits = ["Banana", "Orange", "Apple", "Mango"];      
      fruits.splice(2,0,"Lemon","Kiwi"); //从下标2开始,

判断数组里有没有

    [1, 2, 3].includes(2); // true

数组 转 字符串

arr.join(连接符)

    ['d','s'].join()  //  'd,s'
    ['d','s'].join('') //  'ds'
    ['d','s'].join('-') // 'd-s'
    
    [1,2,3].toString() // '1,2,3'

字符串 转 数组

string.split('')

    'ds'.split()  //  ['ds']
    'ds'.split('') //  ['d','s']
    'd,s'.split(',') // ['d', 's']
    
    // 作用: 将数组链接成一个字符串, 对原数组没有影响

      // 参数: 连接符

      // 参数的三种情况

      // 1. 不传递参数:  默认是逗号进行连接

      // 2. 传递对应的连接符:  使用这个连接符进行连接

      // 3. 传递一个 '':  将数组直接连接起来 没有连接符

      // 返回值: 连接好的字符串

字符串

事件名

  • onabort 图像加载被中断
  • onblur 元素失去焦点
  • onchange 用户改变域的内容
  • onclick 鼠标点击某个对象
  • ondblclick 鼠标双击某个对象
  • onerror 当加载文档或图像时发生某个错误
  • onfocus 元素获得焦点
  • onkeydown 某个键盘的键被按下
  • onkeypress 某个键盘的键被按下或按住
  • onkeyup 某个键盘的键被松开
  • onload 某个页面或图像被完成加载
  • onmousedown 某个鼠标按键被按下
  • onmousemove 鼠标被移动
  • onmouseout 鼠标从某元素移开
  • onmouseover 鼠标被移到某元素之上
  • onmouseup 某个鼠标按键被松开
  • onreset 重置按钮被点击
  • onresize 窗口或框架被调整尺寸
  • onselect 文本被选定
  • onsubmit 提交按钮被点击
  • onunload 用户退出页面

移动事件

注意

touchmove触发后,手指离开也持续触发

触发touchmove 和 touchend事件,一定要先触发touchstart

  • touchstart 元素上 触摸开始时触发 (触摸交互,页面跳转,标签切换)
  • touchmove 元素上 触摸移动时触发 (事件用于页面滑动)
  • touchend 手指从 元素离开时触发 (主要和 touchmove事件 结合使用)
  • touchcancel 触摸被打断时触发 ()

点击穿透

touch事件结束后会触发元素的click事件 有设置完美视口 30ms左右(看设备特性) 没有设置完美视口 300ms左右

如果touch事件隐藏了元素,click动作将作用到新元素上,并触发新元素的click事件或跳转 解决方法一 node.addEventListener('touchstart',function(e){e.preventDefault() })