ES6核心语法

主要记录学习ES6的语法

1、let和const

同es5中的var来声明变量。三者的区别分别是：

1. var声明的变量存在变量提升，先声明未赋值，值为undefined。且变量声明可在函数块内使用。变量声明之后可以重复声明
2. let声明的变量无变量提升。作用域是块级（例如if或者for等等）。不能被重复声明。声明的变量可以被修改，但是变量的类型不能被改变。
3. const声明的变量无变量提升。作用域是块级。不能被重复声明。并且声明之后的常量不可以被修改。const还可以声明对象，并且可以修改对象内部的常量。
4. let和const声明的变量不会污染全局变量。这也是两者相对于var的一个优点。建议在默认情况下用const。在知道变量值要修改时用let。

2、模板字符串

模板字符串是一种字符串字面量。可以在tab键上的反引号 ` 之间插值，变量、函数或其他有效的表达式用${}括起来。

3、函数默认值、剩余参数

①带参数的默认值

function add(a=10, b=20){
    return a+b;
}
// 默认a=30
console.log(add(30)) // 50

②默认的表达式也可以是一个函数
③剩余参数由…和一个紧跟的具名参数指定，例如…keys。解决了arguments的问题。剩余参数会将函数的所有参数收集到一个数组中，这个数组是一个真正的数组，具有数组的所有特性和方法，此外剩余参数还可以提供更加可靠的类型处理，避免类型错误
arguments的问题包括：arguments是一个类数组对象，不能直接使用数组相关的方法和操作。arguments没有明确的参数类型声明，需要手动进行类型检查。arguments是一个未规范的对象，不同的JavaScript引擎可能会有不同的实现行为。

4、扩展运算符、箭头函数

1、扩展运算符用…表示。

它可以将一个数组或者对象展开，使其成为各自独立的值。在函数调用时，可以使用扩展运算符传递任意数量的参数。
①合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

②复制数组

const arr = [1, 2, 3];
const newArr = [...arr];
console.log(newArr); // [1, 2, 3]

③获得数组的最大最小值

const arr = [1, 2, 3, 4, 5];
const maxVal = Math.max(...arr);
const minVal = Math.min(...arr);
console.log(maxVal); // 5
console.log(minVal); // 1

④将字符串转为数组

const str = "hello";
const arr = [...str];
console.log(arr); // ["h", "e", "l", "l", "o"]

⑤将类数组转换为数组

const args = function() { return arguments } (1, 2, 3);
const arr = [...args];
console.log(arr); // [1, 2, 3]

⑥合并对象

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 }

⑦将对象转为数组

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 }

2、箭头函数（=>）

是一种简洁的函数定义方式，可以用来替代传统的function定义方式。有以下特点：

• 使用=>来定义函数，相比于function更简洁；
• 箭头函数可以省略函数体中的花括号和return关键字；
• 如果箭头函数只有一个参数，可以省略参数周围的括号；
• 箭头函数的this转向是定义时所在的作用域，而不是调用时所在的作用域。

// 传统的函数定义方式
function add(a, b) {
  return a + b;
}
// 箭头函数定义方式
const add = (a, b) => a + b;

5、箭头函数this指向和注意事项

箭头函数没有this指向，内部this值只能通过查找作用域来确定，一旦使用箭头函数，不存在作用域链。
注意事项：
①()=>内部没有arguments
②()=>不能使用new关键字实例化对象。function函数也是一个对象，但是()=> 不是一个对象，其实就是一个语法糖

6、解构赋值

解构赋值是对赋值运算符的扩展，针对数组和对象操作

// 数组的解构赋值
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 以上都属于不完全解构,不完全解构可以忽略某些属性
// 完全解构
console.log(a,b,c); //1,2,3

// 对象的解构赋值
const {a, b, c} = {a: 1, b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

还可以使用默认值避免无法结构的情况：

const [a = 1, b, c] = [undefined, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const {a = 1, b, c} = {b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

解构赋值可以使用剩余用算符，也可以嵌套使用，例如：

let [a,[b],c] = [1,[2],3]

7、扩展的对象的功能

es6允许直接写入变量和函数，作为对象的属性和方法。其中有两个重要的方法
①is()比较两个值是否严格相等

console.log(Object.is(NaN, NaN))//true
console.log(Object.is(undefined, null))//false
console.log(Object.is(0, null))//false

②assign()浅拷贝，用于对象的合并

Object.assign(target, ...sources)//target:目标对象；source:一个或者多个源对象
//例如：
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(result); // { a: 1, b: 4, c: 5 }

8、Symbol类型

用Symbol声明的值是独一无二存在的，一般用于定义对象的私有属性，取值时用[]取值。例如：

let s = Symbol('s')
let obj = {}
obj[s] = "hollow"
console.log(obj[s])// hollow

Symbol定义的对象没有key。可以用Reflect.ownkey和Object.getOwnPropertySymbols()方法获取Symbol声明的属性名（作为对象的key）
…持续更新