------------------------------------------------------------------------
字符串连接:
之前:
var str='';
var str=""
反单引号: var str= `` 字符串模板
之前: 'abc'+变量名+'ef'
现在: `abc${变量名}ef`
------------------------------------------------------------------------
数组
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。字符串也是可遍历的对象
Array还具有map功能
Array.from([1,2,3], (x) => x * x);
ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。
它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,
唯一的区别是keys()是对键名的遍历、
values()是对键值的遍历,
entries()是对键值对的遍历。
函数的扩展
1 函数参数的默认值
在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
function log(x,y){
y = y || "hello world!";
console.log(x, y);
}
es6允许函数为参数设置默认值,即直接写在参数定义的后面。
function log(x, y = "world"){
console.log(x,y);
}
除了简洁,ES6函数默认值的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接口中,彻底拿掉这个参数,也不会导致以前的代码无法运行。
----------------------
2 rest参数
ES6 引入 rest 参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
3 扩展运算符
扩展运算符(spread)是三个点(...
)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
应用:
(1)合并数组
var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e'];
// ES6的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
(2)与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
(3)函数的返回值
JavaScript的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。
var dateFields = readDateFields(database); var d = new Date(...dateFields);
上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date
。
(4)字符串
[...'hello'] // [ "h", "e", "l", "l", "o" ]
(5)Map和Set结构,Generator函数
扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对象,都可以使用扩展运算符,比如Map结构。
let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); let arr = [...map.keys()]; // [1, 2, 3]
Generator函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。
var go = function*(){ yield 1; yield 2; yield 3; }; [...go()] // [1, 2, 3]
4 箭头函数
ES6允许使用“箭头”(=>
)定义函数。
var f = v => v;
上面的箭头函数等同于:
var f = function(v) { return v; };
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return
语句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; }
使用注意点
箭头函数有几个使用注意点。
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new
命令,否则会抛出一个错误。
(3)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield
命令,因此箭头函数不能用作Generator函数。