操作数组的方法
子曾经曰过，这是基本功，就和练武的马步一样！
数组的基本方法
一、原数组改变
1.push()
-
释义：向数组的末尾添加内容；
-
参数：一个或多个元素；(多个居然也可以😝)
-
原数组：改变；
-
返回值：新数组的长度。
var arr = [1, 2, 3] var length = arr.push(1) console.log(arr) // [1, 2, 3, 1] console.log(length) // 4
2.pop()
-
释义：从数组中删除最后一个元素；
-
参数：无；
-
原数组：改变；
-
返回值：删除的元素。
var arr = [1, 2, 3] var el = arr.pop() console.log(arr) // [1, 2] console.log(el) // 3
3.unshift()
-
释义：向数组的开头添加内容；
-
参数：一个或多个元素；
-
原数组：改变；
-
返回值：新数组的长度。
var arr = [1, 2, 3] var length = arr.unshift(4, 5, 6) console.log(arr) // [4, 5, 6, 1, 2, 3] console.log(length) // 6
4.shift()
-
释义：从数组中删除第一个元素；
-
参数：无；
-
原数组：改变；
-
返回值：删除的元素。
var arr = [1, 2, 3] var el = arr.shift() console.log(arr) // [2, 3] console.log(el) // 1
5.splice( x, y, z )
-
释义：从 x 位置开始，删除长度为 y 的元素，并用 z 替换；
-
参数：x 表示开始位置（如果是负值，则表示从数组末位开始的第几位）， y 表示删除元素的个数，z 表示替换元素（可多个）；
-
原数组：改变；
-
返回值：由删除内容组成的新数组。
-
用法：由传入参数的不同可以分别处理删除，添加，修改；
-
splice( x )：一个参数，表示删除，从 x 位置，删除到最后，即默认 y=arr.length - x；
var arr = [1, 2, 3, 4] var newArr = arr.splice(2) console.log(arr) // [1, 2] console.log(newArr) // [3, 4] -
splice( x, y )：两个参数，表示删除，从 x 位置，删除 y 个元素；
var arr = [1, 2, 3, 4] var newArr = arr.splice(2, 1) console.log(arr) // [1, 2, 4] console.log(newArr) // [3] -
splice( x, 0, z )：三个参数，且删除长度为0，表示添加，在 x 位置前添加元素；返回空数组（因为没删除）
var arr = [1, 2, 3, 4] var newArr = arr.splice(0, 0, 0) console.log(arr) // [0, 1, 2, 3, 4] console.log(newArr) // [] -
splice( x, y, z )：三个参数，表示修改，从 x 位置开始，删除长度为 y 的元素，并用 z 替换；
var arr = [1, 2, 3, 4] var newArr = arr.splice(3, 1, 5) console.log(arr) // [1, 2, 3, 5] console.log(newArr) // [4]
-
6.reverse()
-
释义：将数组中元素的位置颠倒
-
参数：无
-
原数组：改变；
-
返回值：该数组的引用地址。
var arr = [1, 2, 3, 4] var newArr = arr.reverse() console.log(arr) // [4, 3, 2, 1] console.log(newArr) // [4, 3, 2, 1]
7.sort()
-
释义：sort() 方法在适当的位置对数组的元素进行排序，默认排序顺序是根据字符串Unicode码点。
-
参数：compareFunction（可选）
-
原数组：改变；
-
返回值：该数组的引用地址
/* 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前； 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变； 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。 */ var arr = [1, 3, 2, 50, 23]; arr.sort();// 根据字符Unicode码点 [1, 2, 23, 3, 50] arr.sort(function(a,b) {return a - b ;});// 从小到大 [1, 2, 3, 23, 50] arr.sort(function(a,b) {return b - a ;});// 从大到小 [50, 23, 3, 2, 1]
二、原数组不变
1.toString()
-
释义：将数组转为字符串；
-
参数：无；
-
原数组：不变；
-
返回值：新字符串。
var arr = [1, 2, 3] var str = arr.toString() console.log(arr) // [1, 2, 3] console.log(str) // "1,2,3"
2.join()
-
释义：将数组按指定分隔符转为字符串；
-
参数：separator分隔符；
-
原数组：不变；
-
返回值：用分隔符连接的新字符串。
// 根据参数不同返回不同结果 var arr = [1, 2, 3] var str1 = arr.join() var str2 = arr.join('-') var str3 = arr.join('') console.log(arr) // [1, 2, 3] console.log(str1) // "1,2,3" console.log(str2) // "1-2-3" console.log(str3) // "123"
3.concat()
-
释义：拼接两个或多个数组；
-
参数：可以是一个或多个数值或字符串或数组；
-
原数组：不变；
-
返回值：新数组。
// 传入不同参数，原数组不变 var arr = [1, 2, 3] var newArr1 = arr.concat(4) var newArr2 = arr.concat(5, 6, 7) var newArr3 = arr.concat([5, 6, 7]) var newArr4 = arr.concat([5], [6], [7]) console.log(arr) // [1, 2, 3] console.log(newArr1) // [1, 2, 3, 4] console.log(newArr2) // [1, 2, 3, 5, 6, 7] console.log(newArr3) // [1, 2, 3, 5, 6, 7] console.log(newArr4) // [1, 2, 3, 5, 6, 7]
4.slice( x, y )
-
释义：选取从位置 x 到位置 y 的数组的的一部分（[ x, y) => 包含x，不包含y）；
-
参数：起始位置 x （可选，省略时为0）；终点位置 y （可选，省略时为arr.length-1）
-
原数组：不变；
-
返回值：由选取的内容组成的新数组。
-
注意：slice 不修改原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组，即地址都指向了同一个对象。
-
用法：传入的参数不同
-
slice( )：不传参数，表示从 0 到 arr.length-1；
var arr = [1, 2, 3, 4] var newArr = arr.slice() console.log(arr) // [1, 2, 3, 4] console.log(newArr) // [1, 2, 3, 4] -
slice( x )：传一个参数，表示从位置 x 到 arr.length-1；
var arr = [1, 2, 3, 4] var newArr = arr.slice(1) console.log(arr) // [1, 2, 3, 4] console.log(newArr) // [2, 3, 4] -
slice( x, y )：传两个参数，表示从位置 x 到 y（不包含y）；
var arr = [1, 2, 3, 4] var newArr = arr.slice(1, 2) console.log(arr) // [1, 2, 3, 4] console.log(newArr) // [2]
-
ES5中的数组方法
一、迭代方法
1.forEach
-
释义：遍历。
使用函数遍历每一个数组项。
没有返回值。
不会改变原数组。
-
语法：
arr.forEach( function( value, index, arr ){ /*内容*/ }) //没有返回值，即使用return返回，用变量接收也是显示undefined -
注意：jQuery中的each方法中回调函数的参数顺序与forEach不同
$arr.each( function( index, value, arr ){ /*内容*/ }) //没有返回值，即使用return返回，用变量接收也是显示undefined -
补充：forEach除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数（改变回调函数里面的this指向）（第2个参数）默认指向window。map、filter、some、every都有该可选参数。
arr.forEach(function(currentValue, index, arr), thisValue)
2.map
-
释义：映射。
让数组中的每个元素都调用一次提供的函数。
返回每次函数调用的结果组成的新数组。
不会改变原数组。
-
语法：
arr.map( function( value, index, arr ){ return 改变后的数据； }) //必须要有返回值，否则返回一个全是undefined的数组 var arr = [1, 2, 3] var res1 = arr.map(function(v, i, arr){return v*2}) var res2 = arr.map(function(v, i, arr){v*2}) console.log(arr) // [1, 2, 3] console.log(res1) // [2, 4, 6] console.log(res2) // [undefined, undefined, undefined] -
注意：jQuery中的map方法中回调函数的参数顺序先index，后value。
3.filter
-
释义：过滤。
该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
即符合规则的元素会被存放到新数组中。
-
语法：
arr.filter( function( value, index, arr ){ return value>n(该表达式为true的值)； }) //必须要有返回值，否则返回一个空数组 var arr = [1, 2, 3, 4] var res1 = arr.filter(function(v, i, arr){return v>2}) var res2 = arr.filter(function(v, i, arr){v>2}) console.log(arr) // [1, 2, 3, 4] console.log(res1) // [3, 4] console.log(res2) // [] -
注意：jQuery中的过滤数组方法是grep
grep(array,callback,invert)- array：待过滤数组；
- callback：数组过滤函数，该函数包含两个参数，第一个是当前数组元素的值value，第二个是数组元素的下标index；
- invert：布尔型可选项，默认为false，即返回的是过滤函数处理以后为true的数组；选项设置为true的时候，返回的是过滤函数处理以后为false的数组 。
$.grep(arr, function( value, index ){ return value>n; },false/true)//默认false，返回表达式为true的值的数组 -
补充：jQuery中的filter方法，参数为选择器，用于筛选元素。
$("a"),filter("#foo"); //选择标签为“a”且其ID为“foo"的标签
4.some
-
释义：存在满足。
判断数组中的每一个元素，只要有一个符合回调函数的要求，就返回true。
var arr = [1, 2, 3, 4] var res = arr.some(function(v, i, arr){return v>2}) console.log(arr) // [1, 2, 3, 4] console.log(res) // true
5.every
-
释义：全部满足。
判断数组中的每一个元素，所有元素都符合回调函数的要求，就返回true。
var arr = [1, 2, 3, 4] var res = arr.every(function(v, i, arr){return v>2}) console.log(arr) // [1, 2, 3, 4] console.log(res) // false
二、索引方法
1.indexOf
-
释义：从数组的开头开始向后查找数组中某个元素第一次出现的索引位置，如果找不到，返回-1
-
语法：
arr.indexOf( item, start ); //参数一：查找的元素 //参数二：开始查找的下标index，不选默认从0索引开始 -
常用：
//常用于操作数组中的元素，没有就添加。 var index=arr.indexOf( item ); if ( index === -1 ){ arr.push( item ); } -
注意：
在比较第一个参数与数组中的每一项时，会使用全等操作符， 要求必须完全相等,否则返回-1。
2.lastIndexOf
- 释义：从数组的末尾开始向前查找数组中某个元素第一次出现的位置，如果找不到，返回-1
三、归并方法
1.reduce
-
释义：不断的减少数组元素，最终的到一个结果，类似于递归
该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
-
语法：
array.reduce ( function( total, currentValue, currentIndex, arr){ return total }, initialValue) //参数一：回调函数 //回调函数的参数1：初始值或之前值（必须） //回调函数的参数2：当前值（必须） //回调函数的参数3：当前索引值（可选） //回调函数的参数4：当前函数（可选） //回调函数返回值：返回的值作为下一次迭代的初始值 //参数二：初始值（可选）如果缺省，初始值为数组的第一项 -
举个栗子：
var arr = [ 1, 2, 3, 4 ]; //不设置初始值，默认从数组第一项开始 var sum1 = arr.reduce( function ( total, curr ){ return total+curr; }); console.log( sum1 );//10 //设置初始值5，会比不设初始值多执行一次 var sum2 = arr.reduce( function ( total, curr ){ return total+curr; },5); console.log( sum2 );//15利用此方法，可以快速将二维数组转换为一维数组
var arrMix = [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ] var arr = arrMix.reduce( function( total, curr ){ return total.concat( curr ); }); console.log( arr );//[1, 2, 3, 4, 5, 6]再举个栗子：
//将cookie和search以对象的形式显示 var cookie = "k1=v1; k2=v2; k3=v3; k4=v4"; var search = "k1=v1&k2=v2&k3=v3&k4=v4"; var res = cookie.split( "; " ).reduce(function ( res, kvstr ) { var kv = kvstr.split( "=" ); var key = kv[ 0 ]; var value = kv[ 1 ]; res[ key ] = value;//设置对象的键=值 return res; }, {} );//设置初始值为一个空对象 var res2 = search.split( "&" ).reduce(function ( res, kvstr ) { var kv = kvstr.split( "=" ); var key = kv[ 0 ]; var value = kv[ 1 ]; res[ key ] = value;//设置对象的键=值 return res; }, {} );//设置初始值为一个空对象 console.log(res) // {k1: "v1", k2: "v2", k3: "v3", k4: "v4"} console.log(res2) // {k1: "v1", k2: "v2", k3: "v3", k4: "v4"}
2.reduceRight
- 释义：该方法接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值。使用方法与reduce相同。
ES6中的数组方法
1.扩展运算符（...）
-
释义：它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 -
该运算符主要用于函数调用，如替代数组的 apply 方法
function add(a, b, c) { console.log(a + b + c); } let arr = [1, 2, 3]; add.apply(null, arr); // 6 ==> es5 add(...arr); // 6 ==> es6 Math.max.apply(null, [1, 2, 3]); // 3 ==> es5 写法 Math.max(...[1, 2, 3]); // 3 ==> ES6 写法 -
应用
// 1.复制数组 const a = [1, 2]; const b = [...a]; const [...c] = a; // 2.合并数组(取代concat) var a = [1, 2]; var b = [3, 4]; a.concat(b); // [1,2,3,4] ==> es5 写法 [...a, ...b]; // [1,2,3,4] ==> es6 写法 // 3.与解构赋值结合，生成数组 let [a, ...b] = [1, 2, 3, 4] a // 1 b // [2,3,4] // 4.将字符串转为真正的数组 let str = "abc"; [...str] // ["a","b","c"]; Array.from('abc'); // ['a','b','c']; str.split("").reverse().join(""); ==> es5 写法 [...str].reverse().join(""); ==> es6 写法
2.Array.from
-
释义: 将两类对象转为正真的数组
-
语法:
Array.from(arrayLike: ?, mapFn?: fn(elt: ?, i: number), thisArg?: ?)参数:
- arg1：类似数组的对象
- arg2：map 函数
- arg3：绑定 map 函数内的 this
-
应用:
-
该方法用于将两类对象转为正真的数组：类似数组的对象和遍历的对象( 包括 set 和 map )
let arrLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; var arr1 = [].slice.call(arrLike); // ["a", "b", "c"] ==> es5 let arr2 = Array.from(arrLike); // ["a", "b", "c"] ==> es6 // 将 Set 结构转为数组 let items = new Set([1, 2, 3]); let array = Array.from(items); -
实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象
-
-
栗子:
-
将字符串转为数组
Array.from('abc'); // ['a','b','c']; [...'abc']; // ['a','b','c']; 'abc'.split(''); // ['a','b','c']; -
返回各种数据的类型
// 用arguments function typesOf() { return Array.from(arguments, p => typeof p) } typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"] // 用rest参数 function typesOf(...rest) { return Array.from(rest, p => typeof p) } typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"] -
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.from('123',x=>x+'a'); // ["1a", "2a", "3a"] //处理两次函数 Array.from({length:2},()=>'a'); // ["a", "a"]
-
- 扩展运算符背后调用的是遍历器接口(Symbol.iterator)，如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。
3.Array.of
-
该方法返回参数值组成的数组。如果没有参数，就返回一个空数组。
-
替代Array()或new Array()，并且不存在由于参数不同而导致的重载。
( 感觉没什么用,直接用中括号不就完了吗 [ ] )
4.数组实例的copyWithin
[].copyWithin(target: number, start: number, end?: number)
-
参数
arg1：从该位置开始替换数据
arg2：从该位置开始读取数据，默认为 0。如果为负值，表示倒数
arg3：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数 -
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
['a','b','c'].copyWithin(0,1); // ["b", "c", "c"];
5.数组实例的find和findIndex
- 找出第一个符合条件的数组成员（下标）
[].find(callback: fn(element: ?, index: number, array: [?]) : bool, thisArg?: ?)
[].findIndex(callback: fn(element: ?, index: number, array: [?]), thisArg?: ?)
6.数组实例的fill
- 替换、填充数组
[].fill(value: ?, start?: number, end?: number)
7.数组实例的includes
[].includes(value: ?)
-
返回布尔值，判断某数组是否包含某个 value 值
-
es5 中用
indexOf(value)===-1?来判断是否包含
编程风格之类数组对象转数组
// 操作dom返回的NodeList集合
let ps = document.querySelectorAll('p');
// es5
[].slice.call(ps).forEach(p=> {
console.log(p.innerText);
});
// es6
Array.from(ps).forEach(p=> {
console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});
网友评论