【ECMAScript】ES6-ES11学习笔记

这篇具有很好参考价值的文章主要介绍了【ECMAScript】ES6-ES11学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注意事项

代码中的注释有笔记如

// 1.变量不能重复声明

有一些错误示范代码,为了代码整体可运行,将其注释如

let star='jaychou';
// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declared

当代码有输出是,通常将输出放在对应代码下一行,并注释如下

// let star='jollin'
// Uncaught SyntaxError: Identifier 'star' has already been declared

const TEAM = ['70KG','baisha'];
TEAM.push('MAZHE');
console.log(TEAM);
//  ['70KG', 'baisha', 'MAZHE']

1.声明变量

<script>
    let a;
    let b,c,d;
    let e=100;
    let f=521, g='iloveyou', h=[];

    // 1.变量不能重复声明
    let star='jaychou';
    // let star='jollin'
    // Uncaught SyntaxError: Identifier 'star' has already been declared

    // 2.块级作用域,全局,函数,eval
    // if else while for
    {
        let girl='jollin';
    }
    // console.log(girl);
    // Uncaught ReferenceError: girl is not defined

    // 3.不存在变量提升
    // console.log(boy);
    // Uncaught ReferenceError: Cannot access 'boy' before initialization
    let boy='jaychou';

    // 4.不影响作用域链
    {
        let school='xxschool';
        function fn(){
            console.log(school);
        }
        fn();
    }
</script>

2.定义常量

<script>
    // 声明常量
    const SCHOOL = 'xxschool'

    // 1.一定要赋初始值
    // const A;
    // Uncaught SyntaxError: Missing initializer in const declaration
    
    // 2.一般常量使用大写

    // 3.常量的值不能修改
    // SCHOOL='yyschool'
    // Uncaught TypeError: Assignment to constant variable.

    // 4.块级作用域
    {
        const PLAYER='70KG';
    }
    // console.log(PLAYER);
    // Uncaught ReferenceError: PLAYER is not defined
    
    // 5.对于数组和对象的元素修改,不算做对常量的修改,不会报错
    const TEAM = ['70KG','baisha'];
    TEAM.push('MAZHE');
    console.log(TEAM);
    //  ['70KG', 'baisha', 'MAZHE']
</script>

3.解构赋值

<script>
    // ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,称为解构赋值。
    // 1.数组的解构
    const F4 = ['A1','B2','C3','D4'];
    let [A,B,C,D] = F4;
    console.log(A,B,C,D);
    // A1 B2 C3 D4

    // 2.对象的解构
    const zhou = {
        name:'jaychou',
        age:'40',
        skill: function(){
            console.log('我可以唱歌');
        }
    };
    let {name,age,skill} = zhou;
    console.log(name,age,skill);
    // jaychou 40 ƒ (){
    //         console.log('我可以唱歌');
        // }
</script>

4.模板字符串

<script>
    // ES6引入新的字符串声明方式``
    // 1.声明
    let str1 = `这是一个字符串`;
    console.log(str1);
    // 这是一个字符串

    // 2.内容中可以出现换行符
    let str2 = `
    <ul>
        <li>A1</li>
        <li>B2</li>
        <li>C3</li>
        <li>D4</li>
    </ul>`

    // 3.变量拼接
    let star = '周杰伦';
    let str3 = `我最喜欢听${star}的歌曲`
    console.log(str3)
    // 我最喜欢听周杰伦的歌曲
</script>

5.简化对象写法

<script>
    // ES6允许在大括号里,直接写入变量和函数,作为对象的属性和方法
    let name = 'jaychou';
    let skill = function(){
        console.log('i can sing');
    }

    const star = {
        name,
        skill,
        age(){
            console.log('40');
        }
    }
    console.log(star);
    // {name: 'jaychou', skill: ƒ, age: ƒ}
</script>

6.箭头函数

<script>
    // ES6允许使用箭头(=>)定义函数
    // 声明一个函数
    let skill=function(a,b){
        return a+b;
    }

    let skill2=(a,b)=>{
        return a+b;
    }

    // 调用函数
    let result = skill(1,2);
    let result2 = skill(2,4);
    console.log(result);
    // 3
    console.log(result2);
    // 6

    // 1.this是静态的,this始终指向函数声明时所在作用域下的this的值
    function getName(){
        console.log(this.name);
    }
    let getName2 = () => {
        console.log(this.name);
    }

    // 设置window对象的name属性
    window.name = 'name of window';
    const star={
        name:'jaychou'
    }

    // 直接调用
    getName();
    // name of window
    getName2();
    // name of window

    // call 方法调用
    getName.call(star);
    // jaychou
    getName2.call(star);
    // name of window

    // 2.不能作为构造实例化对象
    let Person=(name,age)=>{
        this.name=name;
        this.age=age;
    }
    // let me=new Person('xiaoming','30');
    // Uncaught TypeError: Person is not a constructor

    // 3.不能使用arguments变量
    // let fun=()=>{
    //     console.log(arguments);
    // }
    // fun(1,2,3);
    // Uncaught ReferenceError: arguments is not defined

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

    // 示例:从数组中返回偶数的元素
    const arr=[1,6,9,100,10];
    const even_result = arr.filter(function(item){
        if (item%2===0){
            return true;
        }else{
            return false;
        }
    })
    console.log(even_result);
    // [6, 100, 10]

    const even_result2 = arr.filter(item=>item%2===0)
    console.log(even_result2);
    // [6, 100, 10]
</script>

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

7.参数默认值

<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', port, username, password}) {
        console.log(host);
        console.log(port);
        console.log(username);
        console.log(password);
    }
    connect({
        host: 'localhost',
        port: '3306',
        username: 'username',
        password: 'password',
    })
    // localhost
    // 3306
    // username
    // password
</script>

8.rest参数

<script>
	// ES6引入rest参数,用于获取函数的实参,用来代替arguments
	// ES5获取实参的方式
	function date(){
	    console.log(arguments);
	}
	date('girl1','girl2','girl3')
	// Arguments(3) ['girl1', 'girl2', 'girl3', callee: ƒ, Symbol(Symbol.iterator): ƒ]
	
	// rest参数
	function date2(...args){
	    console.log(args);
	}
	date2('girl1','girl2','girl3')
	// (3) ['girl1', 'girl2', 'girl3']
	
	function fun(a,b,...args){
	    console.log(a);
	    console.log(b);
	    console.log(args);
	}
	fun(1,2,3,4,5,6);
	// 1
	// 2
	// (4) [3, 4, 5, 6]
</script>

9.扩展运算符

<div></div>
<div></div>
<div></div>
<script>
    // 扩展运算符能将数组转换为逗号分割的参数序列
    const f4=['f1','f2','f3','f4']

    function singer(){
        console.log(arguments);
    }

    singer(...f4);
    // Arguments(4) ['f1', 'f2', 'f3', 'f4', callee: ƒ, Symbol(Symbol.iterator): ƒ]

    // 应用1.数组的合并
    const boys=['boy1','boy2'];
    const girls=['girl1','girl2'];
    const boysAndGirls=boys.concat(girls)
    const boysAndGirls2=[...boys,...girls]
    console.log(boysAndGirls);
    // (4) ['boy1', 'boy2', 'girl1', 'girl2']
    console.log(boysAndGirls2);
    // (4) ['boy1', 'boy2', 'girl1', 'girl2']

    // 应用2.数组的克隆
    const fruits=['apple','banana','orange'];
    const fruits2 = [...fruits]
    console.log(fruits);

    // 将伪数组转换成真正的数组
    const divs = document.querySelectorAll('div');
    const divArr = [...divs];
    console.log(divs);
    // NodeList(3) [div, div, div]
    console.log(divArr);
    // (3) [div, div, div]
</script>

10.Symbol

<script>
    // 创建Symbol
    let s=Symbol();
    let s2 = Symbol('abcd');
    let s3 = Symbol.for('ABCD');
    console.log(s, typeof s);
    // Symbol() 'symbol'
    console.log(s2, typeof s2);
    // Symbol(abcd) 'symbol'
    console.log(s3, typeof s3);
    // Symbol(ABCD) 'symbol'

    // 不能与其他类型数据进行运算

    // 数据类型巧记 USONB: YOU SO NB
    // U: undefined
    // S: String, Symbol
    // O: Object
    // N: null, Number
    // B: Boolean

    // Symbol创建对象属性
    // 向对象中添加方法up down
    let game = {
        name:'俄罗斯方块'
    }

    let methods = {
        up: Symbol('up'),
        down: Symbol('down')
    };

    game[methods.up] = function(){
        console.log('我可以改变形状');
    }
    game[methods.down] = function(){
        console.log('我可以快速下降');
    }
    console.log(game);
    // {name: '俄罗斯方块', Symbol(up): ƒ, Symbol(down): ƒ}

    let game2 = {
        name:'狼人杀',
        [Symbol('say')]: function(){
            console.log('我可以发言');
        },
        [Symbol('zibao')]: function(){
            console.log('我可以自爆');
        },
    }
    console.log(game2)
    // {name: '俄罗斯方块', Symbol(up): ƒ, Symbol(down): ƒ}
</script>

11.生成器函数

<script>
    // 生成器其实就是一个特殊的函数
    function* gen() {
        yield 'alpha';
        yield 'bob';
        yield 'charlie';
    }

    let iterator = gen();
    console.log(iterator.next());
    // {value: 'alpha', done: false}
    console.log(iterator.next());
    // {value: 'bob', done: false}
    console.log(iterator.next());
    // {value: 'charlie', done: false}
    console.log(iterator.next());
    // {value: undefined, done: true}

    // 遍历
    for (let v of gen()) {
        console.log(v);
    }
    // alpha
    // bob
    // charlie

    // 生成器函数实例
    // 回调地狱
    // setTimeout(() => {
    //     console.log(111);
    //     setTimeout(() => {
    //         console.log(222);
    //         setTimeout(() => {
    //             console.log(333);
    //         },3000)
    //     },2000)
    // },1000)

    function one() {
        setTimeout(() => {
            console.log(111);
            iterator2.next();
        },1000)
    }
    function two() {
        setTimeout(() => {
            console.log(222);
            iterator2.next();
        },2000)
    }
    function three() {
        setTimeout(() => {
            console.log(333);
            iterator2.next();
        },3000)
    }

    function * gen2(){
        yield one();
        yield two();
        yield three();
    }

    let iterator2=gen2();
    iterator2.next();
    // 1秒后输出:111
    // 2秒后输出:222
    // 3秒后输出:333

</script>

12.Promise基本语法

<script>
    // 实例化 Promise 对象
    const p = new Promise(function(resolve,reject){
        setTimeout(function(){
            let data = '用户数据';
            resolve(data);

            // let err='错误信息';
            // reject(err);

        },1000);
    });

    // 调用 Promise 对象的then方法
    p.then(function(value){
        console.log(value);
    },function(reason){
        console.error(reason);
    })
    // 1秒后输出:用户数据
</script>

13.集合set

<script>
    // set的声明
    let s= new Set(['a','b','c']);
    let s2 = new Set(['A','B','C','D','E'])
    // 元素个数
    console.log(s2.size);
    // 5
    // 添加新元素
    s2.add('F');
    console.log(s2);
    // Set(6) {'A', 'B', 'C', 'D', 'E', …}
    // 删除元素
    s2.delete('A');
    console.log(s2);
    // Set(5) {'B', 'C', 'D', 'E', 'F'}
    // 查询元素
    console.log(s2.has('C'));
    // true
    console.log(s2.has('O'));
    // false
    // 清空
    s2.clear();
    console.log(s2)
    // Set(0) {size: 0}
    // 遍历
    for(let v of s){
        console.log(v)
    }
    // a
    // b
    // c
</script>

14.Map

<script>
    // 声明Map
    let m = new Map();
    // 添加元素
    m.set('name','jaychou');
    m.set('skill',function(){
        console.log('我可以唱歌!');
    });
    let key={
        star:'jollin'
    };
    m.set(key,['value1','value2','value3']);

    // size
    console.log(m.size)
    // 3

    // 删除
    m.delete('name');

    // 获取
    console.log(m.get('skill'));
    // ƒ (){
    //     console.log('我可以唱歌!');
    // }
    console.log(m.get(key));
    // (3) ['value1', 'value2', 'value3']

    // 清空
    m.clear();
</script>

15.类class

<script>
    // 构造一个类
    class MobilePhone{
        // 构造方法,名字不能修改
        constructor(brand,price){
            this.brand = brand;
            this.price = price;
        }

        // 方法必须使用该语法,不能使用ES5的对象完整形式
        call(){
            console.log('我可以打电话')
        }
    }

    let onePlus = new MobilePhone("1+",2000);
    console.log(onePlus);
    // MobilePhone {brand: '1+', price: 2000}
</script>

16.数值扩展

<script>
    // 0.Number.EPSILON 是JavaScript表示的最小精度
    function equal(a,b){
        if (Math.abs(a-b)<Number.EPSILON){
            return true;
        }else{
            return false;
        }
    }

    console.log(0.1+0.2===0.3);
    // false
    console.log(equal(0.1+0.2,0.3));
    // true

    // 1.二进制和八进制
    let b=0b1010;
    let o=0o177;
    let d=200;
    let x=0xff;
    console.log(x);
    // 255

    // 2.Number.isFinite检查一个值是否为有限数
    console.log(Number.isFinite(100));
    // true
    console.log(Number.isFinite(100/0));
    // false
    console.log(Number.isFinite(Infinity));
    // false

    // 3.Number.parseInt Number.parseFloat字符串转整数
    console.log(Number.parseInt('312123123abc'));
    // 312123123
    console.log(Number.parseFloat('3.231232131dii'));
    // 3.231232131

    // 4.Number.isNaN检查一个数值是否为NaN
    console.log(Number.isNaN(23));
    // false

    // 5.Number.isInteger 判断是否整数

    // 6.Math.trunc 抹掉小数部分

    // 7.Math.sign 判断一个数符号
    console.log(Math.sign(100));
    // 1
    console.log(Math.sign(0));
    // 0
    console.log(Math.sign(-2000));
    // -1
</script>

17.对象私有属性

<script>
    class Person{
        // 公有属性
        name;
        // 私有属性
        #age;
        #weight;
        // 构造方法
        constructor(name,age,weight){
            this.name=name;
            this.#age=age;
            this.#weight=weight;
        }

        intro(){
            console.log(this.name);
            console.log(this.#age);
            console.log(this.#weight);
        }
    }
    
    let girl=new Person('nana','23','45');
    console.log(girl.name);
    console.log(girl.age);
    console.log(girl.weight);
    // nana
    // undefined
    // undefined

    girl.intro();
    // nana
    // 23
    // 45
</script>

18.对象方法扩展

<script>
    // 1.Object.is 两个值是否完全相等
    console.log(Object.is(120, 120));
    // true
    console.log(Object.is(NaN, NaN));
    // true
    console.log(NaN === NaN);
    // false

    // 2.Object.assign对象的合并
    const config1 = {
        host: 'localhost',
        port: 3306,
        name: 'root',
        pass: 'root'
    };
    const config2 = {
        host: 'localhost',
        port: 33060,
        name: 'name',
        pass: 'pass'
    }
    console.log(Object.assign(config1, config2));
    // {host: 'localhost', port: 33060, name: 'name', pass: 'pass'}

    // 3.Object.setPrototypeOf Object.getPrototypeOf
    // Object.setPrototypeOf() 静态方法可以将一个指定对象的原型
    // (即内部的 [[Prototype]] 属性)设置为另一个对象或者 null。
    const obj = {};
    const parent = { foo: 'bar' };

    console.log(obj.foo);
    // undefined

    Object.setPrototypeOf(obj, parent);

    console.log(obj.foo);
    // bar
    console.log(Object.getPrototypeOf(obj))
    // {foo: 'bar'}
</script>

19.js文件模块化

ES6模块暴露数据,m1.js

// 分别暴露
export let star='jaychou';

export function skill() {
    console.log('i can sing');
}

// 统一暴露
let movie='Titanic';

function category(){
    console.log('romance')
}

export{movie,category};

// 默认暴露
export default{
    music:'Scarborough Fair',
    singer: function(){
        console.log('sarah brightman');
    }
}

ES6引入模块数据,html文件

<script type="module">
    // 1.通用导入方式
    import * as m1 from './m1.js';

    // 2.解构赋值方式
    import {star,skill} from './m1.js';
    import {movie as mv, category} from './m1.js';
    import {default as dft} from './m1.js';

    // 针对默认暴露
    import dft2 from './m1.js';
    console.log(dft2);
    // {music: 'Scarborough Fair', singer: ƒ}
</script>

20.async和await

<script>
    // 创建promise对象
    const p = new Promise((resolve, reject) => {
        // resolve("user data");
        reject('error occured');
    })

    // await要放在async函数中
    async function main() {
        try {
            let rst = await p;
            console.log(rst);
        } catch (e) {
            console.log(e);
        }
    }

    main();
    // error occured
</script>

21.正则扩展-正向断言与反向断言

<script>
    // 声明字符串
    let str = 'js3232323hahaoo44gaga';
    // 正向断言
    const reg=/\d+(?=ga)/;
    const rst = reg.exec(str);
    console.log(rst);
    // (1) ['44', index: 15, input: 'js3232323hahaoo44gaga', groups: undefined]

    // 反向断言
    const reg2=/(?<=o)\d+/;
    const rst2=reg2.exec(str);
    console.log(rst2);
    // (1) ['44', index: 15, input: 'js3232323hahaoo44gaga', groups: undefined]
</script>

22.可选链操作符

<script>
    // ?.
    function main(config) {
        const dbHost = config && config.db && config.db.host;
        const dbHost2 = config?.cache?.host;
        console.log(dbHost);
        console.log(dbHost2);
    }

    main({
        db: {
            host: '192.168.1.1',
            username: 'dbuser',
        },
        cache: {
            host: '192.168.1.1',
            username: 'cacheuser'
        }
    })
    // 192.168.1.1
	// 192.168.1.1
</script>

23.动态import

hello.js

export function ok(){
    alert('nihao!');
}

m1.js文章来源地址https://www.toymoban.com/news/detail-647218.html

const btn = document.getElementById('btn');

btn.onclick = function(){
    import('./hello.js').then(module=>{
        module.ok();
    })
}

到了这里,关于【ECMAScript】ES6-ES11学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6 ~ ES11 学习笔记

    ·课程地址 let 不能重复声明变量(var 可以) let 具有块级作用域,内层变量外层无法访问 let 不存在变量提升(运行前收集变量和函数,提前声明),但是 var 存在变量提升: 不影响作用域链: 案例: 如果在 for 循环中使用了 var 声明 i,那么它会被提升到全局作用域 window

    2024年02月21日
    浏览(49)
  • ECMAScript6历史-前端开发+ECMAScript+基础语法+入门教程

    我们首先来看 ECMA 是什么。 ECMA ,读音类似“埃科妈”,是 欧洲计算机制造商协会 (European Computer Manufacturers Association)的简称,是一家国际性会员制度的信息和电信标准组织。1994年之后,由于组织的标准牵涉到很多其他国家,为了体现其国际性,更名为 Ecma 国际 (Ecma In

    2024年01月16日
    浏览(49)
  • 前端框架前置课Node.js学习(1) fs,path,模块化,CommonJS标准,ECMAScript标准,包

    目录 什么是Node.js 定义 作用: 什么是前端工程化 Node.js为何能执行Js fs模块-读写文件 模块 语法: 1.加载fs模块对象 2.写入文件内容 3.读取文件内容 Path模块-路径处理 为什么要使用path模块 语法 URL中的端口号 http模块-创建Web服务 需求 步骤: 案例:浏览时钟 步骤: 什么是模块化 定

    2024年01月16日
    浏览(110)
  • ECMAScript版本对比:从ES1到ES2021

    ECMAScript(简称ES)是一种用于编写Web前端JavaScript的标准化语言。自1997年发布第一版(ES1)以来,ECMAScript已经经历了多个版本的更新和演进。每个版本都引入了新的语法和功能,为开发人员提供了更强大和灵活的工具。 本文将对ECMAScript的各个版本进行对比,详细介绍每个版

    2024年02月12日
    浏览(30)
  • ES6-ES13用法(高频面试题)

    1. ES6新增的方法 let和const,解构赋值、模板字符串、箭头函数。 Symbol、Map、Set三种常用的数据类型。 Proxy重新定义了数据劫持的能力 Reflect定义了一套标准化的数据操作的方式 Promise确实的解决了异步逻辑嵌套及回调地狱问题。定义了异步逻辑的三种状态pending、rejected、full

    2024年01月25日
    浏览(38)
  • 【前端】ECMAScript6从入门到进阶

    1.ES6简介及环境搭建 1.1.ECMAScript 6简介 (1)ECMAScript 6是什么 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 (2)ECMAScript 和 JavaScript 的关系 E

    2024年02月07日
    浏览(42)
  • 前端框架学习-ES6新特性(尚硅谷web笔记)

    ECMASript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。 笔记出处:b站 尚硅谷Web前端ES6教程,涵盖ES6-ES11 阮一峰大佬的:ECMAScript 6 入门 ES6 let 使用let声明变量的特点: 不允许重复声 块儿级别作用域 不存在变量提升 不影

    2024年02月12日
    浏览(35)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(54)
  • 前端小白的学习之路(ES6 一)

    提示:声明:let与const,长度单位:em与rem,vw与wh,解构赋值,箭头函数(简介) 目录 一、ES6介绍 二、letconst 1.let 1) 用 let 声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用域 { }   总结 2.const 三、 长度单位 1.em与rem 1).em 2).rem 2.vw与vh 四、 解构赋

    2024年04月15日
    浏览(49)
  • ECMAScript 6语法简介

    在Vue开发中,使用块作用域构造 let 和 const 可以更好地管理变量的作用域,避免出现意外的变量污染。 let 可以在块级作用域中声明一个变量,并且该变量仅在该作用域内有效。 解析:在上述代码中,我们在块级作用域内部使用 let 声明了变量 value 。在 if 代码块内部,

    2024年02月15日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包