ES6学习笔记

一、简介

• 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
• ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准。
• ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。
• ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。
• 结尾不用写分号

二、基本语法

1. let声明变量

• 相比于var，let只在局部作用域生效。
• var可以重复定义，let不能。

2. const声明常量

• 声明之后不许改变。
• 声明时就必须赋值。

3. 解构赋值

• 解构赋值是对赋值运算符的扩展。
• 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
  数组解构

// 对三个变量赋值，然后打印
let x = 2,y = 3,z = 4
console.log(x,y,z);
// es6中对数组赋值后，可以直接获取数组中的值
let [a,b,c] = [1,2,3]
console.log(a,b,c)

对象解构

// 创建一个对象
let user = {name:"蒋璐",age:21}
// 传统方法获取对象值
let name1 = user.name
let age1 = user.age
console.log(name1,age1);
// es6使用一个自定义对象来接收对象，自定义对象的属性跟接收对象的属性一致
// 然后我们就可以直接获取对象属性
let {name,age} = user
console.log(name,age)

4. 模板字符串

• 模板字符串相当于加强版的字符串，用反引号 `表示，具有换行功能。
• 可以在字符串中加入变量和表达式进行运算，使用${}。

let name = "蒋璐"
let age = 20
let info = `I am ${name},my age is ${age+1}`
console.log(info);

5. 声明对象简写

• 直接赋值就行，省去了对象字段声明，直接把变量的名称当作字段名

// 传统创建一个对象
const name = "蒋璐"
const age = 21
const user = {name:name,age:age}
console.log(user);
// 使用es6创建对象,直接赋值就行，省去了对象字段声明，直接把变量的名称当作字段名
const user1 = {name,age}
console.log(user1)

6. 对象拓展运算符

• 拓展运算符（…）用于取出对象所有可遍历属性，然后拷贝到当前对象。
• 可以拷贝对象，可以合并对象。

// 对象复制
const user = {name:"向晚雪",age:21}
const user1 = {...user}
console.log(user1)
// 对象合并
const a = { name: "蒋璐" }
const b = { age: 21 }
const myuser ={...a,...b}
console.log(myuser);

7. 箭头函数

• 箭头函数提供了一种更加简洁的函数书写方式。
• 基本语法是：参数 => 函数体
• 箭头函数多用于匿名函数的定义

// 传统方式定义函数
var f1 = function(a){
return a;
}
console.log(f1(2));//2

// 使用es6方式的箭头函数
var f2 = a => a
console.log(f2(3))//3

// 传统方式
var f3 = function(a,b){
return a+b;
}
console.log(f3(5,6))//11

// es6方式
var f4 = (a,b) => a+b
console.log(f4(3,4))//7