ES6语法快速入门(3)｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第6天 ES6快速入门(3) 接上文介

这是我参与「第四届青训营」笔记创作活动的的第6天

ES6快速入门(3)

接上文介绍到字符串的ES6新扩展

字符串的ES6新扩展

模板字符串

传统的js 输出模板，需要使用字符串拼接的形式，这种写法相当繁琐，且不方便，ES6中引入了模板字符串来解决这个问题

模板字符串是增强版的字符串，使用反引号（``）表示，键盘对应的键位是 英文状态下，ESC正下方的键位。

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量，在末班字符串中使用反引号，表示其前面需要用反斜杠转义。

let name = 'zs'
let age = 18
let str = `${name}今年${age}了
hhh  \`u0000\`
`

嵌入变量，需要将变量名写在 ${} 内，里面还可以嵌入任意的js表达式，可以进行运算。

函数的扩展

函数参数的默认值

在ES6之前的版本，一版为了避免函数参数没有被赋值而报错，通常需要先判断参数x是否被赋值，如果没有再令其等于默认值。

x = x || 'World' // 空值判断

// 没赋值的判断
if(typeof y === 'undefined'){
    y = 'World'
}

而在ES6的新版本中，允许将函数的参数设置默认值，即直接写在参数定义的后面

function log(x, y = 'world'){
    console.log(x,y);
}

log('hello') // hello world
log('hello', 'China') // hello China

除了写法上更加简洁，ES6的写法还有两个好处；首先，阅读代码的人可以意识到哪些参数是可以省略的；其次，有利于代码优化

另外参数变量是默认声明的，所以不能使用let 或者const 再次声明。

而且设置默认值的参数，应该是函数的尾参数，因为这样比较容易看出到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是无法省略的。

指定了默认值后，函数的length 属性将返回没有指定默认值的参数个数。也就是说，制定了默认值后，length属性将失真。

rest 参数

ES6引入了rest 参数（形式为**"... 变量名"**），用于获取函数的多余参数

在ES6之前，想要使用函数的多余参数只能使用 arguments 对象变量，下面是一个使用rest 参数代替argument 变量的例子

对传入的数进行排序

// argument 变量写法
function sortNumbers(){
    return Array.prototype.slice.call(arguments).sort();
}

// rest 参数的写法
const sortNumbers = (...nums) => nums.sort();

rest 参数的变量代表一个数组，所以数组特有的方法都可以用于这个变量。

下面是利用rest 参数一个改写push操作的方法

function push(array, ...items){
    items.forEach(function(item){
        array.push(item);
        console.log(item);
    })
}

var a = [];
push(a, 1, 2, 3);

rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

函数的length 属性不包括 rest 参数

箭头函数

基本使用

ES6 允许使用“箭头” （=>）定义函数。

例如实现a + b的函数

// 普通函数写法
let f = function add(a, b){
    return a + b;
};

// 箭头函数写法
let f = (a,b) => a + b;

如果箭头函数的代码块部分多于一条语句，就要使用大括号将其括起来，并使用return 语句返回。

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加入括号。

箭头函数也可以与变量解构结合使用，例如下面的例子：

const full  = ({first, last}) => first + ' ' + last;

// 等同于
function full(person){
    return person.first + ' ' + person.last;
}

箭头函数使得表达式更加简洁

const isEven = n => n % 2 == 0;

const square = n => n * n;

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1,2,3].map(function (x){
    return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

// sort 降序排列
var result  = values.sort(function (a,b){
    return a - b;
});

var result  = values.sort((a,b) => a - b);

下面是rest 参数与 箭头函数结合的例子

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5); // [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1, [2,3,4,5]]

注意事项

箭头函数有以下几个使用注意事项。

函数体内的this 对象就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数。也就是说，不可以使用new 命令，否则会抛出一个错误
不可以使用arguments 对象，该对象在函数体内不存在。如果要用，可以用rest 参数代替
不可以使用yield 命令，因此箭头函数不能用作Generator 函数

其中，第一点尤其值得注意。 this对象的指向是可变的，但在箭头函数中它是固定的，会找绑定第一个外层的this。

由于箭头函数没有自己的this，当然也不能使用call（）， apply（）， bind（）这些方法去改变this的指向。

ES6语法快速入门(3)｜ 青训营笔记