目录标题
ES6的历史
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript 和 JavaScript 的关系
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript 方言还有 Jscript 和 ActionScript)ES6 与 ECMAScript 2015 的关系ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。
ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。我们说 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。
ES6基础语法
1. let声明变量
-
var 声明的变量没有局部作用域
let 声明的变量 有局部作用域 -
var 可以声明多次
let 只能声明一次
2. const声明常量
- 声明之后不允许改变
- 一但声明必须初始化,否则会报错
3. 解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
//2、对象解构
let user = {name: 'kuangshen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user
//注意:解构的变量必须和user中的属性同名
console.log(name, age)
4. 模板字符串
模板字符串相当于加强版的字符串,用反引号 `,
除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
// 字符串插入变量和表达式。变量名写在 ${} 中,
//${} 中可以放入 JavaScript 表达式。
let name = 'Kuangshen'
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Kuangshen,I am 28 years old next year.
5. 声明对象简写
const age = 12
const name = 'kuangshen'
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2)
//{age: 12, name: 'kuangshen'}
6. 定义方法简写
// 传统
const person1 = { sayHi:function(){
console.log('Hi')
}
}person1.sayHi();
//'Hi'
// ES6
const person2 = {
sayHi(){ console.log('Hi') }
}person2.sayHi()
//'Hi'
7. 对象拓展运算符
{ ...person }
代表直接复制拷贝,区别于引用拷贝
let person = {name: 'Kuangshen', age: 15}
let someoneOld = person
//引用赋值
let someone = { ...person }
//对拷拷贝
someoneOld.name = 'KuangshenOld'
someone.name = 'Kuangshen1'
console.log(person)
//{name: 'KuangshenOld', age: 15}
console.log(someoneOld)
//{name: 'KuangshenOld', age: 15}
console.log(someone)
//{name: 'Kuangshen', age: 15}
8. 函数的默认参数
function showInfo(name, age = 17) {
console.log(name + "," + age)
}
// 只有在未传递参数,或者参数为 undefined 时,才会使用默认参数
// null 值被认为是有效的值传递。
showInfo("Kuangshen", 18)
// Kuangshen,18
showInfo("Kuangshen")
// Kuangshen,17
showInfo("Kuangshen", undefined)
// Kuangshen,17
showInfo("Kuangshen", null)
// Kuangshen, null 12345678910
9. 箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是
参数 => 函数体
let arr = ["10", "5", "40", "25", "1000"]
let arr1 = arr.sort()
console.log(arr1)
//上面的代码没有按照数值的大小对数字进行排序,
//要实现这一点,就必须使用一个排序函数
arr2 = arr.sort(function(a,b){ return a - b })
// arr2 = arr.sort((a,b) => {return a - b})
// arr2 = arr.sort((a,b) => a - b)
console.log(arr2)
// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = (a,b) => { let result = a+b return result
}console.log(f3(6,2))
// 8
// 前面代码相当于:
var f4 = (a,b) => a+b