一. 创建方式
1. 构造函数
var colors = new Array() var colors = new Array(3) var colors = new Array("red", "blue", "yellow")也可以将new关键字去掉
2. 字面量方式
var colors = ['red', 'yellow', 'blue']二. 属性
1. length(可写)
var colors = ['red', 'yellow', 'blue']
colors.length = 2
console.log('now' + colors) // ['red', 'yellow']
colors.length = 4
console.log('now' + colors) // ['red', 'yellow', 'undefined']
1. join: 把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的
var colors1 = colors.join('!')
console.log(colors1) // red!yellow!blue
var colors = ['red', 'yellow', 'blue']
console.log(colors.push('white')) // 43. pop: 删除并返回数组的最后一个元素
colors.pop() // ['red', 'yellow','blue']4. unshift: 向数组的开头添加一个或更多元素,并返回新的长度。
colors.unshift('white')
console.log(colors) // white red yellow blue5. shift: 删除并返回数组的第一个元素
colors.shift() // red yellow blue6. revease: 颠倒数组中元素的顺序。
colors.reverse()
console.log(colors) // blue yellow red7. sort: 对数组的元素进行排序(默认按照字符编码顺序)
colors.sort()
console.log(colors) // ["blue", "red", "yellow"]
var colors = [1, 15, 2, 159, 258 ,199, 5]
colors.sort()
console.log(colors) // [1, 15, 159, 199, 2, 258, 5]数组元素自动转成字符串
8. contact: 连接两个或多个数组(不改变原数组)
var city = ['bj','sh','gz','sz']
var newCity = city.concat('ln',[1,2])
console.log(city) // ["bj", "sh", "gz", "sz"]
console.log(newCity) // ["bj", "sh", "gz", "sz", "ln", 1, 2]9. slice: 从已有的数组中返回选定的元素(不改变原数组)
var city = ['bj','sh','gz','sz']
var newCity = city.slice(1,3)
var newCity1 = city.slice(1)
console.log(city) // ["bj", "sh", "gz", "sz"]
console.log(newCity) // ["sh", "gz"]
console.log(newCity1) // ["sh", "gz", "sz"]10. splice(index,howmany,item1,...itemX): 向/从数组添加/删除项目,返回被删除的项目。
var city = ['bj','sh','gz','sz']
city.splice(1,0,'ln')
console.log(city) //增 ["bj", "ln", "sh", "gz", "sz"]
city.splice(2,2)
console.log(city) //删 ["bj", "ln", "sz"]
city.splice(0,1,'jl')
console.log(city) //替 ["jl", "ln", "sz"]11. indexOf(searchEle,[,fromIndex=0]) 返回在数组中可以找到一个给定元素的第一个索 引,如果不存在,则返回-1
var city = ['bj','ln','sh','gz','ln','sz']
console.log(city.indexOf('ln')) // 1
console.log(city.indexOf('ln',2)) // 4
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
indices.push(idx);
idx = array.indexOf(element, idx + 1);
}
console.log(indices); //查找一共多少个 [0, 2, 4]
// 判断有没有这个值,没有添加
function updateVegetablesCollection (veggies, veggie) {
if (veggies.indexOf(veggie) === -1) {
veggies.push(veggie);
console.log('New is : ' + veggies);
} else if (veggies.indexOf(veggie) > -1) {
console.log(veggie + ' already exists');
}
}
var veggies = ['bj', 'sh', 'gz', 'sz'];
updateVegetablesCollection(veggies, 'sp'); // New is : bj,sh,gz,sz,sp
updateVegetablesCollection(veggies, 'sp'); // sp already exists
fromIndex:从何处开始选取,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
12. lastIndexOf(seearchEle,[,fromIndex=arr.length-1])
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);// 3
index = array.lastIndexOf(7);// -1
index = array.lastIndexOf(2, 3);// 3
index = array.lastIndexOf(2, 2);// 0
index = array.lastIndexOf(2, -2);// 0
index = array.lastIndexOf(2, -1);// 3indexOf()和lastIndexOf():支持的浏览器有IE9+,FireFox2+,Safari3+,Opera9.5+, Chrome
13. 迭代方法
every,some, foreach, filter, map,其中foreach没有返回值,支持的浏览器IE9+, FireFox2+,Safari3+,Opera9.5+,Chrome
var number = [1,2,3,4,5,4,3,2,1]
var everyR = number.every(function(item,index,array){
return (item > 2)
})
console.log(everyR) // false
var someR = number.some(function(item, index, array){
return (item > 2)
})
console.log(someR) // true
var filterR = number.filter(function(item,index,array){
return (item > 2)
})
console.log(filterR) // [3, 4, 5, 4, 3]
var mapR = number.map(function(item, index, array){
return item * 2
})
console.log(mapR) // [2, 4, 6, 8, 10, 8, 6, 4, 2]
var foreachR = []
number.forEach(function(item,index,array){
// 没有返回值
foreachR.push(item * 2)
})
console.log(foreachR) // [2, 4, 6, 8, 10, 8, 6, 4, 2]迭代器实现
Object.defineProperty(myObject,Symbol.iterator,{
enumerable: false,
writable: false,
configurable: true,
value: function(){
var o = this
var idx = 0
var keys = Object.keys(o)
console.log('keys' + keys)
return {
next:function(){
return {
value:o[keys[idx++]],
next: idx > keys.length
}
}
}
}
})
var it = myObject[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())
14. 缩小方法
reduce()、reduceRight(),迭代数组的所有项,并构建一个返回值,支持的浏览器 IE9+,FireFox3+,Safari4+,Opera10.5和Chrome
14.1 求和
var arr = [1,2,3,4]
var arr1 = arr.reduce(function(pre,cur,curIndex,array){
console.log(pre) // 10 11 13 16
return pre + cur
},10)
console.log('result' + arr1) // 2014.2 找最大值
var arr1 = arr.reduce(function(pre,cur,curIndex,array){
return pre > cur ? pre : cur
})
console.log(arr1) // 414.3 [{name:'bj'},{name:'sh'},{name:'ln'}]输出bj,sh&ln
var arr = [{name:'bj'},{name:'sh'},{name:'ln'}]
function carryBrick(arr){
return arr.reduce(function(pre,cur,curIndex,array){
console.log('index' + curIndex + 'pre' + pre.name + 'cur' + cur.name)
if(curIndex === 0){
return cur.name
}else if(curIndex === array.length - 1){
return pre + '&' + cur.name
} else {
return pre + ',' + cur.name
}
},'') // 这里要注意如果不传值,遍历index从1开始
} console.log(carryBrick(arr))14.4 reduceRight
var arr = [{name:'bj'},{name:'sh'},{name:'ln'}]
function carryBrick(arr){
return arr.reduceRight(function(pre,cur,curIndex,array){
console.log('curIndex' + curIndex) // 2 1 0
if(curIndex === 0){
return cur.name
}else if(curIndex === array.length - 1){
return pre + '&' + cur.name
} else {
return pre + ',' + cur.name
}
},'')
}
console.log(carryBrick(arr))14.5 for循环和reduce的耗时比较
var arr = [1,2,3,4,5,6]; // reduce
console.time("ruduce");
Array.prototype.ruduceSum = function (){
for (var i = 0; i < 10000; i++) {
return this.reduce (function (preValue, curValue) {
return preValue + curValue;
});
}
}
arr.ruduceSum();
console.log('最终的值:' + arr.ruduceSum()); // 21
console.timeEnd("ruduce"); // 4.54ms var arr = [1,2,3,4,5,6]; // for循环
console.time("forLoop");
Array.prototype.forLoop = function (){
for (var i = 0; i < 10000; i++) {
var sumResult = 0;
for (var j = 0; j < this.length; j++) {
sumResult += parseInt(this[j]);
}
}
return sumResult;
}
arr.forLoop();
console.log('最终的值:' + arr.forLoop()); // 21
console.timeEnd("forLoop"); // 22.69ms四. 实例
1. 字符串反转abcde --> edcba()
var str = 'abcde'
var str1 = str.split("")
str1.reverse()
var restr = str1.join("")
console.log(restr)参考
www.w3school.com.cn/jsref/jsref…
developer.mozilla.org/zh-CN/docs/…