闲暇之余，将经常使用的数组方法和几种循环方法记录下来，共享给大家，对大家有用的，希望大家动动手指点个赞！谢谢！

数组

1.数组常用操作方法

copyWithin

copyWithin(target,start,end),此方法是将数组中指定位置的元素序列复制到本数组的另一位置。

target： 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。

start： 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。如果 start 被忽略，copyWithin 将会从0开始复制。

end： 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。

[1, 2, 3, 4, 5, 6, 7].copyWithin(0, 3, 6)
// [4, 5, 6, 4, 5, 6, 7]
//从0为索引，将第4个元素开始，到第7个元素前的序列复制到第1个位置处

reduce

此方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

const arr = [1,2,3,4]
const reducer = function (prev,cur){
    return prev + cur
}
const res = arr.reduce(reducer)
console.log(res) // 10

flat

flat([depth])扁平化，无论一个数组里嵌套了多少个数组，flat最后都会把其变成一个一维数组,depth参数可选，默认是1，其代表需要扁平化的深度；

var arr1 = [1, 2, [3, [4],[[6]]]];
arr1.flat();
// [1, 2, 3, Array(1), Array(1)]
arr1.flat(3); 
// [1, 2, 3, 4, 6]

Array.isArray

判断某数据是否一个数组，返回值ture或false

const arr = [1,2,4,8];
console.log(Array.isArray(arr)) // true

push

在数组的末尾插入元素，会改变原数组，返回值是新数组的长度

let arr = ['cat','dog'];
arr.push('bird'); // 3
console.log(arr); // ['cat','dog',bird]

pop

删除数组的末尾元素，会改变原数组，返回值是删除的元素

let arr = ['cat','dog'];
arr.pop(); // 'dog'
console.log(arr); // ['cat']

unshift

在数组的开头插入元素，会改变原数组，返回值是新数组的长度

let arr = ['cat','dog'];
arr.unshift('element'); // 3
console.log(arr); // ['element',cat','dog']

shift

删除数组第一个元素，会改变原数组，返回值是删除的元素

let arr = ['cat','dog'];
arr.shift(); // 'cat'
console.log(arr); // ['dog']

concat

连接两个或两个以上数组，不影响原数组，返回一个新数组；

let arr1 = ['cat'];
let arr2 = ['dog'];
let arr3 = ['bird']
let arr4 = arr1.concat(arr2);
console.log(arr4); // ['cat','dog']
let arr5 = arr1.concat(arr2,arr3);
console.log(arr5); // ['cat','dog','bird']

slice

slice(start,end),start必选参数，end可选参数，截取数组从start到end的数组元素，不包括end，不影响原数组，返回一个新数组；

let arr = [1,2,3,4,5,6];
arr.slice(3); // [4,5,6]
arr.slice(3,5); // [4,5]

splice

splice(index,howmany,item1,.....,itemX))删除数组元素同时也可添加元素，index代表删除元素的起始索引，howmany代表需要删除元素的个数，item代表需要添加的数组元素，会改变原数组，返回删除的元素数组；

let arr = [1,2,3,4,5,6,7,8];
arr.splice(2,3,'cat','dog'); // [3,4,5],从索引2开始删除3个元素，然后添加两个元素'cat'和'dog'
console.log(arr); // [1, 2, "cat", "dog", 6, 7, 8]

sort

对数组进行排序，默认是按照字符编码排序，改变原数组，在遇到数字排序时，需自定义函数；

function sortNum(a,b){
    return a-b;
}
let arr = [100,5,20,1245,87,2,40];
arr.sort(); // [100, 1245, 2, 20, 40, 5, 87] 默认字符编码排序
arr.sort(sortNum); // [2, 5, 20, 40, 87, 100, 1245]

join

将数组分割成字符串，默认以逗号为分隔符；(对应字符串的split方法)

let arr = [10,1001,111]
arr.join(); // "10,1001,111"
arr.join('-'); // "10-1001-111"

reverse

将数组倒序，会改变原数组,返回倒序后的数组；

let arr = [1,2,3];
arr.reverse(); // [3,2,1]

toString

将数组转为字符串，默认以逗号分隔，返回字符串；

let arr = [1,2,3];
arr.toString(); //1,2,3

2.几种循环方法

for循环
for in循环
for of循环
forEach循环
map循环

for循环

最基本的循环，速度最快，效率最高；

let arr = [1,2,3,4,5]
for (let i=0;i<arr.length;i++){
    console.log(arr[i]); 
}
输出：
1
2
3
4
5

for in 循环

此方法用来遍历对象，不光可以遍历对象的自身的成员属性，还可以遍历对象的原型属性；

let obj = {a:1,b:2,c:3};
for (let i in obj){
    console.log(i,obj[i]);
}
输出：
a,1
b,2
c,3

for of 循环

此方法为ES6新增的循环方法，它避开了for-in的所有缺陷，可以正确响应break,continue,return语句，for-of循环可以支持数组，也可以支持大多数类数组对象，但它有个特殊地方就是没有索引index；

let arr = ['a','b','c'];
for (let item of arr){
    console.log(item);
}
输出：
a
b
c

forEach循环

此方法为ES6新增的循环方法，改变原数组，没有return值，break无法跳出循环；

let arr = ['cat','dog','bird'];
arr.forEach(function(item,index,brr){
    console.log(item,index,brr); 
})
输出：
'cat' 0 ['cat','dog','bird']
'dog' 1 ['cat','dog','bird']
'bird' 2 ['cat','dog','bird']

map循环

此方法为ES6新增的循环方法，不改变原数组，返回一个新数组，有return值，break无法跳出循环；

let arr = ['cat','dog','bird'];
let newArr = arr.map(function(item,index,brr){
    console.log(item,index,brr); 
    return item;
})
console.log(newArr)
输出：
'cat' 0 ['cat','dog','bird']
'dog' 1 ['cat','dog','bird']
'bird' 2 ['cat','dog','bird']
['cat','dog','bird']

注意：

对象是不可以用for...of进行遍历的，但是项目也会看到有些对象使用了for...of遍历，why？那么先来看看for...of的定义：The for...of statement creates a loop iterating over iterable objects 意思就是可以遍历可迭代的对象，所以可以给对象加一个迭代属性即可使用for...of遍历对象，还有使用Map可以构建类对象结构，也可使用for...of

3.一些应用场景

数组对象sort()

有的业务需求将一个数组中包含对象的数据按照对象中的某个属性去排序，可配合sort 和自定义函数实现，见代码；

function sortObj(a,b){
    return a.order-b.order;
}
let data = [
    {
        name:'haier',
        order:4
    },{
        name:'ming',
        order:2
    },
    {
        name:'joy',
        order:34
    },
    {
        name:'ling',
        order:12
    }
]
console.log(data.sort(sortObj));
输出：[
 {name: "ming", order: 2},
 {name: "haier", order: 4},
 {name: "ling", order: 12},
 {name: "joy", order: 34}
]

查找与过滤

filter 会找出所有满足条件的值

例：将不包含2的过滤出来

let arr = ['123','290','3334','524']
let newArr = arr.filter((item,index)=>item.indexOf('2')<0)
console.log(newArr); // ['3334']

find 查找元素，返回找到的值，找不到返回undefined，找出第一个满足值就结束

let arr1 = [10, 20, 30, 40, 50]
let ret1 = arr1.find((value, index, brr) => {
  return value > 30
})
console.log(ret1); // 40

findIndex 查找元素，返回找到的index，找不到返回-1，找出第一个满足值就结束（第一个参数是callback，用于复杂数据类型）

let arr2 = [10, 20, 30, 40, 50]
let ret2 = arr2.findIndex((value, index, brr) => {
  return value > 30
})
console.log(ret2); // 3

indexOf 方法可返回数组或某个指定的字符串值在字符串中首次出现的位置（第一个参数是value，用于原始数组，使用strict equality判断）

let arr = ["1","1","2","2","3"];
let res = arr.indexOf("2");
console.log(res); // 2而不是3，只返回首次出现的位置，可用于过滤、数组去重

includes(searchElement,fromIndex) 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

searchElement:必选参数，查找的元素，fromIndex：可选参数，从当前索引开始查找，默认为0

let arr = [1,2,3,4,5];
arr.includes(2); // true
arr.includes(2,3); // false

数组去重几种实现

1.Set方法去重（ES6）

let arr = [1,1,2,2,3,4,true,true];
let temp = new Set(arr)；// 去重
let res1 = Array.from(temp); 将set转为数组
let res2 = [...temp]; 通过ES6中的...扩展符将set转为数组
console.log(res1); // [1, 2, 3, 4, true]
console.log(res2); // [1, 2, 3, 4, true]

2.两层for循环去重

function handleArray(arr){            
    for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
            if(arr[i]==arr[j]){         
                arr.splice(j,1);
                j--;
            }
        }
    }
return arr;
 
}
let arr1 = [1,1,2,2,3,4,true,0,{},null,NaN,undefined];
let res = handleArray(arr1); // true和undefined都没了，如下
console.log(res);// [1, 2, 3, 4, 0, {…}, null, NaN]

3.filter+indexOf去重

let arr = [1,1, 2, 2, 3, 4, 5, 5];
let arr2 = arr.filter((item, index,brr)=>brr.indexOf(item)===index)  
console.log(arr2); //[1, 2, 3, 4, 5]

4.reduce+includes去重

function handleArray(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
let arr1 = [1,1,2,2,3,4,true,true,0,{},{},null,null,NaN,NaN,undefined,undefined];
console.log(handleArray(arr1));
// [1, 2, 3, 4, true, 0, {…}, {…}, null, NaN, undefined]

数组扁平化的几种实现

for...of 实现

function flatten(arr, result = []) {
    for (let item of arr) {
        if (Array.isArray(item))
            flatten(item, result)
        else
            result.push(item)
    }
    return result
}

生成器实现

function* flat(arr) {
  for (let item of arr) {
    if (Array.isArray(item))
      yield* flat(item)
    else
      yield item
  }
}

function flatten(arr) {
  let result = []
  for (let val of flat(arr)) {
    result.push(val)
  }
  return result
}

reduce 三句实现法

function flatten(arr) {
  return arr.reduce((flat, toFlatten) => {
    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
  }, []);
}

（细心整理）一些常用的js方法集合（持续更新中）

数组