5.ES6语法

1.简介

ECMAScript 6.0是JavaScript语言的下一代标准, 已经在2015年发布了，他的目标是使的JS可以编写复杂的应用程序，成为企业级开发程序,并且绝大数浏览器都已经支持了

以下总结自己常用的的，后续慢慢补充

2.使用

2.1 变量

js中变量的声明有三种，var/let/const

var:这是在ES5中常用的语法，变量会有提升
let:变量不会提升
const:变量不会提升，声明的是一个常量，如果声明的是是一个对象，则对象内部的数据则可修改

2.2 模板字符串

使用``来定义模板字符串，对于变量使用${变量名}来定义，可以很好的实现字符串的拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">

</div>

</body>
<script>
    const box = document.querySelector(".box")
    let id = 1
    let name = 'kunmzhao'
    let htmlStr = `<ul>
        <li id=${id}>${name}</li>
    </ul>`
    box.innerHTML = htmlStr
</script>
</html>

2.3 函数

2.3.1 携带默认参数

默认的参数也可以是个函数

<script>
    const box = document.querySelector(".box")

    function add(a = 10, b = getVal(5)) {
        return a + b
    }
    function getVal(a){
        return a+5
    }
    console.log(add(20))
</script>

2.3.2 不定长参数

类似python中的*args，将数据封装成一个数组

<script>
    function myfunction(...args){
        console.log(args)
    }
    myfunction('a', 'b', 'c')
      
  // 将数据打散传入
      function myfunction2(v1, v2, v3){
        console.log(args)
    }
      myfunction2(['a','b', 'c'])
</script>

2.3.3 箭头函数

箭头函数最大的特点是没有this作用链，在后续的VUE中使用是非常广泛的，是非常重要的

在JS中的函数默认都会有一个this，this指向的是调用者对象，如果在函数里面再次嵌套一个函数，则嵌套函数的this就是Windows对象，如下

 1 <script>
 2     function func() {
 3         console.log(this)
 4     }
 5 
 6     func() // windows对象
 7 
 8     var v = {
 9         name: 'kunmzhao',
10         age: 18,
11         f: function () {
12             console.log(this)
13         },
14         func: function () {
15             function inner() {
16                 console.log(this)
17             }
18 
19             inner()
20         }
21 
22     }
23     v.f()  // v对象
24     v.func() // windows对象
25 
26     // --------------使用箭头函数
27     let w = {
28         name: 'victor',
29         func: function () {
30             // 定义箭头函数并执行
31             const inner = () => {
32                 console.log(this)
33                 console.log(this.name)
34             };
35             inner()
36         }
37     }
38     w.func() // w对象， victor
39 </script>

View Code

2.4 解析赋值

针对数组和对象进行操作,简化代码

2.4.1 对象解构

变量名和对象的键必须对应

    let obj = {
        name: 'victor',
        age: 30,
    } ;
    // 方式一
    // let name = obj.name
    // let age = obj.age
    // 方式二
    //let {name, age} = obj;
    // console.log(name, age)
    // 方式三
    let{name} = obj
    console.log(name)

函数传参解构

function getInfo({name, age}){
    console.log(name, age)
}
let info = {'name':'kunmzhao',age:18}

getinfo(info)

在后面的VUE中模块导入中会大量使用，如

import {ref} from 'vue'

2.4.2 数组解构

<script>
    let books = [1, 2, 3]
    let [a, b, c] = books
    console.log(a, b, c)

    let [d, f] = books
    console.log(d, f)

</script>

函数参数解构

function getInfo([n1,n2]){
    console.log(n1, n2)
}
let info = [100, 200]

getinfo(info)

2.5 模块导入导出

2.5.1 导出

在js文件中如果希望外部使用该文件中的变量或者方法，就需要导出

// 匿名导出
export default {obj, obj}  // obj可以是变量或者方法
// 具名导出
export const name = {obj,obj}

2.5.2 导入

在js文件总想要使用其它js文件中的方法或者变量，则需要导入

import 别名 from 路径
别名.变量
别名.方法

posted on 2022-11-14 15:07 阿明明阅读(17) 评论(0) 编辑收藏举报