ES6语法总结

ES6特性

1 let 和 const

let 和 const 关键字用于声明变量和常量，取代了 var。
let 声明的变量具有块级作用域，而 var 声明的变量具有函数级作用域。
const 声明的常量在声明后不能再被重新赋值

# 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

# ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束

# "暂时性死区"（Temporal Dead Zone，简称 TDZ）是指在 ES6 中使用 let 或 const 声明变量时，变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。

# 在 JavaScript 中，使用 var 声明的变量在其声明语句之前就可以被访问，这种行为称为"变量提升"。而在使用 let 或 const 声明变量时，变量虽然存在于作用域中，但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。

# 暂时性死区的产生原因是，let 和 const 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化

1.1 let与var的区别

1.1.1 全局作用域

# 1 var 和 let 声明的变量在全局作用域中被定义时，两者非常相似

# 2 被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以

let a = 'let的a';
var b = 'var的b'; 
console.log(window.a);  //undefined
console.log(window.b);  // 'var的b'

1.1.2 函数作用域

# 1 var 和 let 在函数作用域中声明一个变量，两个变量的意义是相同的
# 2 var 声明的变量，在整个函数都有效，即便输出语句在定义之前(变量提升)
function  demo01(){
    let a = 'let的a'; // 函数作用域中的变量
    console.log(b)    // 不会报错
    var b = 'var的b'; // 函数作用域中的变量
}

1.1.3 块作用域

# 1 let只在for()循环中可用，而 var是对于包围for循环的整个函数可用
function demo02(){
    # i 对于for循环外的范围是不可见的(i is not defined)
    for(let i = 1; i<5; i++){
        #  i只有在这里是可见的
    }
    # i 对于for循环外的范围是不可见的(i is not defined)
}
function demo03(){
    # i 对于for循环外的范围是可见的
    for(var i = 1;i<5; i++){
        # i 在for 在整个函数体内都是可见的
    }
    # i 对于for循环外的范围是可见的
}

1.1.4 重新声明

# var允许在同一作用域中声明同名的变量，而let不可以
let a  = 'foo';
let a  = 'bar'; # 报错


var a = 'foo';
var a = 'bar'; # 可以

1.2 const

#1 const和let都是在声明的块作用域中有效，但是let声明的变量可变，值和类型都可以改变，没有限制。
#2  const声明额变量不能改变，所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值

2 箭头函数

# 箭头函数是一种更简洁的函数声明方式，可以减少函数声明的冗余代码。
# 使用箭头函数可以避免 this 绑定的问题，箭头函数的 this 继承自外层作用域
let f=()=>{}

2.1 this指向问题

# 1 在全局上下文中，this 指向全局对象，在浏览器环境中通常是 window 对象，在 Node.js 中是 global 对象
    console.log(this) # window 对象
    
# 2 函数调用：
    # 2.1 如果函数作为普通函数调用，this 指向全局对象（在严格模式下为 undefined）
    # 2.2 如果函数作为对象的方法调用，this 指向调用该方法的对象。

# 3 构造函数：
	在构造函数中，this 指向新创建的实例对象
    
# 4 箭头函数：
箭头函数的 this 指向定义时所在的作用域的 this 值，而不是调用时的 this 值。换句话说，箭头函数的 this 是词法作用域，而不是动态作用域

# 5 DOM 事件处理函数：
在 DOM 事件处理函数中，this 指向触发事件的 DOM 元素

# ES6 类方法：
在 ES6 类方法中，this 指向调用该方法的对象实例

# 案例1 
function demo01(){
    console.log(this) # window对象
}
demo01()
# 案例2
let user={
    name:'lqz',
    showName:function (){
        console.log(this.name) // user对象
    }
}
user.showName()
# 案例3
let user={
    name:'lqz',
    showName:function (){
        console.log(this.name) // user对象
        function inner(){
            console.log("函数内this:",this) // 普通函数，window对象
        }
        inner()
    }
}
user.showName()

3 模版字符串

# 1 模板字符串允许在字符串中插入变量和表达式，使用 ${} 语法。
# 2 模板字符串支持多行字符串，可以直接换行而不需要使用 \n

# 案例
let name='hope'
let age =18
let s=`我的名字是：${name},我的年龄是：${age}`
console.log(s)

4 解构赋值

#1  解构赋值允许从数组或对象中提取数据，并将其赋值给变量。
#2  解构赋值可以方便地交换变量的值，同时还支持默认值

# 案例1 
let user={name:'hope',age:19,hobby:['烫头','喝酒']}
let {name,hobby}=user
console.log(name,hobby)

# 案例2 
function getuserInfo() {
    return {name: 'hope', age: 19, hobby: ['烫头', '喝酒']}
}

let {name, hobby} = getuserInfo()
console.log(name, hobby)

# 案例3
function getuserInfo() {
    return {name: 'hope', age: 19, hobby: ['烫头', '喝酒']}
}

let {name1='1', hobby} = getuserInfo()
console.log(name1, hobby)

5 默认参数

# ES6 允许在函数参数中设置默认值，当调用函数时未提供参数时，将使用默认值

# 案例
function demo01(name,age=19) {
    console.log(name,age)
}
demo01('lqz')

6 展开运算

#1 展开运算符 ... 可以将可迭代对象（如数组、字符串、对象）展开为多个参数或元素。
#2 也可以用于函数参数

# 案例1 
let a={age:19,hobby:'抽烟'}
let user={name:'lqz',age:20,...a}
console.log(user)

# 案例2
let l=[1,2,3]
let l1=[44,55,66,...l]
console.log(l1)

# 案例3
function demo01(a,...b){
    console.log(a)
    console.log(b)
}
demo01(1,2,34,4)
let l=[44,5,66,7]
demo01(...l)
let l=[44,5,66,7]
consile.log(...l)
//44 5 66 7

7 模块化

# 1 ES6 支持模块化编程，通过 `export` 和 `import` 关键字实现模块的导出和导入。
# 2 模块化可以帮助组织代码，使代码更易于维护和重用

# 案例1 命名导出和导入
### utils.js 导出
export const name='lqz'
export  function demo01(){
    console.log('demo01')
}
### 导入
<script type="module">
    import {name,demo01} from "./utils.js";
    console.log(name)
    demo01()
</script>


# 案例2 默认导出和导入
### utils.js 导出
const name='lqz'
function demo01(){
    console.log('demo01')
}
export default {
    name,
    demo01
}
### 导入
<script type="module">
    import utils from "./utils.js";
    console.log(utils.name)
    utils.demo01()
</script>


# 案例3 ，重命名
### utils.js 导出
export const age=19;
### 导入
import {age as a} from "./utils.js";
console.log(a)

# 案例4，全部导入
##utils.js导出
export const name='lqz'
export function demo01(){
    console.log('demo01')
}
export const age=19;
### 导入
import * as a from "./utils.js";
console.log(a.age)

8 vue项目中组件的使用

#### ##  1 创建组件Child## ## ## ## ## ## ## 
<template>
  <div>
    <div class="top">
      <button>后退</button>
      <span @click="handleShow">{{ title }}</span>
      <button>前进</button>
    </div>

  </div>

</template>


<script>
export default {
  name: 'Child',
  data() {
    return {
      title: '首页'
    }
  },
  methods: {
    handleShow() {
      alert('1111')
    }
  }
}

</script>


<style scoped>
.top {
  display: flex;
  justify-content: space-between;
}
</style>


#### ##  2在其他组件中使用## ### ## ##### ## 
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button>点我弹alert</button>
    <hr>
    <Child></Child>
  </div>
</template>
<script>
# @ 代指---》src文件夹
import Child from "@/components/Child.vue";
export default {
  name: 'HelloWorld', # 组件名字
  components:{
    Child  # 注册局部组件
  }
}
</script>

<style>
button{
  background-color: aqua;
}
</style>

posted @ 2024-04-29 20:02 -半城烟雨阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

-半城烟雨

ES6语法总结

ES6特性

1 let 和 const

1.1 let与var的区别

1.1.1 全局作用域

1.1.2 函数作用域

1.1.3 块作用域

1.1.4 重新声明

1.2 const

2 箭头函数

2.1 this指向问题

3 模版字符串

4 解构赋值

5 默认参数

6 展开运算

7 模块化

8 vue项目中组件的使用

公告