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)
