ES6基本语法

最新推荐文章于 2022-08-20 21:43:59 发布
最新推荐文章于 2022-08-20 21:43:59 发布
阅读量224 收藏 1
点赞数
分类专栏： Vue 文章标签： es6a语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/We_jia/article/details/88699350
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    /*
      es6基本语法：

        1.变量的声明：   var
       es6: let（限制作用域 所声明的变量，只在let命令所在的代码块内有效）  
       const（const声明一个只读的常量。一旦声明，常量的值就不能改变。）
   */

    /*var a=6;
    console .log(a);
    a=20;
    console .log(a);
    const PI=3.14;
    console .log(PI);*/

    //2.es6引入的语法 ：代码块  内外层互不干扰，外层无法读取内层变量。

    /*let a=1;
    {
      let a=3;
      console.log(a);

    }*/

    // es5
    {
      // var a=[];
      // for(var i=0;i<10;i++){

      //    a[i]=function (){
      //      console.log(i)
      //  }
      // }
      // a[6]();  //10 变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。
    }
    /* 
    //es6
       let a=[];
         for(let i=0;i<10;i++)
         {
             a[i]=function (){
                 console.log(i);
             }
         }
         a[6](); //6 变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，
    
    }*/



    // 3.ES6 变量的解构赋值,按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
    // “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值
    //如果解构不成功，变量的值就等于undefined
    // var a=1;
    // var a=1,b=2,c=3;
    /*{
       //let [a,b,c]=[1,2,3];
         // console.log(a);
         // console.log(b);
        // console.log(c);

       //  let [[a,b,c],[a,[b,c]]]=[[1,2,2],[3,[4,5]]];
   }*/
    //不完全解构，可以成功
    /*let [x, y] = [1, 2, 3];
        x // 1
        y // 2*/

    let [head, ...tail] = [1, 2, 3, 4];
    head // 1
    tail // [2, 3, 4]
    //...a  数组   ...执行不在写
    let [...b] = [1, 2, 3, 4, 5, 6];
    console.log(b);  //123456

    // 对象的解构赋值

    /*var { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"*/

    //字符串的解构赋值
    /*{
      const [a, b, c, d, e] = 'hello';
      a // "h"
      b // "e"
      c // "l"
      d // "l"
      e // "o"
    }*/

    /*
      es5  给字符串 绑定值  直接是拼接  ++
      es6  使用模板字符串来动态绑值   模板字符串中嵌入变量，需要将变量名写在${}之中。
      es6 ： `` 
     */

    {
      let a = 10;
      let h = 10;
      let str = `我的年龄是:${a}岁！我身高:${h}M`;
      console.log(str);
    }

    // 函数参数
    /*[[1, 2], [3, 4]].map(([a, b]) => a + b);
    [ 3, 7 ]*/

    // 解构赋值对提取JSON对象中的数据，尤其有用。
    var jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };

    let { id, status, data: number } = jsonData;

    console.log(id, status, number);
    // 42, "OK", [867, 5309]


    //es6里面的函数默认值问题：
    {
      //如果参数x赋值了，但是对应的布尔值为false，则该赋值不起作用。
      //如果在调用函数的时候，传入的x参数是一个空字符串，那么x就会被修改为默认值。 
      stu(undefined, 2)
      function stu(x, y) {
        x = x || '0';
        console.log(x, y);  //0 2
      }
      stus(undefined, 2)
      function stus(x = 0, y = 0) {
        console.log(x, y);  // 0 2
      }
    }

    // 遍历Map结构
    {
      let map = new Map();
      map.set("first", 'hello');
      map.set("secod", 'world');
      for (let [key, value] of map) {
        console.log(key + " is " + value);
      }
    }


    // Set结构和Map数据结构
    // 数据结构Set 它类似于数组，但是成员的值都是唯一的，没有重复的值，本身是构造函数
    {
      var s = new Set();
      [1, 2, 3, 3, 4, 4, 5, 5].map(x => s.add(x)),
        console.log(s);   //1 2 3 4 5

    }

    //Map 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

    {
      var map = new Map();
      var o = { p: 'kjckdjkd' };
      map.set(o, 'hello');
      console.log(map.get(o));

    }
    {
      var map = new Map([
        ['name', '张三'],
        ['age', '12'],
      ]);

      console.log(map.size);  //size属性返回Map结构的成员总数。
      console.log(map.set('age', 6)); // set方法设置key所对应的键值，然后返回整个Map结构
      console.log(map.has('name'));    //has方法返回一个布尔值，表示某个键是否在Map数据结构中。
      console.log(map.get('name'));   //get方法读取key对应的键值，如果找不到key，返回undefined。
      console.log(map.delete('name')); //delete方法删除某个键，返回true。如果删除失败，返回false。
      console.log(map.clear()); //clear方法清除所有成员，没有返回值。
    }

    // es6的箭头函数  =>
    {
      /*箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，
导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
*/
    }
    // let res=function (){}
    {
      let res = () => { console.log(1) }    //圆括号里是参数  大括号里是返回值 
      res();
    }
    /*{
      var f = v => v;
      var f = function (v) {
        return v;
      }

      //2.如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
      var m = () => 5;
      var m = function () {
        return 5;
      }

      var sum = (num1, num2) => num1 + num2;
      var sum = function (num1, num2) {
        return num1 + num2;
      }
        ,
      //, ,3.果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
      var sum = (num1, num2) => { num1 + num2 };
      var sum = function (num1, num2) {
        return num1 + num2;
      }


      //4.由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
      var my = id => ({ id: 'id', name: 'hh' });

      // 5.自执行函数
      (function (x) {
        console.log(x)
      })(1);

      (x => { console.log(x) })(1);
    }*/

    {
      // 箭头函数的应用
      let a = [1, 8, 2, 3, 5, 6, 7, 9]
      console.log(a.sort((n1, n2) => n2 - n1));  //987654321
    }

    {
      Array.prototype.mysort = () => {
        console.log(this);   //  //箭头函数保持上下文对象一致  window
      }
      var n = new Array(1, 2, 3, 4, 5, 6);
      n.mysort();
    }

    //枚举对象里的this
    {
      let student = {
        init() {
          document.addEventListener("click", () => {
            console.log(this);
          });
        }
      }

      student.init();
      //   setInterval(function (){
      //           console.log(this);
      //         },1000);
      // }
    }
    /*
        es6   for----of--- 遍历
        for...of循环内部调用的是数据结构的Symbol.iterator方法
        */
    {
      let a = ["red", "orange", "black"];
      for (let item of a) {
        console.log(a[item]);  //undefined
        console.log(item); //red orange black   item  直接是值
      }
    }

    {
      let m = [{ name: "jiasijai", age: "12", sex: "男" }, { name: "jiasijai", age: "12", sex: "男" }]
      for (let item of m) {     // of后边的必须是可迭代的集合
        console.log(item);

      }
    }


    /* 在es5中，构造函数生成的对象实例一般包括私有属性和共用方法，其中共用方法一般是通过构造函数的原型进行定义。
    而es6中，通过class类进行定义构造函数则不用借助于原型…. */
    {
      //  es5构造函数
      function list() {
        this.name = null;
        this.age = 12;
        this.sex = "男"
      }
      var l = new list();
      console.log(l.sex)
    }
    {
      // es6 class类  没有变量提升
      class student {
        constructor(w, h) {
          //是给属性初始化默认值的
          //es6里面的属性的定义在constructor
          this.width = w;
          this.heighth=h;
        }
        sleep() {
          console.log('睡觉');
        }
        toString() {
          console.log(1);
        }

        // 获取值 get方法
        get num() {
          return this.width;
        }
        //set 设置值方法
        set setnum(value) {
          this.width = value;
        }
      }

      let stu = new student(100,200);
      stu.sleep();
      stu.toString();
      console.log(stu);
      console.log(stu.num);
      stu.width=200;   //已经改变width的值
      console.log(stu.width);
    
      
      /* student.prototype={   原型链追加
            sleep(){},
            toString(){}
          } */
    }

    {
        /*
          es6里面import(导入)   export(导出)  变量--export--import 一一对应
          
          export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
         一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
         如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
         export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。



        使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
          import Vue from 'vue';    Vue其他模块导入的变量名  vue模块文件的位置
        */

     import React,{Components} from 'react';
       class stu extends Components{
           constructor(props){
               super(props);
                this.state={
         }
          }
         }
        // export default stu;      export default命令，为模块指定默认输出。
    }
  </script>
</body>

</html>

 

We_jia
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6基本语法及新增语法
08-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
【ES6】基础语法
Primary_Insist的博客
11-25 281
目录 一、对象 二、类 1.创建类 constructor构造函数 类中添加方法 2.继承 三、声明变量 1.let 2.const 3.let、const、var的区别 四、解构赋值 1.数组解构 2.对象解构 五、箭头函数 六、剩余参数 1.扩展运算符 2.合并数组 七、内置对象的拓展 1.Array的扩展方法 2.String扩展方法 3.Set 八、模板字符串 1.可以解析变量 2.可以换行 3.可以调用函数 两大编程思想 ...
ES6基础语法
qq_53261858的博客
08-20 492
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。[类型]– 布尔型、数字、字符串、对象等。[原型和继承]内建对象和函数的[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都
es6-modules:学习 ES6 JS 语法
06-13
**ES6 模块：JS 语法新纪元** 在 JavaScript 的发展历程中，ES6（ECMAScript 2015）是一个重要的里程碑，引入了许多新的特性，其中模块（Modules）是面向大型复杂项目的一项重要改进。传统的 JavaScript 文件通常...
JavaScript初识及基本语法详解
03-23
JavaScript是一种基于对象和事件驱动的脚本语言，通常用于Web前端开发。它最初由Netscape的Brendan Eich于1995年设计...本内容将完整的介绍JavaScript的基础语法，结合生动形象举例助你快速掌握对JavaScript新的认识。
详解如何用babel转换es6的class语法
08-27
**如何使用Babel转换ES6的Class语法** Babel是一个强大的JavaScript转码器，它可以将ES6+的新特性，如Class语法，转换为浏览器或低版本Node.js支持的ES5语法。在React、Vue等现代前端框架的开发中，Babel扮演着至关...
Node中使用ES6语法的基础教程
08-28
随着google和firfox以及node6.0对es6的支持，es6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用es6来写的。下面这篇文章主要给大家介绍了关于Node中使用ES6语法的基础教程，需要的朋友可以参考下。
Es6语法教程详细版
12-25
ECMAScript 6 简介
ES6中常用语法
mengsandy的专栏
01-10 5335
ECMAScript 6.0（也可以称为ECMAScript2015），ECMAScript 6.0简称 ES6，是 JavaScript 语言的标准。 出来的时间已经很久了，但是我们在工作中，有时候也不会使用。今天我们就来介绍一下。 1、块级作用域（let、const） 块级作用域，就是有{}括号中可用范围，不像之前var定义的变量都是函数作用域。 let定义的变量可以改变值，const定义的都是静态变量，不可以修改的。但是像数组，只对数据进行push操作的话，也可以定义成const的。 2、模版字符串
ES6基本全部语法
热门推荐
qq_40322724的博客
02-21 4万+
一,变量声明： let声明变量： 1.变量不可重复声明， let star = '罗志祥' let star = '小猪' 结果报错 2.块级作用域， { let girl = '周扬青' } 在大括号内的都属于作用域内 3.不存在变量提升 4.不影响作用域链 const声明常量： const SCHOOL = ‘学校’;一般习惯把常量全用大写字母 1.一定要赋初始值 2.一般常量使用大写（潜规则） 3.常量值不能修改 4.块级作用域 5.对数组和对象的元素修改，不算对常量的修改，不会报错 变量的结构.
es6基础语法
weixin_42666092的博客
04-17 213
1.变量let 01.变量不能重复声明，会报错 02.块级作用域 在{}内执行 03.不存在变量提升 04.不影响作用域链（函数执行，变量寻找从内到外）
JavaScript函数
淘小欣的博客
05-02 326
JavaScript函数 文章目录JavaScript函数一、函数定义二、函数参数三、函数的返回值与表达式函数返回值return函数表达式四、匿名函数五、箭头函数六、小结七、函数全局变量与局部变量1.介绍2.示例 一、函数定义 用来封装你的重复性代码 在python定义函数需要用到关键字def 在 js 中使用 function 定义函数 语法： // 语法 function [函数名](形参1,形参2,形参3...){ [函数体代码]; } // 无参函数 function func1()
ES6常用语法总结 | 持续更新
Kuroko's Development Notes
05-08 755
1、为什么要搞个let、const出来 ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。   2、var、let、const区别 var 声明变量 甚至可以声明全局变量 window.某某 都可以调用 let 声明块级...
ES6基本语法入门
zhangjing1019的博客
06-09 3562
一、用let代替var声明变量    ES5中，我们可以在代码中任意位置声明变量，甚至可以重写已经声明的变量，ES6引入了一个let关键字，它是新的var。let language = 'javascript'; let language = 'zj'; //此处会报错 console.log(language);因为同一作用域中let已经声明过了，所以再次声明会报错二、常量ES6还...
es6class类语法
最新发布
06-13
ES6（ECMAScript 2015）引入了Class关键字，这是一种简洁的方式来定义JavaScript的类。使用类可以使代码组织更加清晰，更容易理解和维护。以下是ES6 Class的基本语法： 1. **定义类**: ```javascript class ClassName { // 成员变量 (实例变量) instanceVariable = value; // 构造函数 (构造方法) constructor(parameters) { // 实例初始化代码 } // 成员方法 (成员函数) method() { // 方法体 } // 静态方法 (不绑定到特定实例) static staticMethod() { // 静态代码 } } ``` 2. **继承**: 使用`extends`关键字来继承父类，子类可以访问父类的所有成员。 ```javascript class ChildClass extends ParentClass { // 子类特有的成员或方法 } ``` 3. **构造函数的调用**: 通常在创建新实例时会自动调用构造函数，但也可以显式调用。 ```javascript const instance = new ClassName(parameters); ``` 4. **原型链**: ES6 Class默认继承自`Object`，所有的实例共享一个原型。`this`在方法中指向当前实例。 5. **方法和属性的动态绑定**: 类中的方法默认是实例方法，可以通过`static`关键字声明静态方法，`bind`方法可以用于创建具有特定`this`值的新函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值