ECMAScript
- ECMAScript是JavaScript的标准化规范。
- JavaScript是ECMAScript的扩展语言。
- JavaScript语言本身指的就是ECMAScript.
- 从2015年开始，ECMAScript保持每年一个版本的迭代。
ES2015
- ES2015就是我们常说的ES6。
- ES6既可以特指ES2015，也可以泛指ES2015及以后的所有版本。
ES6在原有基础上做了哪些改进呢？
- 解决了原有语法上的一些问题或者不足
- 对原有语法进行增强
- 全新的对象、全新的方法、全新的功能
- 全新的数据类型和数据结构
ES6新特性
let声明变量
ES6以前声明变量是通过“var”关键字。 ES6新增了通过“let”关键字声明变量。
ES6之前有两种作用域：函数作用域和全局作用域；ES6新增了块级作用域
let声明的变量，只能在其声明的块级作用域中使用，在外部无法访问到
{
let a = 10;
var b = 20;
}
console.log(b) // 结果： 输出20
console.log(a) // 结果： 报错。提示 ReferenceError: a is not defined
let声明的变量不存在变量提示，需要先声明变量才能使用
console.log(a)； // 结果：报错。提示 ReferenceError: Cannot access 'a' before initialization
let a = 10;
console.log(b); // 结果： 输出 undefined
var b = 20;
const声明常量
const声明的是常量，一旦声明之后不能再被修改
注意：这里所说的不能被修改，指的是不能声明之后不能再指向新的内存地址，可以修改恒量中的属性成员
const obj = {}
obj.name = 'xx';
console.log(obj) // 结果： 输出 { name: 'xx' }
obj = {age: 20}
console.log(obj) // 结果： 报错，提示 TypeError: Assignment to constant variable.
const在声明时必须同时进行赋值
小tip：不用var，主用const，对于一定会变化的量配合使用let
数组解构
解构是一种从数组或对象中获取指定元素的快捷方式
数组的解构是通过下标匹配获取相应的值
const arr = [100, 200, 300];
const [ a, b, c ] = arr;
console.log(a); // 输出 100
console.log(b); // 输出 200
console.log(c); // 输出 300
// 只获取其中的某个元素
const [, b, ] = arr;
console.log(b); // 输出 200
// 定义的元素个数多于数组的长度
const [ a, b, c, d ] = arr;
console.log(d); // 输出 undefined
// 给参数设置默认值
const [ a='hello', b, c, d='js' ] = arr;
console.log(a); // 输出 100
console,log(d); // 输出 'js'
对象解构
对象的解构是根据属性名匹配来获取对应的属性值
可以通过 { 解构位置的成员名:新名称 } 来为解构的变量重命名
const obj = {
name: 'tom',
age: 20
}
const { name } = obj;
console.log(name); // 输出 tom
const { age: myAge } = obj
console.log(myAge); // 输出 20
模板字符串
模板字符串支持换行、插值表达式、JS表达式
字符串的扩展方法
- startsWith -------- 以xx开头
- endsWith ---------- 以xx结尾
- includes ----------- 包含xx
参数默认值
可以为函数中的参数设置默认值。当调用函数时没有传递实参或者传递的实参值为undefined时，则使用默认值。当有多个参数时，只能将默认值放到参数列表的最后
剩余参数
- 剩余参数是以数组的形式接收从当前位置开始的所有实参值
- 剩余参数以"...形参名"的形式表示
- 剩余参数用来取代以前通过arguments对象来接收无限数组的操作。在箭头函数中不能使用arguments
- 剩余参数只能出现在形参最后一个参数的位置，而且只能使用一次
function f(a,...args) {
console.log(args)
}
f(1,2,3,4,5); // 输出 [2,3,4,5]
展开数组
...语法不仅可以用来收集数据，也可以用来展开数组
const arr = [1,2,3,4,5]
function f(arr) {
console.log(...arr)
}
f(arr); // 输出 1,2,3,4,5
箭头函数
箭头函数不会改变this的指向。箭头函数内的this总是与箭头函数外面的this保持一致。
const obj = {
name: 'tom',
say: function () {
console.log(`hey,my name is ${this.name}`)
},
say2: ()=>{
console.log(this) // this指向window
console.log(`hey,my name is ${this.name}`)
},
sayHello: function () {
console.log(this) // this指向obj
setTimeout(function () {
console.log(this) // this指向window
console.log(`hey,my name is ${this.name}`)
},1000)
},
sayHello2: function () {
setTimeout(()=>{
console.log(`hey,my name is ${this.name}`)
},1000)
}
}
obj.say(); // 输出 hey,my name is tom
obj.say2(); // 输出 hey,my name is undefined
obj.sayHello(); // 输出 hey,my name is undefined
obj.sayHello2(); // 输出 hey,my name is tom
对象字面量的增强
// 以前声明对象的属性
var obj = {
属性名：属性值/变量名
}
// 现在：当对象的属性名与变量名一致时，可以省略 “:对象名”
var obj = {
属性名
}
// 以前声明对象的方法
var obj = {
函数名: function(){...}
}
// 现在：可以省略 “:function”
var obj = {
函数名(){...}
}
// 以前为对象添加动态属性
obj[Math.random] = 123
现在：可以使用[动态属性名]的形式
var obj = {
[Math.random]: 123
}
Object.assign
用于将多个源对象中的属性复制到一个目标对象中，对象之间有相同的属性时，源对象中的属性会覆盖目标对象中的属性
let source1 = {
a:123,
b:123
}
let source2 = {
c:123,
d:'abc'
}
let target = {
b: 456,
c:789
}
let result = Object.assign(target,source1,source2)
console.log(result); // 输出 { b: 123, c: 123, a: 123, d: 'abc' }
set数据类型
set是一种新的数据类型，可以称作集合。集合里的数据不允许重复，常用于对数组进行去重
const arr = [1,3,2,3,1,4]
const result = new Set(arr)
console.log(result); // 输出 Set { 1, 3, 2, 4 }
// 希望去重之后依然得到数组类型的数据
const result = Array.from(new Set(arr))
// 或者
const result = [...new Set(arr)]
map数据类型
map是一种新的数据类型，与对象类型，都是键值对的集合。但是对象中的健只能是字符串类似，map中的键可以是任意类型
const obj = {};
let o1 = {name: 'tom'}
obj[o1] = 50
console.log(obj); // 输出 { '[object Object]': 50 }
const m = new Map()
m.set(o1, 20)
console.log(m); // 输出 Map { { name: 'tom' } => 20 }
symbol数据类型
全新的原始数据类型；最主要的作用是为对象添加独一无二的属性名。但是要symbol类型的属性名只能通过 [Object.getOwnPropertySymbols(对象名)] 获取
