原生js的数组方法
-
concat
concat()方法用于合并两个或多个数组或给数组合并值。不会更改原有数组，而是直接返回一个新数组。
语法：var newArray = arr.concat(value1,value2...value);
参数：value：可选参数，可以是数组，也可以是具体的变量或值
var arr1 = [1,2,3,4]; var arr2 = ["胃","必","治"]; var arr = arr1.concat(arr2); console.log(arr); // [1, 2, 3, 4, "胃", "必", "治"] -
join
join()方法将一个数组(伪数组)的所有元素连接成一个字符串并返回。
语法：arr.join([分隔符])
参数：[分隔符]：可选参数，表示用什么符号分隔，如果不填的话默认用逗号分隔。
var arr = ["我今年",18,false]; console.log(arr.join()); // 我今年,18,false console.log(arr.join("-")); // 我今年-18-false console.log(arr.join("")); // 我今年18false -
push
后增。push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。会改变原数组
语法：arr.push(value1,value2...value)
参数：value：可以是数组，也可以是具体的变量或值
var a = [2,3,4]; var b = a.push(5,6); console.log(a); // [2,3,4,5,6] console.log(b); // 5 -
pop
后删。pop()方法用于删除数组最后一个元素，并返回最后一个元素，会改变原数组。
语法：arr.pop()
var arr = [2,3,4]; console.log(arr.pop()); // 4 console.log(arr); // [2,3] -
shift
前删。shift()方法可以把数组的第一个元素删除，并返回第一个元素。会改变原数组。
语法：arr.shift()
var arr = [2,3,4]; console.log(arr.shift()); // 2 console.log(arr); // [3,4] -
unshift
前增。unshift()方法向数组的开头增加一个或多个元素，并返回新的长度。会改变原数组。
语法：arr.unshift(value1,value2...)
参数：value：可以是数组，也可以是具体的变量或值。
var arr = [2,3,4,5]; console.log(arr.unshift(0,1)); // 6 console.log(arr); // [0,1,2,3,4,5] -
slice
截取。slice()方法可以截取并返回一个新的数组（从start到end中的元素（不包含end））。不会修改原数组。
语法：arr.slice(start,end)
参数：start：number类型，截取头的下标；
end：number类型，截取尾的下标；
var arr = [2,3,4,5]; console.log(arr.slice(1,3)); // [3,4] console.log(arr) // [2,3,4,5] -
splice()
更新。splice()方法很强大，包含了添加和删除，所以可以达到替换的效果。该方法返回被删除的元素组成的数组。会改变原数组。
语法：arr.splice(index,length,value1,value2...)
参数：
- index：起始下标
- length：删除元素的位移
- value：插入的新元素，可以是多个
// 使用splice完成删除 var arr = [2,3,4,5,"haha"]; var arr2 = arr.splice(1,2); // 从index为1的元素开始，删除2个元素并以数组形式返回，原数组发生改变 console.log(arr) // [2,5,"haha"] console.log(arr2) // [3,4] // 使用splice完成增加 var arr = [2,3,4,5,"haha"]; arr.splice(1,0,8,9,"bobo"); // 从index为1的位置（元素4）开始，删除0个元素，并在index（3）对应的元素前新增三个元素（8,9,"bobo"） console.log(arr); //[2,8,9,"bobo",3,4,5,"haha"] // 使用splice完成替换 var arr = ["a","b","x","d"]; arr.splice(2,1,"c"); // 从index为2的位置（"x"）开始，删除1个元素，并在该位置上增加一个新的元素"c"。 console.log(arr); // ["a","b","c","d"] -
sort()
排序。按照Unicode编码的位置排序，默认升序。返回排序后的数组。会改变原数组。
var fruit = ['cherries','apples','bananas']; console.log(fruit.sort()); // ['apples','bananas','cherries'] var scores = [1,10,21,2]; console.log(scores.sort()); // [1,10,2,21] -
reverse()
倒序。reverse()方法颠倒数组中元素的顺序，返回颠倒后的数组。会改变原数组。
var arr = [2,3,4]; console.log(arr.reverse()); // [4,3,2] console.log(arr); // 4,3,2
ES5 数组方法
-
indexOf() 和 lastIndexOf()
查找。indexOf()从开始往后查找，lastIndexOf()从末尾往前查找。返回第一个查找到的元素的下标（未找到则返回-1）。不改变原数组。
语法：
- arr.indexOf(value)
- arr.lastIndexOf(value)
参数：value：查找的元素
var arr = [2,3,4,5,2]; console.log(arr.indexOf(2)); // 0 console.log(arr.indexOf(8)); // -1 console.log(arr.lastIndexOf(2)); // 4 -
forEach()
遍历。forEach()方法可以直接对数组遍历并用回调函数进行操作。
语法：arr.forEach(callback(value,index,array))
参数：
-
callback：回调函数
有三个参数：
- value：当前元素
- index：当前元素的下标
- array：整个数组
var arr = [1,2,3,4,5]; arr.forEach(function(value,index,array){ arr[index] += 1; }) console.log(arr); // [2,3,4,5,6] -
-
every
判断。每次遍历回调函数都为true，才会返回true。否则返回false。
语法：arr.every(callback(value))
参数：
-
callback：回调函数
参数：value：遍历的值
var arr = [1,2,-1,0,3] arr.every(function(value){ return val>0 }) // fasle var arr2 = [5,6,7] arr2.every(function(value){ return val>0 }) // true -
-
some
判断。只要有一个元素满足回调函数，就会返回true。全部都不满足则返回false。
语法：arr.some(callback(value))
参数：
-
callback：回调函数
参数：value：遍历的值
var arr = [1,2,3,0,-1]; arr.some(function(value){ return value < 0; }) // true var arr2 = [1,2,3,0,6]; arr2.some(function(value){ return value < 0; }) // false -
-
map
加工。遍历数组，并通过回调函数操作后返回一个新数组。原数组不变。
语法：arr.map(callback(value))
参数：
-
callback：回调函数
有一个参数：
value：当前元素
var arr = [1,2,3,4,5]; var arr2 = arr.map(function(value){ return value * 2; }) console.log(arr); // 1,2,3,4,5 console.log(arr2); // 2,4,6,8,10 -
-
filter
过滤。遍历数组中的元素，返回满足回调函数的元素组成的数组。原数组不变。
语法：arr.filter(callback)
参数：
-
callback：回调函数
参数：value：遍历的值
var arr = [1,2,3,4,5,6,7]; var arr2 = arr.filter(function(value){ return value % 2 == 0; }) console.log(arr); // [1,2,3,4,5,6,7] console.log(arr2); // [2,4,6] -
-
reduce
归并。功能很强大，reduce()方法从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
语法：arr.reduce(callback(acc,value,index,array)，initialValue)
参数：
-
callback：回调函数
acc：累积器，累计回调的返回值; 它是上一次调用回调时返回的累积值，或
initialValue（见于下方）。value：当前元素
index：当前索引（可选参数
array：原数组（可选参数
initialValue：初始值（可选参数
// reduce 基本累加 var arr = [1,2,3,4]; var res = arr.reduce(function(acc,value){ return acc + value; }) console.log(res); // 10// reduce 对对象的值进行操作 var initialValue = 0; var arr = [{x:1},{x:2},{x:3},{x:4}] var res = arr.reduce(function(acc,value){ return acc + value.x; },initialValue) console.log(res); // 10// reduce 将二维数组转化为一维数组 var arr = [[0,1],[2,3],[4,5]]; var res = arr.reduce(function(acc,value){ return acc.concat(value); },[]); console.log(res); // [0,1,2,3,4,5]// 计算数组中每个元素出现的次数 var arr = ['Alley','Bob','Hehe','Alley','Eric','Bruce','Alley','Eric','Tiff'] var res = arr.reduce(function(allNames,name){ if(name in allNames){ allNames[name] ++; } else{ allNames[name] = 1; } return allNames; },{}); console.log(res); // {Alley: 3,Bob: 1,Bruce: 1,Eric: 2,Hehe: 1,Tiff: 1}// 按照属性对object进行分类 var people = [ {name:'Alley',age:30}, {name:'Eric',age:40}, {name:'Apple',age:20}, {name:'Edan',age:30}, {name:'Code00',age:20} ] function groupBy(objectArr,property){ return objectArr.reduce(function(acc,obj){ var key = obj[property]; if(!acc[key]){ acc[key] = []; } acc[key].push(obj); return acc },{}); } var groupPeople = groupBy(people,'age'); console.log(groupPeople); // { // 20:[{{name:'Apple',age:20},{name:'Code00',age:20}}], // 30:[{name:'Edan',age:30},{name:'Alley',age:30},], // 40:[{name:'Eric',age:40}] // }// reduce 实现数组去重 var arr = ['a','b','a','b','c','e','f','d','c','e'] var res = arr.reduce(function(acc,currentValue){ if(acc.indexOf(currentValue) === -1){ acc.push(currentValue); } return acc; },[]) console.log(res); // ['a','b','c','e','f','d'] // 2： var arr2 = [1,2,4,6,7,8,5,3,3,2,5,7,5,4]; var newArr = arr2.sort(); var res2 = newArr.reduce((init,current)=>{ if(init.length === 0 || init[init.length-1] !== current){ init.push(current); } return init; },[]); console.log(res2); // [1,2,3,4,5,6,7,8] -
