ES6初学习

时间：2024-03-28 08:07:19

建议下一个chrome的插件Scratch.js[https://chrome.google.com/webstore/detail/alploljligeomonipppgaahpkenfnfkn]，可以直接运行ES6～

变量声明

  • let ,let声明的变量拥有 块级作用域
  • const 常量,重新赋值会报错
{

  let a= 2;

  console.log(a) \\2

}

 console.log(a)  \\报错
    let x = 3;

    function func(randomize) {

        if (randomize) {

            let x = Math.random();

            return x;

        }

        return x;

    }

    console.log(func(0)); // 3

    console.log(func(1)); //随机

箭头函数

let arr = [1, 2, 3];

let aqu = arr.map(x => x * x);  //aqu=[1,4,9]

字符串

  • 单字符串模版形势
function printCoord(x, y) {

    console.log(`(${x}, ${y})`);

}

//==>

function printCoord(x, y) {

    console.log("(" + x + ", " + y + ")");

}
  • 字符串 -- 多行字符
const HTML5_SKELETON = `

        <!doctype html>

        <html>

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

        </body>

        </html>`;

多个返回值，可以同时定义几个变量 超方便

let [, year, month, day] =

        /^(\d{4})-(\d{2})-(\d{2})$/

        .exec('2016-12-31');

//==>

var year = /^(\d{4})-(\d{2})-(\d{2})$/

        .exec('2016-12-31')[1];

循环 for-of

let arr = ['a', 'b', 'c'];

for(let val of arr){

  console.log(val)

}

// 获取index，使用arr.entries() ，先mark 不懂

let arr = ['a', 'b', 'c'];

for(let [i,val] of arr.entries()){

  console.log(`i is ${i}, val is ${val}`)

}

给参数加默认值

function foo(x=1,y=2){

    console.log(x+y)

}

“The spread operator (...)” 跟apply有关

let arr1 = ['a', 'b'];

let arr2 = ['c', 'd'];

arr1.push(...arr2);

//==>

arr1.push.apply(arr1, arr2)
  • arguments
function logAllArguments(...args) {

    for (let arg of args) {

        console.log(arg);

    }

}

//获取第一个之后的参数~

function logAllArguments2(pattern, ...args) {

    console.log(args);

}

对象的写法

let obj = {

  name : 'zhang',

  sayName() {

    console.log(this.name)

  }

};

类

  • 关键字class,
  • constructor定义了该类的构造器函数，
  • 类里面与constructor平行的函数都是在绑定到原型上的


class Person {

    constructor(name) {

        this.name = name;

    }

    describe() {

        return 'Person called '+this.name;

    }

}

// 实例

let student = new Person('xiaozhang');

student.describe();   //Person called xiaozhang"

//==>

function Person(name) {

    this.name = name;

}

Person.prototype.describe = function () {

    return 'Person called '+this.name;

};

继承

  • 关键字 extends
class Employee extends Person {

    constructor(name, title) {

        super(name);

        this.title = title;

    }

    describe() {

        return super.describe() + ' (' + this.title + ')';

    }

}

common.js 文件导入

与es5写法有小小的差别

//------ lib.js ------

export const sqrt = Math.sqrt;

export function square(x) {

    return x * x;

}

export function diag(x, y) {

    return sqrt(square(x) + square(y));

}

//------ main1.js ------

import { square, diag } from 'lib';

console.log(square(11)); // 121

console.log(diag(4, 3)); // 5

//------ main2.js ------

import * as lib from 'lib'; // (A)

console.log(lib.square(11)); // 121

console.log(lib.diag(4, 3)); // 5

参考网址1

相关文章