ES6语法新特性


最近在学vue发现老师讲的好多都用到了es6的语法,所以补一下笔记,有些确实也不是很懂见谅

为什么要学习 ES6

ES6 的版本变动内容最多,具有里程碑意义;
ES6 加入许多新的语法特性,编程实现更简单、高效;
ES6 是前端发展趋势,就业必备技能;

let 关键字

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

  1. 不允许重复声明;
  2. 块儿级作用域(局部变量);
  3. 不存在变量提升;
  4. 不影响作用域链;
 //1.声明变量
        // let关键字使用示例:
        let a; // 单个声明
        let b, c, d; // 批量声明
        let e = 1; // 单个声明并赋值
        let f = 18, g = 'dyk', h = []; // 批量声明并赋值

不允许重复声明

// 1. 不允许重复声明;
		let name='dyk';
        let name='cb';

//报错 :Uncaught SyntaxError: Identifier 'name' has already been declared

在这里插入图片描述

块儿级作用域(局部变量):

// es5 作用域:全局,函數,eval
        //  块儿级作用域(局部变量);
        //不光是大括号,还可以作用在 if else while for的大括号里
        {
            let cat = "tomcat";
            console.log(cat);
        }
        console.log(cat);
// 报错:Uncaught ReferenceError: cat is not defined

在这里插入图片描述

不存在变量提升:

什么是变量提升:
就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在;

// 什么是变量提升:就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在;
        console.log(name); // 可输出默认值
        console.log(name2); // 报错:Uncaught ReferenceError: Cannot access 'name2' before initialization
        var name = "dyk"; // 存在变量提升
        let name2 = "cb"; // 不存在变量提升

在这里插入图片描述

不影响作用域链:

什么是作用域链:很简单,就是代码块内有代码块,跟常规编程语言一样,上级代码块中的局部变量下级可用

 {
            let p = "dyk";
            function fn() {
                console.log(p); // 这里是可以使用的
            }
            fn();
        }

let案例:点击div更改颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let案例:点击div更改颜色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">let案例:点击div更改颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let items = document.getElementsByClassName('item');
        // 遍历并绑定事件
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                // 修改当前元素的背景颜色
                this.style.background = 'pink'; // 写法一:常规写法一般无异常
                //items[i].style.background = 'pink'; // 报错

            }
        }
    </script>
</body>

</html>

原来用var声明i如果 items[i].style.background = ‘pink’;会报错
因为var在循环完后是3,item[3]不存在所以只能用this

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let案例:点击div更改颜色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">let案例:点击div更改颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let items = document.getElementsByClassName('item');
        // 遍历并绑定事件
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                // 修改当前元素的背景颜色
                // this.style.background = 'pink'; // 写法一:常规写法一般无异常
                items[i].style.background = 'pink'; // 写法二
                // 写法二:需要注意的是for循环内的i必须使用let声明
                // 如果使用var就会报错,因为var是全局变量,
                // 经过循环之后i的值会变成3,items[i]就会下标越界
                // let是局部变量
                // 我们要明白的是当我们点击的时候,这个i是哪个值
                // 使用var相当于是:
                // { var i = 0; }
                // { var i = 1; }
                // { var i = 2; }
                // { var i = 3; }
                // 下面的声明会将上面的覆盖掉,所以点击事件每次找到的都是3
                // 而使用let相当于是:
                // { let i = 0; }
                // { let i = 1; }
                // { let i = 2; }
                // { let i = 3; }
                // 由于let声明的是局部变量,每一个保持着原来的值
                // 点击事件调用的时候拿到的是对应的i
            }
        }
    </script>
</body>

</html>

应用场景

以后声明变量使用 let 就对了;

const 关键字

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

  1. 声明必须赋初始值;
  2. 标识符一般为大写(习惯);
  3. 不允许重复声明;
  4. 值不允许修改;
  5. 块儿级作用域(局部变量);

声明必须赋初始值:

// 1. 声明必须赋初始值;
        const NAME="dyk";
        const NAME2;

在这里插入图片描述

不允许重复声明:

 // 3. 不允许重复声明;

        const NAME = "dyk";
        const NAME = "cb";

在这里插入图片描述

值不允许修改:

注意:
对数组元素的修改和对对象内部的修改是可以的(数组和对象存的是引用地址);

const NAME = "dyk";
         NAME = "cb";

在这里插入图片描述

const arr=['dyk','cb','lfw']
        arr.push('lwy')
        console.log(arr)

在这里插入图片描述

块儿级作用域(局部变量):

// 5. 块儿级作用域(局部变量);
        {
            const CAT = "tomcat";
            console.log(CAT);
        }
        console.log(CAT);

在这里插入图片描述

应用场景:

声明对象类型使用 const,非对象类型声明选择 let;

变量和对象的解构赋值

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

 // ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
        // 1、数组的解构赋值
        const F4 = ["小沈阳", "刘能", "宋小宝", "赵四"];
        let [a, b, c, d] = F4;
        // 这就相当于我们声明4个变量a,b,c,d,其值分别对应"小沈阳", "刘能", "宋小宝", "赵四"
        console.log(a + b + c + d); // 小沈阳刘能宋小宝赵四
        // 2、对象的解构赋值
        const F3 = {
            name: "赵本山",
            age: 22,
            sex: "男",
            xiaopin: function () { // 常用
                console.log("我会演小品!");
            }
        }
        let { name, age, sex, xiaopin } = F3; // 注意解构对象这里用的是{}
        console.log(name + age + sex + xiaopin); // 赵本山22男
        xiaopin(); // 此方法可以正常调用

应用场景:

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

模板字符串

概述:
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
字符串中可以出现换行符;
可以使用 ${xxx} 形式引用变量;

<script>
        // 声明字符串的方法:单引号('')、双引号("")、反引号(``)
        // 声明
        let string = `我也一个字符串哦!`;
        console.log(string);
        // 特性
        // 1、字符串中可以出现换行符,原来单引号要用字符串拼接
        let str =
            `<ul>
        <li>大哥</li>
        <li>二哥</li>
        <li>三哥</li>
        <li>四哥</li>
        </ul>`;
        console.log(str);
        // 2、可以使用 ${xxx} 形式引用变量
        let s = "大哥";
        let out = `${s}是我最大的榜样!`
        console.log(out);
    </script>

应用场景:

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

简化对象和函数写法

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

 <script>
        // ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
        // 变量和函数
        let name = "dyk";
        let change = function () {
            console.log("我是dyk为自己代言");
        }
        //创建对象
        const school = {
            // 完整写法
            // name:name,
            // change:change
            // 简化写法
            name,
            change,
            // 声明方法的简化
            say() {
                console.log("言行一致!");
            }
        }
        school.change();
        school.say();

    </script>

箭头函数

概述:
ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿
名函数的定义;

箭头函数的注意点:

  1. 如果形参只有一个,则小括号可以省略;
  2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
  3. 箭头函数 this 指向声明时所在作用域下 this 的值;
  4. 箭头函数不能作为构造函数实例化;
  5. 不能使用 arguments;

特性:

  1. 箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;
  2. 不能作为构造实例化对象;
  3. 不能使用 arguments 变量;

基本写法和箭头函数写法

// ES6允许使用箭头(=>)定义函数
        // 传统写法:无参数
        var say = function () {
            console.log("hello!");
        }
        say();
        // ES写法2:无参数
        let speak = () => console.log("hello 哈哈!");
        speak();


        // 传统写法:一个参数
        var hello = function (name) {
            return "hello " + name;
        }
        console.log(hello("dyk"));

        // ES6箭头函数:一个参数
        let hi = name => "hi " + name;
        console.log(hi("dyk"));


        // 传统写法:多个参数
        var sum = function (a, b, c) {
            return a + b + c;
        }
        console.log(sum(1, 2, 3));

        // ES6箭头函数:多个参数
        let he = (a, b, c) => a + b + c;
        console.log(he(1, 2, 3));

特性

this指向

结论:箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值

 // 特性
        // 1、箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值
        const school = {
            name: "大哥",
        }
        // 传统函数
        function getName() {
            console.log("getName:" + this.name);
        }
        // 箭头函数
        getName1 = () => console.log("getName1:" + this.name);
        window.name = "dyk";
        // 直接调用
        getName();
        getName1();
        // 使用call调用
        getName.call(school);
        getName1.call(school);
// 结论:箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值

不能作为构造实例化对象

// 2、不能作为构造实例化对象
 let Persion = (name,age) => {
 this.name = name;
 this.age = age;
 }
 let me = new Persion("dyk",24);
 console.log(me);
// 报错:Uncaught TypeError: Persion is not a constructor

不能使用 arguments 变量

// 3、不能使用 arguments 变量
let fn = () => console.log(arguments);
fn(1,2,3);
// 报错:Uncaught ReferenceError: arguments is not defined

简写

// 箭头函数简写
    // 1.省略小括号,当形参只有一个参数时
    let add=n =>{
        return n+n;
    }
    console.log(1)
    // 省略花括号,当代码只有一条语句时,此时return必须省略,并且语句的执行结果就是函数的返回值

    let pow= n =>n*n;

    console.log(pow(2))

需求-1:点击 div 2s 后颜色变成『粉色』:

传统写法存在问题:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数的实践和应用场景</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        // 需求-1 点击 div 2s 后颜色变成『粉色』
        // 获取元素
        let ad = document.getElementById('ad');
        // 绑定事件
        ad.addEventListener("click", function () {
            // 传统写法
            // 定时器:参数1:回调函数;参数2:时间;
            setTimeout(function () {
                console.log(this);
                this.style.background = 'pink';
            }, 2000);
            // 报错Cannot set property 'background' of undefined
        });
    </script>
</body>

</html>

报错,因为定时器的this对象是window

传统写法问题解决:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数的实践和应用场景</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        // 需求-1 点击 div 2s 后颜色变成『粉色』
        // 获取元素
        let ad = document.getElementById('ad');
        // 绑定事件
        ad.addEventListener("click", function () {
            // 传统写法
            // 保存 this 的值
            let _this = this;
            // 定时器:参数1:回调函数;参数2:时间;
            setTimeout(function () {
                console.log(this);
                _this.style.background = 'pink';
            }, 2000);
            
        });
    </script>
</body>

</html>

es6箭头函数写法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数的实践和应用场景</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        // 需求-1 点击 div 2s 后颜色变成『粉色』
        // 获取元素
        let ad = document.getElementById('ad');
        // 绑定事件:这也是错误写法,这里的this还是window
        // ad.addEventListener("click", () => {
        // // ES6写法
        // // 定时器:参数1:回调函数;参数2:时间;
        // setTimeout(() => this.style.background = 'pink',2000);
        // }
        // )
        // 绑定事件
        ad.addEventListener("click", function () {
            // ES6写法
            // 定时器:参数1:回调函数;参数2:时间;
            // 这个this才是ad
            setTimeout(() => this.style.background = 'pink', 2000);
        }
        )
    </script>
</body>

</html>

需求-2 从数组中返回偶数的元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数的实践和应用场景</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        // 需求-1 点击 div 2s 后颜色变成『粉色』
        // 获取元素
        let ad = document.getElementById('ad');
        // 绑定事件:这也是错误写法,这里的this还是window
        // ad.addEventListener("click", () => {
        // // ES6写法
        // // 定时器:参数1:回调函数;参数2:时间;
        // setTimeout(() => this.style.background = 'pink',2000);
        // }
        // )
        // 绑定事件
        ad.addEventListener("click", function () {
            // ES6写法
            // 定时器:参数1:回调函数;参数2:时间;
            // 这个this才是ad
            setTimeout(() => this.style.background = 'pink', 2000);
        })
        //需求-2 从数组中返回偶数的元素
        const arr = [1, 6, 9, 10, 100, 25];
        // const result = arr.filter(function(item){
        // if(item % 2 === 0){
        // return true;
        // }else{
        // return false;
        // }
        // });
        const result = arr.filter(item => item % 2 === 0);
        console.log(result);
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
    </script>
</body>

</html>

箭头函数总结

箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

ES6中函数参数的默认值

概述:
ES允许给函数的参数赋初始值;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>函数参数默认值</title>
</head>

<body>
    <script>
        //ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        function add(a, b, c = 10) {
            return a + b + c;
        }
        let result = add(1, 2);
        console.log(result); // 13
        //2. 与解构赋值结合
        // 注意这里参数是一个对象
        function connect({ host = "127.0.0.1", username, password, port }) {
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            host: 'atguigu.com',
            username: 'root',
            password: 'root',
            port: 3306
        })
    </script>
</body>

</html>

rest参数

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>rest参数</title>
</head>

<body>
    <script>
        // ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;
        // ES5获取实参的方式
        function data() {
            console.log(arguments); //arguments是对象
        }
        data("大哥", "二哥", "三哥", "四哥");
        // ES6的rest参数...args,rest参数必须放在最后面
        function data1(...args) {
            console.log(args); // fliter some every map  //rest参数是数组
        }
        data1("大哥", "二哥", "三哥", "四哥");

        function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6)
    </script>
</body>

</html>

在这里插入图片描述

扩展运算符

… 扩展运算符能将数组转换为逗号分隔的参数序列;
扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参
数序列,对数组进行解包;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>扩展运算符</title>
</head>

<body>
    <script>
        // ... 扩展运算符能将数组转换为逗号分隔的参数序列
        //声明一个数组 ...
        const tfboys = ['易烊千玺', '王源', '王俊凯'];
        // => '易烊千玺','王源','王俊凯'
        // 声明一个函数
        function chunwan() {
            console.log(arguments);
        }
        chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')
    </script>
</body>

</html>

应用

数组合并

 //1. 数组的合并 
        const kuaizi = ['王太利', '肖央'];
        const fenghuang = ['曾毅', '玲花'];
        // 传统的合并方式
        // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
        const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo);//["王太利", "肖央", "曾毅", "玲花"]

数组的克隆

 //2. 数组的克隆
        const sanzhihua = ['E', 'G', 'M'];
        const sanyecao = [...sanzhihua];// ['E','G','M']
        console.log(sanyecao);

将伪数组转为真正的数组

//3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');//获取的是对象伪数组
        const divArr = [...divs];
        console.log(divArr); // arguments

Symbol

Symbol 概述:
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类
型,是一种类似于字符串的数据类型;

Symbol 特点:

  1. Symbol 的值是唯一的,用来解决命名冲突的问题;
  2. Symbol 值不能与其他数据进行运算;
  3. Symbol 定义的对象属性不能使用for…in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的
    所有键名;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>symbol</title>
</head>

<body>
    <script>
        //创建Symbol
        let s = Symbol();
        // console.log(s, typeof s);
        let s2 = Symbol('dyk');
        let s3 = Symbol('dyk');
        console.log(s2 == s3); // false
        //Symbol.for 创建
        let s4 = Symbol.for('dyk');
        let s5 = Symbol.for('dyk');
        console.log(s4 == s5); // true
        //不能与其他数据进行运算
        // let result = s + 100;
        // let result = s > 100;
        // let result = s + s;

    </script>
</body>

</html>

迭代器

概述:

遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数
据结构只要部署 Iterator 接口,就可以完成遍历操作;

特性:

ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费;
原生具备 iterator 接口的数据(可用 for of 遍历):
Array;
Arguments;
Set;
Map;
String;
TypedArray;
NodeList;

工作原理:

  1. 创建一个指针对象,指向当前数据结构的起始位置;
  2. 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员;
  3. 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员;
  4. 每调用 next 方法返回一个包含 value 和 done 属性的对象;
    注:需要自定义遍历数据的时候,要想到迭代器
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>迭代器</title>
</head>

<body>
    <script>
        // 声明一个数组
        const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
        // 使用 for...of 遍历数组
        for (let v of xiyou) {
            console.log(v);
        }
        let iterator = xiyou[Symbol.iterator]();
        // 调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        // 重新初始化对象,指针也会重新回到最前面
        let iterator1 = xiyou[Symbol.iterator]();
        console.log(iterator1.next());
    </script>
</body>

</html>

在这里插入图片描述

生成器

概述:

生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>生成器</title>
</head>

<body>
    <script>
        // 生成器其实就是一个特殊的函数
        // 异步编程 纯回调函数 node fs ajax mongodb
        // yield:函数代码的分隔符
        function* gen() {
            console.log(111);
            yield '一只没有耳朵';
            console.log(222);
            yield '一只没有尾部';
            console.log(333);
            yield '真奇怪';
            console.log(444);
        }
        let iterator = gen();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log("遍历:");
        //遍历
        for (let v of gen()) {
            console.log(v);
        }
    </script>
</body>

</html>

Set集合

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

  1. size 返回集合的元素个数;
  2. add 增加一个新元素,返回当前集合;
  3. delete 删除元素,返回 boolean 值;
  4. has 检测集合中是否包含某个元素,返回 boolean 值;
  5. clear 清空集合,返回 undefined;
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Set集合</title>
</head>

<body>
    <script>
        // Set集合
        let s = new Set();
        console.log(s, typeof s);
        let s1 = new Set(["大哥", "二哥", "三哥", "四哥", "三哥"]);
        console.log(s1); // 自动去重
        // 1. size 返回集合的元素个数;
        console.log(s1.size);
        // 2. add 增加一个新元素,返回当前集合;
        s1.add("大姐");
        console.log(s1);
        // 3. delete 删除元素,返回 boolean 值;
        let result = s1.delete("三哥");
        console.log(result);
        console.log(s1);
        // 4. has 检测集合中是否包含某个元素,返回 boolean 值;
        let r1 = s1.has("二姐");
        console.log(r1);
        // 5. clear 清空集合,返回 undefined;
        s1.clear();
        console.log(s1);
    </script>
</body>

</html>

map集合

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类
型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和
『for…of…』进行遍历;
Map 的属性和方法:

  1. size 返回 Map 的元素个数;
  2. set 增加一个新元素,返回当前 Map;
  3. get 返回键名对象的键值;
  4. has 检测 Map 中是否包含某个元素,返回 boolean 值;
  5. clear 清空集合,返回 undefined;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Map集合</title>
</head>

<body>
    <script>
        // Map集合
        // 创建一个空 map
        let m = new Map();
        // 创建一个非空 map
        let m2 = new Map([
            ['name', '尚硅谷'],
            ['slogon', '不断提高行业标准']
        ]);
        // 1. size 返回 Map 的元素个数;
        console.log(m2.size);
        // 2. set 增加一个新元素,返回当前 Map;
        m.set("皇帝", "大哥");
        m.set("丞相", "二哥");
        console.log(m);
        // 3. get 返回键名对象的键值;
        console.log(m.get("皇帝"));
        // 4. has 检测 Map 中是否包含某个元素,返回 boolean 值;
        console.log(m.has("皇帝"));
        // 5. clear 清空集合,返回 undefined;
        m.clear();
        console.log(m);
    </script>
</body>

</html>

概述:
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键
字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做
到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已;
知识点:

  1. class 声明类;
  2. constructor 定义构造函数初始化;
  3. extends 继承父类;
  4. super 调用父级构造方法;
  5. static 定义静态方法和属性;
  6. 父类方法可以重写;
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>class类</title>
</head>

<body>
    <script>
        //手机 ES5写法
        function Phone5(brand,price){
        this.brand = brand;
        this.price = price;
        }
        // 添加方法
        Phone5.prototype.call = function(){
        console.log("我可以打电话!");
        }
        // 实例化对象
        let HuaWei5 = new Phone5("华为5",5999);
        HuaWei5.call();
        console.log(HuaWei5);
        // ES6写法
        class Phone6 {
            // 构造方法,名字是固定的
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            // 打电话,方法必须使用该方式写
            call() {
                console.log("我可以打电话!");
            }
        }
        let HuaWei = new Phone6("华为6", 5999);
        HuaWei.call();
        console.log(HuaWei);
    </script>
</body>

</html>
  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值