es6查询满足条件的数组 es 查询数组

es5、es6数组方法indexOf()：该方法从数组的开头开始向后查找,查到返回下标,查不到返回-1
indexOf(searchElement, fromIndex)
fromIndex 可选
开始查找的位置。
如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。
如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，
-2表示从倒数第二个元素开始查找 ，
以此类推。 
注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。
如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.
如

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

lastIndexOf()： 该方法从数组的末尾开始向前查找,查到返回下标,查不到返回-1
如indexof一样，有fromindex值，从此位置开始逆向查找。
默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。
如果该值大于或等于数组的长度，则整个数组会被查找。
如果为负值，将其视为从数组末尾向前的偏移。
即使该值为负，数组仍然会被从后向前查找。
如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
1.forEach():对数组的每个元素执行一次给定的函数。不会改变原数组
第一个参数是一个函数，他接收三个参数，数组当前项的值、当前项在数组中的索引、数组对象本身。
第二个参数是执行第一个函数参数的作用域对象，也就是上面说的函数中this所指向的值,如果为空则指向window。
这几种方法都不会改变原数组。
forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。
map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。
这样的优点在于你可以使用filter(), reduce()等组合使用forEach方法可以写四个参数

arr.forEach(function(item,index,arr) {
 console.log(item,index,arr,this)
 },this.arr)

使用this.arr有三种情况
若是在vue中使用箭头函数的foreach则this指向vuecomponents
若使用箭头函数，foreach中的this则指向window
若使用函数则foreach中的this指向下方的this.arr
这四个值分别是数组当前项的值，数组当前项的索引，数组对象本身
forEach还有this.arr 可选,当执行回调函数 callback 时，用作 this 的值。
可以将for循环转换为forEach

const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// after
items.forEach(function(item){
  copy.push(item);
});

2.map():该方法对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
  正常情况下，需要配合return，返回一个新数组，若是没有return相当于forEach

var obj = {
    a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.map(function(item,index,arr){
    console.log(item,index,arr,this)
    return item+1
},obj)
console.log(result)
result为[12，23，34，45，56]

3.filter():该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
利用这个方法可对数组元素进行过滤筛选

var obj = {
    a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.filter(function(item,index,arr){
    console.log(item,index,arr,this)
    if(item>22) 
    return true;
},obj)
console.log(result)
result为[33,44,55]

与上面一样this指向后面的obj
4.some(): 该方法对数组中的每一项运行给定函数，如果该函数对任何一项返回 true，则返回true,且终止循环.
some() 被调用时不会改变数组。

var obj = {
    a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.some(function(item,index,arr){
    console.log(item,index,arr,this)
    return item>22
},obj)
console.log(result)

当item为33时返回true，循环终止，result为true
5.every():与some相反，该方法对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回true.
只要有一项返回false,则终止循环.

var obj = {
    a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.every(function(item,index,arr){
    console.log(item,index,arr,this)
    return item>11
},obj)
console.log(result)

result为false

归并方法:这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。
他们都接收两个参数，第一个参数是每一项调用的函数，函数接受是个参数分别是初始值，当前值，索引值，和当前数组，
函数需要返回一个值，这个值会在下一次迭代中作为初始值。
第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算
1.reduce():该方法从数组的第一项开始，逐个遍历到最后一项.

var arr = [11,22,33,44,55]
var result = arr.reduce(function(pre,cur,index,arr){
    console.log(pre,cur,index,arr)
    return pre+cur
})
console.log(result)
11 22 1 (5) [11, 22, 33, 44, 55]
33 33 2 (5) [11, 22, 33, 44, 55]
66 44 3 (5) [11, 22, 33, 44, 55]
110 55 4 (5) [11, 22, 33, 44, 55]

165
pre是上一次调用回调时返回的累计值，cur为数组中正在处理的元素
也就是从第一项11开始遍历arr数组11 + 22 + 33 + 44 + 55最后得出result为165  

var arr = [11,22,33,44,55]
var result = arr.reduce(function(pre,cur,index,arr){
    console.log(pre,cur,index,arr)
    return pre+cur
}，1)
console.log(result)

在末尾可选参数1，会使遍历结果+1
arr.reduce()拓展(高级用法)
（1）计算数组中每个元素出现的次数

let names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1
  }
  return pre
},{})
console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }
（2）数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（3）将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
2.reduceRight():从右到左遍历,归并.

var arr = [11,22,33,44,55]
var result = arr.reduceRight(function(pre,cur,index,arr){
    console.log(pre,cur,index,arr)
    return pre+cur
})
console.log(result)

把累加顺序颠倒从最后一项开始加到第一项

concat()
concat() 方法用于连接两个或多个数组。
concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var Volvo = sedan.concat(SUV);
Volvo = [S60,S90,XC40,XC60,XC90]

arr.push()
从数组尾部添加元素，返回值为添加完后的数组的长度
如果是使用同一个数组则需要清空后再往其中添加数据

arr.pop()
从数组尾部删除元素，只能是一个，返回值是删除的元素

arr.shift()
从数组头部删除元素，只能是一个，返回值是删除的元素

arr.splice(i,n)
删除从i(索引值)开始之后的那个元素。返回值是删除的元素
i
指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
n 可选
整数，表示要移除的数组元素的个数。
如果 n大于 i之后的元素的总数，则从 i后面的元素都将被删除（含第 i位）。
如果 n被省略了，或者它的值大于等于array.length - i(也就是说，如果它大于或者等于i之后的所有元素的数量)，那么i之后数组的所有元素都会被删除。
如果 n是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
item1, item2, ... 可选
要添加进数组的元素,从i位置开始。如果不指定，则 splice() 将只删除数组元素。

let arr = [1,2,3,4,5]
 console.log(arr.splice(2,2))     //[3,4]
 console.log(arr)    // [1,2,5]str.split()

将字符串转化为数组

let str = '123456'
 console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]arr.sort()

将数组进行排序,返回值是排好的数组，默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的
compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。
如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。
备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

var numbers = [4, 2, 5, 1, 3];
 numbers.sort(function(a, b) {
   return a - b;
 });
 console.log(numbers);

numbers结果为[1, 2, 3, 4, 5]

arr.reverse()
将数组反转,返回值是反转后的数组

let arr = [1,2,3,4,5]
 console.log(arr.reverse())    // [5,4,3,2,1]
 console.log(arr)    // [5,4,3,2,1]

arr.slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝，包括 begin，不包括end
原始数组不会被改变。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
 var citrus = fruits.slice(1, 3);// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
 // citrus contains ['Orange','Lemon']Array.from()

将伪数组变成数组，就是只要有length的就可以转成数组。 ---es6
Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike
想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选
如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg 可选
可选参数，执行回调函数 mapFn 时 this 对象。
Array.from() 方法有一个可选参数 mapFn，让你可以在最后生成的数组上再执行一次 map 方法后再返回。
也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。
这对一些数组的子类,如 typed arrays 来说很重要, 因为中间数组的值在调用 map() 时需要是适当的类型。

let str = '12345'
 console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
 let obj = {0:'a',1:'b',length:2}
 console.log(Array.from(obj))   // ["a", "b"]

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数：
Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7]
 Array.of(1, 2, 3); // [1, 2, 3]arr.copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
参数:
target --必选 索引从该位置开始替换数组项
start --可选 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读。
end --可选 索引到该位置停止读取的数组项，默认是Array.length,如果是负值，表示倒数

var arr = [11, 22, 33, 44, 55];
 console.log(arr.copyWithin(1,3))

结果为[11, 44, 55, 44, 55]

arr.find
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

var arr = [11, 22, 33, 44, 55, 45,46,47,48,49];
 var find = arr.find((element,index) => element > 10 && index >3)
 console.log(find)

结果为55

arr.findIndex(callback）
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

arr.fill(target, start, end)
使用给定的值，填充一个数组,ps:填充完后会改变原数组
参数：
target -- 待填充的元素
start -- 开始填充的位置-索引
end -- 终止填充的位置-索引 end值不应小于start

var arr = [11, 22, 33, 44, 55, 45,46,47,48,49];
 let arr2 = arr.fill(5,2,4)
 console.log(arr2)

结果为 [11, 22, 5, 5, 55, 45, 46, 47, 48, 49]

arr.includes()
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
与indexOf()的区别：
indexOf()返回的是数值，而includes()返回的是布尔值
indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断
参数
valueToFind
需要查找的元素值。

Note: 使用 includes()比较字符串和字符时是区分大小写的。
fromIndex 可选
从fromIndex 索引处开始查找 valueToFind。
如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

arr.keys()
keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

let arr = [1,2,3,4]
 let arr2 = arr.keys()
 for (let key of arr2) {
     console.log(key);   // 0,1,2,3
 }arr.values()

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

let arr = [1,2,3,4]
 let arr1 = arr.values()
 for (let val of arr1) {
      console.log(val);   // 1,2,3,4
 }arr.entries()

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

var arr1 = ["a", "b", "c"];
 var iterator = arr1.entries();
 console.log(iterator);

iterator结果为Array Iterator {}需要加上next()方法

console.log(iterator.next());

结果则为

{value: Array(2), done: false}
 done: false
 value: (2) [0, 'a']
 [[Prototype]]: Object
 // iterator.next()返回一个对象，对于有元素的数组，
 // 是next{ value: Array(2), done: false }；
 // next.done 用于指示迭代器是否完成：在每次迭代时进行更新而且都是false，
 // 直到迭代器结束done才是true。
 // next.value是一个["key","value"]的数组，是返回的迭代器中的元素值。
 var arr = ["a", "b", "c"];
 var iter = arr.entries();
 var a = [];// for(var i=0; i< arr.length; i++){   // 实际使用的是这个
 for(var i=0; i< arr.length+1; i++){    // 注意，是length+1，比数组的长度大
     var tem = iter.next();             // 每次迭代时更新next
     console.log(tem.done);             // 这里可以看到更新后的done都是false
     if(tem.done !== true){             // 遍历迭代器结束done才是true
         console.log(tem.value);
         a[i]=tem.value;
     }
 }console.log(a);                         // 遍历完毕，输出next.value的数组