ES6语法总结
一.什么是ES6？
ES 全称 ECMAScript，它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。
这家伙说白了就是给 JavaScript 制定的一种语法规范，你写 js 的时候如果按照 ES6 中的规范去写，写的代码不仅简洁而且效率很高。
ES6 发行于 2015 年 6 月，由于这个版本的语法规范极大地提高了前端开发人员的效率，所以在前端圈子中流行开来，时至今日热度依旧不减。
二.let 和 const
1、var声明的变量往往会越域；let声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined2.var 可以声明多次；let只能声明一次
var m = 1;
var m = 2;
let n = 1;
let n = 2;
console.log(m) //2
console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared3.var会变量提升；let不存在变量提升
console.log(x);
var x = 10; // undefined
console.log(y);
let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization三.const声明变量 相当于声明了一个常量(const常量)
const声明的常量具有以下特点:
1.声明之后不允许更改
const a = 1;
console.log(a) //1
a = 2;
console.log(a) // Uncaught TypeError: Assignment to constant variable.2.使用是必须初始化
const a;
a = 1;
console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration
四.结构表达式
1.数组结构
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c)2.对象结构
const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
const { name, age, language } = person
console.log(name, age, language)五.字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello")) //true
console.log(str.endsWith("vue")) //true
console.log(str.includes("e")) //true
console.log(str.includes("hello")) //true六.字符串模板
let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>七.字符串插入变量和表达式。变量写在 {}中，{}中可以放入js表达式
let info = `我是${abc},今年${age}`
console.log(info)function fun() {
return "这是一个函数";
}
let info = `我是${abc},今年${age + 10},我想说：${fun()}`
console.log(info)八.函数优化
1、函数默认值：直接给参数写上默认值，没传就会自动使用默认值
function add(a, b = 1) {
return a + b;
}
console.log(add(10)) //112、不定参数：不定参数用了表示不确定的参数个数，形如…变量名，由…加上要给具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数
function fun(...params) {
console.log(params.length)
}
fun(1, 2) // 2
fun(1, 2, 3, 4) //43、箭头函数
//以前
var sum = function (a, b) {
c = a + b
return c
}
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 64、箭头函数结合解构表达式
//以前
function hello(person) {
console.log("hello" + person.name)
}
hello(person);
//箭头函数
let hello2 = params => console.log("hello" + person.name)
hello2(person)
//箭头函数加解构表达式
var hello3 = ({ name }) => console.log("hello" + name)
hello3(person)九.对象优化
1、es6给Object扩展了许多新的方法，如
- key(obj)：获取对象的所有key形成的数组
- value(obj):获取对象的所有value形成的数组
- entries(obj):获取对象所有的key和value形成的二维数组
const person = {
name: "quanquan",
age: 23,
language: ["java", "js", "css"]
}
console.log(Object.keys(person))
console.log(Object.values(person))
console.log(Object.entries(person))2、Object.assign方法的第一个参数是目标对象，后面的参数都是源对象；将源对象的属性赋值到目标对象中
onst target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2);
console.log(target) //{a: 1, b: 2, c: 3}3、 声明对象简写
//以前
const name = 'sanyue'
const age = 21
//将属性值name，age分别赋给person1对象的name，age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "sanyue", age: 21}
//es6:属性名和属性值变量名一样，可以省略
const person2 = {name,age}
console.log(person2) //{name: "sanyue", age: 21}4、对象的函数属性简写
let person3 = {
name: "qiyue",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数中this不能使用，用对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food)
}
}
person3.eat("苹果")
person3.eat2("香蕉")
person3.eat3("西瓜")5、对象的扩展运算符
扩展运算符（…)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//拷贝对象（深拷贝）
let p1 = { name: "quanquan", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "quanquan", age: 23}
//合并对象
let age1 = { age: 24 }
let name1 = { name: "quanquan" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "quanquan"}
//如果p2中原本有name,age属性会被覆盖十.模块化
什么是模块化：模块化就是把代码进行拆分，方便重复利用。类似Java中的导包，要使用一个包，必须先导包。二Js中没有包的概念，换来的就是模块
模块的功能主要有两个命令构成：export和import
export命令用于规定模块的对外接口，export不仅可以导出对象，一切js变量都可以导出。比如：基本类型变量、函数、数组、对象
import命令用于导入其他模块提供的功能
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
