es6笔记和例子

已于 2023-04-07 09:08:15 修改
阅读量299 收藏
点赞数
分类专栏： javaScript 文章标签： 前端 javascript 开发语言
于 2023-04-06 15:11:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51198547/article/details/129990098
版权
本文详细介绍了ES6的多个关键特性，包括箭头函数的使用，如无this、不能作为构造函数等；解构赋值在数组和对象中的应用；模板字符串的声明和内容处理；const常量的声明规则；简化对象写法的示例；以及Promise在异步编程中的作用。此外，还提到了迭代器、扩展运算符、生成器和类的继承等相关概念。
摘要由CSDN通过智能技术生成

目录

es6笔记和例子

一、箭头函数

二、解构赋值

三、模板字符串

四、const

五、简化对象写法

六、迭代器

七、 函数参数默认值

八、扩展运算符

九、生成器

十、生成器函数

十一、 生成器函数实例

十二、自定义遍历数据

十三、Promise

十四、rest参数

十五、symbol

十六、对象的继承

十七、对象方法的扩展

十八、静态成员

十九、类的继承

二十、类重写

二十一、数值扩展

二十二、class类

二十三、get和set

二十四、Map

二十五、Promise封装

二十六、Set

二十七：es6模块化语法

es6笔记和例子

一、箭头函数

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

            lat a=function(){}   let a=()=>{}

            声明一个函数

            let fn=(a,b)=>{

            return a+b;

             }

            调用函数

            let result=fn(1,2);

            console.log(result);

            call（）方法

            call() 方法是预定义的 JavaScript 方法。

            它可以用来调用所有者对象作为参数的方法。

            通过 call()，您能够使用属于另一个对象的方法。

            本例调用 person 的 fullName 方法，并用于 person1：

            箭头函数特性

            1.箭头函数没有this，他的this就是外面的this

            2.不能作为实例化对象

            3.不能使用arguments变量

            4.箭头函数的简写

                1).省略小括号，当参数只有一个时

                let mys=function(n){

                 return n*n;

                }

                let add=(n)=>{

                 return n+n;

                }

                let pow=(n)=>{

                 return n*n;

                }

                let add=n=>{

                return n+n;

                }

                2）省略花括号，当代码体只有一个时

                let pow=(n)=> n*n;

二、解构赋值

 ES6 允许按照一定的模式从数组和对象中提取，对变量进行赋值

            这杯称为解构赋值

     const zhao={

        name:'赵本山',

        age:'不详',

        xiaopin:function(){

            console.log("我可以演小品");

        }

       };

       let {name,age,xiaopin}=zhao;

       console.log(name);

       console.log(age);

       console.log(xiaopin);

       xiaopin();

三、模板字符串

 ES6 引入新的声明字符串的方式[''] '' ""

            1.声明

            let str='我也是一个字符串哦';

            console.log(str,typeof str);

            2.内容中可以直接出现换行符

              let str=`<ul>

            <li>是否</li>

            <li>是否</li>    

            <li>是否</li>    

            <li>是否</li>       

            </ul>`

            注意是反引可以省去加号链接

            3.变量拼接

             let love="赵丽颖";

            let out=`${love}是我心中最美丽的演员`;

            ]注意反引号，${}可以把前面声明的变量直接拿来用

四、const

1.一定要赋初始值

            2.一般常量使用大写

            3.SCHOOL='ATG';

            4.块级作用域

            5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

五、简化对象写法

  const school={

            name:name;

            chang:chang;

            imporve:function(){

                console.log("我们可以提高你的性能");

        }

        可以简化为

        const school={

            name,

            chang,

            imporve(){

                console.log("我们可以提高你的性能");

            }

        }

 六、迭代器

1.let不能重复声明，可以防止变量被污染

            2.块级作用域  全局，函数，eval

                只在代码块内有效,还包括if,for,else等等

            3.不存在变量提升,不会再变量声明之前执行他的结果

            4.不影响作用域链效果，就是前面声明后面可以找到他

  for of遍历

       创建一个指针对象

    let iteratoe=xioo[Symbol.iterator]();

  • 函数参数默认值

具有默认值的参数一般位置要靠后（潜规则）

            默认值可以与解构赋值结合

       function add(a,b,c=10){

            return a+b+c;

        }

八、扩展运算符

例1：

    const tfbody=['aa','bb','cc'];

        function chuwan(){

            console.log(arguments);

        }

        chuwan(...tfbody);

例2：

        const kuaizi=['aa','bb'];

        const kuaizi01=['aa','bb','dd'];

        const fenghuang=[...kuaizi,...kuaizi01]

        const sss=[...kuaizi];

        console.log(fenghuang);

        console.log(sss);

        const divs=document.querySelectorAll('div');

        const divArr=[...divs];

        console.log(divArr);

九、生成器

     生成器其实就是一个特殊的函数

       异步编程

       纯回调函数 node fs ajax mongodb

   需要调用next()方法才会生效

  例1：  function * fen(){

            yield '也一直没有耳朵';

            yield '也一直没有bizi';

            yield '也一直没有嘴巴';

            console.log("sssss");

        }

        let iterator=fen();

        console.log(iterator);

        iterator.next();

十、生成器函数

例1： function getUsers(){

            setTimeout(() => {

                let data = '用户数据';

                iterator.next(data);

            }, 1000);

        }

        function getOrder(){

            setTimeout(() => {

                let data = '订单数据';

                iterator.next(data);

            }, 1000);

        }

        function getGoods(){

            setTimeout(() => {

                let data = '商品数据';

                iterator.next(data);

            }, 1000);

        }

        function * gen(){

            let users =yield getUsers();

            console.log(users)

            let oders =yield getOrder();

            console.log(oders)

            let goods = yield getGoods();

            console.log(goods)

        }

        // 调用生成器函数

        let iterator = gen();

        iterator.next();

十一、 生成器函数实例

  异步编程 文件操作 网络操作 数据库操作

            1s后控制台输出111 2s后输出222  3s后输出333

例1：

setTimeout(() => {

        console.log(111);

        setTimeout(() => {

            console.log(222);

            setTimeout(() => {

                console.log(333);

            }, 1000);

        }, 1000);

       }, 1000);

       

       function one(){

        setTimeout(() => {

            console.log(111)

            iterator.next()

        }, 1000);

       }

       function two(){

        setTimeout(() => {

            console.log(222)

            iterator.next()

        }, 2000);

       }

       function three(){

        setTimeout(() => {

            console.log(333)

            iterator.next()

        }, 3000);

       }

       function * gen(){

        yield one()

        yield two()

        yield three()

       }

       let iterator = gen();

       iterator.next();

十二、自定义遍历数据

例1： const banji={

            name:"终极一班",

            stus:[

                'dd',

                'dd',

                'dd',

                'dds'

            ],

            [Symbol.iterator](){

                let index=0;

                let _this=this;

                return {

                    next:function(){

                        if(index<this.stus.length){

                            return {value:_this.stus[i],done:false};  

                            index++;

                            return result;

                        }else{

                            

                        }

                          

                    }

                };

            }

        }

        for(let v of banji ){

            console.log(v);

        }

十三、Promise

例1：  const p= new Promise(function(resolve,reject){

            setTimeout(() => {

                let err='数据错误';

                reject(err);

            }, 1000);

       });

    //    调用promise的then方法

       p.then(function(value){

            console.log(value);

       },function(reason){

            console.error(reason);

       })

例2：   const fs= require('fs');

        fs.readFile('为学.md',(err,data)=>{

            if(err) throw err;

            console.log(data.toString());

        });

十四、rest参数

例1：      function date(...args){

            console.log(args);

        }

        date('dd','ddd','cc')

十五、symbol

   不能参与运算

   不能遍历

    独一无二

十六、对象的继承

例1：        function Phone(brand,price){

            this.brand=brand;

            this.price=price;

        }

        Phone.prototype.call=function(){

            console.log("我可以打电话了");

        }

        function SmartPhone(brand,price,color,size){

            Phone.call(this,brand,price);

            this.color=color;

            this.size=size;

        }

        // 设置子集构造函数的原型

        SmartPhone.prototype=new Phone;

        SmartPhone.prototype.constructor=SmartPhone;

        SmartPhone.prototype.phote=function(){

            console.log("我可以拍照");

        }

        const chuzi=new SmartPhone('锤子','234','黑色','5.5inch');

        console.log(chuzi);

十七、对象方法的扩展

 console.log(Object.is(NaN,NaN));

        // Object.assign对象合并

        const config1={

            host:'localhost',

            port:3306,

            name1:"sss",

        };

        const config2={

            host:'localhostee',

            port:3307,

            name:"misd",

        };

        console.log(Object.assign(config1,config2));

        // Object.setPrototypeof设置原型对象

        // Object.setPrototypeOf(school,city);

        Object.setPrototypeOf(config1,config2);

        // console.log(school);

        console.log(Object.getPrototypeOf(config1));

十八、静态成员

       例1：

       function Phone(){

            

        }

        // 函数对象的属性和实例对象的属性不相通

        Phone.name='手机';

        Phone.change=function(){

            console.log("我可以改变世界");

        }

        let nokia = new Phone();

        console.log(nokia.name);

        // nokia.change();

        console.log("ssssssssssss"+Phone.name);

十九、类的继承

例1：    class Phone{

            constructor(brand,price){

                this.brand=brand;

                this.price=price;

            }

            call(){

                console.log("我爱打电话");

            }

        }

        class SmartPhone extends Phone{

            constructor(brand,price,color,size){

                super(brand,price)

                this.color=color;

                this.size=size;

            }

            photo(){

                console.log("拍照");

            }

            playGame(){

                console.log("玩游戏");

            }

            call(){

                console.log("我可以进行视频通话 ");

            }

        }

        const xiaomi=new SmartPhone('小米','大米','小的米','小啊米');

        console.log(xiaomi);

        // 在js中子类时不能调用父类的同名方法

        xiaomi.call();

二十、类重写

例1:class Animal {

constructor(name) {

  this.speed = 100;

  this.name = name;

}

run(speed) {

  this.speed = speed;

  alert(`${this.name} runs with speed ${this.speed}.`);

}

stop() {

  this.speed = 0;

  alert(`${this.name} stands still.`);

}

}

class Rabbit extends Animal {

hide() {

  alert(`${this.name} hides!`);

}

stop() {

  super.stop(); // 调用父类的 stop

  this.hide(); // 然后 hide

}

}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5);

rabbit.stop();

二十一、数值扩展

例：

 let b=0b1010;

        let o=0o777;

        let d=100;

        // 十六进制

        let x=0xff;

        let arr=[5,3,6,2,7];

        arr.sort();

        console.log(arr.toString());

        console.log(Number.isNaN(123));

        // parseInt()可以筛选出数值中的非数值部分

        console.log(Number.parseInt('2432541love'));

        // Math.sign() 检测一个数是正数还是负数

二十二、class类

例1：

   // 手机类

        function Phone(brand,price){

            this.brand=brand;

            this.price=price;

        }

        Phone.prototype.call=function(){

            console.log("我可以打电话");

        }

        let Huawei=new Phone('华为',5999);

        Huawei.call();

        console.log(Huawei);

        

        class Shouji{

            /*  constructor()这个方法zaishi */

            constructor(brand,price){

                this.brand=brand;

                this.price=price;

            }

            call(){

                console.log("我可以打电话了");

            }

        }

        let onePluse=new Shouji("1+",1999);

        console.log(onePluse);

二十三、get和set

例1：      class Phone{

            get price(){

                console.log("大降价了");

                return "iloveyou";

            }

            set price(newval){

                console.log("我的钱没了");

            }

        }

        let s=new Phone();

        console.log(s.price);

        s.price='free';

        console.log(s.price);

二十四、Map

例1：

     let m=new Map();

        m.set('name','妙衣睡哦');

        m.set('change',function(){

            console.log("我们能改变你");

        });

        let key={

            school:'ddd'

        };

        m.set(key,['北京','北京q','北京w','北京d']);

        console.log(m);

        for(let v of m){

            console.log(v);

        }

二十五、Promise封装

 // 创建对象

例1：

        const xhr=new XMLHttpRequest();

        // 2.初始化

        xhr.open("GET","https://api/sentences.top/getJoke");

        // 发送

        xhr.send();

        // 绑定事件，处理响应结果

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4){

                // 判断响应状态码 200-299

                if(xhr.status>=200&&xhr.response<300){

                    console.log(xhr.response);

                }else{

                    console.error(xhr.status);

                }

            }

        }

二十六、Set

例1：        let s=new Set();

        let s2=new Set(['大事','好事','q大事','a大事','s大事','大事','大d事']);

        console.log(s2);

        console.log(s2.has('好ss事'));

    

        console.log(s2);

        for(let v of s2){

            console.log(v);

        }

例2： Set并集

       let arr=[1,2,3,4,5,6,7,8];

        // let result=[...new Set(arr)];

        // console.log(result);

        let arr2=[4,5,6,7,6,10];

        // 交集

        let union=[...new Set([...arr,...arr2])];

        // 直接在对象前面加一个[...obj]可变数组

        console.log(union);

        // 差集

        let result02=[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));

        console.log(result02);

例3：  Set交集

let arr=[1,2,3,4,5,6,7,8];

        // let result=[...new Set(arr)];

        // console.log(result);

        let arr2=[4,5,6,7,6];

        // 交集

        let result=[...new Set(arr)].filter(item=>{

            let s2=new Set(arr2);

            if(s2.has(item)){

                return true;

            }else{

                return false;

            }

        });

        console.log(result);

        let result02=[...new Set(arr)].filter(item=>new Set(arr2).has(item));

        console.log(result02);

        // 差集

二十七：es6模块化语法

     // 引入m1.js模块内容

        // 通用方式

        import * as m1 from "./m1.js";

        import * as m2 from "./m2.js";

        import * as m3 from "./m3.js";

        console.log(m3);

        m3.default.change();

秒¤说
关注
专栏目录
个人总结之es6相关知识点及例子
scy_fighting的博客
06-11 303
最近，看了一些es6的相关知识点，有时候看完就忘记了，所以写下该博客，以此记录。 1、变量（let,const） es6使用let定义变量，const定义常量。 变量可重复赋值，但常量重复赋值会报错（报错信息如下：Uncaught TypeError: Assignment to constant variable.）。 使用let,const定义的变量有块级作用域，使用var定义的变量没...
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3006
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记
06-20
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记
30个例子简单说说ES6(30分钟入门)
最新发布
m0_64904350的博客
07-25 1322
let和const关键字允许在代码块中声明变量，这些变量只在该块中有效。：可以直接将数组元素赋值给变量，而不需要通过索引访问。：可以方便地从对象中提取属性值并赋给变量。：使用反引号(``)和${}语法，可以更方便地插入变量和表达式。：新增了startsWithendsWith和includes等方法来检查字符串内容。：在函数参数中可以设置默认值，如果调用时未提供参数，则使用默认值。...可以用于数组和对象，用于展开元素或合并数组。...在函数参数中使用，可以收集剩余的参数到一个数组。：可以通过.name。
ES6这些就够了！
宜春
11-01 493
刚开始用Vue或者React，很多时候我们都会把ES6+这位大兄dei加入我们的技术栈中。但是ES6+那么多那么多新特性，我们真的需要全部都掌握吗？秉着二八原则，掌握好常用的、有用的，这个可以让我们的开发快速起飞。 接下来我们就聊聊ES6那些可爱的新特性吧！ 1.变量声明 const 和 let 在ES6之前，我们都是用 var 关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升 例如： function aa() { if
es6 用法小示例
pardon110的博客
10-15 424
需求 编写函数 showNumber，功能是在页面中显示出1–2000之间所有能同时被3、5、7整除的整数，并要求每行显示 6 个这样的数，每两个数字之间用逗号隔开，每行最后一个数字后面没有逗号，效果图如下 解法 const s = [...Array(Math.floor(2000 / 105))].map((_, i) =&amp;gt; { let s = (i + 1) * 105 ...
ES6实例-简单留言板
weixin_42549581的博客
05-05 784
<!DOCTYPE> <html lang="zh-en"> <head> <title>js实现简单留言板</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="cs...
es6模块化的一个简单小例子
weixin_47541876的博客
09-16 336
概述 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 export 命令 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 demo modules index.html index.
es6尚硅谷笔记es6尚硅谷笔记
04-03
【ES6】是ECMAScript的第六版，它引入了许多新的特性和语法改进，使得JavaScript编程更加现代化和高效。在JavaScript的世界中，ECMAScript是由Ecma国际制定的一系列标准，特别是ECMA-262标准，定义了脚本语言的规范...
初学ES6笔记十一Set 和 Map 数据结构
weixin_44072887的博客
04-07 338
Set 和 Map 数据结构 一、set 基本用法 它类似于数组，但是成员的值都是唯一的，没有重复的值。 set本身是一个构造函数，用来生成Srt数据结构。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5...
ES6学习笔记（二）：教你玩转类的继承和类的对象
01-20
这篇学习笔记介绍了ES6中的类继承机制，`super`关键字的使用以及在继承过程中需要注意的几个关键点。通过`extends`和`super`，我们可以在子类中轻松地复用和扩展父类的功能，实现代码的复用和模块化。同时，了解这些...
ES6笔记（一）变量声明：let和const
weixin_41194675的博客
01-27 1426
ES5 只有两种声明变量的方法：var 命令和 function 命令。let 和 const 是ES6新增的用来声明变量的命令，语法与 var 基本一致。
ES6重度学习 demo实例
izhaong
05-25 399
let 与 const // 并非真正的常量 // const 的本质: const 定义的变量并非常量，并非不可变， // 它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。 // 下面的代码并不会报错： // 创建常量对象 const car = {type:"Fiat", model:"500", color:"white"}; // 修改属性: car....
ES6_模块化_笔记
roymustang的博客
12-01 389
文章目录概述：模块化的好处模块化规范产品：ES6 模块化语法：ES6暴露数据语法汇总：m.js（逐个导出模块）：n.js（统一导出模块）：o.js（默认导出模块）：模块化.html（引入和使用模块）：ES6导入模块语法汇总：使用模块化的另一种方式：Babel对ES6模块化代码转换Babel概述步骤：转换前后对比： 概述： 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来； 模块化的好处 模块化的优势有以下几点： 防止命名冲突； 代码复用； 高维护性； 模块化规范产品： ES6 之前
ES6模块化学习笔记
Teheran的博客
02-22 217
ES6 模块是通过export命令显式指定输出的代码，再通过import命令输入。 // ES6模块 import { stat, exists, readFile } from 'fs'; 上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载 ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"u...
ES6模块化——笔记整理
ningma30000的博客
03-31 327
文章目录JavaScript 模块化发展史第一阶段第二阶段第三阶段第四阶段nodejsCommonJS模块的导出模块的导入CommonJS规范nodejs对CommonJS的实现浏览器端模块化的难题AMDCMDES6模块化简介基本导入导出模块的引入模块的基本导出和导入基本导出基本导入默认导入导出默认导出默认导入ES6模块化的其他细节 JavaScript 模块化发展史 第一阶段 在 JavaScr...
es6模块化学习笔记
qq_52565945的博客
05-16 76
在后端开发中，我们有controller、service、mapper层，三层架构很好的协调了对象与对象之间的调用，实现模块化开发。在前端开发中，我们不是对对象实现模块化开发，我们是js之间的调用。开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。ES6使用 export 和 import 来导出、导入模块。ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
ES6 基础用法实例
shi860715的博客
05-20 258
ES6 语法 1、let 使用 在JavaScript中，var 定义的变量经常会出现作用域超范围的问题。 es6 中使用let的方式定义局部变量，在作用域内起效，超出则报错； 2 、const 在定义常量的过程中，如果修改常量，则报错。这里要注意常量的使用场景 3、 解构表达式 操作数据更加便利：取出数组中的前两个数据，并赋值给新的变量 之前： let arr = [1,2,3,5]; let x =arr[0],y=arr[1]; 之后： let arr = [1,2,3,5]; let [x,y]
深入理解React组件生命周期与ES6 Symbol特性
"这篇React学习笔记涵盖了React组件生命周期和如何整合eslint插件，同时也涉及到ES6的新特性，如Symbol的使用以及对象属性的定义方法。" React组件是React库中的核心概念，它允许我们将UI拆分成独立、可复用的部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秒¤说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值