目录
箭头函数有什么作用?
箭头函数是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