上一篇: 常见的跨域解决方案下一篇: html总结

js总结以及一些经典代码片段

一、数据类型(6种)

​ 基本类型:number,string,boolean,null,undefined

​ 复合类型:object

区别:

二、字符串方法

​ 1.与数组相关的方法:

//split
var str = 'abc-def-hij'
str.split('-')   //返回数组 ['abc', 'def', 'hij']

​ 2.切割方法

//substring,slice
substring(start, end)  //返回的结果不包括end位置的字符,如果没有end位置,默认返回start位置到字符串的最后                          一位
slice(start, end)      //和substring的返回规则一样

​ 3.与位置相关的方法

//charAt,indexOf,lastIndexof
var str = 'abcdefga'
str.charAt(0)          //'a'
str.indexOf('b')       //1
str.lastIndexOf()     // 7

​ 4.转换大小写方法

//toUpperCase,toLowerCase
var str = 'abcdefg'
str.toUpperCase()     //'ABCDEFGA'   原字符串不变,str仍然是abcdefga
str.toLowerCase()

​ 5.与正则表达式相关的方法

//replace
var p = 'The quick brown fox jumped over the lazy dog. If the dog reacted, was it really lazy?';
var regex = /dog/gi;
console.log(p.replace(regex, 'ferret'));
// "The quick brown fox jumped over the lazy ferret. If the ferret reacted, was it really lazy?"

//search
str.search(regexp)
    如果传入一个非正则表达式对象,则会使用 new RegExp(obj) 隐式地将其转换为正则表达式对象。如果匹配成功,则 search() 返回正则表达式在字符串中首次匹配项的索引。否则,返回 -1

//match
stringObject.match(searchvalue)
stringObject.match(regexp)
    如果传入一个非正则表达式对象,则会使用 new RegExp(obj) 隐式地将其转换为正则表达式对象。
    如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。
三、数组方法

1.与字符串相关的方法

var arr = [1, 2, 3]
arr.join()       //'1,2,3'
arr.join('')     //'123'

2.栈和队列方法

​ 栈是一种后进先出的数据结构(pop和push模拟),队列的访问规则则是先进先出(push和shift模拟)

3.数组排序方法

var arr = [1, 2, 3]
arr.sort()      //默认情况下按字符串升序排列数组
arr.sort(fn(a, b) {...})    //传入一个函数,这个函数可以传入前后比较的两个元素,如果返回正数则交换位置,返                                回负数或者0,不交换位置
reverse用于反转数组的顺序

4.数组拼接方法

var arr = [1, 2, 3]
arr.concat(3, 4)       //[1, 2, 3, 3, 4]

5.切割方法

//slice(start, end) end位置的元素不包含
var arr = [1, 2, 3]
arr.slice(0)    //[1, 2, 3]
arr.slice()      //[1, 2, 3]

//splice
var arr = [1, 2, 3]
arr.splice()    //[1, 2, 3],原数组=>[]

6.与位置相关的方法

var arr = [1, 2, 3]
arr.indexOf(1)   // 0 返回元素在数组里的位置

7.与遍历相关的方法

四、dom事件

​ 1.事件流:DOM2级事件规定的事件流包括三个阶段:

​ 2.事件注册在一个元素上注册事件,有3种方法:

跨浏览器的事件处理程序:

var eventUtil = {
    addHandler: function (ele, type, handler) {
        if (ele.addEventListener) {    
            ele.addEventListener(type, handler)    //addEventListener第三个参数默认为false(false                                                      冒泡机制,true捕获机制)
        } else if(ele.attachEvent) {
            ele.attachEvent('on' + type, handler)
        } else {
            ele['on' + type] = handler
        }
    },
    removeHandler: function (ele, type, handler) {
        if (window.removeEventListener) {
            ele.removeEventListener(type, handler)
        } else if(ele.detachEvent) {
            ele.detachEvent('on' + type, handler)
        } else {
            ele['on' + type] = handler
        }
    }
}

3.事件对象

​ 事件对象是用来记录一些事件发生时的相关信息的对象,但事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!

<a id="go" href="https://www.baidu.com/">禁止跳转</a>
var go = document.getElementById('go');
function goFn(event) {
 event.preventDefault();
// 不会跳转
}
go.addEventListener('click', goFn, false);

事件对象的兼容问题

​ 兼容性问题,在IE8及以前本版之中,通过设置属性注册事件处理程序时,调用的时候并未传递事件对象,需要通过全局对象window.event来获取。解决方法如下:

function getEvent(event) {
     event = event || window.event;
}

在IE浏览器上面是event事件是没有preventDefault()这个属性的,所以在IE上,我们需要设置的属性是returnValue

window.event.returnValue=false

ie浏览器也没有stopPropagation(),取而代之的是cancelBubble,cancelBubble是IE事件对象的一个属性,设置这个属性为true能阻止事件进一步传播。

event.cancelBubble=true

4.事件委托

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

例子说明,我们为ul添加新的li,其中对li标签元素绑定了click事件,但是发现,后增加的元素没有办法触发我们的click事件。

<button id="btnAdd">添加</button>
    <ul id="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var btnAdd = document.getElementById('btnAdd');
        var ulList = document.getElementById('ulList');
        var list = document.getElementsByTagName('li');
        var num = 3;
        btnAdd.onclick = function () {
            num++;
            var li = document.createElement('li');
            li.innerHTML = num;
            ulList.appendChild(li)
        }
        for (i = 0; i < list.length; i++) {
            list[i].onclick = function(){
                alert(this.innerHTML);
            }
        }
    </script>

这是因为如果事件涉及到更新HTML节点或者添加HTML节点时,新添加的节点无法绑定事件,表现的行为是无法触发事件。

<button id="btnAdd">添加</button>
    <ul id="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var btnAdd = document.getElementById('btnAdd');
        var ulList = document.getElementById('ulList');
        var num = 3;

        ulList.onclick = function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                alert(target.innerHTML);
            }
        }

        btnAdd.onclick = function () {
            num++;
            var li = document.createElement('li');
            li.innerHTML = num;
            ulList.appendChild(li);
            doclick();
        }
    </script>
js代码片段分享

解决:先升幂,再降幂

function add (a, b) {
    var r1 = ('' + a).split('.')[1].length
    var r2 = ('' + b).split('.')[1].length
    var m = Math.pow(10, Math.max(r1, r2))

    return (a * m + b * m) / m
}
//给url添加参数
function changeURLArg (url, key, val) {
    var question_mark = url.indexOf('?')
    var hashtag = url.indexOf('#')
    var arr = []
    var paramArr = []
    var obj = {}
    var str = ''
    if (hashtag === -1) {    //首先考虑#不存在的情况
        if (question_mark > -1) {
            arr = url.split('?')
            paramArr = arr[1].split('&')
            for (var i = 0; i < paramArr.length; i++) {
                var tmp = paramArr[i].split('=')
                if (tmp[0] === key) {
                    tmp[1] = val
                }
                obj[tmp[0]] = tmp[1]
            }
            var str = ''
            for (var k in obj) {
                str += '&' + k + '=' + obj[k]
            }
            if (obj[key] === undefined) {
                str += '&' + key + '=' + val
            }
            return arr[0] + '?' + str.substring(1)
        } else {
            return url + '?' + key + '=' + val + '#' + arr[1]
        }
    } else {  //#存在的情况
        if (question_mark === -1) {
            arr = url.split('#')
            return arr[0] + '?' + key + '=' + val + '#' + arr[1]
        } else {
            if (question_mark < hashtag) {
                arr = url.split('?')
                var tmp = arr[1].split('#')
                paramArr = tmp[0].split('&')
                paramArr.forEach(s => {
                    var t = s.split('=')
                    var k = t[0]
                    obj[k] = t[1]
                })
                for (var i in obj) {
                    if (i === key) {
                        obj[i] = val
                    }
                    str += '&' + i + '=' + obj[i]
                }
                if (obj[key] === undefined) {
                    str += '&' + key + '=' + val
                }
                return arr[0] + '?' + str.substring(1) + '#' + tmp[1]
            } else {
                arr = url.split('#')
                return arr[0] + '?' + key + '=' + val + '#' + arr[1]
            }
        }
    }
}
//大数相加,整数和小数皆可
function big (a, b) {
    a += ''
    b += ''
    var arr = a.split('.')
    var brr = b.split('.')
    if (!arr[1]) arr[1] = '0'
    if (!brr[1]) brr[1] = '0'
    var a0 = arr[0]
    var a1 = arr[1]
    var b0 = brr[0]
    var b1 = brr[1]
    var i = 0
    var len
    var result = ''
    var tmp = 0
    var sum = 0
    var lack = [Math.abs(a0.length - b0.length), Math.abs(a1.length - b1.length)]
    if (a1.length >= b1.length) {
        len = a1.length
        for (; i < lack[1]; i++) {
            b1 = b1 + 0
        }
    } else {
        len = b1.length
        for (; i < lack[1]; i++) {
            a1 = a1 + 0
        }
    }
    var r1 = addStr(a1, b1, len)

    if (a0.length >= b0.length) {
        len = a0.length
        for (i = 0; i < lack[0]; i++) {
            b0 = 0 + b0
        }
    } else {
        len = b0.length
        for (i = 0; i < lack; i++) {
            a0 = 0 + a0
        }
    }
    var r0 = addStr(a0, b0, len, r1.tmp)
    if (r0.tmp) {r0.result = r0.tmp + r0.result}
    if (r1.result === 0) return r0.result
    result = r0.result + '.' + r1.result
    return result
}
function addStr (a, b, len, tmp) {
    var sum = 0
    tmp = tmp || 0
    var result = ''
    for (var j = len - 1; j >= 0; j--) {
        sum = (+a[j]) + (+b[j]) + tmp
        if (sum >= 10) {
            tmp = 1
            result = sum - 10 + result
        } else {
            tmp = 0
            result = sum + result
        }   
    }
    return {result: result, tmp: tmp}
}
function EventEmiter () {
    let that = this
    let tmp
    this.cache = {}
    this.on = function (type, fn) {
        tmp = this.cache
        let name = type.split('.')
        if (typeof fn !== 'function') return
        for (let i = 0; i < name.length; i++) {
            // debugger
            if (i === name.length - 1) {
                if (tmp[name[i]]) {
                    tmp[name[i]].fn.push(fn)
                } else {
                    tmp[name[i]] = {}
                    tmp[name[i]].fn = [fn]
                }
                continue
            }
            if (tmp[name[i]]) {
                tmp = tmp[name[i]]
                continue
            } else {
                tmp[name[i]] = {}
                tmp[name[i]].fn = []
            }
            this.cache
            tmp = tmp[name[i]]
        }
        this.cache
    }
    this.trigger = function (type) {
        tmp = this.cache
        let name = type.split('.')
        for (let i = 0; i < name.length; i++) {
            tmp = tmp[name[i]]
        }
        tmp.fn.forEach(method => {
            method.apply(that, [].slice.call(arguments, 1))
        })
    }
    this.off = function (type) {
        tmp = this.cache
        let name = type.split('.')
        for (let i = 0; i < name.length; i++) {
            // debugger
            if (tmp[name[i]] && i === name.length - 1) {
                delete tmp[name[i]]

            } else if (tmp[name[i]] && i !== name.length - 1) {
                tmp = tmp[name[i]]
                continue
            } else {
                return
            }
        }
    }
}
function abc () {
    abc = function () {}
    //do somethind
}
str.trim()
//或者
str.replace(/^\s+|\s+$/)
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  //兼容ie
}
//禁止键盘事件导致的页面滚动
function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.ontouchmove = null;  
    document.onkeydown = null;  
}
function A () {}
A.prototype.x = 10
A.prototype.y = 100
var a1 = new A()
A.prototype = {x: 20, y: 30}    //打破了原型链
var a2 = new A()
a1.x    //10
a1.y    //100
a2.x    //20
a2.y    //30
a1 instanceof A  //false
a2 instanceof A  //true
//获得当天0点时间戳
//假如现在是2019-1-16,获得2019-1-16的0点时间戳
new Date('2019-1-16').getTime()   // 1547568000000
//或者
var t = new Date().toLocaleDateString()    // "2019/1/16"
new Date(t).getTime()

//获得此时此刻的时间戳
new Date().getTime()
//或者
Date.now()

//获得23:59:59时间戳
var t = new Date('2019-1-16').getTime() + 24 * 60 * 60 * 1000 - 1    // 1547654399999
new Date(1547654399999)      // Wed Jan 16 2019 23:59:59 GMT+0800 (中国标准时间)
上一篇: 常见的跨域解决方案下一篇: html总结