<JavaScript>总结：知识点

2018-05-22 本文已影响26人玉圣

一、网页中的相关属性和参数使用：

1、获取的当前网页的路径：

   window.location.pathname;  //形如：/{根目录}/../{当前文件目录}/{文件名.html}

2、获取网页的域名：

   document.domain;   //形如：localhost

3、hash：
需求：如果页面中有分页的数据，需要将指定第x页的数据发送给其他人，其他人点击链接的时候，还能跳转到指定的第x页，这可以通过hash来处理：

   window.location.hash = 3;  //设置hash，地址栏显示为http://ip地址/aaa.html#3
   console.log(window.location.hash);  //结果为#3

二、函数：

1、arguments对象：

1、说明：
arguments对象是包含了传入函数中的所有参赛，它并不是一个数组（伪数组），只是与数组相似，出了拥有length属性，不具备数组其他的所有属性和方法。
2、属性：
length ：返回参数的长度
callee ：一个指针，指向拥有这个arguments对象的函数
3、示例：
例子1：求和

<script>

    function sum() {
        console.log(arguments);
        var vals = 0;
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
            vals += (Number(arguments[i]) || 0);  //为了过滤含有非数字的字符串
        }
        return vals;
    }

    var n = sum("44", 2, 3);
    console.log(n);

</script>

例子2：动态设置CSS属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arguments对象及动态设置CSS属性</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
<button id="btn1">改变颜色</button>
<button id="btn2">改变长度</button>

<div id="box"></div>

<script>
    function setCssStyle(obj) {
        var length = arguments.length;
        if (arguments.length%2===0) {
            length = arguments.length - 1;
        }
        for (var i = 1; i < length; i+=2) {
            obj.style[arguments[i]] = arguments[i+1];
        }
    }

    var box = document.getElementById("box");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.onclick = function() {
        setCssStyle(box, "background-color", "blue");
    };

    btn2.onclick = function() {
        setCssStyle(box, "width", "200px");
    };

</script>
</body>
</html>

4、apply和call方法作用：

1、专门用于修改方法内部的this
1.1、通过window.test2找到test方法
1.2、通过apply(obj)将找到的test方法内部的this修改为自定义的对象

示例：

        //修改之前：
        function test1() {
            //谁调用，this则是谁
            console.log(this);
        }
        test1();  //打印结果为window对象

        //修改之后：
        function test2() {
            console.log(this);

        }

        var obj = {"name": "zhangsan"};
        window.test2.apply(obj);  //打印结果为修改的对象obj
        window.test2.call(obj);  //打印结果为修改的对象obj

2、格式
2.1、call(对象, 参数1, 参数2, ...)：可接收多个参数
2.2、apply(对象, [数组])：只接收两个参数，第二个参数为数组
apply方法中，会将数组中的值依次传递给方法中的形参

示例：

        function sum(a, b) {
            console.log(this, a + b);
        }

        window.sum.call(obj, 1, 2); //结果为 obj对象 3，1传给了a，2传给了b
        window.sum.apply(obj, [2, 5]); //结果为 obj对象 7，2传给了a，5传给了b

2.3、真数组转换为伪数组

        // 将真数组转换为伪数组
        var arr = [1, 2, 3, 4, 5];
        var obj = {};
        [].push.apply(obj, arr);
        console.log(obj);   //{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5}

注意： [] 表示数组
1）通过[].push找到数组中的push方法
2）通过apply(obj)将找到的push方法内部的this修改为自定义的obj对象
3）将传入数组中的元素依次取出，传递给push的形参
则数组中的属性全部赋给了obj对象，完成了转换

真数组转换为伪数组

2.4、伪数组转换为真数组
使用apply（或call）可以将真数组转换为伪数组，那么同理，将apply中的参数互换，就可以达到将伪数组转换为真数组了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>真伪数组的转换</title>

    <script>
        window.onload = function () {
            //系统自带的伪数组
            var divs = document.querySelectorAll("div");

            var arr = [];

            [].push.apply(arr, divs);
            console.log(arr);

            //自定义的伪数组
            var obj = {0 : "zhangsan", 1 : 8, length : 2};

            var arr2 = [];
            [].push.apply(arr2, obj);

            // var arr2 = [].slice.apply(obj);

            // var arr2 = [].slice.call(obj);

            console.log(arr2);
        };


    </script>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
</body>
</html>

注意：
在IE8的低版本中，使用[].push.apply(arr2, obj); 这种方式，会报错，因此，如果要将伪数组转换为真数组，通用的方式为：

var arr2 = [].slice.call(obj);

5、JSON的使用：

1、将字符串解析为json对象
1.1、方法：JSON.parse

    <script>
        var j = '{"name" : "zhangsan", "age" : 18}';
        var obj = JSON.parse(j);
        console.log(obj);

    </script>

打印结果
1.2、注意：
在低版本IE中，不可以使用原生的JSON.parse方法，但是可以使用第三方的框架json2.js ，使用的方法和原生的一样。

三、属性：

1、JS获取CSS中的样式：

在开发中，要想获得CSS的样式，有如下方式：

1、获取 行内样式：点方式
如： box.style.top 、box.style.backgroundColor 等
2、获取 页内样式或外部样式：
1）IE和Opera浏览器：
obj.currentStyle
2）其他W3C标准浏览器：
注意：其中两个参数是必须的，没有伪类，使用null替代

window.getComputedStyle("元素", "伪类");

3）兼容写法：

    function getStyleAttr(obj, attr) {
        if (obj.currentStyle) { //IE 和 Opera
            return obj.currentStyle;
        } else {    //其他W3C标准浏览器
            return window.getComputedStyle(obj, null)[attr];
        }
    }

2、cookie：

1、cookie和ssession：
cookie：会话跟踪技术，用于客户端
session：会话跟踪技术，用于服务端
2、cookie的作用：
将网页中的数据保存到浏览器中
3、cookie的生命周期：
默认情况下，cookie的生命周期是一次会话（即浏览器被关闭，就结束了）
如果通过expires=xxx 设置了过期时间，并且过期时间没有过期，那么下次打开浏览器还是存在的。
而如果设置的过期时间已经过期了，则浏览器会立即删除保存的cookie数据
设置过期时间如下：

    <script>
        window.onload = function () {
            //默认情况
            console.log(document.cookie);   //结果未打印任何内容

            //设置数据后
            document.cookie = "age=333";
            console.log(document.cookie);   //结果为：age=333

            var date = new Date(); //今日为2018年06月04日
            date.setDate(date.getDate()+1); //设置过期时间为明天
            document.cookie = "name=zhangsan;expires=" + date.toGMTString() + ";"
        };
    </script>

设置过期时间

4、cookie的作用范围：
1）在同一个浏览器的同一个路径下，不同的文件中可以相互访问
2）在同一浏览器中，默认情况下，下一级路径可以访问
3）如果在同一浏览器中，想让上一级目录也能访问保存的cookie，那么需要添加一个path 属性才可以：document.cookie = "name=zs;path=/;"
4）如果在www.aaa.com 下保存了一个cookie，那么在edu.aaa.com中是无法访问的，如果需要让edu.aaa.com也能访问，则需要在设置cookie的时候，需要添加如下代码：

document.cookie = "name=zahgnsan;domain=aaa.com";  //设置同一站点

5、cookie的删除：
要想删除cookie，直接将要删除的cookie的过期时间设置为前一天即可删除

默认情况下只能删除默认路径中保存的cookie，如果想删除指定路径下的cookie，那么必须在删除的时候指定路径才可以。

6、cookie的使用注意点：
cookie默认是不会保存任何数据的
cookie不能一次性设置多条数据，要想保存多条数据，只能一条一条的设置
cookie有大小（4KB左右）和个数（20~50个）的限制

    <script>
        window.onload = function () {
            //默认情况
            console.log(document.cookie);   //结果未打印任何内容

            //设置数据后
            document.cookie = "age=333";
            console.log(document.cookie);   //结果为：age=333

        };
    </script>

默认情况

设置数据

四、正则表达式：

注意：
1、要使用正则表达式进行匹配，需要在匹配表达式前后加上/
格式为：

  /表达式/

2、在js中，如果匹配成功一次，就不在继续匹配了，如果需要全部匹配，可以使用g

1、去除字符串前后空格：

其中的^ 表示匹配开头，$ 表示匹配结尾，g 为全局匹配

    <script>
        var s = "  aa bbccb  ";
        var ss = s.replace(/^\s+|\s+$/g, "");
        console.log(ss);

    </script>