JS Arrays

 

遍历数组：

<script>

window. {

var mammals = new Array("cat","dog","human","whale","seal");
var animalString = "";
for (var i = 0; i < mammals. length; i++) {
  animalString += mammals[i] + " ";
}
alert(animalString);
}

</script>

数组转换成 String

<script>

var fruitArray = ['apple','peach','lemon','lime'];
var resultString =   fruitArray.join('-'); // apple-peach-lemon-lime

alert(resultString);
</script>

排序

var fruitArray = ['strawberry','apple','orange','banana','lime'];
alert(fruitArray.sort()); // returns apple,banana,lime,orange,strawberry

存取元素

先进先出 FIFO

push() shift()

// create new array
var queue = new Array();

// push on three entries
queue.push('first');  
queue.push('second');
queue.push('third');  

// shift two entries
alert(queue.shift());  // returns first
alert(queue.shift());  // returns second
alert(queue);  // returns third

后进先出 LIFO

// create new array
var queue = new Array();

// push on three entries
queue.push('first');  
queue.push('second');
queue.push('third');

// pop two entries
alert(queue.pop());  // returns third
alert(queue.pop());  // returns second
alert(queue); // returns first

slice() 函数

可以用slice 函数来创建子集。

如果拷贝的元素师字面值，那么修改了原数组后对新数组没有影响。

但如果拷贝的是引用，则新数组也会跟随变化。

var origArray = new Array(4);
origArray[0] = new Array("one","two");
origArray[1] = new Array("three","four");
origArray[2] = new Array("five","six");
origArray[3] = new Array("seven","eight");

var newArray = origArray.slice(1,3);
alert(newArray); // prints out three,four,five,six

// modify original
origArray[1][0] = "octopus";

// print out new
alert(newArray); // prints out octopus,four,five,six

// modify new
newArray[1][1] = "kitten";

// print out old
alert(origArray); // prints out one,two,octopus,four,five,kitten,seven,eight

搜索 indexOf() lastIndexOf()

注意IE8 不支持，所以要先判断

<script>
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}

window. {
var animals = new Array("dog","cat","seal","elephant","walrus","lion");
alert(animals.indexOf("elephant")); // prints 3

}

</script>

删除与替换 splice

<script>

var animals = new Array("dog","cat","seal","walrus","lion", "cat");

// remove the element from array
animals.splice(animals.indexOf("walrus"),1); // dog,cat,seal,lion,cat

// splice in new element
animals.splice(animals.lastIndexOf("cat"),1,"monkey"); // dog,cat,seal,lion,monkey

alert(animals);
</script>

绑定函数到元素 forEach

<script>

// function to convert decimal to hexadecimal
function convertToHex(element,index,array) {
  return element.toString(16);
}

var decArray = new Array(23, 255, 122, 5, 16, 99);

var hexArray = decArray.map(convertToHex);
alert(hexArray); // 17,ff,a,5,10,63

</script>

注意啦，IE又不支持map 方法，需要加上

if (!Array.prototype.map)
{
Array.prototype.map = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}
return res;
};
}

过滤数组 filter

<script>

function removeChars(element,index,array) {
  return (element !== "**");
}

var charSet = new Array("**","bb","cd","**","cc","**","dd","**");

var newArray = charSet.filter(removeChars);
alert(newArray);

</script>

同样由于IE不支持 filter, 所以之要加上：

if (!Array.prototype.filter)
{
Array.prototype.filter = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
{
var val = this[i]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}

数据校验

<script>

var elemSet = new Array("**",123,"aaa","abc","-",46,"AAA");

// testing function
function textValue (element,index,array) {
  var textExp = /^[a-zA-Z]+$/;
  return textExp.test(element);
}

// run test
alert(elemSet.every(textValue)); // false

var elemSet = new Array("**",123,"aaa","abc","-",46,"AAA");

// run test
alert(elemSet.some(textValue)); // true

</script>

为例支持IE

if (!Array.prototype.some)
{
Array.prototype.some = function(fun /*, thisp*/)
{
var i = 0,
len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (; i < len; i++)
{
if (i in this &&
fun.call(thisp, this[i], i, this))
return true;
}
return false;
};
}


if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this &&
!fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}

关联数组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Associative Array</title>
<script type="text/javascript">
//<![CDATA[

// get the form element names and values
function getVals() {
 var elems = document.getElementById("picker").elements;
 var elemArray = new Object();
 for (var i = 0; i < elems.length; i++) {
   if (elems[i].type == "text")
      elemArray[elems[i].id] = elems[i].value;
 }
 checkVals(elemArray);
 return false;
}

// check values
function checkVals(elemArray) {

 var str = "";
 for (var key in elemArray) {
   str+=key + "," + elemArray[key] + " ";
 }

document.getElementById("result").innerHTML = str;
}

//--><!]]>
</script>
</head>
<body>
<form id="picker" onsubmit="return getVals()">
<label>Value 1:</label> <input type="text" id="first" /><br />
<label>Value 2:</label> <input type="text" id="second" /><br />
<label>Value 3:</label> <input type="text" id="third"  /><br />
<label>Value 4:</label> <input type="text" id="four"  /><br />
<input type="submit" value="Validate" />
</form>
<div id="result"></div>
</body>
</html>