js 你不知道的 Array
一、在类数组对象上复用通用的数组方法
类数组有:arguments, NodeList, 字符串
什么是类数组? 两个条件
具有 length 属性
length 属性大于该对象的最大索引
比如:
var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3}; var result = Array.prototype.map.call(arrayLike, function(s) { return s.toUpperCase(); });//["A", "B", "C"]
几乎所有的数组方法都是通用的(forEach,slice,map ...) 除了 concat。
因为 concat 在连接时,会检查其参数的 [[Class]] 属性。
一些方法,比如 join,仅仅读取他们被调用的对象的长度和数值属性。 另外,像 reverse 一样,要求对象的数值属性和长度属性是可变的;因此,这些方法不能在像 String 这样的对象上被调用,String不允许它的长度属性和synthesized的数值属性被设置。
function namesColumn() { return ['Names'].concat(arguments); } namesColumn("alice", "arale");//["Names", {0: "alice", 1: "arale"}] //解决办法:应先使用 slice 将 arguments 转为数组 function namesColumn() { return ['Names'].concat([].slice.call(arguments)); }
二、数组优先使用 for 循环,而不是 for in 循环。
for in 更多的是用于 遍历对象,但是 它也会去检查 对象的原型。
如果浏览器支持 for of (ES6)的话,最好是使用它,它不会去遍历原型。
三、迭代优于循环
一个原因是,迭代可以消除没必要的 终止条件
和 任何数组索引
比如:
for (var i = 0; n = players.length; i < n; i++) { players[i].score++; } //使用迭代 players.forEach(function(p){ p.score++; });
例1: 对数组每一个元素操作后生成一个新的数组
//获得所有输入框去除多余空格后的值 var trimmed = input.map(function(s) { return s.trim() })
例2: 获取价格在特定区间的列表
listings.filter(function(listing) { return listing.price >= min && listing.price <= max })
当然这都是 ES5 的方法,我们也可以自己写一个。
function takeWhile(a, pred) { var result = [] for (var i = 0; n = a.length; i < n; i++) { if (!pred(a[i], i)) { break } result[i] = a[i] } return result } var prefix = takeWhile([1, 2, 4, 8, 16, 32], function(n) { return n < 10 }) // [1, 2, 4, 8]
把它加在 Array 上
Array.prototype.takeWhile = function(pred) { var result = [] for (var i = 0; n = this.length; i < n; i++) { if (!pred(this[i], i)) { break } result[i] = this[i] } return result } [1, 2, 4, 8, 16, 32].takeWhile(function(n) { return n < 10 }) // [1, 2, 4, 8]
循环仅一点优于迭代: 控制流操作 如 break 和 continue
ES5 中 只有 some 和 every 可以提前终止循环, 但设计他们的本意不是用来提前终止循环。
// some 一旦回调产生了一个真值,则立即返回,不会执行其余的元素[1, 10, 100].some(function(x) { return x > 5 }) //true[1, 10, 100].some(function(x) { return x < 0 }) //false// every 相反, 一旦产生假值,则立即返回,不会执行其余元素[1, 2, 3, 4, 5].every(function(x) { return x > 0 }) //true[1, 2, 3, 4, 5].every(function(x) { return x < 3 }) //false
这种行为可以用来实现 forEach 提前终止循环的变种时派上用场
function takeWhile(a, pred) { var result = []; a.every(function(x, i) { if (!pred(x)) { return false //break } result[i] = x; return true; //continue }) return result }
四、数组方法分类
1. Mutator 方法
这些方法可以改变数组自身
pop : 移除数组的最后一个元素,返回值是被删除的元素。
push : 在数组的末尾添加一个或者多个元素,返回值是新的数组的长度。
reverse : 颠倒数组中元素的顺序,原先第一个元素现在变成最后一个,同样原先的最后一个元素变成了现在的第一个,也就是数组的索引发生了变化。
shift : 删除数组的第一个元素,返回值是删除的元素
sort : 对数组中的元素进行排序
splice : 添加或删除数组中的一个或多个元素。
unshift : (将废弃)添加一个或者多个元素在数组的开头,返回值是新的数组的长度。
2. Accessor 方法
这些方法不改变数组自身
concat : 返回一个包含此数组和其他数组和/或值的结合的新数组
indexOf : 返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1
join : 将所有的数组元素连接成一个字符串
lastIndexOf : 返回在数组中搜索到的与给定参数相等的元素的最后(最大)索引
slice : 返回数组中的一段。
toString : 返回代表该数组及其元素的字符,重写Object.toString 过程.
valueOf : 重写Object.valueOf过程。
3. 循环(迭代) 方法
filter : 对数组中的每一个元素调用参数中指定的过滤函数,并将对于过滤函数返回值为true的那些数组元素集合为新的数组返回。
forEach : 对数组的每一个元素依次调用参数中指定的函数。
every : 如果数组中每一个元素都满足参数中提供的测试函数,则返回真
map : 创建一个新数组,新数组中含有,分别对于原来数组的每一个元素调用一个给定函数的结果
some : 如果数组中至少有一个元素满足参数函数的测试,则返回true。