ES6基础

ES全称ECMAScript，是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。

为什么使用ES6

ES6的版本变动内容最多，具有里程碑意义，同时ES6加入许多新的语法特性，编程实现更简单、高效，ES6是前端发展趋势，就业必备技能。

let关键字

var、let和const的区别：

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不能更改

用let声明变量的几个特点：

• 不允许重复声明

• 块级作用域

• 不存在变量提升

• 不影响作用域链

• 暂时性死区

const声明常量

• const声明一个常量，值是不会发生变化

• 一般常量使用大写字母表示，方便区分

• 常量在声明时必须赋值

• 常量赋值后，不能重新赋值

变量的解构赋值

ES6允许按照一定模式从数组或对象中提取数据，对变量进行赋值，这被称之为解构，只要等号两边的模式相同，左边的变量就会被赋予一定的值。本质上，这种写法属于模式匹配。

变量、数组解构

数组的元素是按次序排列的，变量的取值由它的位置决定

let [a,b,c]=[1,2,3]
console.log(a,b,c)//返回1,2,3

如果解构不成功，变量的值等于undefined

let [a,b]=[1]
console.log(a,b)//返回1,undefined

解构允许设置指定默认值

ES6内部使用严格模式相等运算符（===)，判断一个位置是否有值，当一个数组成员严格等于undefined，默认值才会生效

let [a=10]=[]
console.log(a)//返回10,因为默认值为10
let [b=1]=[10]
console.log(b)//返回10,因为默认值不生效

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候才会求值

function fn(){
    return 2
}
let [x = fn()]=[1]
console.log(x)// 1，因火x能取到值，所以函数fn根本不会执行，只有当x取不到值的时候fn才会执行

默认只可以引用解构赋值的其它变量，但该变量必须已经声明

let [x = 1,y=x] -[]//x=1,y=1
let [x = 1, y = x] = [2]//x = 2,y = 2
let [x = 1, y = x] = [1,2]//x = 1,y = 2
let [x = y, y = 1] =[]//报错，因为在给x赋值为y时，y还没有声明

对象解构

根据属性名和变量名进行匹配

let {foo,bar} = {foo:"aaa",bar:"bbb"}
// foo aaa
// bar bbb

如果解构失败，变量的值等于undefined

let ifoo} - {bar: 'baz'}
// foo undefined

模板字符串

1. 可当做普通字符串使用

2. 可定义多行字符串

3. 可嵌套变量（需将变量写在${}中）

4. 可调用函数

5. 可嵌套模板字符串

箭头函数的基础使用

• 如果形参只有一个，则小括号可以省略

• 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

• 箭头函数this指向声明时所在作用域下this的值

• 箭头函数不能作为构造函数实例化

• 不能使用arguments，可以使用rest参数代替

  • ES6 引入rest参数〈形式为...变量名)，用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

rest参数基本用法

function add( . . . values) {
    let sum = 0;
    for (var val of values) {
        sum += val;
    }
    return sum;
}
add(2,5,3) // 10

1.无参箭头函数

let fn_1 = () => {
    console.log("我是一个无参箭头函数");
   }
fn_1()

2.带参数的箭头函数

let fn_2 = (a, b) => {
    console.log(a, b);
  }
fn_2("第一个参数", "第二个参数")

3.只有一个参数时的箭头函数，可以将()省略简写

let fn_3 = a => {
    console.log(a);
  }
fn_3("只有一个参数时的箭头函数")

4.如果函数体中只有一个语句则{}也可以省略

let fn_4 = a => console.log(10)

箭头函数中定时器的this指向当前对象，普通函数中定时器的this指向window全局

spread扩展运算符

扩展运算符(spread)是三个点(...)。它好比 rest参数的逆运算，功能是把数组或类数组对象展开成一系列用逗号隔开的值。该运算符主要用于函数调用，示例如下:

function add(x, y, z) {
  return x + y + z;
}
const s = [3, 5, 10]
console.log(add(...s)); // 18

深拷贝和浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型。

浅拷贝仅仅复制了指向某个对象的指针，并不复制对象本身，新对象与旧对象还是共享同一块内存，修改其中—个对象，另一个对象也会随之变化。

深拷贝会另外创造一个一模一样的对象，新对象跟旧对象不共享内存，修改其中一个对象不会影响到另一个对象。

slice方法

slice()方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end)方法返回一个新的数组，包含从start到end (不包括该元素，数学上来讲是左闭右开，即包含左，不含右)的arrayObject 中的元素。

let arr = [5，2，9];
let arr2 = arr.slice(0);
arr2[2]= 0;
console.1og(arr，arr2); // [5，2，9][5，2，0]

ES6扩展运算符进行拷贝

用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。