es6语法总结

es6语法总结

1.1 let,const

# let 定义变量
# const定义常量
------块级作用域----
# var 以后尽量少用，函数作用域

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

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



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

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

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

1.2 箭头函数

# 1 简化代码
# 2 箭头函数内部，没有自己的this---》使用上一级的
	let f=()=>{}
    
# 3 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 元素

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

1.3 模版字符串

let a=`我的名字是:${name}`

1.4 解构赋值

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

 // 1 解对象
    let user = {name: 'lqz', age: 19, hobby: '烫头'}
    // let name=user.name
    // let age=user.age
    let {name,age,hobby,a=10} = user
    console.log(name,age,hobby,a)

    // 2 解数组
    let l=[11,22,33]
    let[a,b]=l
    console.log(a,b)

    //3 结构函数返回值
    function getuserInfo() {
        return {name: 'lqz', age: 19, hobby: ['烫头', '喝酒']}
    }

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

1.5 默认参数

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

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

1.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)

1.7 模块化

1.7.1 默认导出和导入

// 1 导出

let name='lqz'
function add(a,b){
    return a+b
}
// 必须导出，外部才能使用
// 1 默认导出--》只能导出一次
export default {
    name,
    add
}
// 2 导入
<script type="module">
    // 默认导出的导入
    import utils from './lqz/utils.js'
    console.log(utils.name)
    let res=utils.add(3,4)
    console.log(res)

</script>

1.7.2 命名导出和导入

// 1 命名导出
export let name='lqz'
export function add(a,b){
    return a+b
}
export const age=100

// 2 导入
// 2.1 命名导出的导入
import {add,age} from './lqz/utils.js'
console.log(add(8,9))
console.log(age)
// 2.2 命名导出的导入
<script type="module">
    import * as xx from './lqz/utils.js'
    console.log(xx.add(8,9))
    console.log(xx.age)

</script>

// 2.3 命名导出的导入
<script type="module">
    // 命名导出的导入
    import {add as myadd}  from './lqz/utils.js'
    console.log(myadd(8,9))
</script>

1.7.3 如果在文件夹下有个index.js,只要导到文件夹一层即可