ES6学习笔记（二）：引用数据类型

Array

新增方法

1.Array.from()

将类数组(dom对象 或 arguments)或set\map对象转换为数组

2.Array.of()

将一组值转换为数组,例如Array.of(3,5,7,9) => [3,5,7,9]

3.Array.prototype.copyWithin()

数字内部复制

4.数组实例的find()和findIndex()

例如[1,2,3].find(n => n > 2) // 3

5.数组实例的fill()

使用给定的值填充数组

6.数组实例的entries()，keys()和values()

keys() 遍历数组key值

values() 遍历数组value值

entries() 遍历数组key和value值

7.数组实例的includes()

检测数组中是否含有某个值,返回一个布尔值

数组的空位

注意与undefined区分

Function

设置参数默认值

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

es5:

function doSomething(x){
   x = x || 1;
   console.log(x);
}
doSomething() // 1

es6:

function doSomething(x = 1){
    console.log(x)
}
doSomething() // 1

arguments.length失真的问题

如果设置了默认值,则length失真

length属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。

rest参数也不会计入length属性。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

rest参数

rest参数是一个数组

function push( ...items) {
  console.log(items)
}

push(1, 2, 3); // [1,2,3]

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

扩展运算符...

它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

// ES5的写法
Math.max.apply(null, [14, 3, 77])

// ES6的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

应用:

1.合并数组 [...arr1,...arr2,...arr3]

2.转换字符串为数组 [...'hello] // [ "h", "e", "l", "l", "o" ]

3.实现了Iterator接口的对象转换为数组(注意与Array.from区别)

箭头函数

使用注意点:

1.this指向定义时的对象,非执行时所在的对象

2.不能使用new命令

3.不能使用arguments、super、new.target,可用rest参数

4.不能使用yield命令

var obj = {
  id:42,
  foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);

  }
}
var id = 21;
obj.foo()// id: 42

以上例子中如果不用箭头函数,则结果会是id:21,因为this指向的window。

箭头函数里面根本没有自己的this，而是引用外层的this。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

函数绑定

1.语法:

func::obj 等价于 func.bind(obj)

2.传参数写法

func::obj(...arguments) 等价于 func.bind(obj,...arguments)

3.省略写法

::obj.func 等价于 obj::obj.func

尾调用和尾递归优化

函数参数逗号尾

Object

对象简写

1.只写属性名

2.属性名表达式(字符串拼接)

var foo = '111';
var bar = {foo};
console.log(bar); // {foo:'111'}

新方法

1.Object.is(obj1,obj2) // 判断两个对象是否等价

2.Object.assign() // 对象合并,类似于jQuery的$.extend()

应用:为对象添加属性、克隆对象、合并多个对象、为属性添加默认值

浅拷贝:如果源对象某个属性是引用数据类型,则目标对象拷贝后得到的是该引用。

注意:拷贝嵌套的对象,如果属性名相同,则会替换该属性的值而非添加

属性的可枚举性

以下操作会忽略enumerable为false的属性

1.for...in

2.Object.keys()

3.JSON.stringify()

4.Object.assign()

ES6规定，所有Class的原型的方法都是不可枚举的。

属性的遍历

（1）for...in // 遍历自身的和继承的属性(不含Symbol)

（2）Object.keys(obj) // 遍历对象自身属性,并将所有属性返回为一个数组(不含继承和Symbol)

（3）Object.getOwnPropertyNames(obj) // 返回一个数组,遍历对象自身的所有属性(不含Symbol,包括不可枚举的)

（4）Object.getOwnPropertySymbols(obj) // 返回一个数组，包含对象自身的所有Symbol属性

（5）Reflect.ownKeys(obj) // 返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。

属性遍历的次序规则:

首先:数值的属性，按照数字排序。

其次:字符串的属性，按照生成时间排序。

最后:所有属性名为Symbol值的属性，按照生成时间排序。

Object.setPrototypeOf()，Object.getPrototypeOf()

Object.values()，Object.entries()

Object.values(): 遍历对象,返回所有属性的值组成的数组

Object.entries(): 返回一个数组，成员是对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

Object.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptors