zoukankan      html  css  js  c++  java
  • ES6基础内容

    什么是ES6?

    是 ECMAScript 的第六个版本

    JavaScript的组成部分:   DOM  BOM   ECMAScript

    DOM:提供dom接口

    BOM:提供bom接口

    ECMAScript:操作dom和bom 的语法

    注意:ES6用在服务端(node),如果是客户端,用ES5。浏览器逐渐支持中

    ES6语法基础语法

    1.定义变量let

    let定义的变量不能像val定义的变量那样声明提前,也不允许重复声明,let变量作用域是块级作用域{}。

    2.常量const

    一次定义,后面不能修改。

    如果  const  a;

    那么 a 是 undefined。后面也不能再赋值。

    如果  const obj = {};

    obj.name = "xiaohua";

    则可以添加上属性。 因为 不可改变的原始变量,可以改变的引用对象。

    3.字符串拼接

    内容写在``中间,变量直接用 ${变量名}  ,不需要用+拼接直接写在变量的地方就可以。并且可以空格换行。

    如: 

    var uname = "xiaohua";
    var str = "";
    str += `<ul> 
                <li>${uname}</li> 
                <li>nan</li> 
                <li>18</li> 
                <li>xxx@xxx.com</li> 
            </ul>`

    4.超引用

    可用于数组的复制:

    var arr = [1,2,3,4,5];

    var  arr2 = [...arr];

    arr2.push(6);

    则 arr 为 [1,2,3,4,5], arr2 为 [1,2,3,4,5,6]

    可用于参数:

    function fun(...args){

           console.log(args);      // [1,2,3,4,5,6]

      args.push(7);

      console.log(args);    // [1,2,3,4,5,6,7]

    }

    fun(1,2,3,4,5,6)

    5.解构赋值

    数组的格式:

    var  [a,b,c] = [40,20,30];    // 一一对应

    var  [d,[e,f],g]  =  [10,[20,30],40]

    json的格式:

    var {a,b,c} = {a:10,c:30,b:20}  // 不用一一对应可以换位置赋值

    也可以混用:

    [{a,b},c,[d,e],f] = [{b : "jack",a : "100"},5,[10,20],30];

    6.for  of 循环 

    语法和 for  in 语法相同 但 

    for(var i in arr)中 i 是索引,而for  of  中的i 直接是值

    注意:for of 不能遍历 obj

    7.Map对象

    map就是用来存东西的,跟obj类似

    var   map =  new  Map();

    如果像普通对象那样添加属性

    map.abc = "xiaohua";

    不会添加到map的 entries,依然是Map(0){}

    //设置值  增 改

    map.set("a","red");

    map.set("b","green");

    //查

    map.get("a");  

    //删除

    map.delete("a");

    注意:map没有length属性。遍历用for of。可单独获得 key 或者 value

    for(var index of map.entries()){ //全写 或者缩写:for(var index of map){}
    console.log(index);
    }

    // 只想循环key
    for(var key of map.keys()){
    console.log(key);
    }


    // 只想循环value
    for(var value of map.values()){
    console.log(value);
    }

    8.箭头函数

    function fun(){console.log("xiaohua");} 

    改写成箭头函数就是  () => {}

    如果有参数写在括号里

    注意:1.不能用this,箭头函数中的this指向window  2.不能使用arguments

    9.原型

    写原型链后 __proto__ 直接指向最前的一个。比如 儿子,父亲,爷爷三个,儿子的 __proto__直接指向爷爷而不是父亲。

    因为,在ES6以前是没有类的概念,构造函数即是构造,也是类。别的语言一般出对象 需要有类和构造函数

    10.类 class  继承 extends

    构建一个Person类:

    class Person{

      constructor(name,age){

        this.name = name;

        this.age = age;

      }

      showName(){return this.name}

      showAge(){return this.age}

    }

    出一个person对象:

    var person = new Person("xiaohua",18);

    让Student类继承Person类:

    class Student extends Person{

      constructor(name, age, pid){

        super(name,age);

        this.pid = pid;

      }

      showPid(){return this.pid}

    }

    出一个继承了Person属性和方法的Student对象

    var Student = new Studnet("xiaoming",50,"0001");

  • 相关阅读:
    2015年中国500强企业
    汇编语言
    oracle数据库学习路线
    OI生涯回忆录
    NOIP 2020游记
    CF223B Two Strings 题解
    CSP-S 2020游记
    CSP/NOIP 注意事项(2020)
    Luogu P6583 回首过去 题解
    Luogu P2210 Haywire 题解
  • 原文地址:https://www.cnblogs.com/ddjps/p/10482400.html
Copyright © 2011-2022 走看看