JavaScript高级程序设计（第三版）学习，第一次总结

Posted 2020-06-24 平凡世界平凡人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高级程序设计（第三版）学习，第一次总结相关的知识，希望对你有一定的参考价值。

Array类型

var arr = [];
arr.length;     //返回数组元素个数

改变length可以动态改变数组大小

检测数组

instanceof可以检测某个对象是否是数组，限制：只能是一个网页或一个全局作用域

Array.isArray(arr);          //最终确定某个值到底是不是数组，没有限制

转换方法

arr.toString();                   //返回由数组每个值的字符串形式拼接而成的以逗号分隔的字符串
arr.valueOf();                    //与toString方法一致
arr.toLocalString();          //一般情况与toString和valueOf值一致，重定义则不一定

注：toString方法会去调用每个值的toString方法，toLocaleString会去调用每个值的toLocaleString方法

arr.join("-");                    //以传入的字符串当做分隔符，返回字符串，不传值，以逗号分隔

栈方法

arr.push(arg1,arg2,arg3....);               //接收不限量的参数，按顺序添加到数组末尾，返回修改后数组的长度
arr.pop();                                             //返回数组最后一项，并移出数组

队列方法（需和栈方法组合）

arr.shift();                                             //移除数组第一项，并返回被移除项
arr.unshift(arg1,arg2,arg3....);               //在数组前端添加任意项，并返回改变后数组长度

重排序方法

arr.reverse();                                        //反转数组
arr.sort();                                             //将数组每一项都转成字符串形式，进行比较，升序排列
arr.sort(function(){});                              //接收一个函数作为参数，根据函数返回值排序，前一项排在后一项后面，返回1，排在前，返回-1

操作方法

arr.concat(arg1,arg2,arg3,.....);          //不限制传入数量，可以是数组，可以是字符串，可以是数值
arr.slice(arg1,arg2);                              //接收两个参数，要返回的起始项（可选）和结束位置（可选），不传最后一个参数，返回从起始项到数组末尾，不传参数，返回整个数组
arr.splice(arg1,arg2,arg3);                    //arg1删除的第一项的位置，arg2删除的项数，arg3，可以是任意数量的字符串，用于删除后插入

位置方法

arr.indexOf(arg1,arg2);                         //arg1查找的项，arg2查找起点（可选），从头查找，找到返回位置索引（以位置0开始），未找到返回-1
arr.lastIndexOf(arg1,arg2);                    //与indexOf相反的查找方向，参数数量，意义一致

迭代方法

arr.every(function(){});                            //对数组每一项运行参数函数，都返回true，才为true
arr.filter(function(){});                            //对数组每一项运行参数函数，返回函数返回true的数组成员
arr.forEach(function(){});                         //对数组每一项运行参数函数，没有返回值，改变数组元素
arr.map(function(){});                              //对数组每一项运行参数函数，返回每次函数调用的结果组成的数组
arr.some(function(){});                              //对数组每一项运行参数函数，只要有一项返回true，返回true
function(item,index,array){}                    //参数函数，接收三个参数：数组项的值，该项在数组的位置，数组对象本身

归并方法

arr.reduce(function(){},initValue);               //迭代数组所有项，构建一个返回值，从数组第一项开始
arr.reduceRight(function(){},initValue);          //迭代数组所有项，构建一个返回值，从数组最后一项开始
function(prev,cur,index,array){}                    //参数函数，四个参数：前一个值（由前一次函数结果来确定），当前值，项的索引，数组对象
initValue                                                       //可选

DOM

Node类型

nodetype属性：节点类型，nodeName属性：节点名称，nodeValue属性：节点值

每个节点都有childNodes属性，保存NodeList对象，动态对象，有length属性，可以使用item()方法和方括号法访问。

parentNode属性，指向文档树父节点。
previousSibling属性：同一列表前一个节点
nextSibling属性：同一列表后一个节点
firstChild属性：第一个子节点
lastChild属性：最后一个子节点
ownerDocument属性：指向整个文档的文档节点
hasChildNodes(node)：在节点包含一个或多个子节点返回true
someNode.appendChild(newNode)：在最后一个子节点之后加入节点
someNode.insertBefore(newNode,node)：在参照节点之前插入节点，参照节点为null，结果与appendChild方法一致
someNode.replaceChild(newNode,node)：替换节点
someNode.removeChild(node)：移除节点
someNode.cloneNode(Boolean)：复制，true深复制，复制这个节点及子树，false浅复制，只复制本节点
normalize();处理文档树中的文本节点，合并用的

Document类型

js用以表示文档，是整个文档，不是部分，即document对象

document.documentElement属性：指向<html>
document.body属性：指向<body>
document.doctype：指向<!DOCTYPE>
document.title：指向<title>
document.URL：页面完整URL
document.domain：域名，可设置，同一域
document.referrer：保存着链接到当前页的那个页面的URL

查找元素

getElementById：接收一个参数，要取得的元素的ID，严格按照大小写匹配，多个id相同，返回第一个元素
getElementByTagName：接受一个参数，要取得的元素标签名，返回NodeList，在HTML文档中返回HTMLCollection对象，动态集合，可以使用item()方法或方括号法访问元素。
HTMLCollection对象，还有一个方法，namedItem，可以使用这个方法通过元素的name特性取得集合中的项。
getElementsByName()：HTMLCollection类型才有的方法。返回给定name特性的所有元素

特殊集合

都是HTMLCollection对象

document.anchors：所有带有name特性的<a>
document.applets：所有<applets>
document.forms：所有<form>
document.images：所有<img>
document.links：所有带href的<a>

Element类型

所有HTML元素都是HTMLElement类型，不然也是通过它的子类型表示。

特性：

id：在文档中的唯一标识符
title：有关元素附加说明，一般通过工具提示条显示出来
lang：元素内容语言代码，很少使用
dir：语言方向，tlr（左向右），rlt（右向左），很少使用
className：与元素class对应，为元素指定的CSS类

取得特性

getAttribute()：注意：传递的特性名与实际特性名相同，因此要得到class特性，要传递"class"，而不是"className"，也可以取得自定义特性，特性是不区分大小写的注：通常通过对象属性来访问特性，只有取得自定义特性才使用getAttribute方法
setAttribute()：接收两个参数，要设置的特性名和值。已存在，替换，不存在，创建。设置的特性名会统一转换为小写。
removeAttribute()：接收特性名。清楚特性值，并删除特性。

attributes属性

Element类型是唯一使用attributes属性的唯一一个DOM节点类型

attributes属性中包含一个NamedNodeMap，动态集合。元素每个特性都由一个Attr节点表示，每个节点保存在NamedNodeMap对象中，对象拥有的方法:

element.attributes.getNamedItem("id")：返回nodeName属性等于id的节点，简写：element.attributes["id"]
element.attributes.removeNamedItem("id")：移除nodeName属性等于name的节点
element.attributes.setNamedItem(node)：很不常用的方法，为元素添加特性。

attributes的方法不够方便，更多的会使用getAttribute，setAttribute，removeAttribute方法。序列化倒是有用：

function outputAttribute(element){
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName += "=\"" + attrValue + "\"");
    }

    return pairs.join(" ");
}

由于IE7及更早版本会返回HTML中所有可能的特性，所以对上述函数加以改进，让它返回指定特性。每个特性节点都有一个specified属性，为true，要么在HTML中指定了相应特性，要么通过setAttribute设置。改进后代码：

function outputAttribute(element){
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName += "=\"" + attrValue + "\"");
        }       
    }

    return pairs.join(" ");
}