学习

目录

箭头函数有什么作用？

ES6新语法

---

箭头函数有什么作用？

箭头函数是ES6中引入的新特性，使用方法为：

()=>{console.log(this)}

其中()内是要带入的参数，{}内是要执行的语句。箭头函数是函数式编程的一种体现，函数式编程将更多的关注点放在输入和输出的关系，省去了过程的一些因素，因此箭头函数中没有自己的this，arguments，new target（ES6）和 super(ES6)。箭头函数相当于匿名函数，因此不能使用new来作为构造函数使用。

箭头函数中的this始终指向其父级作用域中的this。换句话说，箭头函数会捕获其所在的上下文的this值，作为自己的this值。任何方法都改变不了其指向，如call(), bind(), apply()。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用，它与调用时的上下文无关。

 

ES6新语法

函数默认值

function test(num=5){
    console.log(num);
  }

调用此方法，如果传值则显示传的值，如果不传值，则默认为5
test(1)   1
test()    5

箭头函数

//原来写法
function add(x,y) {
  return x + y;
}

//另一种写法
add1 = function (x,y) {
    return x + y;
}

//ES6 箭头函数
add2 = (x,y) => {
    return x + y;
}

//ES6 箭头函数  省略return和括号
add3 = (x,y) =>  x + y;


console.log(  add(1,2)  )    //结果：3
console.log(  add1(1,2)  )    //结果：3
console.log(  add2(1,2)  )    //结果：3
console.log(  add3(1,2)  )    //结果：3

对象初始化

//创建一个函数 传两个参数name和age，返回包含name和age的对象

//ES5
function people(name, age) {
    return {
        'name':name,
        'age':age
    }
}

//ES6  对象名默认为参数名
function people2(mingzi, age) {
    return {
        mingzi,
        age
    }
}

let str = JSON.stringify(people("mrZhou",18));
console.log(str)  //{"name":"mrZhou","age":18}

let str2 = JSON.stringify(people2("mrZhou",18));
console.log(str2)  //{"mingzi":"mrZhou","age":18}

解构，与对象初始化是逆向操作

/**
     ====================== 对象解构 ======================
     */
    const Tom = {
        name: 'Tom',
        age: 25,
        family: {
            mother: 'mama',
            father: 'baba',
            brother: 'didi',
        },

    };

    const {name:mz,age:nl} = Tom;
    console.log(`${mz}----${nl}`);  //Tom----25

    //给对象中不存在的 或者明确值为undefind的对象赋值
    const {mother:m,father:f,brother:b,sister:s='have no sister'} = Tom.family;
    console.log(`${m}----${f}----${b}----${s}`);  
    //mama----baba----didi----have no sister

    //嵌套对象
    const {name:mm,age:nn,family:{mother,father}} = Tom;
    console.log(`${mm}----${nn}----${mother}----${father}`);  
    //mama----baba----didi----have no sister

/**
     ====================== 数组结构 ======================
     */

    const numbers = ['yi','2','san','four'];

    //取第一位和第三位的值  中间多加个逗号
    const [aa,,bb] = numbers;
    console.log(aa,bb);  //yi san

    //获取第一位和第二位，并将剩下的变成新的数组  ...rest一定要在最后
    const [one,two,...rest] = numbers;
    console.log(one,two,rest);    //yi 2 Array(2)

    //给undefind赋予新的值
    const [cc,dd,ee,ff,gg='5'] = numbers;
    console.log(cc,dd,ee,ff,gg);    //yi 2 san four 5

    /*
   ======================  交换变量  ======================
     */

    let num1 = 10;
    let num2 = 20;

   [num1,num2] = [num2,num1];

    console.log(num1,num2);  //20 10

spreadOperator 扩展运算符

剩余参数,

扩展运算符：把一个可遍历对象的每个元素扩展为一个新的参数序列

可遍历对象：部署了iterator接口的，可以用for of循环的数据类型，
    包括字符串，数组，dom,node,arguements对象以及 mark set


//扩展运算符把可遍历对象的每一个元素扩展成一个新的参数序列，而不会改变原来的数组

 const youngers = ['George','John','Thomas'];
    const olders = ['James','Adrew','Martin'];

    //将两个数组合并
    let members = youngers.concat(olders);
    console.log(members);
    //["George", "John", "Thomas", "James", "Adrew", "Martin"]
    
    //往数组中添加成员
    members.push("zhouran")
    console.log(members);
    // ["George", "John", "Thomas", "James", "Adrew", "Martin", "zhouran"]


    //用扩展运算
    let members2 = [...youngers,...olders]
    console.log(members2);
    //["George", "John", "Thomas", "James", "Adrew", "Martin"]

    
    //往数组中 合并的同时添加成员
    let members3 = [...youngers,...olders,'zhouran']
    console.log(members3);
    //["George", "John", "Thomas", "James", "Adrew", "Martin", "zhouran"]

    //还可以合并对象
    const people = {"name":"George","age":18};
    const person = {...people,"sex":"woman"}
    console.log(person);
    //{name: "George", age: 18, sex: "woman"}

Babe转换器安装与配置

由于node8版本不支持部分es6语法，所以要下载转换器

编写一个配置文件 babelrc  没有后缀
里面写上
{
    "presets":["es2015"]
}

然后回到根目录下运行
运行cnpm install babel-preset-es2015 --save-dev 下载依赖

再下载一个命令行工具
cnpm install babel-cli -g

模块导入导出

//ES5
//导出
exports.add=function (a,b) {
    return a+b;
}
//导入
var jia = require("./exportDemo");
console.log(jia.add(1,2));


//ES6