ES6新特性

于 2021-06-29 19:59:04 发布
阅读量135 收藏 4
点赞数 4
分类专栏： 前端学习 JavaScript 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46492364/article/details/118191011
版权

文章目录

前言

ES6的特点有以下几点：（相比于ES5.1）
（1）解决原有语法上的一些问题或者缺陷
（2）对原有语法进行增强
（3）全新的对象、全新的方法、全新的功能
（4）全新的数据类型和数据结构

一、声明变量的关键字使用

1.let

块级作用域：指的是用{}包裹起来的范围。块作用域内用var关键字定义的变量能够在块以外被调用，这样是不安全的，因此使用let关键字定义变量来替代var。
以下两个例子都是块级作用域：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //用let替代var，那么在块级作用域外就不能够被找到
        if (true) {
            var dd = "hello";
            let gg = "hahaha";
        }
        console.log(dd);
        console.log(gg);

    </script>
</body>
</html>

2.const

const：和let的使用方法基本上相同，但是const是只读的，不能对他赋的值进行更改，所以必须要赋初始值。可以改内部内存中的内容，不可以改指针指向。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //const 必须赋初始值，不能进行更改（只读）
        // const name = "zs";
        // name = "lisi";
        // console.log(name);
        const na = {name: "zs",age: 18};
        na.age = 20;
        console.log(na);
    </script>
</body>
</html>

二、解构

1.数组解构

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        // const arr = [100,200,300];
        // const [foo,bar,baz] = arr;
        // console.log(arr);

        // const arr = [100,200,300];
        // const [ , ,baz] = arr;
        // console.log(baz);

        // const arr = [100,200,300];
        // const [foo,...re] = arr;
        // console.log(re);

        const arr = [100,200,300];
        const [foo,bar,baz = 456,more = 123] = arr;
        console.log(baz)
        console.log(more)
    </script>
</body>
</html>

2.对象解构

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //对象解构
        // const obj = {name: "zs",age: 17}
        // const {name} = obj
        // console.log(name)

        const obj = {name: "zs",age: 17}
        const name = "tom"
        const {name: newName} = obj
        console.log(name)
        console.log(newName)
    </script>
</body>
</html>

三、字符串

1.模板字符串

在模板字符串里面可以直接进行换行，可以调用变量通过${}方式，可以执行运算。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //模板字符串(能够直接换行)
        var str = `my name 
        is gd`
        console.log(str)

        //模板字符串里面可以调用变量，可以执行运算
        var name = "gg";
        var str1 = `${name},dd,${3 + 4}`
        console.log(str1)

    </script>
</body>
</html>

2.模板字符串标签函数

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //模板字符串标签函数
        const name = "zs"
        const gender = true
        function fn(strings,name,gender) {
            const sex = gender ? "man" : "woman"
            return strings[0] + name + strings[1] + sex + strings[1]
        }
        const str = fn`${name} is a ${gender}`
        console.log(str)
    </script>
</body>
</html>

3.字符串扩展方法

includes（）：包含
startWith（）：开头字符
endWith（）：结束字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const str = `my name is gd`
        console.log(str.startsWith("my"))
        console.log(str.includes("name"))
        console.log(str.endsWith("gd"))
    </script>
</body>
</html>

4.参数默认值

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //参数默认值
        //当有多个参数时，默认值参数放到最后
        function fn(enable = true) {
            console.log(enable)
        }
        fn(false)
    </script>
</body>
</html>

5.剩余操作符

…arg:表示从当前位置到最后一位是参数的数组

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //剩余操作符
        function fn(n,...arg) {
            console.log(arg)
        }
        fn(1,2,3,4,5)
    </script>
</body>
</html>

6.展开操作符

…arr:可以将数组里面的每一项展开

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        const arr = ["foo","bar","baz"]
        console.log(...arr)
    </script>
</body>
</html>

四、函数表达式的定义方式

1.箭头函数

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        // const plus = (a,b) => {
        //     return a + b
        // }
        // console.log(plus(3,4))

        //输出奇数的箭头函数
        const arr =[1,2,3,4,5,6,7,8,9]
        const arr1 = arr.filter(i => i % 2)
        console.log(arr1)
    </script>
</body>
</html>

优点：代码简短，读起来清晰易读

2.箭头函数this

箭头函数本身没有this，查找this时会向外层查找，使用外层的this

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //this
        const obj = {
            name: "zs",
            sayHi: function () {
               setTimeout( () => {
                console.log(`hello,my name is ${this.name}`)
                },1000)
            }
        }
        obj.sayHi()
    </script>
</body>
</html>

五、对象

1.对象字面量的增强

对象中的函数方法可以直接书写，可以使用[]的方式动态添加属性。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //对象字面量的增强
        const age = "age"
        const obj = {
            name: "zs",
            sayHi () {
                console.log("hi")
            },
            //动态向对象中添加
            [age]: 18
        }
        console.log(obj)
    </script>
</body>
</html>

2.Object.assgin方法

可以将源对象里面的属性和方法复制给新对象

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        // const source1 = {
        //     a: 123,
        //     b: 456
        // }
        // const source2 = {
        //     a:345,
        //     d:8910
        // }
        // const target = {
        //     a: 678,
        //     c: 789
        // }
        // const result = Object.assign(target,source1,source2)
        // console.log(target)
        function Block(options) {
            Object.assign(this,options)
        }
        const block1 = new Block({width:20,height:20,x:50,y:50})
        console.log(block1)
</script>
</body>
</html>

3.Object.is方法

用于判断两个数字是否相等,在实际编程开发中仍然建议使用===来判断是否相等

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //判断是否相等
        console.log(
            // 0 == false
            // 0 === false
            // +0 === -0
            // NaN === NaN
            Object.is(+0,-0),
            Object.is(NaN,NaN)
        )
    </script>
</body>
</html>

4.class类

这种方式定义函数，使代码更加简洁易读工整，易于理解。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        class Person {
            constructor (name,age) {
                this.name = name
                this.age = age
            }
            sayHi () {
                console.log(`hi，my name is ${this.name}`)
            }
        }
        const p1 = new Person('zs',18)
        p1.sayHi()
    </script>
</body>
</html>

5.static静态方法

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        class Person {
            constructor (name,age) {
                this.name = name
                this.age = age
            }
            sayHi () {
                console.log(`hi，my name is ${this.name}`)
            }
            //静态方法
            static create (name,age) {
                return new Person(name,age)
            }
        }
        const p1 = Person.create("zs",19)
        p1.sayHi()
    </script>
</body>
</html>

6.extends继承

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //父类
        class Person {
            constructor (name,age) {
                this.name = name
                this.age = age
            }
            sayHi () {
                console.log(`hi，my name is ${this.name}`)
            }
        }
        //子类继承父类
        class Student extends Person {
            constructor (name,age,number) {
                super(name,age)
                this.number = number
            }
            hello () {
                super.sayHi()
                console.log(`我的学号是${this.number}`)
            }
        }
        const s1 = new Student("tom",20,1814010512)
        s1.hello()
    </script>
</body>
</html>

六、其他

1.set数据结构

与数组类似，但set集合中的所有元素是不可重复的。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //set集合
        const s = new Set()
        //给集合中添加,添加的重复项会自动过滤
        s.add(1).add(2).add(3).add(4).add(2)
        // console.log(s)
        //遍历输出集合中的每一项
        // s.forEach(i => console.log(i))

        // for (let i of s) {
        //     console.log(i)
        // }

        //集合的长度
        console.log(s.size)

        //集合是否包含某项
        console.log(s.has(1))

        //清除某一项
        console.log(s.delete(2))
        console.log(s)

        //清除集合中的所有项
        s.clear()
        console.log(s)


        //集合常常应用于数组去重
        const arr = [1,2,3,1,2]
        // console.log(new Set(arr))
    </script>
</body>
</html>

2.map数据结构

map能以任意类型当做键。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        const map = new Map()
        const a = {a: 1}
        map.set(a,100)
        console.log(map.get(a))
        
        //has包含
        //delete删除
        //clear 清空

        //遍历map
        map.forEach((value,key) => console.log(key,value))
    </script>
</body>
</html>

3.symbol数据类型

最主要的作用就是为对象添加独一无二的属性标识符，如果一个对象中的

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //symbol数据类型  独一无二的值
        const s = {}
        s[Symbol()] = 123
        s[Symbol()] = 456
        console.log(s)
        console.log(s[Symbol()])

        //验证两个symbol的值是否是独一无二的
        console.log(Symbol() === Symbol())
    </script>
</body>
</html>

4.for…of遍历

可以遍历数组，set集合，map，但是不能遍历对象。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //遍历数组
        const arr = [100,200,300,400]
        for (const item of arr) {
            console.log(item)
        }
        //遍历set
        const s = new Set()
        s.add(1).add(2)
        for (const item of s) {
            console.log(item)
        }
        //遍历map
        const m = new Map()
        m.set("a",1)
        m.set("b",2)
        for (const item of m) {
            console.log(item)
        }
        //但是不能遍历对象
        // const obj = {
        //     name: "zs",
        //     age: 18
        // }
        // for (const item of obj) {
        //     console.log(item)
        // }
    </script>
</body>
</html>

总结

ES6的新特性就学习到这里啦，ES2016也增加了两个新特性，一个是数组的includes方法，另一个是**运算符，用来计算几次幂。
在这里插入图片描述

程序媛Render
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
三ES6新特性.pdf
07-13
ES6新特性中比较突出的包括： 1. const关键字：使用const声明的常量具有块级作用域，一旦赋值后不可更改。在声明常量时必须立即初始化，否则后续尝试赋值会引发错误。 2. let关键字：let关键字允许声明块级作用域...
ES6新特性七：数组的扩充详解
08-30
ES6新特性之数组的扩充详解 ES6新特性之数组的扩充详解主要介绍了ES6新特性之数组的扩充，结合实例形式分析了ES6数组操作的常见方法与相关使用技巧。 1. Array.from()：将类似数组的对象或可遍历对象转换为真正的...
ES6新特性一： let和const命令详解
08-30
ES6新特性一：let和const命令详解 在 ECMAScript 6 中，引入了两个新的声明变量的命令：let 和 const。它们都可以用来声明变量，但是它们之间有着很大的区别。 let 命令 let 命令用来声明一个块级作用域的变量。...
ES6 新特性示例代码.zip
06-03
这个压缩包"ES6 新特性示例代码.zip"包含了与ES6新特性相关的代码示例，帮助我们更直观地理解这些特性。以下是对这些特性的详细解释： 1. **let 和 const 声明**： - `let` 用于块级作用域变量声明，解决了之前`...
ES6新特性五：Set与Map的数据结构实例分析
08-30
ES6新特性五：Set与Map的数据结构实例分析 Set数据结构是ES6中的一种新特性，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set结构是一个构造函数，用来生成Set数据结构。 Set结构的定义和属性 Set结构...
ES6新特性之Object的变化分析
08-30
在ES6（ECMAScript 2015）中，JavaScript的Object对象有了许多新的特性和改进，使得对象的定义和操作更加灵活和高效。以下是一些重要的改变： 1. **属性简写** 在ES6中，如果属性名与变量名相同，我们可以省略属性...
ES6新特性，看这就够了.pdf
09-15
ES6（ECMAScript 2015）是JavaScript语言的一个重大更新版本，它带来了许多新特性，提高了开发效率和编程的便利性。在本篇文章中，我们将详细探讨几个ES6的关键新特性：let和const关键字、字符串的扩展、解构表达式...
es6新特性之 class 基本用法解析
08-27
"ES6 新特性之 Class 基本用法解析" ES6 中引入的 Class 语法是 JavaScript 中的一种新的编程方式，提供了更接近传统语言的写法，引入了类（Class）这个概念，作为对象的模板。下面是 ES6 中 Class 的基本用法解析...
ES6新特性之函数的扩展实例详解
08-30
**ES6新特性之函数的扩展** 在ECMAScript 6（简称ES6）中，函数的使用方式得到了显著的增强，引入了多项新特性，包括函数参数默认值、rest参数、扩展运算符以及箭头函数。这些特性使得编写JavaScript函数更加灵活，...
ES6新特性的部分示例代码
04-25
这些只是ES6特性的一部分，还有像`Set`、`Map`、`WeakSet`、`WeakMap`等数据结构，以及`for...of`循环、`async/await`等更多内容，它们共同构成了ES6丰富的特性集合，使得JavaScript在前端开发中更具魅力。
ES6新特性八：async函数用法实例详解
08-30
ES6新特性八：async函数用法实例详解 async函数是ES6新特性八中的一种新的异步编程方式，它可以让异步编程变得更加简洁和易于理解。async函数的出现主要是为了解决异步编程中的一些问题，例如异步操作的结果无法...
ES6新特性思维导图
11-07
查看我整理的ES新特性思维导图，参照思维导图可以宏观角度来学习ES6的新特性。配合Day05-Day07进行学习效果更佳
JavaScript：ES6新特性深入解析
07-14
### JavaScript：ES6新特性深入解析 #### 一、ES6的诞生背景 JavaScript 自1995年诞生以来，一直是互联网开发的重要组成部分。随着时间的推移和技术的发展，JavaScript 需要不断更新以适应日益复杂的开发需求。ES6...
ES6新特性之模块Module用法详解
08-30
ES6引入了一项重要的新特性——模块(Module)，这是为了解决JavaScript长期以来缺乏内置模块系统的困境。在ES6之前，开发者通常依赖于社区制定的模块加载方案，如CommonJS（Node.js环境）和AMD（浏览器环境）。然而，...
ES6新特性之Symbol类型用法分析
08-30
总结，Symbol类型在ES6中提供了新的数据类型和属性命名机制，有助于防止属性名的冲突，同时为JavaScript的面向对象编程提供了更丰富的可能性。理解并熟练使用Symbol，可以提升代码的可维护性和安全性。希望本文的...
ES6新特性六：promise对象实例详解
12-10
then方法返回一个新的Promise对象，因此可以链式调用。每个then方法都可以指定成功和失败的回调，当上一个Promise被解决（成功或失败）时，会触发下一个then中的回调。这种链式调用使得异步操作的流程清晰，易于...
使用ES6新特性开发微信小程序（10）
03-29
在ES6中，像Array，Date和Dom元素这样的内建对象都可以被子类化。   class MyArray extends Array {  constructor(...args) {  super(...args);  } } var arr = new MyArray(); arr[1] = 12; console.log(arr....
前端开发之ES6新特性
最新发布
07-28
前端开发之ES6新特性
ES6新特性：箭头函数示例解析
"这篇文章主要汇总了ECMAScript6（简称ES6或ES2015）的一些关键新特性，通过示例代码帮助读者快速理解JavaScript的新规范。" 在ECMAScript6中，开发者获得了许多增强的功能和语法改进，极大地提升了编程体验和效率...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值