[暑假]ES6基本概述＜快速入门＞

已于 2022-07-12 17:49:37 修改
阅读量288 收藏
点赞数
分类专栏： ES6 JavaScript 文章标签： javascript 前端 es6
于 2022-07-11 17:02:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IDApprentice/article/details/125721514
版权

1.介绍ES

        ES全称 EcmaScript, 是脚本语言的规范, 平时编写的 JavaScript仅仅是EcmaScript的一种实现, 所以ES新特性其实指的是 JavaScript的新特性

2.为什么要学习新的特性?

        1) 语法更简洁, 功能更丰富

        2) 框架中运用了大量的新的特性

3.什么是ECMA?

ECMA(European Computer Manufactures Association)  中文名称为 欧洲计算机制造商协会, 这个组织的目标是评估, 开发和认可电信和计算机标准. 1994年后这个组织改名为 Ecma 国际

4 什么是ECMAScript?

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

5.什么是ECMA-262?

Ecma国际制定了许多标准, 而ECMA-262只是其中一个

6.为什么要学习ES6?

ES6的版本变动内容最多

ES6加入了新的语法特性

7.对象的解构

作用是可以减少代码的书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 对象的解构
        const zhao = {
            name: '小赵',
            age: '18',
            eat: function () {
                console.log('喜欢吃西瓜');
            }
        }
        // 一般调用
        // zhao.eat();

        // ES6
        let {eat} = zhao;
        eat();
    </script>
    
</body>
</html>

8.模板字符串

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

        1) 内容可以直接出现换行符

        2) 变量拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // 1.内容可以直接出现换行符等元素 
        let str = `<ul><li>企业家</li></ul>`
    // 2.变量拼接
    let lovest = '世界';
    let out = `${lovest}我知道他很残酷 但是我害怕吗?`
    console.log(out);
    </script>
    
</body>
</html>

9. 简化对象的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6 允许写在大括号里面, 直接写入变量和函数, 作为对象的属性和方法.
        let name = '企业家';
        let change = function () {
            console.log('就从今天开始');
        }
        const school = {
            name,
            change,
            improve: function () {
                
            }
        }
    </script>
    
</body>
</html>

什么叫做实例化?

创建对象的过程就叫实例化.  有时候也将对象叫做一个类的实例

10.[敲黑板敲黑板~~~]  箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    //    ES6 允许使用[箭头] => 定义函数
    //1. 声明一个函数
    // let fn = function () {

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

    // }

    // // 2.this是静态的 this 始终指向函数声明时所在作用域下的 this的值
    //     function getName() {
    //         console.log(this.name);
    //     }
    //     let getName2 = () => {
    //         console.log(this.name);
    //     }
    //     // 设置 window 对象的 name属性
    //     window.name = '今天是优秀的 即将开始的一天';
    //     const school = {
    //         name: "8888"
    //     }

    //     getName.call(school);
    //     getName2.call(school);

        // //   3.不能作为构造函数去实例化对象  
        // let Person = (name, age) => {
        //     this.name = name;
        //     this.age = age;
        // }
        // let me = new Person('xiao', 18);
        // console.log(me);

            // 4.箭头函数中 不能使用 arguments变量(arguments本身是用来保存实参的, 并且每个函数里面都有)
                // 为什么不能使用arguments?
                // 因为箭头函数中没有自己的 arguments
            // let fn = () => {
            //     console.log(arguments);
            // }
            // fn(1, 2, 3);

            // 5. 箭头函数的简写
            //     1) 省略小括号, 当形参有且只有一个的时候
            //         let add = (n) => {
            //             return a + b;
            //         }
            //         console.log(add(9));
            //     2) 省略花括号, 当代码体只有一条语句的时候,
            //             此时 return 必须省略, 而且语句的执行结果就是函数的返回值
            //     let pow = (n) => {
            //         return n*n;
            //     }
            //     ⬇⬇⬇⬇⬇⬇⬇⬇  可以简写为
            //     let pow = (n) => n*n;
            //     console.log(pow(1, 2));
 </script>

    
</body>
</html>

11.  ...   为扩展运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // // 1. 数组的合并 
        //     const a = ['喜羊羊', '灰太狼'];
        //     const b = ['葫芦娃', '小金刚'];
        //     // const text1 = a.concat(b);
        //     // console.log(text1);
        //     const text2 = [...a, ...b];
        //     console.log(text2);

        // // 2.数组的克隆
        //     const text1 = ['A', 'B', 'C'];
        //     const ans = [...text1];
        //     console.log(ans);

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

12.Symbol(ES6新增数据类型)

 添加唯一的值

        不能与其他数据进行运算

                JS中的数据类型:

                        USONB

                                        undefined

                                         String, Symbol

                                        object

                                        null number

                                        Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let s = Symbol();
        let s2 = Symbol('坚持');
        let s3 = Symbol('坚持');
        //Symbol.for 创建
        let s4 = Symbol.for('坚持');
        let s5 = Symbol.for('坚持');
        
    </script>
</body>
</html>

使用案例

                

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       let youxi = {
            name:'狼人杀',
            [Symbol('say')]: function() {
                console.log('我可以发言');
            },
            [Symbol('zibao')]: function() {
                console.log('我可以自爆');
            }
       }

    </script>
</body>
</html>

13. 解释生成器

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

function * 函数名 () {

}

14.

 

卓律涤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6概述
yang13676084606的博客
11-11 125
ES6概述变量/常量字符串扩展新增方法字符串模板解构表达式对象解构函数优化箭头函数 ES6简介 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。 变量/常量 之前，我们写js定义变量的时候，只有一个关键字：var。但是通
ES6 第一天
ILove_bugs的博客
10-26 384
let和const命令 ES6 新增了let命令，用来声明变量。 ES6新增了const命令用来声明一个只读的常量。 2.1 let命令 2.1.1 基础用法 2.1.2 let命令特点【重点】 let不存在变量提升与暂时性死区 代码案例： <script> //var有变量提升 console.log(age); var age = 20; ​ //let不存在变量提升 ...
ES6学习（四）-- Reflect / Promise / Generator 函数 / Class
最新发布
2302_79523175的博客
03-31 482
of 循环不会遍历得到return 的结果，因为res3 = {value: ‘ccc’,done: true}，根据迭代器的知识判断为true 时程序就停止了，不会得到return 的值。这也是Promise这个名字的由来，它的英语意思是“承诺”，一旦承诺成效，就不得再改变了。Reflect可以用于获取目标对象的行为，它与Object类似，但是更易读，为操作对象提供了一种更优雅的方式。意思是：就是当.then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题。
ES6详细讲解
qq_51986661的博客
11-25 3015
ES61995年的美国，有一家名为netscape(网景)的公司打造了一款主要用于check验证的脚本语言，而恰在此时，Sun公司的java语言火的一塌糊涂，netscape公司为蹭其热度，便将该脚本语言命名为JavaScript。不料JavaScript居然被越来越多的人使用，后效仿大秦的货币统一政策将其提交给国际标准组织ECMA。该组织发布的标准被称做ECMAScript。2015年6月发布的版本称为，简称ES6。从ES6开始，该组织每年会发布一个版本，版本号比年份最后一位大1，至今最新版本为。
ES6兼容问题
Front小思的博客
01-23 2795
由于有些浏览器版本的发布是在 es6 定稿和发布之前的，因此对于老版本的浏览器是没有对 es6 的特性进行兼容的，针对 es6 的兼容问题，许多团队也做出了相应的开发，将 es6 的语法转换成针对浏览器可以识别的 es5 语法，充当一个翻译官的角色；比较通用的工具有：babel、jsx、traceur、es6-shim 等。 一上车就遇到的梗！！！开发中，不管你是大佬还是小菜，一定会晕倒ES6的兼容问题，因为现在ES6用的比较潮流的。下面来总结一下不同环境下有关ES6的相关兼容。 具体ES6兼容解决方案：.
最全ES6详解及用法
麒麟的技术博客
06-12 5138
最全ES6详解及用法变量的定义let、constimportclassJS中的原型原型语言prototype、__proto__、constructor ES6虽然已经用了很久，但是还没系统的过一遍，并且只知用法不知内部实现，此次整理除了系统的过一遍外，进行知识串联，还会了解其内部实现原理。 变量的定义 ES5只用var和function两种声明变量的方式，而ES6有六种：var、function...
30分钟快速入门掌握ES6/ES2015的核心内容（下）
08-27
主要给大家介绍了如何通过30分钟快速入门掌握ES6/ES2015的核心内容的相关资料，之前给大家介绍过基础的一些内容，下面继续来介绍一些其他的新特性，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
30分钟快速入门掌握ES6/ES2015的核心内容（上）
08-27
ES6增加了很多新的语法，很多同学学习起来感觉很别扭，有时候也不理解新增加的语法有什么用，对ES6的学习也没有兴趣进而...下面这篇文章将通过30分钟带大家快速入门掌握ES6/ES2015的核心内容，需要的朋友可以参考下。
angular-es6-template:一个简单的AngularJS ES6模板，可快速入门
05-10
一个简单的AngularJS ES6模板，可快速入门。 semamtic-ui的使用是可选的，您可以使用任何喜欢的css-framework，例如。 我们使用Angular 1.4，因此它可以“准备就绪”，但可以用少量更改将其替换为Angular 2。 从...
JavaScript ES6函数式编程入门经典_javascript_
10-01
JavaScript ES6函数式编程入门经典
angular-babel-seed：具有ES6的超级简单Angular快速入门
01-31
使用ES6（ ）代替的超级简单快速入门器。 建有，捆绑 。 基于官方的 。 建立 克隆或下载此仓库后，请在项目文件夹中运行以下两个命令以使其启动并运行。 yarn yarn dev 这将安装所有软件包，将ES6转换为ES5，将...
分布式项目的学而思3:ES6规范(let&const&解构表达式&字符串扩展&模板,函数&对象优化,map和reduce,promise,模块化import/export
入梦镜
03-12 421
前端学习 前端技术栈类比 ES6 ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商 协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本 程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且 从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMA
ES6常见用法
xiao_yu_gan的博客
08-09 1878
ES6常见用法
ES6新特性(超详细)
m0_55613022的博客
03-19 2344
ES6是每个前端工作人员绕不开的知识点，因此需要好好学习，本文内容是我购买莫振杰的《从0到1ES6快速上手》所做的笔记，内容已经获得作者的同意，另外推荐新手一个学习网站，绿叶学习网 - 给你初恋般的感觉，站长写的很好，适合新手从0到1，加油，一起成为优秀的前端开发者！！ （由于还没看完整本书，该内容会持续更新） 一、let 和 const 1.var： (1).在ES5中，作用域一般分为全局作用域和局部作用域，而ES6新增块级作用域的概念，例如条件语句、循环语句中就是一个块级作用域，为了方便理解的话可以理解
Atitit es6新特性 Es7 es8 新特性 目录 1.1. ECMAScript 的历史 1 2. 新特性 2 2.1. 全面的class模型 2 2.2. .模块 import、expor
attilax的专栏
08-25 598
Atitit es6新特性 Es7 es8 新特性 目录 1.1. ECMAScript 的历史 1 2. 新特性 2 2.1. 全面的class模型 2 2.2. .模块 import、export 2 2.2.1. 4. arrow functions （箭头函数） 2 2.2.2. 5. template string （模板字符串） 2 2.2.3. 8. rest ...
ES6中的类（Class）
热门推荐
『愚』的博客
11-29 1万+
ES6中的类（Class）类的基本语法constructor方法this与class（原型）属性与方法添加到this上属性与方法添加到类上类的静态成员 类的基本语法 ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 //定义
前端学习-JavaScript基础（ES6）
weixin_51346866的博客
03-26 5198
简单了解ES6新增语法。
ES6 数值的扩展 学习笔记
茗霜的博客
05-11 162
一、二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。 0b111110111 === 503 // true 0o767 === 503 // true 如果要将0b和0o前缀的字符串数值转为十进制，要使用Number方法 Number('0b111') // 7 Number('0o10') // 8 二、Number.is...
ES6—简介
雷雨天的雷胖子
09-22 494
一、概述 概念 ES6全称ECMAScript 6.0，是Javascript语言的下一代标准，2015年6月正式发布。 注意，ES6即是一个历史名词，也是一个泛指，含义是5.1版本之后的下一代Javascript标准，涵盖了ES6、ES7、ES8等。 什么是ECMA ECMA中文名称为欧洲计算机制造商协会，该组织的目的是评估、开发和认可电信和计算机标准，1994年更名为Ecma国际。 ECMAScript和JavaScript是什么关系...
<!DOCTYPE html> <html> <head> <title>MathJax Example</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <style> #canvas { position: relative; width: 100%; height: 95vh; background-color: #CCFFCC; } .mathjax-formula { font-size: 2.8em; position: absolute; cursor: move; padding: 5px; border-radius: 5px; color: black; } .mathjax-formula:focus { outline: none; border: 2px solid black; } </style> </head> <body> <div id="canvas"> <div id="mathjax-formulas-container"></div> </div> <script> var formulas = []; var selectedFormula = null; var isDragging = false; function createFormula(latexCode, x, y) { var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); var newFormula = document.createElement("div"); newFormula.className = "mathjax-formula"; newFormula.style.left = x + "px"; newFormula.style.top = y + "px"; newFormula.contentEditable = true; newFormula.innerText = latexCode; mathjaxFormulasContainer.appendChild(newFormula); formulas.push({ latexCode: latexCode, position: { x: x, y: y } });
07-14
- `<div id="mathjax-formulas-container">`: 这是数学公式的容器，用于放置每个公式的`<div>`元素。 - `<script>`: 这是JavaScript代码的部分，用于处理公式的创建、编辑和位置信息。 以上是代码中的主要部分，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值