zoukankan      html  css  js  c++  java
  • ES6基本语法入门

    一、用let代替var声明变量

        ES5中,我们可以在代码中任意位置声明变量,甚至可以重写已经声明的变量,ES6引入了一个let关键字,它是新的var。

    let language = 'javascript';
    let language = 'zj'; //此处会报错
    console.log(language);


    因为同一作用域中let已经声明过了,所以再次声明会报错

    二、常量

    ES6还引入了const关键字,和let用法一样,唯一的区别就是,const变量是只读的

    三、模板字符串拼接

    用反引号拼接字符串

    let language = 'javascript';
    console.log(language);
    
    let lan = `此处写字符串 ${language}`;
    console.log(lan) //此处写字符串 javascript


    只要把变量写在${}里面就好了;模板字符串也可以识别空格,可可以用于多行的字符串,再也不用写 了。

    四、箭头函数

    let circle = (x) => {
    const PI = 3.14;
    let area = PI * r * r;
    return area;
    }


    可以省略掉关键字function,如果函数只有一条语句,可以连关键字都省略掉

    let circle2 = (x) => 3.14 * r * r;


    五、函数参数的默认值

    let sum = (x = 1, y = 2, z = 3) => x + y + z;
    console.log(sum());


    可以声明函数参数的默认值

    六、声明展开和剩余参数

    ES6展开操作符 ... 

    let params = [1,2,3];
    console.log(...params); //1 2 3
    
    let pro = {
    one:0,
    two:1,
    three:2,
    };
    console.log({...pro}); //{ one: 0, two: 1, three: 2 }


    七、数组解构

       

     var [a, b] = ['x', 'y'];

    以上代码和下面的代码效果是一样的

    a = 'x';

    b = 'y';

    数组解构也可以进行值的互换

    [x, y] = [y, x];

    八、使用面向对象biancheng

    //ES5语法
    function Book (title, page, isbn) {
    this.title = title;
    this.page = page;
    this.isbn = isbn;
    }
    Book.prototype.printTitle = function () {
    console.log(this.title);
    };
    //ES6语法
    class Desk {
    constructor (title, pages, isbn){
    this.title = title;
    this.page = page;
    this.isbn = isbn;
    }
    printIsbn () {
    console.log(this.isbn);
    }
    }

    ES6只需要使用class关键字,声明一个有constructor函数和诸如printIsbn等其他函数的类;

    我们可以用extends扩展一个类并继承它的行为

    //ES6语法
    class ITDesk extends Desk {
    constructor (title, pages, isbn){
    this.title = title;
    this.page = page;
    this.isbn = isbn;
    }
    printIsbn () {
    console.log(this.isbn);
    }
    
    }

    更多es6细节请看: http://es6.ruanyifeng.com/#docs/array

  • 相关阅读:
    简单所以不要忽视,关于 和 程序员应了解的实际应用
    即使用ADO.NET,也要轻量级动态生成更新SQL,比Ormlite性能更高
    即使用ADO.NET,也要轻量级实体映射,比Dapper和Ormlite均快
    如何在前端实现语义缩放(第一步)
    react教程 — 性能优化
    react教程 — 组件
    react教程 — redux
    create-react-app 创建项目 及 配置
    CSS 预处理器
    react 和 vue 对比
  • 原文地址:https://www.cnblogs.com/plBlog/p/11431429.html
Copyright © 2011-2022 走看看