ES6 (1)

一、let 与 const

        定义变量

        var 变量名称 = 赋值    作用域问题:全局作用域 局部作用域 

        let 与 const 编程语言中{}块级作用域

        

if(true){
   var x=20
}
console.log(x) /20

        使用var 与 let const  的区别

        1、新增块级作用域  每一个 {} 就是一个独特的块级作用域 通过let或者const定义变量 在其内部生效

      2、var定义变量 存在变量的默认提升   let 和const定义的变量 不存在 变量的提升

      3、var定义变量可以重复定义 ,let和const不允许重复 

      4、var 定义变量 会被挂载到window上 ,let const不会

//单独产生一个块级区域
if(true){
     let x=20
}
console.log(x)   //20
var lis=document.getElementsByTagName("li")
for(let n=0;n<lis.length;n++){   //使用let
     lis[n].onclick=function(){   //每个N单独产生块区域 点击哪个块 输出哪个N
     console.log(n)
     }
}
//说明 let与const 声明不提前
console.log(x)  //输出undefined 说明变提前了,单数值没有提前才未找到
var x=20

console.log(x)  //直接报错 提示变量在声明前使用
let x=20
//var 定义的可以重复定义 let 与 const 不能重复定义
var x=20
console.log(x)  //20
----------------------------
var x=30
console.log(x)  //30 表示var定义的变量可以重复赋值 即更改
---------------------------
let x=20
console.log(x)  
let x=30
console.log(x)  //重复定义X的值 直接报错
var a=20
if(true){
    console.log(a)  //报错在未定义前使用
// let定义变量 在一个块级作用域中,形成一个暂时性死区  在定义完成以前任何地方都不能是用哪个该变量
    let a=30
}
//var 定义的被挂载在windows上 const无法更改,定义常量 
var a=20
console.log(window.a)  // var 定义的挂在windows 
let x=20  
console.log(window.x)  //Windows 未挂载
//const 定义常量  永远不改变的值
const x=20
x=30
console.log(x)  //直接报错 无法更改

二、字符串模板

         字符串模板 : `  `   ${变量}

         反引号是内容   ${ 添加变量}

 <script>
      //字符串模板 拼接字符串的
      let x="hello world"
      let str="你好"
      console.log("我的口号是"+x+"加油"+str+"加油")
      // 字符串模板 : `` ${变量}
      console.log(`我的口号是${x}加油${str}加油加油`)
 </script>

三、数据的解构

        解构:将复杂的结构,简化成 简单结构 

        复杂结构 :对象或者数组     前方结构的变量 必须和 复杂结构属性同名

  let obj={
      name:'王一',
      age:21,
      height:180
}
//获取类容
console.log(obj.name)
console.log(obj.age)
console.log(obj.height)
//解构 可直接输出Key值
let [name,age] = obj
console.log(name)
console.log(age)
//交换变量
let a = 30 
let b = 20 ;
[a,b] = [b,a]  //首先let定义 解构后 改变a,b 值

四、对象的简写

        对象的简化写法 ,如果属性名 等于变量 可以省略=后面的内容  省略function

let name="王一"
let age=21
let obj={
    name:name,
    age:age,
    eat:function(){
         console.log()
    }
}
let obj={
    name,  //省略相同属性
    age,
    eat(){  //省略function
    }
}

五、箭头函数

        function 定义函数

                1、传统定义函数中,this指向性永远不明确,随着环境随之发生变化

                2、 箭头函数中 this的指向性用于指向被定义的环境 专一

                3、function具有默认的提升功能 ,箭头函数没有

                4、function 可以作为构造函数使用 箭头函数不行 

                5、function 中 arguments参数集合  箭头函数中没有

        箭头函数的写法

                1、如果函数中只有一个函数,则在函数中可以省去小括号

                2、如果函数中只有一行语句且只有一句return语句,则可以省去{} 以及return 

function Student(){
    this.name : '王一'
    this.age :22
}
var s1 = new Student()
console.log(this) //window

let obj={
    name:"王一",
}
obj.show()   //不具有提升功能 直接报错
let show=()=>{
    console.log(this) //指向window 
}
show()
function sum(a,b){
	arguments
	console.log(arguments) //实际传入参数的合集
	let sum=0
	for(let n=0;n<arguments.length;n++){
		 sum+=n
    }
	return sum
}
sum(1,2,4,5,6,1,123)  
console.log(sum())  //0 
console.log(sum(1,2,4,5,6,1,123))  //21  0 - 6 的和
let pow=(n)=>{
     return n*n
}
let pow= n=> n*n
console.log(pow(n))  //n的平方

上一篇:es6特性


下一篇:ES6 新增数据类型Symbol