ES6语法

箭头函数

ES6中新增的定义函数的方式。

() => { }

// 箭头函数是用来简化函数定义语法的
const fn = () => {
    console.log(123)
}

在箭头函数中，如果函数体中只有一句代码，且代码的执行结果就是返回值，可以省略函数体的大括号。

// 传统的方式
function sum(num1,num2){
    return num1 + num2;
}

// ES6
const sum = (num1,num2) => num1 + num2;
const result = sum(10,20);
console.log(result)

在箭头函数中，如果形参只有一个，可以省略形参外侧的小括号。

function fn (v){
    return v;
}

const fn = v => alert(v)
fn(20)

箭头函数不绑定this关键字，箭头函数没有自己的this关键字

如果在箭头函数中使用this，this关键字将指向箭头函数定义位置中的this。

const obj = {name: '张三'}
function fn (){
    console.log(this)
    return () => {
        console.log(this)
    }
}

const resFn = fn.call(obj);
resFn();

剩余参数

const sum = (...args) => {
    let total = 0;
    args.forEach( item => total += item );
    return total;
}

console.los(sum(10,20));
console.log(sum(10,20,30));

剩余参数和结构配合使用

let ary1 = ['zhangsan','lisi','wangwu'];
let [s1, ...s2] = ary1;
console.log(s1);
console.log(s2);

Array的扩展方法

扩展运算符（展开语法）

扩展运算符可以将数组拆分成以逗号分隔的参数序列

let ary = ["a","b","c"];
//  ..ary  // "a","b","c"
console.log(...ary)
console.log("a","b","c")

扩展运算符可以应用于合并数组

// 方法一
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1, ...ary2];

// 方法二
ary1.push(...ary2);

将类数组或可遍历对象转换成真正的数组

利用扩展运算符将伪数组转换成真正的数组

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

let oDivs = document.getElementsByTageName('div');
console.log(oDivs)
var ary = [...oDivs];
ary.push('a');
console.log(ary)

构造函数方法：Array.from()

将数组或可遍历对象转换为真正的数组

var arrayLike = {
    "0" : "张三",
    "1" : "李四",
    "2" : "王二",
    "3" : 3
}
var ary = Array.from(arrayLike);
console.log(ary)

方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

var arrayLike = {
    "0" : "张三",
    "1" : "李四",
    "length" : 2
}

var ary = Array.from(arrayLike, item => item * 2 )
console.log(ary)

实例方法 find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let ary = [{
    id : 1,
    name : '张三'
},{
    id : 2,
    name : '李四'
}];
let target = ary.find( item => item.id == 2 );

console.log(target)

实例方法： findIndex()

let ary = [10,20,50];
let index = ary.findIndex( item => item > 15 )
console.log(index)