摘要:上面代码通过方法的第二个参数,将回调函数内部的对象,指向数组。第三次执行,为上一轮的返回值,为第四个成员。第四次执行,为上一轮返回值,为第五个成员。
Array 对象
构造函数
静态方法
Array.isArray()
实例方法
valueOf(),toString()
push(),pop()
shift(),unshift()
join(分隔符)返回字符串
concat()新的
reverse()
slice(头尾)新的
splice(头,长,增)增(头,0,增)拆成两个(头)返回删除的
sort()
map()新的 this
forEach()不返回 this
filter()新的 返回ture的
some(),every()新的 返turee false
reduce(),reduceRight()新的
indexOf(),lastIndexOf()新的
链式使用
1.构造函数
Array构造函数有一个很大的缺陷,就是不同的参数,会导致它的行为不一致。
// 无参数时,返回一个空数组
new Array() // []
// 单个正整数参数,表示返回的新数组的长度
new Array(1) // [ empty ]
new Array(2) // [ empty x 2 ]
// 非正整数的数值作为参数,会报错
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length
// 单个非数值(比如字符串、布尔值、对象等)作为参数,
// 则该参数是返回的新数组的成员
new Array("abc") // ["abc"]
new Array([1]) // [Array[1]]
// 多参数时,所有参数都是返回的新数组的成员
new Array(1, 2) // [1, 2]
new Array("a", "b", "c") // ["a", "b", "c"]
// bad
var arr = new Array(1, 2);
// good
var arr = [1, 2];
var a = new Array(3);
var b = [undefined, undefined, undefined];
a.length // 3
b.length // 3
a[0] // undefined
b[0] // undefined
0 in a // false
0 in b // true
2.静态方法
Array.isArray()
var arr = [1, 2, 3];
typeof arr // "object"
Array.isArray(arr) // true
3.实例方法
3.1valueOf()原数组,toString()字符串
3.2push(),pop() 改
3.3shift(),unshift()改
shift()方法可以遍历并清空一个数组。
var list = [1, 2, 3, 4];
var item;
while (item = list.shift()) {
console.log(item);
}
list // []
上面代码通过list.shift()方法每次取出一个元素,从而遍历数组。它的前提是数组元素不能是0或任何布尔值等于false的元素,因此这样的遍历不是很可靠
3.4join(分隔符)字符串
如果数组成员是undefined或null或空位,会被转成空字符串。
[undefined, null].join("#")
// "#"
["a",, "b"].join("-")
// "a--b"
通过call方法,这个方法也可以用于字符串或类似数组的对象。
Array.prototype.join.call("hello", "-")
// "h-e-l-l-o"
var obj = { 0: "a", 1: "b", length: 2 };
Array.prototype.join.call(obj, "-")
// "a-b"
3.5concat()新
concat方法返回当前数组的一个浅拷贝。所谓“浅拷贝”,指的是新数组拷贝的是对象的引用。
var obj = { a: 1 };
var oldArray = [obj];
var newArray = oldArray.concat();
obj.a = 2;
newArray[0].a // 2
上面代码中,原数组包含一个对象,concat方法生成的新数组包含这个对象的引用。所以,改变原对象以后,新数组跟着改变
3.6reverse()改
3.7slice(头,尾)新
slice方法的一个重要应用,是将类似数组的对象转为真正的数组。
Array.prototype.slice.call({ 0: "a", 1: "b", length: 2 })
// ["a", "b"]
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);
3.8splice(头,长,增) 只插入(头,0,增)
起始位置如果是负数,就表示从倒数位置开始删除。
var a = ["a", "b", "c", "d", "e", "f"];
a.splice(-4, 2) // ["c", "d"]
上面代码表示,从倒数第四个位置c开始删除两个成员。
如果只是单纯地插入元素,splice方法的第二个参数可以设为0。
var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]
如果只提供第一个参数,等同于将原数组在指定位置拆分成两个数组。
var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]
3.9sort()改
数值会被先转成字符串,再按照字典顺序进行比较,所以101排在11的前面。
如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数。
[10111, 1101, 111].sort(function (a, b) {
return a - b;
})
// [111, 1101, 10111]
上面代码中,sort的参数函数本身接受两个参数,表示进行比较的两个数组成员。如果该函数的返回值大于0,表示第一个成员排在第二个成员后面;其他情况下,都是第一个元素排在第二个元素前面。
[
{ name: "张三", age: 30 },
{ name: "李四", age: 24 },
{ name: "王五", age: 28 }
].sort(function (o1, o2) {
return o1.age - o2.age;
})
// [
// { name: "李四", age: 24 },
// { name: "王五", age: 28 },
// { name: "张三", age: 30 }
// ]
3.10map()新
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
上面代码中,map方法的回调函数有三个参数,elem为当前成员的值,index为当前成员的位置,arr为原数组([1, 2, 3])。
map方法还可以接受第二个参数,用来绑定回调函数内部的this变量(详见《this 变量》一章)。
var arr = ["a", "b", "c"];
[1, 2].map(function (e) {
return this[e];
}, arr)
// ["b", "c"]
上面代码通过map方法的第二个参数,将回调函数内部的this对象,指向arr数组。
如果数组有空位,map方法的回调函数在这个位置不会执行,会跳过数组的空位。
var f = function (n) { return "a" };
[1, undefined, 2].map(f) // ["a", "a", "a"]
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"]
上面代码中,map方法不会跳过undefined和null,但是会跳过空位。
3.11forEach()
forEach方法不返回值,只用来操作数据。这就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法
function log(element, index, array) {
console.log("[" + index + "] = " + element);
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9
forEach方法也可以接受第二个参数,绑定参数函数的this变量。
var out = [];
[1, 2, 3].forEach(function(elem) {
this.push(elem * elem);
}, out);
out // [1, 4, 9]
上面代码中,空数组out是forEach方法的第二个参数,结果,回调函数内部的this关键字就指向out。
forEach方法也会跳过数组的空位。
var log = function (n) {
console.log(n + 1);
};
[1, undefined, 2].forEach(log)
// 2
// NaN
// 3
[1, null, 2].forEach(log)
// 2
// 1
// 3
[1, , 2].forEach(log)
// 2
// 3
3.12filter()
[1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
// [4, 5]
上面代码将大于3的数组成员,作为一个新数组返回。
var arr = [0, 1, "a", false];
arr.filter(Boolean)
// [1, "a"]
上面代码中,filter方法返回数组arr里面所有布尔值为true的成员
[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
return index % 2 === 0;
});
// [1, 3, 5]
filter方法还可以接受第二个参数,用来绑定参数函数内部的this变量。
var obj = { MAX: 3 };
var myFilter = function (item) {
if (item > this.MAX) return true;
};
var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj) // [8, 4, 9
3.13some(),every()
判断数组成员是否符合某种条件
some方法是只要一个成员的返回值是true,则整个some方法的返回值就是true,否则返回false
var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
return elem >= 3;
});
// true
上面代码中,如果数组arr有一个成员大于等于3,some方法就返回true。
every方法是所有成员的返回值都是true,整个every方法才返回true,否则返回false。
var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
return elem >= 3;
});
// false
上面代码中,数组arr并非所有成员大于等于3,所以返回false。
注意,对于空数组,some方法返回false,every方法返回true,回调函数都不会执行。
function isEven(x) { return x % 2 === 0 }
[].some(isEven) // false
[].every(isEven) // true
some和every方法还可以接受第二个参数,用来绑定参数函数内部的this变量。
3.14reduce(),reduceRight()
reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。它们的差别是,reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。
[1, 2, 3, 4, 5].reduce(function (a, b) {
console.log(a, b);
return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15
上面代码中,reduce方法求出数组所有成员的和。第一次执行,a是数组的第一个成员1,b是数组的第二个成员2。第二次执行,a为上一轮的返回值3,b为第三个成员3。第三次执行,a为上一轮的返回值6,b为第四个成员4。第四次执行,a为上一轮返回值10,b为第五个成员5。至此所有成员遍历完成,整个方法的返回值就是最后一轮的返回值15。
reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。
累积变量,默认为数组的第一个成员
当前变量,默认为数组的第二个成员
当前位置(从0开始)
原数组
这四个参数之中,只有前两个是必须的,后两个则
如果要对累积变量指定初值,可以把它放在reduce方法和reduceRight方法的第二个参数。
[1, 2, 3, 4, 5].reduce(function (a, b) {
return a + b;
}, 10);
// 25
上面代码指定参数a的初值为10,所以数组从10开始累加,最终结果为25。注意,这时b是从数组的第一个成员开始遍历
上面的第二个参数相当于设定了默认值,处理空数组时尤其有用。
function add(prev, cur) {
return prev + cur;
}
[].reduce(add)
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1)
// 1
上面代码中,由于空数组取不到初始值,reduce方法会报错。这时,加上第二个参数,就能保证总是会返回一个值
下面是一个reduceRight方法的例子。
function subtract(prev, cur) {
return prev - cur;
}
[3, 2, 1].reduce(subtract) // 0
[3, 2, 1].reduceRight(subtract) // -4
上面代码中,reduce方法相当于3减去2再减去1,reduceRight方法相当于1减去2再减去3。
由于这两个方法会遍历数组,所以实际上还可以用来做一些遍历相关的操作。比如,找出字符长度最长的数组成员。
function findLongest(entries) {
return entries.reduce(function (longest, entry) {
return entry.length > longest.length ? entry : longest;
}, "");
}
findLongest(["aaa", "bb", "c"]) // "aaa"
上面代码中,reduce的参数函数会将字符长度较长的那个数组成员,作为累积值。这导致遍历所有成员之后,累积值就是字符长度最长的那个成员。
3.15indexOf(),lastIndexOf()
3.16链式使用
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105939.html
摘要:它主要用在以类数组对象和可迭代对象为蓝本,创建对应的数组。类数组对象我们最熟悉的类数组对象,应该就是的对象了。 在ES6之前,创建数组的方式有2种:一: 通过数组字面量 let array = [1,2,3]; console.log(array);//[1,2,3] 二: 通过new Array()创建数组 let array = new Array(1, 2, 3); conso...
摘要:对象方法数组创建与修改创建创建一个新数组实例将类数组类似数组的对象和可遍历的对象转为真正的数组。返回一个新的对象,该对象包含数组每个索引的值。遍历键遍历值遍历键值对参考文档标准库对象 Array 对象方法 数组创建与修改 1. 创建 var arr = []; var arr = new Array() Array.of(el1[,el2[...]]) //创建一个新数组实例 Ar...
摘要:数组学习记录是的实例属性。对数组元素进行排序,并返回当前数组。返回一个由所有数组元素组合而成的字符串。为数组中的每个元素执行一次回调函数。返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。 JavaScript数组学习记录 Array.length Array.length 是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是...
摘要:关于我的博客掘金专栏路易斯专栏原文链接深度长文数组全解密全文共字,系统讲解了数组的各种特性和。构造器构造器用于创建一个新的数组。中声明的数组,它的构造函数是中的对象。 本文首发于CSDN网站,下面的版本又经过进一步的修订。 关于 我的博客:louis blog 掘金专栏:路易斯专栏 原文链接:【深度长文】JavaScript数组全解密 全文共13k+字,系统讲解了JavaScrip...
摘要:简单总结一下的对象属性数组指定创建一个数组的函数。方法数组返回一个迭代器,它返回数组的键值对。方法数组返回满足回调函数中指定的测试条件的第一个数组元素的索引值。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。 简单总结一下JS的Array对象 constructor 属性(数组) 指定创建一个数组的函数。该属性可用于判断某个对象是否为数组与arr ins...
作者:陈大鱼头 github: KRISACHAN 背景 在最近的项目中,有这么一个功能点,就是要获取在WEB IDE里用户所写的注释中的一段特殊规则,然后解析成一段JS config 对象 例如: //% width=100px height=200px //% pos.top=50px pos.left=50px //% writable=true //% q.b.d.w.r.f=30...
阅读 3688·2021-09-24 10:24
阅读 1341·2021-09-22 16:01
阅读 2668·2021-09-06 15:02
阅读 982·2019-08-30 13:01
阅读 977·2019-08-30 10:52
阅读 597·2019-08-29 16:36
阅读 2199·2019-08-29 12:51
阅读 2302·2019-08-28 18:29