ES6学习笔记(五)--函数与对象

原创 2016年06月01日 17:17:11

函数

参数的默认值

基本用法

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

与解构赋值默认值结合使用

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

rest参数(…变量名)

rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中

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

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

扩展运算符(…)

将一个数组转为用逗号分隔的参数序列

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

应用

  • 合并数组
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
  • 与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
  • 符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]

箭头函数(=>)

var f = v => v;

//等价于

var f = function(v) {
  return v;
};

注意

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

对象

Object.assign()

用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

//同名属性,后面覆盖前面
var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

该方法实行的是浅拷贝,即如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用

版权声明:本文为博主原创文章,转载请注明出处。

es6 扩展运算符 三个点(...)

1  含义 扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3]) // 1 2 ...
  • qq_30100043
  • qq_30100043
  • 2016年11月29日 12:55
  • 57071

ES6中的箭头函数的定义和调用方式

基本用法:ES6中允许使用“箭头”(=>)定义函数var f = v => v; 上面代码相当于:var f = function( v ) { return v; }根据箭头函数有参数和无参...
  • itpinpai
  • itpinpai
  • 2016年08月11日 14:43
  • 15541

ES6---es6中函数function的改革

ES6新标对函数的改革绝对让人眼前一亮,箭头函数太有逼格了,参数结合三点运算符,真他么简洁!!!●箭头函数:function add(x,y){return x+y}; ///这是es5中定义函数的写...
  • Wbiokr
  • Wbiokr
  • 2017年03月28日 22:30
  • 3047

ECMAScript6(ES6)标准之对象Object扩展方法及新特性

ES6对于Object也扩增了几个方法 不过最重要的是 ES6扩展了一些语法 比如说允许直接写入变量和函数,作为对象的属性和方法 使我们的对象更加简洁 下面我就来详细说明一下语法扩展简写对象...
  • q1056843325
  • q1056843325
  • 2016年12月21日 20:26
  • 3087

在【ES6】的【Class】中编写属性的取值函数【get】和存值函数【set】时的三点注意事项

可以只编写【get】方法,但是方法名和属性名不能同名,否则在设置这个属性的值时会报“没有【set】方法”的错误。 可以只编写【set】方法,但是方法名和属性名不能同名,否则会报“栈溢出”的错误。 同时...
  • Mr_28
  • Mr_28
  • 2017年12月10日 14:57
  • 58

ES6学习——新的语法:函数参数解构

解构赋值也可以发生在函数传参的时候,ES6中函数参数的灵活性大大提高了。函数参数的解构既可以用数组形式,也可以用对象形式,先看两个简单的例子: function foo( [ x, y ] ) { ...
  • kittyjie
  • kittyjie
  • 2016年01月01日 15:56
  • 6527

自学-ES6篇-对象的扩展

1、属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 var foo = 'bar'; var baz = {foo}; baz // {foo: "bar...
  • wh814071912
  • wh814071912
  • 2016年10月07日 20:11
  • 6385

自学-ES6篇-函数的扩展

1、函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 function log(x, y) { y = y || 'World'; consol...
  • wh814071912
  • wh814071912
  • 2016年10月07日 09:59
  • 2519

ES6 Object Copy

ES6 中对象拷贝方法: 方法一: Object.assign() // 对象浅拷贝, 复制所有可枚举对象 const obj1 = {a: 1}; const obj2 = {b: 2}; // c...
  • HobbitHero
  • HobbitHero
  • 2017年05月19日 17:13
  • 1585

es6 javascript对象方法Object.assign()

1  基本用法 Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。 var target = { a: 1 }; ...
  • qq_30100043
  • qq_30100043
  • 2016年12月01日 16:42
  • 23856
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6学习笔记(五)--函数与对象
举报原因:
原因补充:

(最多只允许输入30个字)