ES6 使用笔记

ES6 是一种客户端脚本语言规范；（ES2015,ES2016,ES2017等，ES2015 则是正式名称，特指该年发布的正式版本的语言标准）

let 和 const 命令 （只在声明所在的块级作用域内有效）

• let 块级定义变量，只在let命令所在的代码块内有效。
• const 声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

const obj = {
    name: 'xiecheng',
    age: 34
}
obj.school = 'imooc'
console.log(obj)
// {name: "xiecheng", age: 34, school: "imooc"}

const 实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

如何让对象或者数组这种引用数据类型也不被改变呢？Object.freeze(obj)

注意 : Object.freeze() 只是浅层冻结，只会对最近一层的对象进行冻结，并不会对深层对象冻结。

Object.entries() Object.keys() Object.values()

Object.entries() 将对象中的键值对返回成一个数组；
Object.keys() 将对象中的键名返回成一个数组；
Object.values() 将对象中的值返回成一个数组；

let user = [{
    name: 'John',
    age: 30
  },{
    name: 'Tom',
    age: 29
  },{
    name: 'Zoe',
    age: 25
  }]
  console.log(" Object.entries(user):")
  console.log( Object.entries(user))
  console.log(" Object.keys(user):")
  console.log( Object.keys(user))
  console.log(" Object.values(user):")
  console.log( Object.values(user))

结果：

遍历方式 for… of (数组，对象，集合)，可使用break,continue,return

  for (let [key, value] of Object.entries(user)) {
    console.log(`${key}:`)
    console.log(value) // name:John, then age:30
  }

Array

Array.from()

一、类数组对象：所谓类数组对象，最基本的要求就是具有length属性的对象。
二、Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

Array.from有三个参数，Array.from(arrayLike[, mapFn[, thisArg]])，
arrayLike：想要转换成数组的伪数组对象或可迭代对象；
mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数；
thisArg：可选参数，执行回调函数 mapFn 时 this 对象。该方法的返回值是一个新的数组实例（真正的数组）。

该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

let arrLike = {
  'name': 'name', 
  'age': 'age',
  'sex': 'sex',
  'user': ['user1','user2','user3'],
}
const array = Array.from(arrLike)
console.log(array)  //[]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [2,3,4,5,6,7,8,9,10]

将字符串转换为数组

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

将Map解构转为数组，最方便的做法就是使用扩展运算符(…)

const myMap = new Map().set(true, 7)
console.log(myMap); //Map(1) {true => 7}
console.log([...myMap]); //[true ,7]

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

let array = [1, 2, 3, 4]
array.fill(0, 1, 2)  //把 0 填充在索引为1开始，到索引为2结束，不包括终止索引
// [1,0,3,4]

fill 不具备遍历的功能，它是通过指定要操作的索引范围来进行，可以看出不指定索引会对所有元素进行操作

Array(5).fill(1)
// [1,1,1,1,1]

Array.prototype.find() //返回满足测试函数的第一个元素的值

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);
// 12

Array.prototype.findIndex() //返回满足测试函数的第一个元素的索引

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);
// 1

Array.prototype.copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3)

Function

Rest 参数

function sum(base, ...nums) {
    let num = base
    nums.forEach(function(item) {
        num += item * 1
    })
    return num
}

console.log(sum(30, 1, 2, 3)) // 36
console.log(sum(30, 1, 2, 3, 4)) // 40

扩展运算符 Spread Operator

Spread Operator 和 Rest Parameter 是形似但相反意义的操作符，简单的来说 Rest Parameter 是把不定的参数“收敛”到数组，而 Spread Operator 是把固定的数组内容“打散”到对应的参数。示例如下：

function sum(x = 1, y = 2, z = 3) {
    return x + y + z
}

console.log(sum(...[4])) // 9
console.log(sum(...[4, 5])) // 12
console.log(sum(...[4, 5, 6])) // 15

length属性

函数指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。

function foo(x = 1, y = 2, z = 3) {
    console.log(x, y)
}
foo(x = 1, y = 2, z = 3)  console.log(foo.length)    // 0
foo(x, y = 2, z = 3)  console.log(foo.length)    // 1
foo(x, y = 2, z)  console.log(foo.length)    // 1
foo(x, y, z = 3)  console.log(foo.length)    // 2

name属性

函数的name属性，返回该