es6笔记之七-数组（内含es5新增部分）

数组

循环方法

1.for(let i=0;i<arrived.length;i++){}

2.while

3.arr.forEach() 代替普通for循环，好用

var arr=['apple','orange','strawberry'];
arr.forEach(function(val,index,arr){ 
    console.log(val,index,arr);//三个参数分别是值，索引，和原数组
})

以下几个方法（从forEach开始到every()）用法类似，它们都可以接收两个参数:
arr.forEach/map...(
function(val,index,arr){}, //循环回调函数
this指向谁 //改变this指向，默认指向window，使用该参数几率很小
);
实际工作中用的最多的还是forEach和map

arr.forEach(function(val, index, arr){
    console.log(this, val, index, arr);//123,apple 0 [...] ; 123 banana 1 [...]
},123);//改变了指向，默认this是指向window

等同于

arr.forEach(function(val, index, arr){
    console.log(this, val, index, arr);//123,apple 0 [...] ; 123 banana 1 [...]
}.bind(123));

注意：用箭头函数再用第二个参数无效

arr.forEach((val, index, arr)=>{
    console.log(this, val, index, arr);//this为window，箭头函数内的this指向永远是它定义时的对象
},123);

4.arr.map()
非常有用，做数据交互 "映射"
正常情况下，需要配合return，返回一个新的数组
若是没有return，相当于forEach
注意：平时只要用map，一定是要有return

let arr1 = [
    {title:'aaaaa', read:100, hot:true},
    {title:'bbbb', read:100, hot:true},
    {title:'cccc', read:100, hot:true},
    {title:'dddd', read:100, hot:true}
];
let newArr = arr1.map((item, index, arr)=>{
    console.log(item, index, arr);
    let json={}
    json.t = `^_^${item.title}-----`;
    json.r = item.read+200;
    json.hot = item.hot == true && '真棒!!!';
    return json;
    //return 1;
});
console.log(newArr);//[obj,obj,obj,obj]

工作中实际应用，重新整理数据结构:名字（key）变了，值（value）不变
[{title:'aaa'}] -> [{t:'aaaa'}]
5.arr.filter()
过滤，过滤一些不需要的“元素”， 如果回调函数返回true，就留下这些数据

let arr1 = [
    {title:'aaaaa', read:100, hot:true},
    {title:'bbbb', read:100, hot:false},
    {title:'cccc', read:100, hot:true},
    {title:'dddd', read:100, hot:false}
];
let newArr1 = arr1.filter((item, index, arr)=>{
    return item.hot==false;
});
console.log(newArr1);//返回了只包含2条hot为false的数据的数组

6.arr.some()
类似查找, 数组里面某一个元素符合条件，返回true

let arr2 =['apple','banana','orange'];
let b = arr2.some((val, index, arr) =>{
    return val=='banana2';//查找是否有符合条件的数据
});

console.log(b);//false

some()的封装应用

function findInArray(arr, item){
    return arr.some((val, index, arr)=>{
        return val==item;
    });
}
console.log(findInArray(arr2, 'orange'));//true

7.arr.every()
数组里面所有的元素都要符合条件，才返回true

let arr3 = [1,3,5,7,9];
let arr4 = [1,3,5,7,9,10];
var b1 = arr3.every((val, index, arr)=>{
    return val%2==1;//判断数组的每一项是否都为奇数
});
var b2 = arr4.every((val, index, arr)=>{
    return val%2==1;
});
console.log(b1);//true
console.log(b2);//false

8.arr.reduce()
应用从左往右，求数组的和、阶乘

let arr5 = [1,2,3,4,5,6,7,8,9,10];
let res = arr5.reduce((prev, cur, index, arr) =>{
    return prev+cur;//prev是每一次的上一个，cur是当前的
});
console.log(res);//55
let arr6 = [2,2,3];
let res1 = arr6.reduce((prev, cur, index, arr) =>{
    return Math.pow(prev,cur);//prev的cur次方
});
console.log(res1);//64

ES2017新增一个运算符：幂Math.pow(2,3) 2 ** 3

//之前
console.log(Math.pow(2,3));
//新增运算符
console.log(2**4);

9.arr.reduceRight()
//从右往左，求数组的和、阶乘

let res2 = arr6.reduceRight((prev, cur, index, arr) =>{
    return prev ** cur;
});
console.log(res2);//81

es6新增
for....of....：
arr.keys() 数组下标
arr.entries() 数组某一项

let arr7 = ['apple','banana','orange','tomato'];

for(let val of arr7){
    console.log(val);//循环遍历出apple banana orange tomato
}
//循环索引
for(let index of arr7.keys()){
    console.log(index);//循环遍历出 0 1 2 3
}
//循环一项
for(let item of arr7.entries()){
    console.log(item);//循环遍历出 [0, "apple"] [1, "banana"] [2, "orange"] [3, "tomato"]
}

for(let [key, val] of arr7.entries()){
    console.log(key,val);//0, "apple" 1, "banana" 2, "orange" 3, "tomato"
}

复习：扩展运算符 ...

<ul>
    <li>11</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
window.onload=function (){
    let aLi = document.querySelectorAll('ul li');
    let arrLi = [...aLi];
    console.log(arrLi);//[li,li,li,li]
    arrLi.pop();//删了一个
    arrLi.push('asfasdf');
    console.log(arrLi);
};

let arr =[1,2,3];
let arr2 = [...arr];
等同于
let arr2 = Array.from(arr);
es6新增数组方法
Array.from:
作用: 把类数组(获取到的一组元素、arguments...) 对象转成数组

//把获取的li dom转成数组
window.onload=function (){
    let aLi = document.querySelectorAll('ul li');
    let arrLi = Array.from(aLi);  //ES6方法
    //let arrLi = [].slice.call(aLi);  //ES5之前方法,空数组把aLicall进去
    arrLi.pop();
    console.log(arrLi);//[li, li, li]
};
//把单独的参数放进数组
function show(){
    let args= Array.from(arguments);
    args.push(6);
    console.log(args);//[1, 2, 3, 4, 5, 6]
}
show(1,2,3,4,5)
//把字符串转成数组
let str = 'Strive';
//let arr = str.split('');//ES5之前方法
let arr8= Array.from(str);
console.log(arr8);//["S", "t", "r", "i", "v", "e"]
//把json对象转成数组
let json ={
    0:'apple',
    1:'banana',
    2:'orange',
    length:3//如果不加length属性转成数组会报错
};
let arr9 = Array.from(json);
console.log(arr9);//["apple", "banana", "orange"]

个人观点： 只要具备 length属性，就可以看成类数组

Array.of(): 把一组值，转成数组

let arr10 = Array.of('apple','banana','orange');
Array.of =function(...args){
    return args;
}
console.log(arr10);//["apple", "banana", "orange"]

arr.find(): 查找，找出第一个符合条件的数组成员，如果没有找到，返回undefined

let arr11 = [23,900,101,80,100];
let res3 = arr11.find((val, index, arr) =>{
    return val>100;//900 返回第一个符合条件的数据
    //return val>1000;//undefined
});
console.log(res3);

arr.findIndex(): 找的是位置， 没找到返回-1

let arr12 = [23,900,101,80,100];
let res4 = arr12.findIndex((val, index, arr) =>{
    return val>100;//1 900的索引
    return val>1000;//-1
});
console.log(res4);//1

arr.fill()
用途是填充数据
格式：arr.fill(填充的东西, 开始位置, 结束位置);

let arr13 = new Array(10);
arr13.fill('默认值')
console.log(arr13);//["默认值", "默认值", "默认值", "默认值", "默认值", "默认值", "默认值", "默认值", "默认值", "默认值"]

let arr14 = new Array(10);
arr14.fill('默认值',1,3);
console.log(arr14);//[empty, "默认值", "默认值",empty x 7]

在ES2016里面新增方法：
arr.indexOf()
arr.includes()
str.includes()

let arr15 = ['apple','banana','orange','tomato'];
let b5 = arr15.includes('orange');
console.log(b5);//true