es6
一. ES6变量声明方法 ES6共有六种变量声明方法：var、function、const、let、import、class 顶层对象属性：在浏览器中，顶层对象指window,在node中，顶层对象指global,用var、function命令声明的顶层的全局变量，依旧是顶层对象的属性（原ES5中，顶层对象的属性赋值与全局变量赋值为同一件事）,用let 、const、class命令声明的全局变量，不属于顶层对象的属性 ES6新增globalThis顶层对象，在任何环境下都是存在的，globalThis指向全局环境下的this. // 1. 预解析
es6以前我们定义变量使用var 关键字
es6新增了两个定义变量的关键字
let =》定义变量
const =》 定义常量（特殊的变量）
let/const与var 的区别
var 会进行预解析
let/const 不会进行预解析
var 可以声明两个重名的变量
let/const 不能定义重名变量
var 没有块级作用域
let/const有块级作用域
/ 1. 预解析
// console.log(num)
// var num = 100
// console.log(num)
// 定义之前使用 let 声明的变量会报错
// console.log(num2)
// let num2 = 200
// console.log(num2)
// 定义之前使用 const 声明的变量会报错
// console.log(num3)
// const num3 = 300
// console.log(num3)
// 2. 重复变量名
// var n1 = 100
// var n1 = 200
// console.log(n1)
// let n2 = 100
// let n2 = 200
// const n3 = 100
// const n3 = 200
// 3. 块级作用域
// 任何一个可以执行代码段的 {} 都会限制该变量的使用范围
// if (true) {
// var num = 100
// console.log(num)
// }
// console.log(num)
// if (true) {
// // 因为这个 num 使用 let 关键字定义的
// // 所以只能在这个 if 的 {} 内使用
// let num = 100
// console.log(num)
// }
// console.log(num)
// if (true) {
// // 因为这个 num 使用 const 关键字定义的
// // 所以只能在这个 if 的 {} 内使用
// const num = 100
// console.log(num)
// }
// console.log(num)
// 4. 定义时不赋值
// let num
// console.log(num)
// num = 100
// console.log(num)
// 使用 const 的时候, 声明时必须赋值
// const num
// console.log(num)
// num = 100
// console.log(num)
// 5. 修改
// let num = 100
// console.log(num)
// num = 200
// console.log(num)
const num = 100
console.log(num)
// 你试图修改 num 的值, 但是因为是 const 定义的, 不能修改
num = 200
console.log(num)
let 和const的区别
let 可以定义变量的时候不进行赋值
const在定义的时候必须赋值
let 定义的变量可以被修改
const定义的常量一经赋值不能被修改
箭头函数
箭头函数，是在es6的语法中对函数表达式的简写
对于声明式函数不能使用
在某些规则上又和以前的函数有一些不一样
// var fn1 = function () { console.log('我是 fn1 函数') }
// fn1()
• // var fn2 = () => { console.log('我是 fn2 函数') }
• // fn2()
• /*
• 箭头函数的特殊之处
1. 箭头函数某些时候可以省略 ()
当你的形参只有一个的时候, 可以不写 ()
2. 箭头函数某些时候可以省略 {}
当你的代码只有一句话的时候, 可以不写 {}
=> 并且会自动把这一句话的结果当做函数的返回值
3. 箭头函数内没有 arguments
箭头函数内没有 this
=> 箭头函数内的 this 就是外部作用域的 this
*/
• // 1.
• // var fn1 = () => { console.log('我没有形参') }
• // fn1()
• // var fn2 = a => { console.log('我一个形参 : ', a) }
• // fn2(100)
• // var fn3 = (a, b) => { console.log('我两个形参: ', a, b) }
• // fn3(100, 200)
• // 2.
• // var fn1 = (a, b) => a + b
• // console.log(fn1(10, 20))
• // 3.
• // var fn1 = () => {
• // console.log(arguments)
• // }
• // fn1(100, 200, 300)
• // var fn2 = function () {
• // console.log(arguments)
• // }
• // fn2(100, 200, 300)
• // 4.
• var obj = {
• fn: function () { console.log(this) },
• fn2: () => { console.log(this) }
• }
• obj.fn() // this 因为 fn 函数被 obj 调用, 所以 this 是 obj
• obj.fn2() // 因为是箭头函数, 内部没有 this, 就是外部作用域的 this
箭头函数默认值
‘function fn(a = 100, b = 200) {
• // 表示声明了两个形参
• // 其中 a 设置默认值为 100
• // 其中 b 设置默认值为 200
• console.log('a : ', a)
• console.log('b : ', b)
• console.log('---------------------')
• }
• // 两个实参都没有传递, 都会使用默认值
• fn()
• // 给 a 进行了赋值, a 就使用 10
• // b 继续使用默认值 200
• fn(10)
• // 给 a 进行了赋值, a 就使用 10
• // 给 b 进行了赋值, b 就使用 20
• fn(10, 20)
/*
• ES6 解构赋值
• */
• // 1. 解构数组
• // var arr = [ 'hello', 'world' ]
• // // 开始解构
• // // 注意: 解构数组使用 []
• // // a 获取的内容就是 arr[0]
• // // b 获取的内容就是 arr[1]
• // var [ a, b ] = arr
• // console.log(a)
• // console.log(b)
• // 2. 解构对象
• var obj = { name: 'Jack', age: 18 }
• // 开始解构
• // 注意: 解构对象使用 {}
• // 表示定义一个叫做 name 的变量, 获取的是 obj 内一个叫做 name 的成员的值
• // var { name, age, a } = obj
• // console.log(name)
• // console.log(age)
• // console.log(a)
• // var a = obj.age
• // console.log(a)
• // 相当于定义变量 a 从 obj 内获取一个叫做 a 的成员的值
• // var { a } = obj
• // console.log(a)
• // 可以起一个别名
• // 相当于顶一个 a 变量, 从 obj 内获取一个叫做 age 的值
• var { age: a } = obj // => var a = obj.age
• console.log(a)
/*
模板字符串
+ 其实, 就是 ES6 内新增的定义字符串的方式
:
=> var str = '内容'
=> var str = "内容"
+ 现在:
=> var str = `内容`
• 区别:
1. 可以换行书写
以直接在字符串内解析变量
=> 当你需要解析变量的时候, 直接书写 ${ 变量 }
• */
• // 1.
• // var s1 = 'hello world'
• // var s2 = "hello world"
• // var s3 = `
• // hello
• // world
• // `
• // console.log(s1)
• // console.log(s2)
• // console.log(s3)
• // 2.
• var age = 18
• var s1 = `我叫前端小灰狼, 今年 ${age} 岁`
• console.log(s1)
• var s2 = '我叫前端小灰狼, 今年 ${age} 岁'
• console.log(s2)
• var s3 = "我叫前端小灰狼, 今年 ${age} 岁"
• console.log(s3)
/*
• ES6 的展开运算符
• \+ ...
• \+ 作用: 展开数组的[] 或者展开对象的 {}
• */
• // console.log(100, 200, 300, 400)
• // var arr = [ 100, 200, 300, 400 ]
• // console.log(arr)
• // console.log(...arr)
• // 作用1: 合并数组
• // var arr1 = [ 10, 20 ]
• // var arr2 = [ 30, 40 ]
• // var arr3 = [ 50, 60, 70 ]
• // var arr4 = [ 80, 90 ]
• // var arr5 = [ ...arr1, ...arr2, ...arr3, ...arr4 ]
• // console.log(arr5)
• // 作用2: 给函数传递参数
• // var arr1 = [ 10, 20, 17, 7, 31, 22, 12 ]
• // // var max = Math.max(10, 20, 17, 7, 31, 22, 12)
• // // var max = Math.max(arr1)
• // var max = Math.max(...arr1)
• // console.log(max)
• // 展开对象
• var obj = { name: 'Jack', age: 18 }
• console.log(obj)
• // 作用1: 用来复制对象
• // 注意: 展开书写的顺序问题, 在有相同成员的时候
• var obj2 = {
• gender: '男',
• ...obj,
• name: 'Rose',
• }
• console.log(obj2)
/*
• ES6 的类语法
• \+ 语法:
• class 类名 {
• // 原先 ES5 内的构造函数体
• constructor () {}
• // 直接书写原型上的方法即可
• // 书写静态属性和方法, 需要加上一个 static 关键字即可
• }
• \+ 注意: 必须和 new 关键字连用
• => 不和 new 关键字连用, 会直接报错
• */
• // function Person(name, age) {
• // this.name = name
• // this.age = age
• // }
• // // 原型添加一个方法
• // // 2. 原型上的方法, 目的是为了给 实例使用
• // Person.prototype.sayHi = function () { console.log('hello world') }
• // // 书写静态属性和方法
• // Person.a = 100
• // Person.go = function () { console.log('跑起来') }
• // var p1 = new Person('jack', 18)
• // console.log(p1)
• // p1.sayHi()
• // // 1. 构造函数本质还是一个函数, 可以不和 new 关键字连用
• // var p2 = Person('Rose', 20)
• // console.log(p2)
• // console.log(Person.a)
• // Person.go()
• // 类的书写
• class Person {
• constructor (name, age) {
• // 这里按照 ES5 的构造函数体书写
• this.name = name
• this.age = age
• }
• // 直接书写原型上的方法即可
• sayHi () { console.log('你好 世界') }
• // 静态属性
• static a = 100
• // 静态方法
• static go () { console.log('running') }
• }
• var p1 = new Person('张三', 18)
• console.log(p1)
• p1.sayHi()
• // 使用静态属性和静态方法
• Person.go()
• console.log(Person.a)
