JavaScript学习

数组常用方法

push

在数组后面加上一个或多个元素，并返回数组的新的长度

var arr = ["你", "我", "他"];
var result = arr.push("你们", "我们", "他们", "她们");
console.log(arr);
console.log(result);

POP

该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

var arr = ["你", "我", "他"];
var result = arr.pop();
console.log(arr);
console.log(result);

unshift

该方法向数组开头添加一个或多个元素，并返回新的数组长度

var arr = ["你", "我", "他"];
var result = arr.unshift("你们", "我们");
console.log(arr);
console.log(result);

shift

该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr = ["你", "我", "他"];
var result = arr.shift();
console.log(arr);
console.log(result);

forEach

该方法可以用来遍历数组

forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：

第一个参数：就是当前正在遍历的元素
第二个参数：就是当前正在遍历的元素的索引
第三个参数：就是正在遍历的数组
注意：

这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach()，还是使用for循环来遍历数组。

var arr = ["你", "我", "他"];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
});

slice

该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

参数：

第一个参数：截取开始的位置的索引，包含开始索引
第二个参数：截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
注意：索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。

var arr = ["你", "我", "他, "你们", "我们"];
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
result = arr.slice(1, -2);
console.log(result);

splice

该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = ["你", "我", "他", "你们", "我们"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "他们", "一起", "都是");
console.log(arr);
console.log(result);

concat

该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["你", "我", "他"];
var arr2 = ["你们", "我们", "他们"];
var arr3 = ["大家", "全部", "一切"];
var result = arr.concat(arr2, arr3, "一起", "都是");
console.log(result);

join

该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

var arr = ["你", "我", "他"];
var result = arr.join("@-@");
console.log(result);

reverse

该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组

var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.reverse();
console.log(arr);

sort

该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

var arr = ["b", "c", "a"];
arr.sort();
console.log(arr);

注意：
即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。

var arr = [1, 3, 2, 11, 5, 6];
arr.sort();
console.log(arr);

我们可以自己来指定排序的规则，我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，浏览器会根据回调函数的返回值来决定元素的顺序，如下：

• 如果返回一个大于0的值，则元素会交换位置
• 如果返回一个小于0的值，则元素位置不变
• 如果返回一个等于0的值，则认为两个元素相等，也不交换位置

经过上边的规则，我们可以总结下：

• 如果需要升序排列，则返回 a-b
• 如果需要降序排列，则返回 b-a

var arr = [1, 3, 2, 11, 5, 6];
arr.sort(function (a, b) {
    return a - b;
});
console.log(arr);

Date对象

在JavaScript中使用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

var date = new Date();
console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

Math对象

Math和其它的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法。

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

BOM概述

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

• Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
• Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
• Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
• History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
• Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
  这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

浏览器可视窗口的尺寸

console.log(window.innerHeight,innerHeight)
console.log(window.innerWidth,innerWidth)

innerHeight和innerWidth获取浏览器的长宽

浏览器的弹出层

使用btn.onclick = function(){ aler（"XXX"） }来编辑浏览器的弹出层

btn.onclick = function(){
aler（"用化名与密码不匹配"）
}

浏览器的地址信息

console.log(location.herf)

console.log(location.herf)

使用该标记弹出网页地址

浏览器滚动距离

windows.conscroll = function(){
console.log(document.documentElemnt.scrollTop)
}

scrollTo滚动到指定位置

滚动到指定位置

        btn.onclick=function(){
            window.scrollTo(0,0)
            或
            window.scrollTo{
                left:0,
                top:0
            }
        }

浏览器打开标签页

     btn.onclick=function(){
         window.open("http://www.baidu.com")
     }

点击按钮可打开一个新页面

        btn.onclick=function(){
            window.close("http://www.baidu.com")
        }

点击按钮可关闭原来的页面

浏览器历史记录

浏览器的历史记录

       window.history.back()

用来退回历史记录，回到前一个页面

        window.history.forward()

回到刚刚关闭的页面

        window.history.go(-1/1/...)

浏览器的本地储存

localStorage.setItem(）增
localStorage.getItem()取
localStorage.removeItem()删
localStorage.clear()清空

存储只能存字符串，不能存对象，如果要存储对象，就要使用JSON进行转换