*.querySelector

概述

返回当前文档中匹配一个特定选择器的第一个元素。返回的对象类型是Node或Null. 选择器内核为Sizzle.

语法

• selector 表示选择器。

其他说明

支持document.querySelector以及element.querySelector. 不过有个限制，element需要是document.querySelector或document.querySelectorAll选择的元素。

例如下面这个在IE6~IE8下是会报错：

document.getElementById("query").querySelector(".selector");

需要这么使用：

document.querySelector("#query").querySelector(".selector");

示例

代码

HTML

<img src="mm1.jpg" class="bingo">
<img src="mm2.jpg" class="bingo1">
<img src="mm3.jpg" class="bingo2">

JS

var eleTestButton1 = document.querySelector("#testButton1");
if (eleTestButton1) {
    eleTestButton1.addEventListener("click", function() {
        var eleBingo = document.querySelector(".bingo");	
        if (eleBingo) {
            if (!eleBingo.style.verticalAlign) {
                eleBingo.style.verticalAlign = "8px";
                this.value = "给我回来！";
            } else {
                eleBingo.style.verticalAlign = "";
                this.value = "走两步！";
            }				
        }
    });	
}

*.querySelectorAll

概述

返回当前文档中匹配一个特定选择器的所有的元素。在IE6-8下，返回的是装载节点集合的数组；其他浏览器为NodeList类型。

语法

<var>elementList</var> = document.querySelectorAll(selectors);

• selectors 表示是一个由逗号连接的包含一个或多个CSS选择器的字符串。

其他说明

如果你想遍历所有的节点。可以试试这种用法：

var elementList = document.querySelectorAll(selectors);
[].slice.call(elementList).forEach(function(elementNode, index) {
     // elementNode 就是遍历的节点       
});

示例

代码

HTML

<img src="mm1.jpg" class="bingoAll">
<img src="mm2.jpg" class="bingoAll">
<img src="mm3.jpg" class="bingoAll">

JS

var eleTestButton2 = document.querySelector("#testButton2");
if (eleTestButton2 && !eleTestButton2.clicked) {
    eleTestButton2.addEventListener("click", function() {
        var eleBingoAll = document.querySelectorAll(".bingoAll");	
        [].slice.call(eleBingoAll).forEach(function(eleBingo) {
            eleBingo.style.padding = "3px";	
            eleBingo.style.border = "1px solid #aaa";	
        });
        eleTestButton2.clicked = true;
    });	
}

*.getElementsByClassName

概述

根据类名获得匹配的所有元素。在IE6-8下，返回的是装载节点集合的数组；其他浏览器为NodeList类型。

语法

<var>elementList</var> = document.getElementsByClassName(classNameA classNameB ...);

• className 表示希望匹配的元素的类名。

其他说明

在IE9+浏览器下，使用的是原生getElementsByClassName方法，其速度要比querySelector快。支持多个类名。

示例

代码

HTML

<img src="mm1.jpg" class="bingoA bingoB">

JS

var eleTestButton3 = document.querySelector("#testButton3");
if (eleTestButton3) {
    eleTestButton3.addEventListener("click", function() {
        var eleBingClassName = document.getElementsByClassName("bingoA bingoB")[0];			
        if (eleBingClassName) {
            var visibility = eleBingClassName.style.visibility;
            if (visibility == "hidden") {
                this.value = "点击隐藏";	
                eleBingClassName.style.visibility = "visible";
            } else {
                this.value = "点击显示";	
                eleBingClassName.style.visibility = "hidden";
            }
        }
    });	
}

*.addEventListener

概述

在一个单一的目标上注册单一的监听事件。监听事件可以是一个文档上的元素，或者document本身，或window.

语法

target.addEventListener(type, listener[, useCapture]);

• type 表示监听的事件类型的字符串。比如点击事件，可以是"click".
• listener 侦听方法。在事情发生的时候，接受一个通知对象。
• useCapture 可选参数。如果为true，则表示用户希望启动从外及内的捕获获取。如果该参数未指定，useCapture为false，表示采用从里到外的冒泡获取。

其他说明

目前只做了基本事件的兼容处理。低版本IE浏览器不支持的有：

1. XMLHttpRequest侦听
2. progressaudio/video等HTML5事件

另外，IE6-IE8浏览器的第三个参数useCapture实际并未作用。listener传入对象（假设名为event）做了如下一下兼容性处理：

1. event对象直接使用，而无需window.event
2. event.target
3. event.preventDefault()

可见，目前只做了些常用属性或方法的兼容处理。欢迎你一同参与更多的建设。

示例

我在等待鼠标经过按钮哦~

代码

HTML

<span id="txtAddEvent" style="color:#666;">我在等待鼠标经过按钮哦~</span>

JS

var eleTestAddEvent = document.querySelector("#testAddEvent")
    , eleTxtAddEvent = document.querySelector("#txtAddEvent");
if (eleTestAddEvent && eleTxtAddEvent) {
    eleTestAddEvent.addEventListener("mouseover", function() {
        eleTxtAddEvent.innerHTML = '经过人家啦！';	
    });
    eleTestAddEvent.addEventListener("mouseout", function() {
        eleTxtAddEvent.innerHTML = '不要离开人家嘛！';	
    });
}

*.removeEventListener

概述

移除注册的事件。

语法

target.removeEventListener(type, listener[, useCapture])

• type 表示要移除的事件类型。
• listener 表示要移除的事件方法。
• useCapture 可选参数。要移除的事件是不是可以捕获的。此参数在本项目中没有作用，可忽略。

其他说明

暂无

示例

这个例子是这样的：
两个按钮，第一个按钮注册了两个方法，一个是图片尺寸变化，另外一个是图片位置随机变化。点击第二个按钮则移除“位置变化”这个注册事件。此时，再点击第一个按钮，看看效果如何？

代码

HTML

<img src="mm1.jpg" id="bingoRemoveEvent">

JS

var eleAddEventAB = document.querySelector("#testAddEventAB")
    , eleRemoveEventB = document.querySelector("#testRemoveEventB");
    
var eleBingoRemoveEvent = document.querySelector("#bingoRemoveEvent");

if (eleAddEventAB && eleRemoveEventB && eleBingoRemoveEvent) {
    var eventAddA = function() {
    	// 大小随机
        eleBingoRemoveEvent.style.width = Math.ceil(128 * Math.random()) + "px";
    }, eventAddB = function() {
    	// 位置随机
        eleBingoRemoveEvent.style.marginLeft = Math.ceil(128 * Math.random()) + "px";
    };
    
    // 注册事件
    eleAddEventAB.addEventListener("click", eventAddA);
    eleAddEventAB.addEventListener("click", eventAddB);
    
    // 移除事件
    eleRemoveEventB.addEventListener("click", function() {
        eleAddEventAB.removeEventListener("click", eventAddB);
        this.value += "√";
    });
}

*.dispatchEvent

概述

给DOM节点委派一个事件。

语法

element.dispatchEvent(event);

• event 表示事件对象。在标准浏览器中，由document.createEvent创建。不过这其实属于旧方法，目前，推荐使用new Event(). 但IE9似乎不支持新的用法，因此，本项目依然使用的是document.createEvent.

其他说明

引入dispatchEvent的初衷是触发各类事件。类似jQuery中的trigger方法。

dispatchEvent要想起作用，前面还需要两步，一是创建，二是初始化。具体可参考下面的示例代码。

在IE6~IE9中，参数event对象（如果是采用document.createEvent创建）有用的属性值有：

1. event.target 事件元素
2. event.type 事件类型
3. event.timeStamp 事件执行时候的时间戳

其他参数实际上只是个占位子的摆设。因此，dispatchEvent更适合自定义事件或者不依赖event事件对象的事件。

示例

创建一个基本的自定义事件，实现图片随机左边距(margin-left)效果。如下代码：

// 创建
var eventMarginLeft = document.createEvent("Event");
var eleDispatch = document.querySelector("#bingoDispatch");
if (eleDispatch) {
    eleDispatch.addEventListener("marginLeft", function() {
        this.style.marginLeft = Math.round(Math.random() * 100)	+ "px";
    });
    // 初始化
    eventMarginLeft.initEvent("marginLeft");
}

代码

HTML

<img src="mm1.jpg" id="bingoDispatch">

JS

var eventMarginLeft = document.createEvent("Event");
var eleDispatch = document.querySelector("#bingoDispatch");
if (eleDispatch) {
    eleDispatch.addEventListener("marginLeft", function() {
        this.style.marginLeft = Math.round(Math.random() * 100)	+ "px";
    });
    eventMarginLeft.initEvent("marginLeft");
}	
var eleTestDispatch = document.querySelector("#testDispatchEvent");
if (eleTestDispatch) eleTestDispatch.addEventListener("click", function() {
    eleDispatch.dispatchEvent(eventMarginLeft);	
});

document.createEvent

概述

创建指定类型的事件。

语法

var event = document.createEvent(type);

• type 表示事件的类别。本项目支持如下值："Event", "HTMLEvents", "MouseEvents", "UIEvents". 并不支持DOM 3 "TextEvent", HTMLEvent, MouseEvent, KeyboardEvent等其他类别，否则在IE6~8浏览器下会抛出异常。

其他说明

实际上，在IE6~8浏览器中，type类别实际并没有多少实际的差异。不过，从兼容统一角度讲，还是根据情况使用合适的类别。

示例

参考*.dispatchEvent中的示例。

代码

暂无

initEvent | initMouseEvent | initUIEvent

概述

初始化document.createEvent返回事件。 // 作者自述: 这一连串使用其实很啰嗦，在新的构造器事件生成中，已经没有这个啰嗦的初始化步骤。

语法

event.initEvent(eventType, canBubble, cancelable);

event.initMouseEvent(eventType, canBubble, cancelable, view, 
            detail, screenX, screenY, clientX, clientY,
            ctrlKey, altKey, shiftKey, metaKey,
            button, relatedTarget);

event.initUIEvent(eventType, canBubble, cancelable, view, detail);

• eventType 表示事件的类型，例如"click"或者自定义注册的事件类型，如"marginLeft".
• canBubble 可选参数。表示事件是否冒泡。默认为false.
• cancelable 可选参数。表示是否可以用preventDefault()方法取消事件，默认为false.
• view 可选参数。表示...
• ...
• ...
• 抱歉，条目过多... event对象各个属性含义请大家自行查找相关资料。

其他说明

以上初始化方法的参数可以通过addEventListener注册事件的event对象获得，于是，通过这个，我们可以区分是主动触发行为（鼠标点击）还是代码触发行为（dispatchEvent）。

document.createEvent, event.initEvent, element.disptachEvent. 实际是触发addEventListener注册事件的三步曲。

于是，element元素上注册的click事件就可以被执行了。行为表现有些类似jQuery中的trigger.

这里的对象初始化方法与事件类别是一一对应的，如下：

其他一些事件类别，如TextEvent为DOM3级别，这里不予以支持。

示例

代码

HTML

<img src="mm1.jpg" id="bingoInitEvent">

JS

var eleClickAdded = document.querySelector("#testClickAdded")
    eleClickDispatch = document.querySelector("#testClickDispatch");
var eleBingoInitEvent = document.querySelector("#bingoInitEvent");

if (eleClickAdded && eleClickDispatch && eleBingoInitEvent) {
    eleClickAdded.addEventListener("click", function() {
        eleBingoInitEvent.style.marginLeft = Math.ceil(100 * Math.random()) + "px";	
    });
    // 创建
    var initEventCreate = document.createEvent("MouseEvents");
    // 初始化
    initEventCreate.initMouseEvent("click");
    // 点击触发
    eleClickDispatch.addEventListener("click", function() {
        eleClickAdded.dispatchEvent(initEventCreate);	
    });
}

input

概述

表示表单元素的输入事件。此事件为HTML5新增。

语法

element.addEventListener("input", fn);

其他说明

比方说Autocomplete这些组件效果，需要侦听用户的输入行为。传统方法为侦听keydown或keyup等键盘事件，但存在一个问题，就是用户鼠标右键粘贴内容的时候是无法捕获的。还需要再做额外的处理，这人力成本显然上升了。

input事件专为这种情况诞生。只要输入框里面有内容输入，才会执行响应的事件。性能更高，适应性更好。

示例

还可以输入140字：

代码

还可以输入<span id="inputLeftText">140</span>字：
<textarea id="areaTextInput" cols="50" rows="5" placeholder="别愣着，赶快输入内容..."></textarea>

JS

var eleAreaInput = document.querySelector("#areaTextInput")
  , eleNumLeftInput = document.querySelector("#inputLeftText");
if (eleAreaInput && eleNumLeftInput) {
    eleAreaInput.addEventListener("input", function() {
        var left = 140 - this.value.trim().length;
        if (left < 10) {
            eleNumLeftInput.style.color = "#cd0000";
        } else {
            eleNumLeftInput.style.color = "";	
        }
        eleNumLeftInput.innerHTML = left;
    });	
}

window.onhashchange

概述

url地址hash改变时候触发。

语法

window.onhashchange = function(event) {
    // 该干嘛干嘛嘛
};

event对象的参数如下：

• target 表示浏览器上下文(window).
• type 表示事件类型。
• oldURL 表示之前的URL地址。
• newURL 当前的URL地址。

其他说明

IE6-IE8浏览器下，不支持window.addEventListener("hashchange", fn)的用法。

IE8浏览器下，原本不支持oldURL和newURL. 这里做了重置处理，也是支持这两个参数。不过恕我水平有限，还需要做一个额外的小处理。就是在事件的最上面加上，以阻止默认支持的方法执行：

event = event || {};

或者：

if (!event) return;

示例

点击下面三个文字链接：

变红色   变蓝色   变黄色

你的意思是我会变色？

代码

HTML

<a href="#red" class="link">变红色</a> <a href="#blue" class="link">变蓝色</a> <a href="#yellow" class="link">变黄色</a>
<span id="hashChangeColor">你的意思是我会变色？</span>

JS

var eleHashChange = document.querySelector("#hashChangeColor");
if (eleHashChange) {
    var hashKeyColor = {
        red: "红色",
        blue: "绿色",
        yellow: "黄色"	
    };
    window.onhashchange = function(event) {
        // for IE8
        event = event || {};
        // for all
        var oldUrl = event.oldURL, newUrl = event.newURL;
        var hashOld = '', hashNew = '';
        if (oldUrl && newUrl) {
            hashOld = oldUrl.split("#")[1] || '';
            hashNew = newUrl.split("#")[1] || '';
            // 颜色变化
            eleHashChange.style.color = hashKeyColor[hashNew]? hashNew: '';
            // 变化日志
            eleHashChange.insertAdjacentHTML("beforeEnd", 
                '<br><span style="color: #666;">颜色从' + (hashKeyColor[hashOld] || '继承色') + '变成' + (hashKeyColor[hashNew] || '继承色;</span>')
            );				
        }
    };	
}

window.getComputedStyle

概述

返回元素包含的CSS属性以及对应的属性值。

语法

var style = window.getComputedStyle(element[, pseudoElt]);

• element 表示DOM元素。
• pseudoElt 表示伪类。不过这里并不支持。包括IE9浏览器。

其他说明

要想得到特性属性的CSS值，有两种方式：

1. 直接获取。但是，属性名只能是驼峰形式，例如backgroundColor, 而不能是background-color. 如下代码：

   var bgColor = style.backgroundColor;

   不能直接使用"float"属性获得浮动值。需要使用styleFloat：

   var valueFloat = window.getComputedStyle(element)["styleFloat"];

2. 使用getPropertyValue方法获取。

   var cssValue = style.getPropertyValue(cssKey);

   getPropertyValue获取有两个好处。一是支持短横连接符的写法，如"background-color"; 二是可以直接使用float属性。

更多知识点可参考我的“获取元素CSS值之getComputedStyle方法熟悉”这篇文章。

示例

代码

HTML

<form id="formGetCssValue">
    <p>你想知道下图的哪个CSS属性值？</p>
    <p>
        <img src="mm1.jpg" id="bingoGetCss">
    </p>
    <p><input id="inputCssValue" size="20" value="float" placeholder="输入CSS属性名称" required pattern="^[a-zA-Z]+(?:\-[a-zA-Z]+)?$"></p>
    <p><input type="submit" class="button" value="出现吧~"></p>
    <p id="resultCssValue">您输入的属性<code>$key$</code>对应的值是<code>$value$</code>.</p>
</form>

JS

var eleFormGetCss = document.querySelector("#formGetCssValue")
  , eleBingoGetCss = document.querySelector("#bingoGetCss")
  , eleInputCssValue = document.querySelector("#inputCssValue")
  , eleResultCssValue = document.querySelector("#resultCssValue");
var initHtmlResult = '';
if (eleFormGetCss && eleBingoGetCss && eleInputCssValue && eleResultCssValue) {
    initHtmlResult = eleResultCssValue.innerHTML;
    eleResultCssValue.innerHTML = ' ';
    eleFormGetCss.addEventListener("submit", function(event) {
        var key = eleInputCssValue.value;
        var value = window.getComputedStyle(eleBingoGetCss).getPropertyValue(key) + "";
        eleResultCssValue.innerHTML = initHtmlResult.replace("$key$", key).replace("$value$", value);
        event.preventDefault();
    });
}

JSON.parse

概述

将JavaScript对象表示法(JSON)字符串转换为对象。

语法

JSON.parse(text[, reviver])

• text 表示要解析的JSON字符串。
• reviver 可选。如果是一个转换结果的函数，将为对象的每个成员调用此函数。如果成员包含嵌套对象，则先于父对象转换嵌套对象。对于每个成员，会发生以下情况：
• 如果reviver返回一个有效值，则成员值将替换为转换后的值。
• 如果reviver返回它接收的相同值，则不修改成员值。
• 如果reviver返回null或undefined, 则删除成员。

返回一个对象或数组。

其他说明

如果此函数引发JavaScript分析器错误（如“SCRIPT1014：无效字符”），则输入文本将不遵循JSON语法。 若要更正此错误，请执行下列操作之一： 修改text参数以遵循JSON语法。有关更多信息，请参见JSON对象的BNF syntax notation（BNF语法表示法）。

示例

try {
    JSON.parse('{}'); // {}
    JSON.parse('true'); // true
    JSON.parse('"foo"'); // "foo"
    JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
    JSON.parse('null'); // null
} catch (e) {
    console.error("Parsing error:", e); 
}

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);
 
// 输出: Aaberg, Jesper

JSON.stringify

概述

将JavaScript值转换为JavaScript对象表示法(Json)字符串。

语法

JSON.stringify(value [, replacer] [, space])

• value 表示要转换的JavaScript值（通常为对象或数组）。
• replacer 可选。表示转换结果的函数或数组。
  • 如果replacer为一个函数，则JSON.stringify会调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回undefined, 则排除成员。根对象的键是一个空字符串："".
  • 如果replacer为一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当value参数也为数组时，将忽略replacer数组。
• space 可选。表示向返回值JSON文本添加缩进、空白和换行符以使其更易于读取。
  • 如果省略space，则将生成返回值文本，而没有任何额外空白。
  • 如果space为一个数字，则返回值文本在每个级别缩进指定数目的空格。 如果space大于10, 则文本缩进10个空格。
  • 如果space是非空字符串（例如"\t"），则返回值文本在每个级别中缩进字符串中的字符数。
  • 如果space是长度大于10个字符的字符串，则使用前10个字符。

返回值为一个包含JSON文本的字符串。

其他说明

目前，本项目中，JSON.parse和JSON.stringify两个方法都源自开源项目：https://github.com/douglascrockford/JSON-js/blob/master/json2.js.

示例

assert(JSON.stringify({}) === '{}');
assert(JSON.stringify(true) === 'true');
assert(JSON.stringify("foo") === '"foo"');
assert(JSON.stringify([1, "false", false]) === '[1,"false",false]');
assert(JSON.stringify({ x: 5 }) === '{"x":5}');
JSON.stringify({x: 5, y: 6}); // '{"x":5,"y":6}' or '{"y":6,"x":5}'

Object.create

概述

根据指定的原型对象和属性创建新的对象。

语法

Object.create(proto [, propertiesObject ])

• proto 表示新创建对象的原型。
• propertiesObject 可选参数。表示一个对象值，可以包含若干个属性，属性名为新建对象的属性名，属性值为那个属性的属性描述符对象。

其他说明

如果proto参数的值不是null或者对象，则会抛出TypeError异常。

示例

可参考MDN: Object.create().

Object.keys

概述

返回对象可枚举的属性集合数组。

语法

Object.keys(obj)

• obj 表示用来枚举属性的对象。

其他说明

只能返回被枚举的属性关键字。ES5中还有个Object.getOwnPropertyNames方法，也是IE9+支持，包括不可枚举的属性也可以返回。这个貌似不太好做兼容处理，因此，只有这里的Object.keys().

示例

下面示例代码来自MDN，注释有翻译：

var arr = ["a", "b", "c"];
alert(Object.keys(arr)); // 弹出 "0,1,2"

// 类数组对象
var obj = { 0 : "a", 1 : "b", 2 : "c"};
alert(Object.keys(obj)); // 弹出 "0,1,2"

// 类数组对象，关键字顺序随机
var an_obj = { 100: "a", 2: "b", 7: "c"};
alert(Object.keys(an_obj)); // 弹出 "2, 7, 100"

// getFoo是个不可枚举的属性
var my_obj = Object.create({}, { getFoo : { value : function () { return this.foo } } });
my_obj.foo = 1;

alert(Object.keys(my_obj)); // 仅会弹出foo

Date.now

概述

获取当前的时间戳。

语法

Date.now()

其他说明

暂无

示例

代码

JS

var eleTestDateNow = document.querySelector("#testDateNow")
  , eleTextDateNow = document.querySelector("#textDateNow");
if (eleTestDateNow && eleTextDateNow) {
    eleTestDateNow.addEventListener("click", function() {
        eleTextDateNow.innerHTML = Date.now();	
    });
}

Function.bind

概述

改变函数的执行上下文，以及参数传递。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg 表示fun执行时候其中的this指向。
• arg1, arg2, ... 表示阿公阿婆，兄弟姐妹...参数。

其他说明

别看这里介绍少，这个方法非常实用，也非常常用。您有兴趣可以查看我之前写的“ECMAScript 5中bind方法、自定义及小拓展”一文娱乐下！

示例

暂无

String.trim

概述

去除字符串首尾空格。

语法

String.trim()

其他说明

耳熟能详，司空见惯。

示例

(" haha ").trim();  // "haha"

Array.isArray

概述

检测对象是否是数组。

语法

Array.isArray(obj);

• obj 表示试炼的对象。

其他说明

返回Boolean值。

示例

Array.isArray([]);  // true

Array.forEach

概述

遍历数组

语法

[].forEach(function(value, index, array) {
    // ...
});

• value 表示遍历的数组的值。
• index 表示索引。
• array 表示数组本身。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

Array.map

概述

数组“映射”

语法

[].map(function(value, index, array) {
    // ...
});

• value 表示遍历的数组的值。
• index 表示索引。
• array 表示数组本身。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

示例

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

Array.filter

概述

数组“过滤”

语法

[].filter(function(value, index, array) {
    // ...
});

• value 表示遍历的数组的值。
• index 表示索引。
• array 表示数组本身。

其他说明

根据function返回的是true还是false过滤原数组返回新数组。

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

示例

var data = [0, 1, 2, 3];
var arrayFilter = data.filter(function(item) {
    return item;
});
console.log(arrayFilter);  // [1, 2, 3]

Array.some

概述

是否“某些项”合乎条件。返回Boolean值。

语法

[].some(function(value, index, array) {
    // ...
});

• value 表示遍历的数组的值。
• index 表示索引。
• array 表示数组本身。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

Array.every

概述

是否“所有项”合乎条件。返回Boolean值。

语法

[].every(function(value, index, array) {
    // ...
});

• value 表示遍历的数组的值。
• index 表示索引。
• array 表示数组本身。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

Array.indexOf

概述

匹配元素在数组中的索引位置。如果没有匹配项，返回-1.

语法

array.indexOf(searchElement[, fromIndex])

• searchElement 表示要匹配的对象。
• fromIndex 表示起始的索引位置。可缺省，表示从0开始。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

示例

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)

console.log(data.indexOf(4)); // -1 (未找到)
console.log(data.indexOf("5")); // -1 (未找到，因为5 !== "5")

Array.lastIndexOf

概述

lastIndexOf方法与indexOf方法类似。只是lastIndexOf是从字符串的末尾开始查找，而不是从开头。还有一个不同就是fromIndex的默认值是array.length - 1而不是0.

语法

array.lastIndexOf(searchElement[, fromIndex])

• searchElement 表示要匹配的对象。
• fromIndex 表示起始的索引位置。可缺省，表示从array.length - 1开始。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

示例

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (从后往前，索引值小于3的开始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

Array.reduce

概述

中文意思为“减少”、“约简”。不过，从功能来看，我个人是无法与“减少”这种含义联系起来的，反而更接近于“迭代”、“递归(recursion)”。

语法

array.reduce(callback[, initialValue])

• callback支持下面4个参数：
  • previous 表示之前值。
  • current 表示当前值。
  • index 表示索引。
  • array 表示数组本身。
• initialValue 参数可选。表示初始值。若指定，则当作最初使用的previous值；如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位，相比有initialValue值少一次迭代。

其他说明

如果您尚未明白该API的使用，可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。

Array.reduceRight

概述

reduceRight跟reduce相比，用法类似。实现上差异在于reduceRight是从数组的末尾开始实现。

语法

array.reduceRight(callback[, initialValue])

• callback支持下面4个参数：
  • previous 表示之前值。
  • current 表示当前值。
  • index 表示索引。
  • array 表示数组本身。
• initialValue 参数可选。表示初始值。若指定，则当作最初使用的previous值；如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位，相比有initialValue值少一次迭代。

其他说明

具体使用和一些说明可参考我的之前的文章“ES5中新增的Array方法详细说明”。内有诸多源代码示例，还有demo页面。