Javascript处理数组基础知识（含es6新语法）

迭代方法1.every()对数组中每一项进行给定函数，如果每一项都返回true，则返回true。every(callback(element,index,array), thisArg)callback:必需，对数组每一项所要执行的函数。thisArg:可选，规定callback回调函数this所指向的对象。var numbers = [1,2,3,4,5,4,3,2,1];var everyResult = numbers.every(function(item,index,array){ return item>2;});console.log(everyResult); //falsevar numbers = [1,2,3,4,5,4,3,2,1];var obj = {num:2}var everyResult = numbers.every(function(item,index,array){ return item>this.num;},obj);console.log(everyResult); //false特别说明：第一个参数是回调函数，第二个参数是一个对象，它可以重置回调函数中this的指向。那么，上述代码中回调函数的this就指向obj，于是this.num值等于2。2.some()对数组中每一项进行给定函数，如果任意一项都返回true，则返回truesome(callback(element,index,array), thisArg)callback:必需，对数组每一项所要执行的函数。thisArg:可选，规定callback回调函数this所指向的对象。var numbers = [1,2,3,4,5,4,3,2,1];var someResult = numbers.some(function(item,index,array){ return item>2;});console.log(someResult); //truevar numbers = [1,2,3,4,5,4,3,2,1];var obj = {num:2}var someResult = numbers.some(function(item,index,array){ return item>this.num;},obj);console.log(someResult); //true3.filter()对数组中每一项进行给定函数,返回该函数会返回true的项组成新的数组。filter(callback(element,index,array), thisArg)callback:必需，对数组每一项所要执行的函数。thisArg:可选，规定callback回调函数this所指向的对象。var numbers = [1,2,3,4,5,4,3,2,1];var filterResult = numbers.filter(function(item,index,array){ return item>2;});console.log(filterResult); // [3,4,5,4,3]var numbers = [1,2,3,4,5,4,3,2,1];var obj = {num:2}var filterResult = numbers.filter(function(item,index,array){ return item>this.num;},obj);console.log(filterResult); // [3,4,5,4,3]4.map()对数组中每一项进行给定函数,返回每次函数调用的结果组成的新数组。map(callback(element,index,array), thisArg)callback:必需，对数组每一项所要执行的函数。thisArg:可选，规定callback回调函数this所指向的对象。var numbers = [1,2,3,4,5,4,3,2,1];var mapResult = numbers.map(function(item,index,array){ return item2;});alert(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]var numbers = [1,2,3,4,5,4,3,2,1];var obj = {num:2}var mapResult = numbers.map(function(item,index,array){ return itemthis.num;},obj);alert(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]5.forEach()对数组中每一项进行给定函数,没有返回值，和for循环类似。forEach(callback(element,index,array), thisArg)callback:必需，对数组每一项所要执行的函数。thisArg:可选，规定callback回调函数this所指向的对象。var numbers = [1,2,3,4,5,4,3,2,1];numbers.forEach(function(item,index,array){ console.log(item2)});//2, 4, 6, 8, 10, 8, 6, 4, 2console.log(numbers) //1,2,3,4,5,4,3,2,1var numbers = [1,2,3,4,5,4,3,2,1];var obj = {num:2}numbers.forEach(function(item,index,array){ console.log(itemthis.num)},obj);//2, 4, 6, 8, 10, 8, 6, 4, 2归并方法ES5新增了两个归并数组的方法：reduce(callback(prev,cur,index,array))和reduceRight(callback(prev,cur,index,array))。这两个方法迭代数组所有项，然后构建一个最终返回的值。reduce从左到右，reduceRight从右到左。prev:前一个值cur:当前值index:下标array:数组对象var numbers = [1,2,3,4,5];var sum = numbers.reduce(function(prev,cur,index,array){ return prev + cur;});console.log(sum); //15这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。检测数组1.instanceofES3的方法var numbers = [1,2,3];if(numbers instanceof Array){ //对数组进行某些操作}2.Array.isArrayES5的方法var numbers = [1,2,3];if(Array.isArray(numbers)){ //对数组进行某些操作}数组转化成字符串1.toLocaleString() toString()var numbers = [1,2,3];console.log(numbers.toLocaleString()) //1,2,3console.log(numbers.toString())//1,2,32.join()将数组转换为字符串，且用分隔符分割var numbers = [1,2,3];alert(numbers.join("|")); // 1|2|3栈方法栈方法是指Last-In-First-Out后进先出push() 从数组末尾添加pop() 从数组末尾移除队列方法队列方法是First-In-First-Out先进先出shift() 从数组前端移除unshift() 从数组前端添加重排序方法1.reverse()反转数组var numbers = [1,2,3];console.log(numbers.reverse()) //3,2,12.sort()var numbers = [0,1,5,10,15];numbers.sort(function(a,b){ return b-a;});console.log(numbers); //[15, 10, 5, 1, 0]操作方法1.concat()用于复制或者从尾部添加，创建新数组。concat(n1,n2,…,nN)n1,n2,…,nN:都可选，既可以是数组，也可以是单个字符。var numbers = [1,2,3];var n1 = values.concat(); //复制var n2 = values.concat(4); //尾部添加var n3 = n1.concat(n2,10,11); //尾部添加console.log(numbers); //[1,2,3]console.log(n1); //[1,2,3]console.log(n2); //[1,2,3,4]console.log(n3); //[1, 2, 3, 1, 2, 3, 4,10,11]2.slice()用于复制或截取数组，创建新数组。slice(start,end)strat:可选，数组其实位置，截取的时候包括其实位置end:可选，结束位置，截取的时候不包括结束位置var numbers = [1,2,3];var n1 = numbers.slice(); //复制var n2 = numbers.slice(1); //截取var n3 = numbers.slice(1,3); //截取console.log(numbers); //[1,2,3]console.log(n1); //[1,2,3]console.log(n2); //[2,3]console.log(n3); //[2,3]3.splice()用于删除、插入、替换，号称最强大的数组方法删除：可以删除任意数量的项，需要两个参数，要删除的第一项的位置和要删除的项数splice(start,num)var values = [1,2,3,4,5,6];var v = values.splice(0,2);console.log(values); //[3,4,5,6]console.log(v); //[1,2]插入和替换：至少三个参数，第一个是起始位置，第二个是要删除的项数，第三个及以后是要插入或替换的值。splice(start,num,n1,n2,…,nN)//插入demovar values = [1,2,3,4,5,6];var v1 = values.splice(1,0,1,1,1);console.log(values); //[1,1,1,1,2,3,4,5,6]console.log(v1); //[]//替换demovar values = [1,2,3,4,5,6];var v1 = values.splice(1,2,1,1,1);console.log(values); //[1,1,1,1,4,5,6]console.log(v1); //[2,3]位置方法indexOf(value,start)lastIndexOf(value,start)都接受两个参数：查找的值、查找起始位置。不存在，返回 -1 ；存在，返回位置。indexOf 是从前往后查找， lastIndexOf 是从后往前查找。var numbers = [1,2,3,4,5,6,7,8,9,5,3];console.log(numbers.indexOf(5)) //4console.log(numbers.lastIndexOf(5)) //9ES6新增新操作数组的方法1.find()传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。find(callback(element,index,array), thisArg)callback：必需，回调函数，它制定了对数组元素的检索规则。thisArg：可选，用来规定回调函数中this所指向的对象。let arr = [2,3,4,5,6,7,8,9,10];let elem=arr.find(function (ele) { if (ele > 4) { return true }})console.log(elem); //5let arr = [2,3,4,5,6,7,8,9,10];let obj = {num: 4};let elem=arr.find(function (ele) { if (ele > this.num) { return true }},obj)console.log(elem); //52.findIndex()传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。findIndex(callback(element,index,array), thisArg)callback：必需，回调函数，它制定了对数组元素的检索规则。thisArg：可选，用来规定回调函数中this所指向的对象。let arr = [2,3,4,5,6,7,8,9,10];let elem=arr.findIndex(function (ele) { if (ele > 4) { return true }})console.log(elem); //3let arr = [2,3,4,5,6,7,8,9,10];let obj = {num: 4};let elem=arr.findIndex(function (ele) { if (ele > this.num) { return true }},obj)console.log(elem); //33.fill()用新元素替换掉数组内的元素，可以指定替换下标范围。fill(value,start,end)value：必需，用来进行填充的值。start：可选，规定填充开始位置，默认从索引0处开始。end：可选，规定填充结束位置，默认填充到数组结尾。const arr = [‘a’, ‘b’, ‘c’, ’d’]console.log(arr.fill(‘ss’, 1, 3)) // [“a”, “ss”, “ss”, “d”]const arr2 = [‘a’, ‘b’, ‘c’, ’d’]console.log(arr.fill(‘ss’)) // [“ss”, “ss”, “ss”, “ss”]4.includes()判断数组中是否存在该元素，可以替换 ES5 时代的 indexOf 判断方式。includes(value,start)value：必需，要检测的元素。start：可选，规定填充开始位置，默认从索引0处开始。let arr = [‘a’, ‘b’,‘c’, ’d’, NaN]arr.includes(‘a’) //truearr.includes(NaN) //truearr.indexOf(NaN) //-15.Array.from()方法可以将指定的参数转换为真正的数组。当然并不是任意参数都是可以被转换为数组，可以转换的参数如下：类数组对象、具有遍历器接口的对象。Array.from(arrayLike, mapFn, thisArg)arrayLike：必需，将要被转换为真正数组的类数组或者具有遍历器接口的对象。mapFn：可选，对参数arrayLike中的数据进行处理并返回，作为新数组的元素。thisArg：可选，规定mapFn的调用对象，那么mapFn中的this将会指向此调用对象。let obj = { “0”: “蚂蚁部落”, “1”: “www.softwhy.com”, “2”: 6, “3”:“ES2015”, length:4};console.log(Array.from(obj)); // [“蚂蚁部落”, “www.softwhy.com”, 6, “ES2015”]obj = { “a”: “蚂蚁部落”, “b”: “www.softwhy.com”, “c”: 6, “d”:“ES2015”, length:4};console.log(Array.from(obj)); //[undefined, undefined, undefined, undefined]obj = { length:3};console.log(Array.from(obj)); //[undefined, undefined, undefined]上述代码将类数组对象转换为真正的数组，什么是类数组对象：很多材料上对类数组的描述比较严苛，其实很简单，只要一个对象具有length属性就是类数组。当然一个类数组对象，如果属性恰好类似于数组递增式索引，那就更好了，比如上面代码中的对象。上面对象只有一个length属性，他也是一个类数组对象，只不过生成的数组元素都是undefined。let str = “蚂蚁部落”;console.log(Array.from(str)); // [“蚂”, “蚁”, “部”, “落”]因为字符串具有遍历器接口，那么字符串也可以生成数组，数组的每一个元素，就是构成字符串的字符。let obj = { “0”: 1, “1”: 2, “2”: 3, “3”: 4, length:4};let thisObj = { num:2}console.log(Array.from(obj, function (elem, index) { return elem * this.num}, thisObj)); //[2, 4, 6, 8]扩展:展开运算符生成数组let str=“蚂蚁部落”;console.log([…str]); //[“蚂”, “蚁”, “部”, “落”]6.Array.of()Array.of(element0,element1,…,elementN)此方法可以接受任意类型的参数，参数之间用逗号分隔，并且能够将参数转换为数组。console.log(Array.of(2)); //[2]console.log(Array.of(2,3,4)); //[2,3,4]扩展：Array()与Array.of()方法区别console.log(Array(2)) // [undefined, undefined]console.log(Array.of(2)) // [2]console.log(Array(2,3,4)) // [2,3,4]console.log(Array.of(2,3,4)) // [2,3,4]这个方法的主要目的，是弥补数组构造函数 Array() 的不足。7.entries()返回迭代器：返回一个遍历器对象【键值对】//数组const arr = [‘a’, ‘b’, ‘c’];for(let v of arr.entries()) { console.log(v)}// [0, ‘a’] [1, ‘b’] [2, ‘c’]for(let [key, value] of arr.entries()) { console.log(key+’–’+value)}//0–a 1–b 2–c//Setconst arr = new Set([‘a’, ‘b’, ‘c’]);for(let v of arr.entries()) { console.log(v)}// [‘a’, ‘a’] [‘b’, ‘b’] [‘c’, ‘c’]//Mapconst arr = new Map();arr.set(‘a’, ‘a’);arr.set(‘b’, ‘b’);for(let v of arr.entries()) { console.log(v)}// [‘a’, ‘a’] [‘b’, ‘b’]8.keys()返回迭代器：返回键值对的key//数组const arr = [‘a’, ‘b’, ‘c’];for(let v of arr.values()) { console.log(v)}//‘a’ ‘b’ ‘c’//Setconst arr = new Set([‘a’, ‘b’, ‘c’]);for(let v of arr.values()) { console.log(v)}// ‘a’ ‘b’ ‘c’//Mapconst arr = new Map();arr.set(‘a’, ‘a’);arr.set(‘b’, ‘b’);for(let v of arr.values()) { console.log(v)}9.values()返回迭代器：返回键值对的value//数组const arr = [‘a’, ‘b’, ‘c’];for(let v of arr.keys()) { console.log(v)}// 0 1 2//Setconst arr = new Set([‘a’, ‘b’, ‘c’]);for(let v of arr.keys()) { console.log(v)}// ‘a’ ‘b’ ‘c’//Mapconst arr = new Map();arr.set(‘a’, ‘a’);arr.set(‘b’, ‘b’);for(let v of arr.keys()) { console.log(v)}// ‘a’ ‘b’