ES6的学习(上)

变量/赋值

1、新增定义变量的关键字let和const，与var的不同点：
    (1)、拥有块级作用域；
    (2)、不能够重复声明；
2、拥有块级作用域，无需闭包

//var变量定义的方式只有函数作用域，需要使用闭包解决以下问题
var btnArr = document.getElementsByTagName("input");
for(var i=0;i<btnArr.length;i++){
    (function(i){
        btnArr[i].onclick = function(){
        alert(i);
        }
    })(i)
}
//let存在块级作用域
let btnArr = document.getElementsByTagName("input");
for(let i=0;i<btnArr.length;i++){
    (function(i){
        btnArr[i].onclick = function(){
        alert(i);
        }
    })
}

3、解构赋值
    (1)、左右两边必须一致，右边的是一个合法的东西；
    (2)、必须定义和赋值同步完成；

函数

原先的方式

function (参数,参数){
    函数体
}

箭头函数

(参数,参数) => {
    函数体
}

    (1)、有且仅有一个参数时，()可以省略
    (2)、如果函数体只有一句话并且是return语句，{}可以省略

默认参数

原先的方式

function show(a,b,c){
    b = b||5;
    c = c||12;
    console.log(a,b,c);
}
show(12);
输出结果是：12,5,12
show(12,54,65)
输出结果是：12,54,65

es6的新的方式

function show(a,b=5,c=12){
    console.log(a,b,c);
}
show(12);
输出结果是：12,5,12
show(12,54,65)
输出结果是：12,54,65

参数展开

两个用途：
    (1)、可以用于剩余参数的接收，必须放在参数的最后位置，是一个数组

function show(a,b,...args){
    console.log(args);
}
show(45,4,50,52,12,5,4)
输出结果是：[50,52,12,5,4]

    (2)、可以用于将数组进行展开操作

let arr = [1,2,3];
let arr2 = [45,...arr,897];
console.log(arr2);
输出结果是：[45,1,2,3,897];

数组/json

数组的方法

    (1)、map，映射，一一对应的关系,
有返回值，返回的是操作过后的值，如果没有相关的操作，返回的值是undefined

let arr = [1,2,3,4];
let arr1 = arr.map(item => item*2);
console.log(arr1);
输出结果是：[2,4,6,8]

    (2)、fliter，过滤筛选，按照设置的条件过滤相关元素,有返回值，满足条件则返回该元素，注意:返回的是原先数组里面满足条件的元素

//筛选数组里面的奇数
let arr = [1,2,3,4,5,6];
let arr1 = arr.filter(item => item%2;)
console.log(arr1);
输出结果是：[1,3,5];

    (3)、forEach，遍历，遍历数组进行相关的操作，相当于for循环
    (4)、reduce，汇总，进去一堆 => 出来一个,有三个参数，分别是中间变量，当前结果，索引，有返回值，返回值会被当做中间变量的值重新加入计算

//用reduce计算数组的平均值
let arr = [12,5,54,64,6,78,54,56,464,45,11]；
let ave = arr.reduce((temp,item,index) => {
    if(index < arr.length-1){
        return temp+item;
    }else{
        return (temp+item)/arr.length;
    }
})
console.log(ave);
输出结果是：77.18181818181819

    (5)、from，将伪数组(array like)处理成为数组，使其可以使用数组的相关方法进行处理

json的变化

    (1)、简写，值和名字一样的可以省略

let [a,b] = [13,2];
let obj = {a,b};
console.log(obj);
输出结果是：{a: 12, b: 3}

    (2)、function可以省略

//以前的方式：
let obj = {
    a: 1,
    b: 3,
    show: function(){
        console.log(this.a + this.b);
    }
}
obj.show();
输出结果是：4
let obj = {
    a: 1,
    b: 3,
    show(){
        console.log(this.a + this.b);
    }
}
obj.show();
输出结果是：4

字符串

字符串模板(反单引号`)

可以植入变量和任意换行

let json = {
    name: "张三",
    age: 20
}
console.log(`我的名字是${json.name},我的年龄是${json.age}岁`);
输出结果是：我的名字是张三,我的年龄是20岁

startsWith和endsWith

判断字符串是什么开头或者以什么结尾的，返回的是布尔类型

面向对象

ES6以前的js的面向对象实现

//官方没有特定的实现方式，通过构造函数的形式实现
function Person(name,age){
    this.name = name;
    this.age = age;
}
//通用的方法放在原型对象的属性上
Person.prototype.showName = function(){
    alert(this.name);
}
Person.prototype.showAge = function(){
    alert(this.age);
}
//原先的继承实现方式通过call来完成
function Worker(name,age,job){
    Person.call(this,name,age);
    this.job = job;
}
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob = function(){
    alert(this.job);
}
let worker = new Worker("张三",20,"工人");
worker.showName();
worker.showAge();
worker.showJob();

ES6新的面向对象的实现方式

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showName(){
        alert(this.name);
    }
    showAge(){
        alert(this.age);
    }
}
//子类继承
class Worker extends Person{
    constructor(name,age,job){
        //超类
        super(name,age);
        this.job = job;
    }
    showJob(){
        alert(this.job);
    }
}
let worker = new Worker("李四",20,"工人");
worker.showName();
worker.showAge();
worker.showJob();

this指向

    (1)、普通函数属于谁调用this指向谁，而箭头函数里面的this指向是由所处的环境所决定的；
    (2)、function里面的bind可以指定方法调用时的this指向