ES6应该掌握的知识

最新推荐文章于 2024-01-11 20:59:50 发布
最新推荐文章于 2024-01-11 20:59:50 发布
阅读量109 收藏
点赞数
文章标签： es6 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61444152/article/details/129682012
版权

let关键字

  1. 变量不能重复声明

  1. 块级作用域

  1. 不存在变量提升

  1. 不影响作用域链

const常量

  1. 一定要赋初始值

  1. 一般常量用大写

  1. 常量值不能被修改

  1. 块级作用域

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

解构赋值

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

模板字符串

好处：内容中可以直接出现换行符，变量拼接{$()}

简化对象写法

原先的写法

<script>
        const School = {
            name :name,
            age: age,
            change:change,
            improve:function(a,b){
                console.log(a,b);
            }

        }
        improve(1,2)
    </script>

现在的写法

<script>
        const School = {
            name,
            age,
            change,
            improve(a,b) {
                console.log(a,b);
            }
        }
        improve(1, 2)
    </script>

箭头函数

<script>
        // let fn = function(){

        // }
        let fn = ()=>{
            
        }
    </script>

  1. this是静态的，this始终指向函数声明时所在作用域下的this的指向

  1. 不能作为构造函数 实例化对象

  1. 不能使用arguments 变量

  1. 箭头函数简写：

  1. 省略小括号：当形参只有一个时候

  1. 省略花括号：当代码体只有一条语句的时候，此时return必须省略

注：适合与this无关的回调（定时器、数组的方法回调）

不适合与this有关的回调（事件回调、对象的方法）

es6允许给函数赋初始值

  1. 形参初始，具有默认值的参数，一般位置要靠后

  1. 与解构赋值结合

es6中rest参数

function date(){
            console.log(arguments);
        }
        date('周芷若','任盈盈','东方不败')

        function date(...args){
            console.log(args);
        }
        date('周芷若','任盈盈','东方不败')

rest参数要放到参数最后

扩展运算符

...扩展运算符能将数组转换为逗号分隔的参数序列

应用：

数组和并

数组克隆

将伪数组转为真正的数组

es6中引入一种新的，独一无二的数据类型 Symbol 类似于字符串类型

  1. Symbol的值是唯一的，用来解决命名冲突的问题

  1. Symbol值不能参与其他数据类型进行运算

  1. Symbol定义的对象属性不能使用for...in循环遍历，但可以用Reflect.ownKeys来获取对象的所有键名

JS数据类型

口诀：usonb

u: undefined

s： symbol string

o： object

n： null number

b: boolean

迭代器（Iterator）一种接口

任何数据，只要部署Iterator接口，就能完成遍历操作，ES6创造一种新的遍历命令for...of 循环，Iterator用 for...of

其中：Array Arguments Set Map String TypeArray Nodelist 原生具备Iterator接口数据

工作原理：

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

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

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

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

自定义遍历数组

例子

 //对对象的遍历
const school = {
            name: "666班",
            status: [
                'lht',
                'jj',
                'hhh'
            ],
            [Symbol.iterator](){
                let index = 0; //设置索引
                let _this = this //改变this指向
                return {
                    next: function () {
                        if (index < _this.status.length) {
                            const result = {
                               //next中的两个属性
                                value: _this.status[index], done: false                      
                            };
                            index++;
                            return result;
                        } else {
                            return { value: undefined, done: true }
                        }
                    }
                }
            }
        }


        for (let v of school) {
            console.log(v);
        }

生成器

就是一个特殊函数

异步编程 纯回调函数 node fs ajax mongodb

function * gen() { 
            yield '天王盖地虎'; //yield就是函数代码的分隔符
            yield '宝塔镇河妖';
            yield '镇宅驱邪'
         }
         let iterator = gen();
         console.log(iterator.next());
         console.log(iterator.next());
         console.log(iterator.next());
         console.log(iterator.next());

         for(let v of gen()){
            console.log(v);
         }

生成器函数也可以传参，next传入的参数会作上一个yield语句返回的结果

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

// 回调地狱
        // setTimeout(()=>{
        //     console.log(111);
        //     setTimeout(()=>{
        //         console.log(222);
        //         setTimeout(()=>{
        //             console.log(333);
        //         },3000)
        //     },2000)
        // },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()

promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。

 //实例化Promise对象
        const p = new Promise (function(resolve,reject){
            setTimeout(function(){
                // let data = '数据库中的数据';
                
                // resolve(data)

                let err = '数据读取失败';
                reject(err)
            },1000)
        });

        //调用promise对象中的then方法
        p.then(function(){
            console.log(value);
        },function(reason){
            console.error(reason);
        })

Promise.prototype.then

//创建promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('用户数据')
            },1000)
        });
        //调用then方法 then方法返回的结果是Promise对象，对象状态由回调函数的执行结果决定
        //1、如果回调函数中返回的结果是非promise类型的属性，状态伪成功，返回的值为对象成功的值

        const result = p.then(value=>{
            console.log(value);
            //1、非promise类型的属性
            return 'lht 666'
            //2、是promise类型的属性
            return new Promise((resolve,reject)=>{
                resolve('ok')
                reject('error')
            })
            //3、抛出错误
            throw new Error('出错了！')
            throw '出错了'
        },reason=>{
            console.warn(reason);
        }) 

        //链式调用 改变回调地狱
        p.then(value=>{

        },reason=>{

        }).then(value=>{

        },reason=>{

        })
        console.log(result);

catch方法

const p = new Promise((resolve,reject)=>{
        setTimeout(() => {  
            //设置p对象为失败状态，并设置失败的值
            reject("出错！")
        }, 1000);
     })

     p.then(function(value){},function(reason){
        console.error(reason);
     })

     p.catch(function(reason){
        console.warn(reason);
     })

set

es6提供了新的数据结构Set（集合）。类似于数组，但成员的值都是唯一的，

集合实现了iterator接口，所以可以使用 扩展运算符 和for.. of... 进行遍历

集合的属性和方法：

size 返回集合的元素个数

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

delete 删除元素，返回bollean

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

let s = new Set()
    console.log(s,typeof s);
    let s2 = new Set(['酸','甜','苦','辣','咸','油'])

    //元素个数 
    console.log(s2.size);
    //添加新的元素
    s2.add('盐');
    //删除元素
    s2.delete('苦');
    //检测
    console.log(s2.has('咸'));
    //清空
    // s2.clear();
    console.log(s2);

    for(let v of s2){
        console.log(v);
    }
let arr = [1,2,3,3,5,6,1,2]
    //数组去重
    // let result = [...new Set(arr)];
    // console.log(result);
    //交集
    let arr2 = [1,4,5,3]
    // let result2 = [... new Set(arr)].filter(item=>{
    //     let s2 = new Set(arr2)
    //     if(s2.has(item)){
    //         return true
    //     }else{
    //         return false
    //     }
    // })
    let result2 = [... new Set(arr)].filter(item=>new Set(arr2).has(item))
    console.log(result2);
    //并集
    let union = [...new Set([...arr, ...arr2])]
    console.log(union);
    //差集
    let result3 = [... new Set(arr)].filter(item=>!(new Set(arr2).has(item)))
    console.log(result3);

Map

es6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，所以使用 扩展运算符 和 for...of... 进行遍历。

Map的属性和方法：

size 返回Map的元素个数

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

get 返回键名对象的键值

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

clear 清空集合，返回undefined

 //声明Map
    let m = new Map()
    
    //添加元素
    m.set('name','lht')
    m.set('hobby','badminton')
    console.log(m); 
    m.set('change',function(){
        console.log("我喜欢吃溜肉段");
    });
    let key = {
        school:'HGC'
    };
    m.set(key,['北京,上海,深圳']);
    //size
    console.log(m.size);
    //删除
    m.delete('name')
    //获取
    console.log(m.get('change'));
    console.log(m.get(key));
    //清空
    // m.clear()
    //遍历
    for(let v of m ){
        console.log(v);
    }
        console.log(m);

Class 类

es6提供了更接近传统语言的写法，引入了 CLass（类）这个概念，作为对象的模板。 通过class关键字，可以定义类，es6的class可以看作只是一个语法糖，它的绝大部分功能，es5都能做到，新的class写法只是让对象原型的写法更加清晰，更加面向对象编程语法而已

class 声明类

constructor 定义构造函数初始化

extends 继承父类

super 调用父级的构造方法

static 定义静态方法和属性

父类方法可以重写

//手机

        //ES5
        function Phone(brand, price) {
            this.brand = brand
            this.price = price
        }
        //添加方法
        Phone.prototype.call = function () {
            console.log("我可以打电话");
        }
        //实力化对象
        let Xiaomi = new Phone("小米",1999)
        Xiaomi.call()
        console.log(Xiaomi);

        // ES6
        class Shouji{
            //构造方法，名字不能修改
            constructor(brand,price){
                this.brand = brand;
                this.price = price
            }
            //方法必须使用该语法，不能使用es5的对象完整形式
            call(){
                console.log("我也可以打电话");
            }
        }
        let vivo = new Shouji("vivo",3999)
        console.log(vivo);

静态成员

// function Phone (){

        // }
        // //函数对象 属性和方法   
        // Phone.name = "手机";
        // Phone.change = function(){
        //     console.log("我可以改变");
        // }

        // //实例对象 属性和方法
        // let iphone = new Phone();
        // // console.log(iphone.name); //undefined
        // // console.log(iphone.change()); // iphone.change is not a function

        // //所以函数对象属性和方法与实例对象上的属性和方法是不相同的    对于函数对象这种属性我们称为静态成员
        // //实例对象的属性和方法 和 构造函数原型对象上的属性是相通的

        // Phone.prototype.size = "5.5inch"
        // console.log(iphone.size);


        class Phone{
            //静态属性
            static name = "手机";
            static change (){
                console.log("我能打电话");
            }
        }

        let iphone = new Phone()
        console.log(iphone.name); //undefined
        console.log(Phone.name); //手机

es5中构造函数继承的方式

//手机
       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.photo = function(){
        console.log("我可以拍照");
       }
       SmartPhone.prototype.playGame = function(){
        console.log("我可以玩游戏");
       }
       const xiaomi = new SmartPhone('小米',1999,'白色','6.6inch')
       console.log(xiaomi);

es6中class继承方式

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("我可以玩游戏");
            }
        }
        const xiaomi = new SmartPhone('小米',1999,"白色",'6.6inch');
        console.log(xiaomi);

子类对父类方法的重写

直接调用方法，更改就可以

class中get和set

//get 和  set
        class Phone{
            get price(){
                console.log("价格属性被读取");
                return '666';
            }
            set price(value){
                console.log('价格属性被修改');
                
            }
        }
        //实例化对象
        let s = new Phone ();
        console.log(s.price);
        s.price = 'free'

数值扩展

  1. 二进制和八进制

  1. Number.isFinite 检测一个数字是否为有限数

  1. Number.isNaN 检测一个数值是否为NaN

  1. Number.parseInt Number.parseFloat 字符串转整数

  1. Number.isInteger 判断一个数是否为整数

  1. Number.EPSILON 是JavaScript表示最小精度 其属性接近于 2.2204460492503130808472633361816E-16

对象方法扩展

  1. Object.is 判断两个值是否完全相等

  1. Object.assign 对象和并

  1. Object.setPrototypeOf 设置原型对象

  1. Object.getPrototypeof 获取原型对象

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后按照小文件组合起来

模块化的好处：

  1. 防止命名冲突

  1. 代码复用

  1. 高维护性

模块化规范产品

es6之前的模块化规范有：

CommonJS = > NodeJS Browserify

AMD => requireJS

CMD => seaJS

es6模块化语法

模块化主要由两个命令构成： export 和 import

export 命令用于规定模块的对外接口

import 命令用于输入其他模块提供的功能

//1、通用的导入方式
        //引入 m1.js 模块内容
        import * as m1 from "./m1.js";
        //引入 m2.js 模块内容
        // import * as m2 from "./m2.js"
        //引入 m3.js 模块内容
        // import * as m3 from "./m3.js"
        console.log(m1);
        // console.log(m2);
        // console.log(m3);
        //2、解构赋值形式
        import {school,change} from"./m1.js"
        import {school as Hgc,change} from"./m2.js"
        import {default as moren} from"./m3.js"
        //3、简便形式 针对默认暴露
        import moren from "./m3.js"
        console.log(moren);
//分别暴露
export let school = "HGC";

export function change(){
    console.log("我要改名");
}

//统一暴露
let school = "HGC";

function change(){
    console.log("我要改名");
}

export{school,change}

//默认暴露
export default {
    school: 'HGC',
    change: function () {
        console.log("我要改名");
    }
}
sunshine lht
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6新特性——1
weixin_50801860的博客
10-13 287
ES全称“ECMAScript”。 优点：1、语法简洁，功能丰富。2、框架开发应用。3、前端开发职位要求。 一、let：声明变量 二、const：声明变量 三、解构赋值（用在解构对象中的函数比较多） 四、模板字符串 五、简化对象写法 六、箭头函数
04-01Java语言基础（数组）
小鑫的博客
12-12 92
数组概述和定义格式说明 为什么要有数组？ 为了存储同种数据类型的多个值 数组概念： 数组是存储同一种数据类型的多个元素的集合。也可以看成是一个容器。 数组既可以存储基本数据类型，也可以存储引用数据类型。 数组定义格式： 数据类型[] 数组名 = new 数据类型[数组的长度] public static void main(String[] args){ int[] arr = new int[5]; //左边： //int 数据类型 //[]:代表数组，几个中括号代表几维数组 //a
ES6的总结及使用（1）
zbuxian的博客
11-29 228
文章目录let(声明变量)特性1、变量不能重复声明2、块级作用域 全局，函数，eval3、不存在变量提升4、不影响作用域链const(声明常量,其值不能修改)1、一定要赋初始值2、一般常量使用大写3、常量的值不能修改4、块级作用域5、对数组和对象的元素修改，不算对常量的修改，不会报错变量的结构赋值1、数组的结构2、对象的结构模板字符串1、内容中可以直接出现换行符2、变量拼接简化对象写法箭头函数1、this 是静态的，this始终指向函数声明时所在的作用域下的this的值2、不能作为构造函数，实例化对象3、不
ES6 常用知识点总结
qq_34082921的博客
11-28 387
这段时间看了石川blue老师讲解的es6课程，结合阮一峰老师的es6教程，随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点，基本没有什么创新点，主要是石川blue对里面一些难懂的知识点分析的挺好的，对我个人理解es6很有帮助，也希望对大家能有所帮助。
ES6的准备
weixin_51445423的博客
04-13 593
ES6的准备
ES6新增的数组知识实例小结
10-15
以下是一些重要的ES6新增的数组知识点： 1. **JSON数组格式转换**： 在某些场景下，我们需要将JSON对象转换为数组。在ES6中，我们可以利用`Array.from()`方法实现这一转换。例如，对于一个具有`length`属性的特殊...
ES6_es6_
09-30
以上是ES6中的核心特性，学习和掌握这些知识点能够帮助开发者编写更现代、更健壮的JavaScript代码。在实际开发中，理解并熟练运用这些特性，可以提高代码质量和开发效率。同时，不断关注和学习新的JavaScript特性和...
JavaScript es6-xmind.zip
12-07
这些只是JavaScript ES6中的一部分重要特性，实际学习过程中，还需要掌握其他如Proxy、Reflect、WeakSet、WeakMap等高级特性，以及对Babel等工具的使用，以便在旧浏览器环境中使用这些新特性。通过这个知识点框架和...
8小时美女老师带你完全掌握ES6新规范讲解
11-14
**ES6，全称ECMAScript ...在这8小时的课程中，美女老师会详细讲解以上知识点，通过实例演示和练习，帮助你扎实掌握ES6，提升你的JavaScript编程技能。记得跟随老师的步伐，一步步实践，将理论知识转化为实际操作能力。
es6 示例代码 Demo
06-08
以上只是ES6中部分关键知识点的介绍，实际上ES6还包括默认参数、剩余参数、增强型对象字面量、迭代器、WeakSet/WeakMap等许多其他特性。在雷丰阳大神的示例代码中，你将有机会深入实践并理解这些概念。通过谷粒商城...
ES6入门教程
qq_55154022的博客
07-20 3272
本次ES6入门教程可以帮助大家快速认识学习ES6！
从零开始学前端---ES6入门
qq_56730681的博客
02-11 2448
ES6入门
尚硅谷---ES6
Father_Of_Soft的博客
01-25 497
尚硅谷ES6同步笔记。万字长文，精心笔记，方便您预习复习~
ES6新特性
qq_56777258的博客
12-03 650
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>let</title> <script> //声明变量，可以批量声明 let a; let b,c,d; let f=521,g='love',h=[]; //let声明变量特性 <!-- 1..
ES6 新特性（0基础，精简版，学ES6看这篇就够了！！！）
最新发布
xiaoxie_life_study
01-11 1889
ES6 新特性（0基础，精简版，学ES6看这篇就够了！！！）：1let声明变量以及声明特性；2 const声明常量以及特点；3 变量的解构赋值；4 模板字符串；5 对象的简化写法；6 箭头函数；7 函数参数的默认值；8 rest 参数；9 扩展运算符；10 Symbol 的基本使用；11 迭代器；12 生成器函数；13 Promise；14 Set集合；15 Map；16 class类介绍；17 ES6中的数值扩展；18 ES6中对象方法的扩展；19 ES6中的暴露 -> export；20 ES6中的导
前端开发，需要掌握的ES6知识
qq_42264793的博客
11-18 594
https://www.cnblogs.com/theblogs/p/10575845.html
ES6基础知识点
zysp158的博客
07-07 208
ES6入门学习笔记
学习JavaScript框架之前需要了解的ES6的几个重要知识点
weixin_40524709的博客
05-19 302
在学习JavaScript框架，如rect、vue等之前，了解几个ES6引入的几个新概念,对于我们框架,会有很大的帮助:1.剪头函数;2.模板字面量;3.解构参数;4扩展和余量操作符.
ES6基础教程
热门推荐
Lambda
12-29 1万+
学习ES6的前置知识： 熟练掌握ES5的知识：因为ES6只是ES5的升级，所以你必须对ES5的基本语法达到熟练的程度，如果你还不了解ES5的基本语法，还是脚踏实地从头开始。了解ES6：听说并在工作学习中见过ES6，并了解ES6的用途。 第1节：ES6的开发环境搭建 工欲善其事，必先利其器。所以我们第1节就是搭建一个基本的ES6开发环境。现在的Chrome浏览器已经支持ES6了，但
掌握JavaScript需要什么知识点
09-03
掌握JavaScript需要掌握以下知识点： 1. 基础语法：包括变量、数据类型、运算符、控制语句、函数等。 2. DOM（文档对象模型）：了解如何通过JavaScript操作HTML页面。 3. BOM（浏览器对象模型）：了解如何操作...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值