1.数组常用的循环方法
1.1 some
//语法 : item:当前元素 、index:当前索引、arr:源数组
Array.some((item,index,arr)=> item%2===0 )
-
只要有一个成员通过，那么 返回为 true
-
some() --找到符合条件的---直接返回true---不继续循环 (与数组every()的方法相反)
let arr=[1,2,3,4,5] let res=arr.some((item,index,arr)=>item%2===0) console.log(res)//true
1.2 every
//语法 : item:当前元素 、index:当前索引、arr:源数组
Array.every((item,index,arr)=> item%2===0 )
-
只有所有成员通过，那么返回为true
-
every()---遍历数组，--查找不符合条件的--直接返回false----不继续遍历数组 (与数组的方法some相反)
let arr=[1,2,3,4,5] let res=arr.every((item,index,arr)=>item%2===0) console.log(res)//false
1.3 map (映射)
//语法 : item:当前元素 、index:当前索引、arr:源数组、this:指向
Array.forEach((item,index,arr)=>item,this)
-
收集 return 的值 并组成新数组（根据源数据映射成新数组）
let arr = [1, 2, 3, 4] let outArr= arr.map(item=>item*2) console.log(outArr); //[2,4,6,8]
1.4 filter（过滤）
//语法：: item:当前元素 、index:当前索引、arr:源数组、this:指向
Array.filter((item,index,arr)=>item>1,this)
-
收集 return结果为true 的值 并组成新数组
let arr = [1,undefined, 3, null,0,'',false,NaN] let outArr= arr.filter(item=>item!=undefined) console.log(outArr);//[1,3,0,'',false,NaN]注意只有 null==undefined (undefined===未被初始化)
1.5 reduce （累加器）
-
执行数组中每个值 (如果没有提供
initialValue则第一个值除外)的函数，包含四个参数：- 参数一：累加器 Accumulator (acc)
- 参数二：当前项 Current Value (cur)
- 参数三，当前索引 Current index (idx)
- 参数四：源数组 Source Array(src)
-
initialValue可选- 作为第一次调用
callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
- 作为第一次调用
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
return accumulator + currentValue;
},0);
-
reduce 实例：求数组所有值的和
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0); // 和为 6 -
reduce 实例：按属性对object 分类
var people = [ { name: 'Alice', age: 21 }, { name: 'Max', age: 20 }, { name: 'Jane', age: 20 } ]; function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { var key = obj[property]; if (!acc[key]) { acc[key] = []; } acc[key].push(obj); return acc; }, {}); } var groupedPeople = groupBy(people, 'age'); // groupedPeople is: // { // 20: [ // { name: 'Max', age: 20 }, // { name: 'Jane', age: 20 } // ], // 21: [{ name: 'Alice', age: 21 }] // }
1.6 forEach
//语法 : item:当前元素 、index:当前索引、arr:源数组、this:指向
Array.forEach((item,index,arr)=>{},this)
-
没有返回值
let arr=[1,2,3,4] console.log(arr.forEach(item=> 1));//undefined -
第二个参数：this （不常用)
//一般使用箭头函数取代 let arr = [1, 2, 3, 4] let outArr=[] arr.forEach(function(item){ this.push(item) }, outArr) console.log(outArr);//[1,2,3,4] -
forEach 不能使用back 打断循环
let arr = [1, 2, 3, 4] arr.forEach(item=>{ if(item===2){ break //Uncaught SyntaxError: Illegal break statement //continue : 同理 } }) console.log(arr); -
数组的值 为空时不打印
let arr = [1, , 3, 4] arr.forEach(item=>console.log(item)) //134
2.数组的堆栈方法
2.1 pop(删除)
//语法 arr.pop()
-
从数组中删除最后一个元素，并
返回该元素的值。此方法更改数组的长度。const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; console.log(plants.pop());// 'tomato' console.log(plants); //["broccoli", "cauliflower", "cabbage", "kale"]
2.2 push(添加)
//语法 arr.push(item1,item2,...)
-
从数组的末尾， 开始添加 ，并
返回该数组的新长度。let animals = ['pigs', 'goats', 'sheep']; const count = animals.push('cows'); console.log(count);// 4 console.log(animals); // ["pigs", "goats", "sheep", "cows"] let arrs=['pigs', 'goats', 'sheep']; let items=[1,2,3,4,5,6] const count = arrs.pusu(...items) console.log(arrs) // ['pigs', 'goats', 'sheep',1,2,3,4,5,6];
2.3 shift (删除)
//语法 arr.shift()
-
用于删除数组的第一个元素，并返回删除的元素。此方法更改数组的长度。
const array1 = [1, 2, 3]; const firstElement = array1.shift(); console.log(firstElement);// 1 console.log(array1);//[2, 3]
2.4 unshift(添加)
//语法 arr.unshift(item1,item2,.....)
-
用于将一个或多个元素添加到数组的
开头，并返回该数组的新长度const array1 = [1, 2, 3]; console.log(array1.unshift(4, 5));// 5 console.log(array1);//[4, 5, 1, 2, 3]
3.数组的拼接法
3.1 join
//语法 separator：分隔符
arr.join("separator")
-
用于将数组中所有元素， 以什么分隔符 拼接成字符串，并返回这个字符串
const elements = ['Fire', 'Air', 'Water']; console.log(elements.join());//"Fire,Air,Water" console.log(elements.join(''));//"FireAirWater" console.log(elements.join('-'));//"Fire-Air-Water"
3.2 concat
//语法 let arrs=arr1.concat(arr2)
-
用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个
新数组const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); console.log(array3); // expected output: Array ["a", "b", "c", "d", "e", "f"] -
注意使用Es6的扩展运算符 [...arr1,...arr2]
4.数组的删改方法
4.1 slice
//语法 begin：开始位置 end：结束位置 [ ）左闭右开
arr.slice(begin,end)
-
返回新数组。 由
begin和end决定的原数组的浅拷贝（包括begin，不包括end）。原始数组不会被改变。var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; var citrus = fruits.slice(1, 3); console.log(citrus); //["Orange","Lemon"] console.log(fruits); //['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
4.2 splice
//语法 start:指定删除或添加的开始位置，deleteCount：删除元素的个数 item：要添加的元素从start开始
arr.splice(start,deleteCount,item1,item2)
-
删除或添加元素来修改源数组 ，返回被修改的内容。此方法
会改变原数组- 添加
var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 0, "drum"); console.log(removed)//[] console.log(myFish)// ["angel", "clown", "drum", "mandarin", "sturgeon"]- 替换
var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 1, "drum"); console.log(removed)//["mandarin"] console.log(myFish)// ["angel", "clown", "drum", "sturgeon"]- 删除
var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 1); console.log(removed)//["mandarin"] console.log(myFish)// ["angel", "clown", "sturgeon"]
5.数组的查找索引方法
5.1 indexOf
//语法 searchValue:要被查找的元素 fromIndex：开始查找的位置 从左往右查找
arr.indexOf(searchValue,fromIndex)
-
返回 第一次出现的指定值的
索引，如果未能找到则返回-1var array = [2, 5, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1 array.indexOf(9, 2); // 2 array.indexOf(2, -1); // -1 array.indexOf(2, -3); // 0
5.2 lastIndexOf
//语法 searchValue:要被查找的字符串值 fromIndex：开始查找的位置 从右往左查找 (该索引仍是以从左至右0开始记数的)
arr.lastIndexOf(searchValue,fromIndex)
-
返回 最后一次出现的指定值的
索引，如果未能找到则返回 -1//区分大小写 var array = [2, 5, 9, 2]; var index = array.lastIndexOf(2); // index is 3 index = array.lastIndexOf(7); // index is -1
5.3 includes
//语法 valueToFind:要查找的元素值 fromIndex:从fromIndex 索引处开始查找
arr.includes(valueToFind,fromIndex )
-
用来判定数组中
是否包含一个指定的值 ,如果包含则返回true ，否则返回false注意使用includes()比较字符串和字符时是区分大小写的。[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false //fromIndex大于数组的长度，则直接返回false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true
5.4 find
//语法 item:当前元素 、index:当前索引、arr:源数组、this:指向
arr.find((item,index,arr)=>item>2)
-
用于遍历数组找出第一个符合条件的数组成员的
值，如果没找到返回undefinedlet ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意:匹配第一次出现的值 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found);//12
5.5 findIndex
//语法 item:当前元素 、index:当前索引、arr:源数组、this:指向
arr.findIndex((item,index,arr)=>item>3)
-
用于遍历数组找出第一个符合条件的数组成员的
索引，如果没找到则返回-1let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2
总结: 查找数组中，符合条件的数组成员的索引，如果没有找到一般返回是
-1
6.数组的排序
6.1 sort
//语法 : firstE1 第一个比较的元素 secondE2第二个比较的元素
Array.sort((firstE1,secondE2)=>firstE1-secondE2)
-
对数组的元素进行排序，并返回数组。请注意，数组原地排序，并且不进行复制
//如下是升序 let numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b) => a - b); console.log(numbers); // [1, 2, 3, 4, 5] //如下是降序 let numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b) => b - a); console.log(numbers); // [5, 4, 3, 2, 1]
6.2 reverse
//语法 arr.reverse()
-
方法将数组中元素的位置颠倒，并返回该数组
a.reverse(); console.log(a); // [3, 2, 1]
6.3 随机排序
function compate(){
return Math.random()-0.5;
}
arr.sort(compate())
7.将伪数组转换成真数组
7.1 from
//语法 arrayLike：想要转换成数组的伪数组对象或可迭代对象。 mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数。
Array.from(arrayLike，mapFn)
-
将伪数组 或可迭代对象创建一个新的，浅拷贝的数组实例。
console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6]
8 将一组值转换成数组
8.1 of
// 语法 将一组值 转换成数组
// empty:一组值
Array.of(empty)
- 该方法将一组值转换成数组
console.log(Array.of(5,6,7)); // [5,6,7] console.log(Array.of('a','b','c')); // ['a','b','c'] console.log(Array.of(7)); // [7]
8.2 Array
//语法 将一组值 转换成数组
// empty：一组值
Array(empty)
-
该方法将一组值转换成数组
console.log(Array('a','e','f')); //['a','e','f'] //创建一个长度为7的空数组 console.log(Array(7) ; // [empty*7] -
fo与Array区别Array.of()和Array()构造函数之间的区别在于处理整数参数Array.of(7)创建一个具有单个元素7的数组，而Array(7)创建一个长度为7的空数组//创建一个具有单个元素7的数组 console.log(Array.of(7)); // [7] //创建一个长度为7的空数组 console.log(Array(7) ; // [empty*7]
9.检测数组
9.1 isArray
//语法 obj 需要检测的值
Array.isArray(obj)
- 用于确定传递的值是否为一个 Array
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);
// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype }); console.log(Array.isArray([1, "花森", "hs"])// 下面的函数调用都返回 trueArray.isArray([]);Array.isArray([1]);Array.isArray(new Array());Array.isArray(new Array('a', 'b', 'c', 'd'))// 鲜为人知的事实：其实 Array.prototype 也是一个数组。Array.isArray(Array.prototype);// 下面的函数调用都返回 falseArray.isArray();Array.isArray({});Array.isArray(null);Array.isArray(undefined);Array.isArray(17);Array.isArray('Array');Array.isArray(true);Array.isArray(false);Array.isArray(new Uint8Array(32))Array.isArray({ __proto__: Array.prototype });ray.isArray(9)); //false
