ES6 是JavaScript第6个版本，ES2015
1.ES6-定义变量
-
在 ES6 之前，我们定义变量使用 var 关键字
-
ES6 新增了两个定义变量的关键字
-
🏮 let => 定义变量
-
🏮 const => 定义常量（特殊的变量）
let/const 与 var 的区别
-
1.var 会进行预解析
-
let/const 不会进行预解析(不能在声明之前使用)
-
👊 什么是预解析：预解析是变量的声明会提前解析，（只要后面有声明，即使在前面使用该变量也不会报错，只不过输出结果没有赋值）
//1.预解析//varconsole.log(i)var i = 1console.log(i)//定义之前使用let会报错console.log(n)let n = 2console.log(n)//定义之前使用会报错console.log(m)const m = 3console.log(m)
📧如图：
-
var 可以声明两个重复的变量
-
let/const 不可以声明（定义）两个重复的变量
//重复变量名var n1 = 10var n1 = 20//第二次的声明没有意义，赋值有意义console.log(n1)let n2 = 30let n2 = 40console.log(n2)const n3 = 50const n3 = 60console.log(n3)
🗡如图所示：
-
var 没有块级作用域
-
let/const 有块级作用域。
❓什么是块级作用域：
-
任何一个可以执行代码块的 {} 都会限制该变量的使用范围
-
var关键字的作用域只有函数会限制范围
//块级作用域if(true) {var n1 = 10console.log(n1)}console.log(n1)if(true) {//只能在 if 的 {} 内使用let n2 = 20console.log(n2)}console.log(n2)if(true) {const n3 = 30console.log(n3)}console.log(n3)
🗡如图所示：
let 与 const 的区别
-
💒 let 可以定义变量时不进行赋值
-
const 在定义变量时必须赋值
//定义时不进行赋值let numconsole.log(num)num = 1console.log(num)
🗡如图所示：
//定义时不进行赋值//使用const 声明时必须赋值const m = 2console.log(m)const nconsole.log(n)
🗡如图所示：
-
let 定义的变量可以被修改
-
const定义的常量一经赋值不能被修改
//修改变量let num = 10console.log(num)num = 20console.log(num)const n =30console.log(n)n = 40console.log(n)
🗡如图所示：
2.ES6-箭头函数
🥝什么是箭头函数？
-
🔫箭头函数，实在ES6的语法对 函数表达式= 的简写
-
🔫对于声明式 函数不能使用
-
🔫
🐨什么是函数表达式？
-
函数表达式，也叫匿名函数
-
即 我们不需要单独定义函数，直接使用时的代码
-
⏰ 举个栗子：
-
xxx.onclick = function () {}var obj = {fn: function(){}}xxx.forEach(function (){})setTimeout(function (){})var fn = function(){}...
-
⚠️ 箭头函数的语法：
-
把function 去掉，换成=>
-
xxx.onclick = ()=> {}var obj = {fn: ()=>{}}xxx.forEach( ()=>{})setTimeout( ()=>{})var fn = ()=>{}...
🎲代码演示：
var fnOne = function(){console.log('我是 fnOne 函数')}fnOne()var fnTwo = () => {console.log('我是 fnTwo 函数')}fnTwo()
🗡如图所示：
🎃箭头函数的特殊之处：
-
箭头函数的()有些时候可以省略不写
-
当我们的箭头函数只有一个形参的时候，可以不写
var fn1 = () => {console.log('我没有形参，小括号不可以省略')}var fn2 = a => {console.log('我有一个形参，小括号可以省略'+a)}var fn3 = (a,b) => {console.log('我有两个及以上的形参，小括号不可以省略a=' + a + ',b=' + b)}fn1()fn2(2)fn3(3,4)
🗡如图所示：
-
箭头函数的{}有些时候可以省略不写
-
当我们的代码只有一行的时候，可以不写{}
-
并且箭头函数会自动把这句话的结果当成函数的返回值
var fn4 = a => aconsole.log(fn4(4))var fn5 = (a,b) => a+bconsole.log(fn5(5,6))
🗡如图所示：
-
箭头函数没有arguments
类数组对象：arguments
js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面
博客园的文章讲解：arguments的用法
var fn6 = () => {console.log(arguments)}fn6(1,2,3)
🗡如图所示：
-
箭头函数内没有this
-
箭头函数内的this是外部作用域的this
var obj = {fn1: function(){console.log(this)},fn2:() =>{console.log(this)}}obj.fn1()//this 因为 fn 函数 被 obj 调用，所以 this 是 <object>obj.fn2() //因为是箭头函数，内部没有 this ,那么该 this 就是外部作用域的 this（外部作用域是 window
🗡如图所示：
3.ES6-函数参数默认值
-
在函数定义的时候，可以直接给形参设置一个默认值
-
当没有传递实参的时候，就使用默认值
-
传递了实参，使用实参
-
参数默认值普通函数和箭头函数都可以使用
//普通函数function fn1(a = 1, b = 2){//声明两个形参//其中a设置默认值为1//其中设置默认值为2console.log('a=',a)console.log('b=',b)console.log('----------------------')}//没有传参数，都使用默认值fn1()//传一个实参，第一个形参使用fn1(10)//传两个实参，都使用fn1(10,20)//箭头函数var fn2 = (a = 8, b = 9) => {console.log('a=',a)console.log('b=',b)console.log('----------------------')}没有传参数，都使用默认值fn1()//传一个实参，第一个形参使用fn1(80)//传两个实参，都使用fn1(80,90)
🗡如图所示：
4.ES6-解构赋值
-
解构赋值-解构数组
-
快速从数组中获取数据
-
var [a,b] = ['hello','wrold']
//1.解构数组var array = ['hello','wrold']//开始解构//注意：解构数组使用[]//a 获取的内容是array[0]//b 获取的内容是array[1]var[a,b] = arrayconsole.log(a)console.log(b)
🗡如图所示：
-
解构赋值-解构对象
-
快速从对象中获取数据
-
//定义对象let obj = {name:'jack',age:'18'}//普通获取let name = obj.name//解构获取let{name} = obj
//1.解构对象var obj = {name:'jack',age:'18'}//开始解构//注意：解构对象使用{}//表示定义一个叫做 name 的变量 和一个叫做age 的变量 ，获取的是叫做 obj 的成员的值var {name,age,no} = objconsole.log(name)console.log(age)//没有no成员会怎么样console.log('没有no成员：'+no)//但是如果我们不想用原来的变量名，要怎么办呢？//如：// var a = obj.age// console.log(a)//解构该如何实现呢//请看下面代码var {age:a} = obj//=> var a = obj.ageconsole.log('a = '+a)
🗡如图所示：
5.ES6-模板字符串
-
🐨ES6之前的定义
-
var str = "..."
-
var str = '....'
-
🐨ES6的定义：使用反引号
-
var str = `...`
-
🐨模板字符串和以前的区别：
-
解析变量时我们用 %{变量名}
-
模板字符串可以换行
-
模板字符串可以直接在字符串内解析变量
var s1 = 'hello world' //''与""一致var s2 = `hello jackI'm Rose.`console.log(s1)console.log(s2)var age = 18var name = '沐海云'var str = `大家好，我是 ${name},今年 ${age}岁。`console.log(str)
🗡如图所示：
6.ES6-展开运算符
-
🐨语法：...
-
🐨作用：展开数组的[],或者展开对象的{}
-
🐨直白说就是去掉括号
-
🐨展开数组：
-
作用：合并数组
-
作用：给函数传递参数
-
🐨展开对象：
-
如果合并的对象有相同的键，那么后面键的值会覆盖掉前键的值（代码不在演示）
-
用来复制对象（合并对象）
-
注意对象展开书写的先后顺序
var arr = [1,2,3,4,5]console.log(arr)console.log(...arr)//合并数组var arr1 = [6,7]var arr2 = [54,354]var arr3 = [67,35]var arr4 = [...arr1,...arr2,...arr3]console.log(arr4)// 作用：给函数传递参数var arr5 = [24,364,7,8,68]var max1 = Math.max(arr5)var max2 = Math.max(...arr5)console.log(max1)console.log('MAX=',max2)//展开对象var obj = {name:"Jack",age:18,}//报错：console.log(...obj)//合并对象var obj2 = {gend : "男",...obj}console.log(obj2)
🗡如图所示：
7.ES6-类语法
用ES6的语法书写构造函数
-
🎈ES6之前构造函数的不好
-
构造函数函数体 和 原型 是分开的
-
构造函数本质还是一个函数，可以不和 new 关键字连用，例如：var p = Person("jack",20)
-
funcrion Person(name.age){ -
🎈ES6-类语法：
class 类名 {//ES5的构造函数体constructor(){//书写内容}//原型方法,（原来的 方法名.prototype 没有了）sayHi(){console.log(...)}//静态属性和方法static 属性名 = 值static 方法名(){...}}//创建对象var 对象名 = new 类名('',....)
-
🎈注意必须和 new 关键字连用
-
不连用直接报错
-
🎈类语法书写静态方法和属性，需要添加 static 关键字
//构造函数体constructor(name,age) {this.name = namethis.age = age}//原型sayHi(){console.log('你好啊')}//静态属性和方法static a = '我是类语法里的静态属性'static b (){console.log('我是类语法里的静态方法')}}var p1 = new Person('Jack',18)console.log(p1)p1.sayHi()//使用静态属性和方法console.log(Person.a)Person.b()
🗡如图所示：
发表评论