JavaScript ES6 新特性

一.let和const关键字声明变量

var/let/const的共同点：在函数内部都可以访问到在外部通过var/let/const声明的变量或常量。

（1）let

①变量不能重复声明。

②具有块级作用域，在if-else语句、while循环、for循环中使用了let声明的变量，都会产生块级作用域。

③没有变量提升，必须先定义才能使用。 变量提升：在代码执行前，会先收集通过var声明的变量，把这些变量提到作用域的最顶端，而赋值操作不变。
let声明的变量是独立的，不能被window调用

//1.
let a = 1;
let a = 2;
//报错:Uncaught SyntaxError: Identifier ‘a’ has already been declared
//2.
if(true){
    var a = 11
}
console.log(a) //11
//而把var换成let后就报错
 if(true){
    let a = 11
}
console.log(a) //Uncaught ReferenceError: a is not defined
//3.
let a = 10
console.log(window.a) //undefined
var b = 10
console.log(window.b) //10

（2）const

①初始化常量，必须给初始值，否则报错(Uncaught SyntaxError: Missing initializer in const declaration)。

②在同一个作用域内，const定义的常量不能修改其值。在同一个作用域内，const定义的常量不能重复声明。但是在不同的作用域，用const声明一样的变量没问题。另外，如果const声明的变量是个引用数据类型，比如对象，那么对对象进行修改的时候，不会报错。

③没有变量提升。具有块级作用域。const声明的常量也是独立的，不能被window调用

//1.
const PI //caught SyntaxError: Missing initializer in const declaration
//2.
const a = 10
a = 100 // Uncaught TypeError: Assignment to constant variable.
//const定义的常量不能重复声明

const a = 10
const a = 100//Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 100
function fn(){
     const b = 200 //在不同的作用域，用const声明一样的变量没问题
     console.log(b)//200
}
fn()

const obj = {
     name:'yy'
} //声明数据类型为引用数据类型
obj.name = 'gg'
console.log(obj) //不会报错

//3.
const c = 10
console.log(window.c) //undefined

二、模板字符串

使用 ` ` 代替  ' ' 创建字符串 模板字符串中的变量和表达式可以用${}包裹起来标识他不是字符

const name='小李',age='30'
console.log(`我是新来的同事${name},今年${age}岁。`)

let num = Math.round('12.339')
console.log(`${num}`)

//模板字符串可以再嵌套模板字符串
const arr = [
       {title:'响应式布局'},
       {title:'Vue'},
       {title:'React'},
]
      
function template(){ //模板字符串可以再嵌套模板字符串
       return `<ul>
              ${arr.map(item=>`<li>${item.title}</li>`).join('')}
        </ul>`
}
document.body.innerHTML = template()

三、解构赋值

（1）数组解构：是将数组的单元值快速批量赋值给一系列变量的简洁语法

① = 左侧的[ ] 用于批量声明变量，右侧单元值将被赋值给左侧变量

②变量的顺序对应数组单元值的位置依次进行赋值

const [pname, price] = ['小米手机', 5000]
console.log(pname, price)// 小米手机  5000

（2）对象解构：是将对应属性和方法快速批量赋值给一系列变量的简洁语法

①= 左侧的 { } 用于批量声明变量，右侧属性值将被赋值给左侧变量

②变量名和属性名必须相同且不能与外面声明变量冲突如果变量名不一致返回undefined

③如果想重新定义变量名可以用：

const {a, b} = { a: 10, b: 20 }
console.log(a, b)// 10 20

const {c: C, d: D} = { c: 10, d: 20 }
console.log(C, D)// 10 20

四、扩展运算符

（1）数组中的扩展运算符：扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。可以代替函数的apply（）方法

 console.log(...[1, 2, 3]) // 1 2 3
   // ES5 的写法
 function f(x, y, z) {
 }
 var args = [0, 1, 2]
 f.apply(null, args)
 // ES6的写法
 let args = [0, 1, 2]
 f(...args)
//运用扩展运算符拷贝数组
const a1 = [1, 2];
const a2 = [...a1]
//相当于以下拷贝
const a2 = a1.concat();
console.log(a2) //[1,2]

（2）对象中的扩展运算符：对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性

//运用扩展运算符拷贝对象，这是一种浅拷贝
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
//相当于以下拷贝
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

(3)解构赋值与扩展运算符

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }

五、箭头函数

（1）目的：引入箭头函数是为了简短函数的写法使表达式更加简洁，更适用于需要匿名函数的地方

（2）语法：const   fn =（）=> { returtn 表达式 }

        ①当只有一个形参时可以省略（）

        ② { } 里只有一行return语句时可以省略 { } 和 return

        ③ 当返回一个对象想省略 { } 和return 时在对象 { } 外加 （ ）可以返回对象

        ④箭头函数没有argument 只有剩余参数

        ⑤箭头函数没有this只能从作用域链的上一层沿用this

//函数正常写法
const fn = function (a, b) {
    return a + b
}
console.log(fn(1,2)) //3
//箭头函数写法
const fn1 = (a, b) => a + b
console.log(fn1(1,2)) //3

六、Symbol

symbol 是一种基本数据类型。Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。

每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。

（1）Symbol不能用于和其它数据类型运算。
（2）Symbol定义的对象不能用for…in获取对象属性，但是可以使用Reflect.ownKeys获取对象的所有属性名。

//创建Symbol
let s = Symbol()
console.log(typeof s)//symbol
//创建Symbol时，可以给Symbol函数传递参数，表示对Symbol实例的描述，容易区分不同的Symbol值。
let s1 = Symbol('哈哈')
let s2 = Symbol('哈哈')
console.log(s1)//Symbol(哈哈)
//注意：Symbol函数的参数只是对当前Symbol值的描述，两个参数一致的Symbol函数，它们的返回值是不相等的
console.log(s1 === s2)//false
//Symbol函数的参数是个对象，会自动调用对象的toString()方法
const obj = {
    toString() {
        return 222
    }
};
let sym = Symbol(obj);
console.log(sym) //Symbol(222)

七、对象新增方法

（1）Object.is()：严格判断两个值是否相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身

（2）Object.assign(target， source)：

        ①第一个参数是目标对象，后面的参数都是源对象

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

        ③是浅拷贝，遇到同名属性会进行替换

（3）Object.getOwnPropertyDescriptors()：返回指定对象所有自身属性（非继承属性）的描述对象

（4）Object.setPrototypeOf()：用来设置一个对象的原型对象

（5）Object.getPrototypeOf()：用于读取一个对象的原型对象

（6）Object.keys()：返回自身的（不含继承的）所有可遍历（enumerable）属性的键名的数组

（7）Object.values()：返回自身的（不含继承的）所有可遍历（enumerable）属性的键对应值的数组

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

（9）Object.fromEntries()：用于将一个键值对数组转为对象