ES6 （1）

最新推荐文章于 2024-06-20 20:20:21 发布

ㄗòs╃牸架

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量290

点赞数

分类专栏： ES6 文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/121853455

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、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的平方

六、箭头函数案例

在普通函数中this无法明确其指向，而箭头函数则明确指向其所处的环境

案例中的点击事件有延时效果，普通函数点击事件完成后，延时未完成，当延时结束时this的指向就不明确，导致无法执行，而箭头函数明确将this指向点击事件。当延时完成时，则进行this的指向，点击事件。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数案例</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        let box=document.getElementsByClassName("box")[0]
        box.onclick=function(){
           setTimeout(()=>{
               console.log(this)
               this.style.backgroundColor="blue"
           },3000)   //可以改变颜色
           //setTimeout(function(){
           //   this.style.backgroundColor="blue"
           //},3000)   //无法改变颜色
        }
    </script>
</body>

七、函数的默认值

es6语法默认参数将具有默认值放到后面，将没有默认值往前放

        let db={
            host:"localhost",
            port:33006,
            password:123
        }
        function connect({host,port,password}){  //直接用属性做参数
            console.log(host)  
            console.log(port)
            console.log(password)
        }
        connect(db)

        function show(c,a=1,b=2){
            console.log(a+b+c)
        }
        show(20)  //23  不明确的参数在前边，在定义show(20)时 默认20位为首位未定义的值

八、rest 参数

rest 参数类比 arguments 参数

在箭头函数中rest能放入除了形参以外的全部参数而arguments可以放入所有的参数

        let sum=(1,2)=>{
            console.log(args)
        }
        sum(1,2,3,4,5)   //3 4 5

        function sum(a,b){
           console.log(arguments)
        }
        sum(1,2,3,4,5)

九、拓展运算符

...拓展运算符 ... 用于复杂数据的展开

        let arr=[1,2,3]
        console.log(arr) //输出的是数组
        console.log(...arr) //1,2,3
----------------------------------------------------------------------------
        let obj={
            a:1,
            b:2 
        }
        console.log(...obj) //不能直接展开对象  报错
-----------------------------------------------------------------------------    
        let r=[4,5,6]   
        let result=Math.max(...r)  //无法直接对数组进行取最大 将函数R分开 并取最大值
        console.log(result)     //6 
------------------------------------------------------------------------------
        let arr=[1,2,3]
        let x=[...arr]
        x.push(4)
        console.log(arr)
        console.log(x)
        let obj={
            a:1,
            b:2,
            c:3
        }
        let daobj={
            ...obj,
            d:20
        }
        console.log(obj)
        console.log(daobj)

ㄗòs╃牸架

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 （1）

一、let 与 const 定义变量var 变量名称 = 赋值作用域问题：全局作用域局部作用域 let 与 const 编程语言中{}块级作用域if(true){ var x=20}console.log(x) /20 使用var 与 let const 的区别 1、新增块级作用域每一个 {} 就是一个独特的块级作用域通过let或者const定义变量在其内部生...
复制链接

扫一扫