ECMAScript 6

于 2021-09-23 11:54:41 发布
阅读量202 收藏
点赞数
分类专栏： ES6 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59938047/article/details/120430415
版权

1.简介

ECMAScript

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

1.1ECMAScript 的背景

JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。这也有利于这门语言的开放和中立。

1.2ECMAScript 的历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

  • 1997 年 ECMAScript 1.0 诞生。
  • 1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
  • 1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
  • 2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
  • 2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
  • 2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

1.3ES6 的目标与愿景

成为更好编写的开发语言有以下目标。

适应更复杂的应用；实现代码库之间的共享；不断迭代维护新版本。

2.let关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明

块儿级作用域

不存在变量提升

不影响作用域链

    <script>
        // 1. let关键字不能重复使用
        // let a = 15;
        let a = 10;
        console.log(a); //Uncaught SyntaxError: Identifier 'a' has already been declared
        // 2.不存在变量提升
        // console.log(c);
        //let c = 100; //Cannot access 'c' before initialization
        // 3. 代码块内有效
        var test = function() {
            let z = 160;
            // console.log(z);//160
        }
        console.log(z); //z is not defined
        test()
    </script>

3.const 关键字

  const 关键字用来 声明常量 ， const 声明有以下特点

声明必须赋初始值

标识符一般为大写

不允许重复声明

值不允许修改

块儿级作用域

 注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

    <script>
        // 1.声明必须赋值
        // 2.标识符要大写
        const A = 111;
        console.log(A);
        //  const B;
        // console.log(B); //Missing initializer in const declaration
        // 3.不允许重复声明
        // 4.不允许修改值
        //  const name = "王小";
        const name = "王二小";
        console.log(name); //Identifier 'name' has already been declared
    </script>

4.变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

频繁使用对象方法、数组元素，就可以使用解构赋值形式 

        const arr1 = [111, 210, 15, 14];
        const [a, b, c, d, ] = arr1;
        console.log(c); //15
        console.log(a, b, c, d); //111 210 15 14
        // 对象的解构赋值
        const obj1 = {
            name: "王小",
            age: 20,
            home: "北京"
        }
        let {
            name,
            age,
            home
        } = obj1;
        console.log(home); //北京

复杂解构赋值

        const wangfei = {
            name: '王菲',
            age: 18,
            songs: ['红豆', '流年', '暧昧', '传奇'],
            history: [{
                name: '窦唯'
            }, {
                name: '李亚鹏'
            }, {
                name: '谢霆锋'
            }]
        };
        const {
            name: newname,
            age,
            songs: [a, b, c, d],
            history: [first, second, third]
        } = wangfei
        console.log(newname); //王菲
        console.log(age); //18
        console.log(a, b, c, d); //红豆 流年 暧昧 传奇
        console.log(first, second, third); //{name: '窦唯'} {name: '李亚鹏'} {name: '谢霆锋'}
        const {
            songs,
            history
        } = wangfei;
        console.log(songs, history);

 

5.模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符

可以使用 ${xxx} 形式输出变量

当遇到字符串与变量拼接的情况使用模板字符串

        const stu = [{
            name: "王小",
            age: 20
        }, {
            name: "王二小",
            age: 10
        }, {
            name: "王小小",
            age: 26
        }];
        let student = "";
        for (let i = 0; i < stu.length; i++) {
            student += '<li>' + stu[i].name + "-" + stu[i].age + '</li>'
        }
        document.querySelector('ul').innerHTML = student
        console.log(student);
        // 模板字符串
        let students = "";
        for (let i = 0; i < stu.length; i++) {
            students += `
             <li>${stu[i].name}-${stu[i].age}</li>
             `
        }
        document.querySelector('ul').innerHTML = students;
        console.log(students);

6. 简化对象写法

 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁 

    <script>
        let name = "王小";
        let age = 20;
        let test = function() {
            console.log(简化对象写法);
        }
        let test1 = {
            name,
            age,
            test,
            say(name) {
                console.log(name)
            }
        }
        console.log(test1.test1)
        test1.say("王小")
    </script>

7.箭头函数

ES6 允许使用「箭头」（=>）定义函数

箭头函数的注意点:

如果形参只有一个，则小括号可以省略

函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

箭头函数 this 指向声明时所在作用域下 this 的值

箭头函数不能作为构造函数实例化

不能使用 arguments

箭头函数不会更改 this 指向，用来指定回调函数会非常合适

        function test() {
            console.log("箭头函数")
        }
        test();
        // 当没有参数的时候，小括号不能省略
        const fun = () => {
            console.log("箭头函数")
        }
        fun();
        // 以上两种函数意义相同
        // 如果形参只有一个，则小括号可以省略
        const fun1 = a => {
            console.log(a);
        }
        fun1(8);
        // 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
        const fun2 = a => console.log(a);
        fun2(100);
        //当只有两个以上的参数的时候，小括号不可以省略
        const fun3 = (a, b) => console.log(a * b);
        fun3(10, 15);
        // 当方法体只有一行代码的时候，且有为返回值，return和大括号可以省略
        const fun4 = (a, b) => a * b;
        console.log(fun4(2, 9));
        //this指向
        // 箭头自身没有this指向，他会指向于外部的this
        const person = {
            name1: 'admin',
            sayHi() {
                setTimeout(() => console.log(), 1000)
            }
        }
        person.sayHi();

  

8.rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
rest 参数非常适合不定个数参数函数的场景 
     function test(...rest) {
            console.log(rest.length);
        }
        test(1, 3, 15, 100, 65) //5
        function fun(a, b, c, ...tes) {
            console.log(a, b, c, ...tes)
        }
        fun(110, 120, 119, 911, 996, 456, 258)

9.spread 扩展运算符

扩展运算符（ spread ）也是三个点（ ... ）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔
的参数序列，对数组进行解包 
        let arr = ["宝鸡", "咸阳", "西安", "汉中", "渭南"];

        function fun(a, b, c, d, e) {
            console.log(a, b, c, d, e);
        }
        fun(...arr);
        //合并数组
        let arr1 = ["宝鸡", "咸阳", "西安", "汉中", "渭南"];
        let arr2 = ["陕西"];
        const arr3 = [...arr1, ...arr2]
        console.log(arr3);
        //合并对象
        const obj1 = {
            name: "王小",
            age: 20
        }
        const obj2 = {
            home: "北京"
        }
        const obj3 = {...obj1,
            ...obj2
        }
        console.log(obj3);
        //展开对象
        const obj4 = {
            name: "王小小"
        };
        const obj5 = {
            age: "100"
        };
        const obj6 = {
            home: "宝鸡"
        };
        const obj7 = {
            job: "student"
        };
        const obj = {...obj4,
            ...obj5,
            ...obj6,
            ...obj7
        };
        console.log(obj);

10.迭代器

 遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，

就可以完成遍历操作。

ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费

原生具备 iterator 接口的数据(可用 for of 遍历)

 Array

 Arguments

 Set

 Map

 String

NodeList

工作原理

创建一个指针对象，指向当前数据结构的起始位置

第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

每调用 next 方法返回一个包含 value 和done 属性的对象

注: 需要自定义遍历数据的时候，要想到迭代器

        window.onload = function() {
            const arr = [{
                name: "王小",
                age: 26
            }, {
                name: "王二小",
                age: 10
            }, {
                name: "王小二",
                age: 15
            }];
            // 声明
            let test = "";
            for (const arr1 of arr) {
                test += `
<li>${arr1.name}-${arr1.age}
    </li>
    `
            }
            document.querySelector("ul").innerHTML = test;
        }

11.Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，

集合的属性和方法：

size 返回集合的元素个数

add 增加一个新元素，返回当前集合

delete 删除元素，返回 boolean 值

has 检测集合中是否包含某个元素，返回 boolean 值

clear 清空集合，返回 undefined 

    <script>
        // 集合
        let a1 = new Set();
        console.log(a1); //Set(0) {}
        //集合中的数值是惟一的，会自动去重
        let a2 = new Set([15, 20, 20, 18, 15, 2]);
        console.log(a2); //Set(4) {15, 20, 18, 2}
        // size集合的个数
        console.log(a1.size); //0
        console.log(a2.size); //4
        //add增加一个新元素，返回当前集合
        console.log(a2.add(110)) //Set(5) {15, 20, 18, 2, 110}
            //delete删除元素返回布尔值
        console.log(a2.delete(18)); //true
        console.log(a2); //Set(4) {15, 20, 2, 110}
        //has检测是否存在某个值
        console.log(a2.has(88)); //false
        // clear 清空集合
        console.log(a2.clear()); //undefined
        console.log(a2); //Set(0) {}
    </script>

12.Map

[[key, value], [key, value]]

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，

各种类型的值（包括对象）都可以 当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算

符』和『for…of…』进行遍历。

Map 的属性和方法：

size 返回 Map 的元素个数

set 增加一个新元素，返回当前 Map

get 返回键名对象的键值

has 检测 Map 中是否包含某个元素，返回 boolean 值

clear 清空集合，返回 undefined

    <script>
        let m = new Map();
        let m1 = new Map([
            ["name", "王小"],
            ["obj", 20],
            ["number", "beijing"]

        ]);
        console.log(m1); //map.html:17 Map(3) {'name' => '王小', 'obj' => 20, 'number' => 'beijing'}
        //  size==  返回元素个数
        console.log(m1.size); //3
        //set ==增加一个新元素返回当前map
        console.log(m1.set("age", 88)); //Map(4) {'name' => '王小', 'obj' => 20, 'number' => 'beijing', 'age' => 88}
        //get ==返回键名得值
        console.log(m1.get("obj")); //20
        //has==是否包含某个元素/键名
        console.log(m1.has("number")); //true
        // clear 清空集合
        console.log(m1.clear()); //undefined
    </script>

大大126
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript_6
01-14
es6简介，针对es6的简单介绍。
java之学习记录 3 - 2 - es6
dear_zx的博客
12-21 329
ECMAScript6 简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言 ECMAScript 和 JavaScript 的关系 要讲清楚这个问题，需要回顾历史。 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成
ECMAScript 6学习总结（1）——ECMAScript 6入门简介
科技D人生
05-26 1640
ECMAScript 6简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什
ECMAscript6
weixin_34289454的博客
03-06 120
简介： ECMAscript6是javascript语言的下一代标准，于2015年6月发布，为了使JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1.let命令定义变量 a.let没有声明提前 console.log(a) let a = 10 //此时打印台会报错，访问的是window，window上无a b.let具有块级作用域，声明的变...
Ecmascript 6
不一样的花朵的博客
05-09 491
知识点 Ecmascript 6 Ecmascript 6 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。 Ecmascript 是 JavaScript 语言的标注规范 JavaScript 是 Ecmascript 规范的具体实现 具体实现取决于各大浏览器厂商的支持进度 Ecmascript 6 也被称作 Ecmascript 2015 各大浏览器厂商对于最新的 Ecmascript 6 标准支持可以参照： http:
ECMAScript 6入门
12-27
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
Learning ECMAScript 6
03-13
Learning ECMAScript 6 Learning ECMAScript 6 Learning ECMAScript 6 Learning ECMAScript 6
ECMAScript6简书
12-06
​ 在ES5中, arguments是一个伪数组,可以使用length来遍历他,但却不能使用完全Array的api(slice/sort).在ES6中,可以使用新特性叫做rest参数,他的形式为 ...参数名,比如...args,rest是一个真数组,所以至此Array所有...
Understanding ECMAScript 6
10-28
ECMAScript 6 represents the biggest update to the core of JavaScript in the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C. Zakas provides a complete guide to the ...
ecmascript 6 入门.pdf
08-16
ecmascript 6 入门.pdf 阮一峰著 在此分享 请不要用于商用 此pdf由于是生成的所以比较小，但是内容很全
ECMAscript 6.0
01-06
ECMAscript 6.0PDF,先说清楚，这是一个需要对js 5.0和用过模块化框架的有一些基础的人，更容易理解
ES6_尚硅谷—谷粒学院项目es6相关小结
小叶子的博客
03-05 233
es61. let变量作用范围2.let定义变量特点3.const声明常量（只读变量）4.数组解构5.对象解构6.模板字符串 `7.声明对象简写8.定义方法简写9.对象扩展运算符10.箭头函数 概述 es6是JavaScript的一套标准，规范 es6代码简单，浏览器兼容性差，部分低版本浏览器不支持 es5代码复杂，浏览器兼容性好，大部分浏览器支持 写的时候用es6，然后用工具把es6变成es5执行 基本语法 ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关
ecmascript 6入门 pdf
最新发布
12-22
ECMAScript 6是JavaScript的一种标准，也被称为ES6或ES2015。它带来了许多新的语言特性和改进，使得JavaScript更为强大和灵活。如果你想学习ECMAScript 6，我建议你可以找一本入门级的PDF书籍，比如《ECMAScript 6...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值