尚硅谷前端ES6-ES11

news2024/11/15 11:09:32

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化得脚本程序设计语言。

1.let变量声明以及变量声明特性

<body>
    <script>
        //let的声明
        let a , b=10;
        //特性1:变量不能重复声明,避免命名污染
        // let star = "罗翔"
        // let star = "张三" //报错
        //特性2:块级作用域
        // if else while for
        // {
        //     let girl = "周"
        // }
        // console.log(girl);//报错
        //特性3:不存在变量提升
        // console.log(song) //报错
        // let song = "恋爱达人"
        //特性4:不影响作用域链
        {
            let school = '尚硅谷'
            function fun(){
                console.log(school); //尚硅谷
            }
            fun()
        }
    </script>
</body>

2.const声明常量以及特点

<body>
    <script>
        //声明常量
        const SCHOOL = "尚硅谷"
        // 特性1:一定要赋初始值
        // const A; //报错
        // 特性2:一般常量使用大写(潜规则)
        // const A = 100
        // 特性3:常量值不能修改
        // const SCHOOL = "ATGUIGU"
        // 特性4:块级作用域
        // {
        //     const PLAYER ='UZI'
        // }
        // 特性5:对于数组的元素修改,不算对常量修改,不会报错
        const TEAM = ['uzi','lol']
    </script>
</body>

3.变量解构赋值

<body>
    <script>
        // 数组的结构
        const num = [0, 1]
        let [a, b] = num
        console.log(b);//1
        // 对象解构
        const user = {name:"张三",age:19}
        let {name,age} = user
        console.log(name);
    </script>
</body>

4.模板字符串

<body>
    <script>
        // ``
        let str = `我是
        张三${6666}`;
        console.log(str);
    </script>
</body>

5.对象简化写法

<body>
    <script>
        let name = 'zs'
        let obj = {
            name,
            imporve(){
                console.log(123);
            }
        }
    </script>
</body>

6.箭头函数

<body>
    <script>
        // 声明函数
        var fn = ()=>{
            console.log(123);
        }
        fn()
        // 特性1:this是静态的,指向作用域,无论使用call什么都不能改变this的指向
        // 特性2:不能作为构造函数实例化
        // 特性3:不能使用argument变量
        // 特性3:箭头函数的简写,省略小括号,当形参只有一个的时候。省略花括号,当代码只有一条,结果就是返回值
    </script>
</body>

7.函数参数的默认值设置

<body>
    <script>
        // 1.形参初始化 具有默认值的参数,一般位置要靠后(潜规则)
        function add(a,b=10){}
        // 2.与解构赋值结合
        function reduce({a,b=10}){}
    </script>
</body>

8.rest参数

<body>
    <script>
        // 1.rest参数,返回一个真正的数组argument返回一个伪数组
        // 2.一般写在最后面
        function add(a,...args){}
    </script>
</body>

9.扩展运算符

<body>
    <script>
        // 扩展运算符 【...】将数组转换为一个由,分割的有序数列,用于数组的合并
        const arr = [1,2,3]
        console.log(...arr);
    </script>
</body>

10.Symbol

<body>
    <script>
       //声明一个独一无二的数据,不能进行运算
       let s = Symbol("尚硅谷")
       //7个数据类型 Number,Undefined,String,null,boolean,Symbol,object
    </script>
</body>

11.迭代器和生成器

interptor。。。。。for of遍历

12.Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。

        Promise 构造函数:Promise(excuor){}

        Promise.prototype.then 方法

        Promise.prototype.catch 方法

<body>
    <script>
        const p = new Promise(function (res, rej) {
            setTimeout(() => {
                res("成功")
            }, 3000)
        })
        p.then((res) => {
            console.log(res);
        }, (err) => {
            console.log(err);
        }).catch((err) => {
            console.log(err);
        })
    </script>
</body>

13.set

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

size:返回集合的元素个数        add:添加一个新的元素,返回当前集合        delete:删除元素,返回boolean值        has:检测集合中是否包含某个元素

var set = new Set()

 14.Map

键值对形式:

size:返回Map的元素个数        set,增加一个元素,返回当前map        get:返回键名对象的键值        has:检测是否包含某个元素      clear:清空

let map = new Map()

15.class类

<body>
    <script>
        class Phone {
            static size = "18inch"
            constructor(name, price) {
                this.name = name;
                this.price = price;
            }
            call(){
                console.log("我可以打电话");
            }
        }
        class SmartPhone extends Phone{
            constructor(name, price,color) {
                super(name,price)
                this.color=color
            }

            call(){
                console.log("华为手机就是牛");
            }

            get color(){
                console.log("获取color");
                return "iloveyou" //获取color的值
            }

            set color(value){
                console.log(value); //暗黑
                return "iloveyou"
            }
        }

        let phone = new Phone("小米",19999.0)
        console.log(phone);
        console.log(Phone.size);
        let smartPhone = new SmartPhone("华为",29013,"虹色")
        smartPhone.call()
        console.log(smartPhone.color);
        smartPhone.color = "暗黑"
    </script>
</body>

16.数值扩展

<body>
    <script>
        // 0.Number.EPSILON 是 Javascript 表示最小精度
        function equal(a,b){
            if(Math.abs(a-b) < Number.EPSILON){
                return true
            }else{
                return false
            }
        }
        console.log(equal(0.3,0.2+0.1));

        // 1.二进制和八进制
        let a = 0x09
        console.log(a); //9

        //2.Number.isFinite 检测一个数值是否为有限数
        console.log(Number.isFinite(10/2)); //true

        //3.Number.isNAN 检测一个数值是否为 NaN
        console.log(Number.isNaN(123)); //false

        //4.Number.parseInt  Number.parseFloa字符串转整数
        console.log(Number.parseFloat("123"));

        //5.Number.isIneger 判断一个数是否为整数
        console.log(Number.isInteger(1.1)); //false

        //6.Math.trunc 将数字的小数部分某掉
        console.log(Math.trunc(3.6));

        //7.Math.sign 判断一个数为正数 1 负数 -1 零 0
        console.log(Math.sign(11));
    </script>
</body>

17.对象扩展

<body>
    <script>
        //Object.is判断两个值是否相等
        console.log(Object.is(123, 123));
        //Object.assign 对象的合并
        console.log(Object.assign({ name: 123 }, { age: 19 }));
        //Object.setPrototypeOf
        const obj = { name: "zs" }
        console.log(Object.setPrototypeOf(obj,{city:"北京"}));
    </script>
</body>

18.模块化

分别暴露:

统一暴露:

默认暴漏:

 babel将ES6转换为ES5代码

19.ES7新特性

判断数组是否包含某个值:const arr = [1,2,3]   console.log(arr.includes(1))

指数:console.log(2 ** 10)

20.async函数和await表达式

async 函数的返回值为promise对象。promise对象的结果由async函数执行的返回值决定

await必须写在async函数中。右侧为promise对象。返回的是promise成功的值,失败使用try...catch捕获

21.对象方法扩展

<body>
    <script>
        var obj = {name:"zs",age:18}
        //获取对象所有的键
        console.log(Object.keys(obj));
        //获取对象所有的值
        console.log(Object.values(obj));
        // 创建Map
        console.log(new Map(Object.entries(obj)));
    </script>
</body>

22.对象方法扩展

<body>
    <script>
       var obj = {name:"张三"}
       var age = {age:18}
       console.log({...obj,...age});
    </script>
</body>

23.Object.fromEntries()将二维数组转化为对象

<body>
    <script>
      const result = Object.fromEntries([['name',"尚硅谷"],["xueke","java,前端"]])
      console.log(result);
      const map = new Map()
      console.log(Object.fromEntries(map));
    </script>
</body>

24.字符串方法扩展

trimStart-trimEnd去除左边和右边的空格

25.数组扁平化flat和mapFlat

<body>
    <script>
      //flat 平
      const arr = [1,2,3,[4,5,[7,8]]]
      //参数为深度 是一个数字 默认为1
      console.log(arr.flat(3));

    //   flatMap
    const arr1 = [1,2,3]
    const result = arr.flatMap(item=>[item]);
    console.log(result);
    </script>
</body>

26.Symbol的描述

<body>
    <script>
    //   创建 Symbol
    let s = Symbol('尚硅谷')
    console.log(s.description);
    </script>
</body>

27.私有属性

28.动态Import 

29.最大值

BigInt()

30.全局指向globalThis

<body>
    <script>
    console.log(globalThis);
    </script>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/176663.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java | 浅谈多态中的向上转型与向下转型

文章目录&#x1f333;向上转型&#x1f4d5;概念明细&#x1f4aa;使用场景1&#xff1a;直接赋值&#x1f4aa;使用场景2&#xff1a;方法传参&#x1f4aa;使用场景3&#xff1a;方法返回&#x1f4aa;向上转型的优缺点&#x1f333;向下转型&#x1f529;向下转型解决【调用…

程序员拯救了一次地球

流浪地球2&#xff1a;程序员拯救了一次地球 顺便给我们讲了一个道理&#xff1a; 人类会谋划未来&#xff0c; 但关键的一步是靠勇气迈出去的 趣讲大白话&#xff1a;算得好不如胆量好 *********** 电影工业的皇冠是特效 国产电影的特效进步不小 时时刻刻&#xff0c;分分秒秒…

用户画像计算更新

3.1 用户画像计算更新 目标 目标 知道用户画像建立的流程应用 无 3.1.1 为什么要进行用户画像 要做精准推送同样可以使用多种推荐算法&#xff0c;例如&#xff1a;基于用户协同推荐、基于内容协同的推荐等其他的推荐方式&#xff0c;但是以上方式多是基于相似进行推荐。而构…

ROS移动机器人——ROS基础知识与编程

此文章基于冰达机器人进行笔记整理&#xff0c;使用的环境为其配套环境&#xff0c;可结合之前的ROS&#xff0c;赵虚左老师的文章结合进行观看&#xff0c;后期也会进行整合 1. ROS安装 &#xff08;1&#xff09;配置ubuntu的软件和更新&#xff0c;允许安装不经认证的软件…

JS手动触发PWA安装窗口

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的博客 &#x1f34a;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;…

仿写Dubbo-初识Dubbo

概念 Dubbo 在Dubbo官网介绍到&#xff0c;Apache Dubbo 是一款 RPC 服务开发框架&#xff0c;用于解决微服务架构下的服务治理与通信问题。 RPC RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用协议&#xff0c;一种通过网络从远程计算机上请求服务&#xff0c…

【Android】手机安装Termux运行nodejs学习Javascript编程入门

Termux 是运行在Android手机上的一个 Linux 终端模拟器&#xff0c;干什么都要输入命令执行&#xff0c;不像 Windows 操作系统桌面用鼠标点点点&#xff0c;这里主要介绍用它来学习Javascript编程入门&#xff0c;当然&#xff0c;这和小时候学过的C语言编程课入门一样的&…

C语言之程序设计概述

1.1.1 程序的概念 程序&#xff1a;算法 数据结构 程序设计方法 语言工具和环境数据结构&#xff1a;数据的类型和数据的组织方式算法&#xff1a;对数据操作的方法和步骤 1.1.2 程序设计语言的种类 第一代语言&#xff08;机器语言&#xff09;&#xff1a;执行效率高、…

【Leetcode每日一题】35.搜素插入位置|二分查找数组下标

&#x1f331;博主简介&#xff1a;大一计科生&#xff0c;努力学习Java中!热爱写博客~预备程序媛 &#x1f4dc;所属专栏&#xff1a;LeetCode每日一题–进击大厂 ✈往期博文回顾: 【JavaSE】保姆级教程|1万字10张图学会类与对象–建议收藏 &#x1f575;️‍♂️近期目标&…

【题解】2023牛客寒假算法基础集训营2

目录A. Tokitsukaze and abn (easy)思路B. Tokitsukaze and abn (medium)思路Tokitsukaze and abn (hard)思路D. Tokitsukaze and Energy Tree思路bfsdfsE. Tokitsukaze and Energy Tree思维F. Tokitsukaze and Gold Coins (easy)思路G. Tokitsukaze and Gold Coins (hard)H. T…

高效团队的gitlab flow最佳实践

当前git是大部分开发团队的首选版本管理工具&#xff0c;一个好的流程规范可以让大家有效地合作&#xff0c;像流水线一样有条不紊地进行团队协作。 业界包含三种flow&#xff1a; Git flowGithub flowGitlab flow 下面我们先来分析&#xff0c;然后再基于gitlab flow来设计一…

19、Javaweb案例-登录功能

项目导入 选择travel项目的pom.xml文件&#xff0c;点击ok&#xff0c;完成项目导入。需要等待一小会&#xff0c;项目初始化完成。 启动项目 方式一&#xff1a; 方式二&#xff1a;配置maven快捷启动 技术选型 Web层 Servlet&#xff1a;前端控制器html&#xff1a;视图Fi…

【c语言】数据结构-顺序表

主页&#xff1a;114514的代码大冒险 qq:2188956112&#xff08;欢迎小伙伴呀hi✿(。◕ᴗ◕。)✿ &#xff09; Gitee&#xff1a;庄嘉豪 (zhuang-jiahaoxxx) - Gitee.com 文章目录 目录 文章目录 前言 一、顺序表是什么&#xff1f; 二、项目功能的逐一实现&#xff08;基本&a…

Python-Flask-2023.1.22

1、WSGIweb server gateway interface一个框架定义的简单通用的接口Web服务器网关接口&#xff08;Python Web Server Gateway Interface&#xff0c;缩写为WSGI&#xff09;是为Python语言定义的Web服务器和Web应用程序或框架之间的一种简单而通用的接口。flask框架内有默认的…

手写vue及源码解析一 rollup环境的搭建

开篇 都手写源码了&#xff0c;那就顺便分析一下源码吧。 rollup环境的搭建 作为了解就行。需要使用rollup来编译我们自己手写的vue代码。 需要安装rollup,rollup的babel插件&#xff0c;以及babel核心和babel预设&#xff08;可以理解为初始化模板&#xff09;。 mkdir vu…

Java变量定义时候的注意事项

常量定义的基本注意事项 在JAVA语言中&#xff0c;主要利用final关键字&#xff0c;&#xff08;在Java类中灵活使用static关键字&#xff09;来定义常量。 当常量被设定后&#xff0c;一般情况下就不允许在进行更改了&#xff0c;如可以利用以下的形式来定义常量&#xff1a;…

仿写Dubbo-Java Socket

概念 socket 被翻译为“套接字”&#xff0c;socket是计算机之间进行通信的一种方式。通过socket可以实现端(端口)到端通信。Java的java.net包中提供了进行socket通信的类。主要使用ServerSocket和Socket类实现通信。 ServerSocket 服务端应用使用java.net.ServerSocket类来获取…

Node.js 操作MongoDB (Mongoose) 数据库

在讲Node.js通过使用mongoose模块来操作MongoDB数据库之前首先是关于MongoDB数据库的安装和MongoDB服务以及对MongoDB命令行的操作和可视化工具MongoDBCompass的一个基本使用&#xff1b;那么在这里已经准备好了关于MongoDB数据库的内容了&#xff1a; MongoDB数据库安装详细 &…

学习shell与shell编程

Linux配置文件都是以ASCII的纯文本形式存在。 为什么学习vi 1)UnixLike系统都会内置vi文本编辑器&#xff0c;其他的文本编辑器则不一定存在 2)许多软件的编辑接口都会主动调用vi 3)vi具有程序编辑的能力&#xff0c;可以主动以字体颜色辨别语法的正确性 4)程序简单&#…

06-jquery函数

2.6函数 .6.1第一组函数 1 val():操作dom函数的value值 val()&#xff1a;没有参数&#xff0c;获取dom数组中第一个dom对象的value值。 val(参数)&#xff1a;有参数&#xff0c;给dom数组中所有dom对象的value属性赋值。 2 text()&#xff1a;操作标签文本内容&#xff0c;…