小程序网站模板,住建个人证书查询网,昆山企业网站制作公司,百度收录网址提交作者 | 阮一峰1、构造函数Array是 JavaScript 的原生对象#xff0c;同时也是一个构造函数#xff0c;可以用它生成新的数组。var arr new Array(2);arr.length // 2arr // [ empty x 2 ]上面代码中#xff0c;Array构造函数的参数2#xff0c;表示生成一个两个成员的数组… 作者 | 阮一峰1、构造函数Array是 JavaScript 的原生对象同时也是一个构造函数可以用它生成新的数组。var arr new Array(2);arr.length // 2arr // [ empty x 2 ]上面代码中Array构造函数的参数2表示生成一个两个成员的数组每个位置都是空值。如果没有使用new运行结果也是一样的。var arr new Array(2);// 等同于var arr Array(2);Array构造函数有一个很大的缺陷就是不同的参数会导致它的行为不一致。// 无参数时返回一个空数组new Array() // []// 单个正整数参数表示返回的新数组的长度new Array(1) // [ empty ]new Array(2) // [ empty x 2 ]// 非正整数的数值作为参数会报错new Array(3.2) // RangeError: Invalid array lengthnew 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]可以看到Array作为构造函数行为很不一致。因此不建议使用它生成新数组直接使用数组字面量是更好的做法。// badvar arr new Array(1, 2);// goodvar arr [1, 2];注意如果参数是一个正整数返回数组的成员都是空位。虽然读取的时候返回undefined但实际上该位置没有任何值。虽然可以取到length属性但是取不到键名。var a new Array(3);var b [undefined, undefined, undefined];a.length // 3b.length // 3a[0] // undefinedb[0] // undefined0 in a // false0 in b // true上面代码中a是一个长度为3的空数组b是一个三个成员都是undefined的数组。读取键值的时候a和b都返回undefined但是a的键位都是空的b的键位是有值的。2、静态方法2.1、Array.isArray()Array.isArray方法返回一个布尔值表示参数是否为数组。它可以弥补typeof运算符的不足。var arr [1, 2, 3];typeof arr // objectArray.isArray(arr) // true上面代码中typeof运算符只能显示数组的类型是Object而Array.isArray方法可以识别数组。3、实例方法3.1、valueOf()toString()valueOf方法是一个所有对象都拥有的方法表示对该对象求值。不同对象的valueOf方法不尽一致数组的valueOf方法返回数组本身。var arr [1, 2, 3];arr.valueOf() // [1, 2, 3]toString方法也是对象的通用方法数组的toString方法返回数组的字符串形式。var arr [1, 2, 3];arr.toString() // 1,2,3var arr [1, 2, 3, [4, 5, 6]];arr.toString() // 1,2,3,4,5,63.2、push()pop()push方法用于在数组的末端添加一个或多个元素并返回添加新元素后的数组长度。注意该方法会改变原数组。var arr [];arr.push(1) // 1arr.push(a) // 2arr.push(true, {}) // 4arr // [1, a, true, {}]上面代码使用push方法往数组中添加了四个成员。pop方法用于删除数组的最后一个元素并返回该元素。注意该方法会改变原数组。var arr [a, b, c];arr.pop() // carr // [a, b]对空数组使用pop方法不会报错而是返回undefined。[].pop() // undefinedpush和pop结合使用就构成了“后进先出”的栈结构(stack)。var arr [];arr.push(1, 2);arr.push(3);arr.pop();arr // [1, 2]上面代码中3是最后进入数组的但是最早离开数组。3.3、shift()unshift()shift()方法用于删除数组的第一个元素并返回该元素。注意该方法会改变原数组。var a [a, b, c];a.shift() // aa // [b, c]上面代码中使用shift()方法以后原数组就变了。shift()方法可以遍历并清空一个数组。var list [1, 2, 3, 4];var item;while (item list.shift()) {console.log(item);}list // []上面代码通过list.shift()方法每次取出一个元素从而遍历数组。它的前提是数组元素不能是0或任何布尔值等于false的元素因此这样的遍历不是很可靠。push()和shift()结合使用就构成了“先进先出”的队列结构(queue)。unshift()方法用于在数组的第一个位置添加元素并返回添加新元素后的数组长度。注意该方法会改变原数组。var a [a, b, c];a.unshift(x); // 4a // [x, a, b, c]unshift()方法可以接受多个参数这些参数都会添加到目标数组头部。var arr [ c, d ];arr.unshift(a, b) // 4arr // [ a, b, c, d ]3.4、join()join()方法以指定参数作为分隔符将所有数组成员连接为一个字符串返回。如果不提供参数默认用逗号分隔。var a [1, 2, 3, 4];a.join( ) // 1 2 3 4a.join( | ) // 1 | 2 | 3 | 4a.join() // 1,2,3,4如果数组成员是undefined或null或空位会被转成空字符串。[undefined, null].join(#)// #[a,, b].join(-)// a--b通过call方法这个方法也可以用于字符串或类似数组的对象。Array.prototype.join.call(hello, -)// h-e-l-l-ovar obj { 0: a, 1: b, length: 2 };Array.prototype.join.call(obj, -)// a-b3.5、concat()concat方法用于多个数组的合并。它将新数组的成员添加到原数组成员的后部然后返回一个新数组原数组不变。[hello].concat([world])// [hello, world][hello].concat([world], [!])// [hello, world, !][].concat({a: 1}, {b: 2})// [{ a: 1 }, { b: 2 }][2].concat({a: 1})// [2, {a: 1}]除了数组作为参数concat也接受其他类型的值作为参数添加到目标数组尾部。[1, 2, 3].concat(4, 5, 6)// [1, 2, 3, 4, 5, 6]如果数组成员包括对象concat方法返回当前数组的一个浅拷贝。所谓“浅拷贝”指的是新数组拷贝的是对象的引用。var obj { a: 1 };var oldArray [obj];var newArray oldArray.concat();obj.a 2;newArray[0].a // 2上面代码中原数组包含一个对象concat方法生成的新数组包含这个对象的引用。所以改变原对象以后新数组跟着改变。3.6、reverse()reverse方法用于颠倒排列数组元素返回改变后的数组。注意该方法将改变原数组。var a [a, b, c];a.reverse() // [c, b, a]a // [c, b, a]3.7、slice()slice方法用于提取目标数组的一部分返回一个新数组原数组不变。arr.slice(start, end);它的第一个参数为起始位置(从0开始)第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数则一直返回到原数组的最后一个成员。var a [a, b, c];a.slice(0) // [a, b, c]a.slice(1) // [b, c]a.slice(1, 2) // [b]a.slice(2, 6) // [c]a.slice() // [a, b, c]上面代码中最后一个例子slice没有参数实际上等于返回一个原数组的拷贝。如果slice方法的参数是负数则表示倒数计算的位置。var a [a, b, c];a.slice(-2) // [b, c]a.slice(-2, -1) // [b]上面代码中-2表示倒数计算的第二个位置-1表示倒数计算的第一个位置。如果第一个参数大于等于数组长度或者第二个参数小于第一个参数则返回空数组。var a [a, b, c];a.slice(4) // []a.slice(2, 1) // []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);上面代码的参数都不是数组但是通过call方法在它们上面调用slice方法就可以把它们转为真正的数组。3.8、splice()splice方法用于删除原数组的一部分成员并可以在删除的位置添加新的数组成员返回值是被删除的元素。注意该方法会改变原数组。arr.splice(start, count, addElement1, addElement2, ...);splice的第一个参数是删除的起始位置(从0开始)第二个参数是被删除的元素个数。如果后面还有更多的参数则表示这些就是要被插入数组的新元素。var a [a, b, c, d, e, f];a.splice(4, 2) // [e, f]a // [a, b, c, d]上面代码从原数组4号位置删除了两个数组成员。var a [a, b, c, d, e, f];a.splice(4, 2, 1, 2) // [e, f]a // [a, b, c, d, 1, 2]上面代码除了删除成员还插入了两个新成员。起始位置如果是负数就表示从倒数位置开始删除。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.9、sort()sort方法对数组成员进行排序默认是按照字典顺序排序。排序后原数组将被改变。[d, c, b, a].sort()// [a, b, c, d][4, 3, 2, 1].sort()// [1, 2, 3, 4][11, 101].sort()// [101, 11][10111, 1101, 111].sort()// [10111, 1101, 111]上面代码的最后两个例子需要特殊注意。sort方法不是按照大小排序而是按照字典顺序。也就是说数值会被先转成字符串再按照字典顺序进行比较所以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.10、map()map方法将数组的所有成员依次传入参数函数然后把每一次的执行结果组成一个新数组返回。var numbers [1, 2, 3];numbers.map(function (n) {return n 1;});// [2, 3, 4]numbers// [1, 2, 3]上面代码中numbers数组的所有成员依次执行参数函数运行结果组成一个新数组返回原数组没有变化。map方法接受一个函数作为参数。该函数调用时map方法向它传入三个参数当前成员、当前位置和数组本身。[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.11、forEach()forEach方法与map方法很相似也是对数组的所有成员依次执行参数函数。但是forEach方法不返回值只用来操作数据。这就是说如果数组遍历的目的是为了得到返回值那么使用map方法否则使用forEach方法。forEach的用法与map方法一致参数是一个函数该函数同样接受三个参数当前值、当前位置、整个数组。function log(element, index, array) {console.log([ index ] element);}[2, 5, 9].forEach(log);// [0] 2// [1] 5// [2] 9上面代码中forEach遍历数组不是为了得到返回值而是为了在屏幕输出内容所以不必使用map方法。forEach方法也可以接受第二个参数绑定参数函数的this变量。var out [];[1, 2, 3].forEach(function(elem) {this.push(elem * elem);}, out);out // [1, 4, 9]上面代码中空数组out是forEach方法的第二个参数结果回调函数内部的this关键字就指向out。注意forEach方法无法中断执行总是会将所有成员遍历完。如果希望符合某种条件时就中断遍历要使用for循环。var arr [1, 2, 3];for (var i 0; i arr.length; i) {if (arr[i] 2) break;console.log(arr[i]);}// 1上面代码中执行到数组的第二个成员时就会中断执行。forEach方法做不到这一点。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上面代码中forEach方法不会跳过undefined和null但会跳过空位。3.12、filter()filter方法用于过滤数组成员满足条件的成员组成一个新数组返回。它的参数是一个函数所有数组成员依次执行该函数返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。[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的成员。filter方法的参数函数可以接受三个参数当前成员当前位置和整个数组。[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]上面代码中过滤器myFilter内部有this变量它可以被filter方法的第二个参数obj绑定返回大于3的成员。3.13、some()every()这两个方法类似“断言”(assert)返回一个布尔值表示判断数组成员是否符合某种条件。它们接受一个函数作为参数所有数组成员依次执行该函数。该函数接受三个参数当前成员、当前位置和整个数组然后返回一个布尔值。some方法是只要一个成员的返回值是true则整个some方法的返回值就是true否则返回false。var arr [1, 2, 3, 4, 5];arr.some(function (elem, index, arr) {return elem 3;});// true上面代码中如果数组arr有一个成员大于等于3some方法就返回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方法返回falseevery方法返回true回调函数都不会执行。function isEven(x) { return x % 2 0 }[].some(isEven) // false[].every(isEven) // truesome和every方法还可以接受第二个参数用来绑定参数函数内部的this变量。3.14、reduce()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是数组的第一个成员1b是数组的第二个成员2。第二次执行a为上一轮的返回值3b为第三个成员3。第三次执行a为上一轮的返回值6b为第四个成员4。第四次执行a为上一轮返回值10b为第五个成员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再减去1reduceRight方法相当于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.15、indexOf()lastIndexOf()indexOf方法返回给定元素在数组中第一次出现的位置如果没有出现则返回-1。var a [a, b, c];a.indexOf(b) // 1a.indexOf(y) // -1indexOf方法还可以接受第二个参数表示搜索的开始位置。[a, b, c].indexOf(a, 1) // -1上面代码从1号位置开始搜索字符a结果为-1表示没有搜索到。lastIndexOf方法返回给定元素在数组中最后一次出现的位置如果没有出现则返回-1。var a [2, 5, 9, 2];a.lastIndexOf(2) // 3a.lastIndexOf(7) // -1注意这两个方法不能用来搜索NaN的位置即它们无法确定数组成员是否包含NaN。[NaN].indexOf(NaN) // -1[NaN].lastIndexOf(NaN) // -1这是因为这两个方法内部使用严格相等运算符()进行比较而NaN是唯一一个不等于自身的值。3.16、链式使用上面这些数组方法之中有不少返回的还是数组所以可以链式使用。var users [ {name: tom, email: tomexample.com}, {name: peter, email: peterexample.com}];users.map(function (user) {return user.email;}).filter(function (email) {return /^t/.test(email);}).forEach(function (email) {console.log(email);});// tomexample.com上面代码中先产生一个所有 Email 地址组成的数组然后再过滤出以t开头的 Email 地址最后将它打印出来。本章节完推荐阅读系列章节【JavaScript 教程】入门篇-导论【JavaScript 教程】入门篇-JavaScript 语言的历史【JavaScript 教程】入门篇-JavaScript 的基本语法【JavaScript 教程】数据类型-概述【JavaScript 教程】数据类型-null, undefined 和布尔值【JavaScript 教程】数据类型-数值【JavaScript 教程】数据类型-字符串【JavaScript 教程】数据类型-对象【JavaScript 教程】数据类型-函数【JavaScript 教程】数据类型-数组【JavaScript 教程】运算符—算术运算符【JavaScript 教程】运算符—比较运算符【JavaScript 教程】运算符—布尔运算符【JavaScript 教程】运算符—二进制位运算符【JavaScript 教程】运算符—其他运算符运算顺序【JavaScript 教程】语法专题—数据类型的转换【JavaScript 教程】语法专题—错误处理机制【JavaScript 教程】语法专题—编程风格【JavaScript 教程】语法专题—console 对象与控制台【JavaScript 教程】标准库—Object 对象【JavaScript 教程】标准库—属性描述对象
