JavaScript积累

鼠标点击事件

js区分点击的是鼠标左键还是右键★★

提示：在查资料时发现，event.which也和event.button一样的作用(但在按键和对用的数值之间有不同之处)，但event.which现在已经被web舍弃了，所以在使用时还是尽量使用使用button

• events.button == 0 鼠标左键
• events.button == 1 鼠标中键
• events.button == 2 鼠标中键

events要是在运行时报错的话就用这个window.even

虽然event.which已经被弃用了，但是为了防止在以后见到，特把event.which和event.button的区别发在下面

• events.which== 1 鼠标左键
• events.button == 2 鼠标中键
• events.button == 3 鼠标右键

在末尾小小的提一下，我在实践过程中发现，对应的数值和网上一些博文不一样，可能是浏览器的不同，会导致返回的点击数值也不一样，所以在使用之前可以自己检验一下，现将代码放在下面

var div = document.getElementsByTagName("div")[0];
        div.onmousedown = function(event) {
            var x = event.button;
            alert(x);
            div.innerHTML += x;
        }

事件认识

event.target

当有批量的DOM需要操作的时候，要判断那个DOM是事件源，就可以用e.target可以准确的获取事件源，并可以在使用过程当中做出判断，从而实现我们的代码，常用属性如下

event.target.nodeName 	//获取事件触发元素的标签name
event.target.id				//获取事件触发元素id
event.target.className	//获取事件触发元素classname
event.target.innerHTML 	//获取事件触发元素的内容

e.currentTarget

指的是绑定了事件监听的元素(可以理解为触发事件元素的父级元素)

两者之间的区别

e.target： 指的是真正触发事件的那个元素
e.currentTarget : 指的是绑定了事件监听的元素（可以理解为触发事件元素的父级元素）
    事件冒泡是：如果绑定的事件对象子对象（比如点击页面上的button）时，e.currentTarget == e.target： 指的是真正触发事件的那个元素
                     如果绑定的事件对象是document时，e.currentTarget是document,而e.target 是btn

Array对象

from()

就是通过字符串转化为数组

 var str = Array.from("from");
        alert(str[0]); //f
        alert(str[1]); //r
        alert(str[2]); //o
        alert(str[3]); //m

reverse()

颠倒数组中的顺序

 var color = ["red", "yellow", "blue", "pink"];
        var newcolor = color.reverse();
        alert(newcolor); //pink,blue,yellow,red

join()

includes()

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

 		let Arr = ['a', 'b', 'c'];
        document.write(Arr.includes('a')); //true
        document.write("</br>");
        document.write(Arr.includes('d')); //false

语法
arr.includes(指定的值, 指定值的索引号)

当指定索引数大于数组长度时，会返回false不会进行搜索。
如果指定的索引数是负值，那 （指定索引数）+（数组长度）= 开始搜索索引数

// includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
        let Arr = ['a', 'b', 'c'];
   
        // arr.includes(指定的值, 指定值的索引号)
        document.write("</br>");
        document.write(Arr.includes('a', 1)); //false
        document.write("</br>");
        document.write(Arr.includes('a', 0)); //true
        // 如果指定值的索引大于数组长度，则返回false，该数组不会被搜索
        document.write("</br>");
        document.write(Arr.includes('a', 3)); //false


        // 如果指定的索引值是负值，计算出的索引将作为开始搜索的位置，如果计算出的索引小于0，则整个数组都会被搜索

        // 数组长度是3，指定索引数是-100，那计算索引是3+(-100)=-97
        // 所以从-97开始往后搜索
        document.write("</br>");
        document.write(Arr.includes('a', -100)); //false

函数

arguments

arguments是一个类数组对象，包含这传入函数的所有参数。主要途径是保存函数参数

callee属性

arguments对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数

阶乘 arguments.callee

function factorial(num) {
            if (num <= 1) {
                return 1;
            } else {
                return num * arguments.callee(num - 1);
            }
        }
        alert(factorial(5)); //120

基本类型

Number类型

toFixed()方法

toFixed()会按照指定的小数位返回数值的字符串表示

 var num = 10;
 alert(num.toFixed(2)); //10.00

如果数值本身包含的小数位比指定的还多，那么接近指定的最大小位数的值就会舍入

 var num2 = 10.005;
        alert(num2.toFixed(2)); //10.01

String类型

创建新字符串

slice()、 substring()、 substr()

// 有三个创建字符串的方法   slice()  substr()  subString()
        // 这三个方法都会返回被操作字符串的一个子字符串，而且也都接受一个或两个参数
        // 第一个参数  字符串的开始位置
        // 第二个参数   字符串哪里结束

        var str = "hello world";
        console.log(str.slice(3)); //lo world
        console.log(str.substring(3)); //lo world
        console.log(str.substr(3)); //lo world

        console.log(str.slice(3, 7)); //lo w
        console.log(str.substring(3, 7)); //lo w
        console.log(str.substr(3, 7)); //lo worl  第二个参数是指定要返回的字符串个数

        var str = "hello world";
        console.log(str.slice(-3)); //rld
        console.log(str.substring(-3)); //hello world
        console.log(str.substr(-3)); //rld
        // slice和substr行为相同，是因为-3转换为了8（字符串长度加参数 11+(-3)=8 ）

        console.log(str.slice(3, -4)); //lo w
        // slice将第二个参数转换为7
        console.log(str.substring(3, -4)); //hel
        // substring会把第二个参数转换为0，但是这个方法会将较小的数作为开始位置，将较大的数作为结束位置
        console.log(str.substr(3, -4)); //"" 空字符串
        // substr也将第二个参数转换为0，这就意味着返回包含零个字符的字符串，也就是一个空字符串

字符串大小写转换

toLowerCase()、toUpperCase()是两个经典方法
toLocaleLowerCase()、 toLocaleUpperCase()方法则是针对特定地区的实现，对有些地方来说，针对地区的方法与其通用方法得到的结果相同。但少数语言大小写转换应用特殊的规则，这时候就必须使用针对地区的方法来保证实现正确的转换。

toLocaleLowerCase()、toLowerCase()小写转换

toLocaleUpperCase()、toUpperCase()大写转换

		var str = "hello world";
        var str2 = "HELLO WORLD";
        console.log(str2.toLocaleLowerCase()); //hello world
        console.log(str2.toLowerCase()); //hello world
        console.log(str.toLocaleUpperCase()); //HELLO WORLD
        console.log(str.toUpperCase()); //HELLO WORLD

localeCompare()方法 比较字符串

这个方法比较两个字符串，返回下列值中的一个

• 在字母表中，字符串排在字符串参数之前，则返回一个负数（大多情况下是-1，具体值视情况而定）
• 字符串等于字符串参数，返回0
• 在字母表中，字符串排在字符串参数之后，则返回一个正数（大多数情况下是1，具体值视情况而定）

 		var str = "yellow";
        alert(str.localeCompare("block")); //1
        alert(str.localeCompare("yellow")); //0
        alert(str.localeCompare("yelloa")); //1
        alert(str.localeCompare("zoo")); //-1

localeCompare()方法与众不同的地方，就是实现所支持地区决定了这个方法的行为。比如美国以英语作为ECMAscript实现的标准，因此localeCompare()方法是区分大小写的，于是大写字母在字母表中排在小写字母前头就成为了一种决定性的比较规则

fromCharCode() 把字符编码转换为字符串

fromCharCode()方法是接收一或多个字符编码，然后转换为字符串。

alert(String.fromCharCode(104, 101, 108, 108, 111)); //hello

Math对象

Math对象的属性

属性	说明
Math.E	自然对数的底数， 即常量e的值
Math.LN10	10的自然对数
Math.LN2	2的自然对数
Math.LOG2E	以2为底e的对数
Math.LOG10E	以10为底e的对数
Math.PI	π的值
Math.SQRT1_2	1 / 2 的平方根(即2的平方根的倒数)
Math.SQRT2	2 的平方根