ECMAScript 6 学习

欢迎访问新站点: https://www.yidiankuaile.com/post/es6-learning

又学习了一下 JavaScript 的 ES6 的语法，记录一下～

使用 let 声明变量

let 声明的变量尽在代码块内有效。(ES6 中新增的块级作用域)

//  Let/index.js
var ourFunction = function () {

  let x = 'this is in the outer scope';

  if (true) {
    let x = 'this is a new value';
    console.log(x);
  }
  console.log(x);
}

ourFunction();

// this is a new value
// this is in the outer scope

在 ES5 中只有全局作用域和函数作用域

// Let/es5.js
var ourFunction = function () {

  var x = 'this is in the outer scope';

  if (true) {
    var x = 'this is a new value';
    console.log(x);
  }
  console.log(x);
}

ourFunction();

// this is a new value
// this is a new value

数组展开运算符 (Spread Operator)

// SpreadOperator/index.js
var awesomerBands = ['Bayside', 'Semses Fail'];

var bands = ['silverstein', 'three days grace', ...awesomerBands];

console.log(bands)
// ["silverstein", "three days grace", "Bayside", "Semses Fail"]

var bandsFunction = function (args) {
  for (var x = 0; x < args.length; x++) {
    console.log(args[x]);
  }
}
bandsFunction(...awesomerBands)
/*
sB
a
y
s
i
d
e
*/

var a, b, rest;
[a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7, 8]

console.log(a)
console.log(b)
console.log(rest)
/*
1
2
[ 3, 4, 5, 6, 7, 8 ]
*/

var awesomerBands = ['Bayside','Semses Fail'];

var bands = ['silverstein','three days grace', awesomerBands];

console.log(bands)
// [ "silverstein", "three days grace", [ "Bayside", "Semses Fail" ] ]

对象快速创建 (Shorthand)

var genre = 'Rock';
var name = 'Bayside';
var origin = 'Queens, New York';

var band = { name, genre, origin }
console.log(band);

// { name: "Bayside", genre: "Rock", origin: "Queens, New York" }

箭头函数

// ArrowFunctions/index.js
var oldway = function () {
  console.log("hello world")
}

oldway(); // hello world

var arrowFunction = a => {
  console.log("hello world")
}

arrowFunction() // hello world

var arrowFunction2 = (arg1, arg2) => {
  console.log(arg1, arg2)
}

arrowFunction2("this is arg1", "this is arg2") // this is arg1 this is arg2

字符串模板

使用 ` ` 作为标记，变量通过 `${ }` 使用

// TemplateLiterals/index.js
var longString1 = `
this is long string
this is more long string
test testing
`;

var band = 'bayside';

var longString2 = `
this is long string
this is more long string
Band Name = ${band}
test testing
`;

var longStringFunction = (bandname, aroundSince) => {
  return `
  ${bandname} is a rock band that has been around
  since ${aroundSince + 5} years`;
}

console.log(longString1)
// this is long string
// this is more long string
// test testing

console.log(longString2)
// this is long string
// this is more long string
// Band Name = bayside
// test testing

console.log(longStringFunction(band, 10))
//   bayside is a rock band that has been around
//   since 15 years

类 (class) 的使用

// class/index.js
class Band {
  constructor(name, origin) {
    this.name = name;
    this.origin = origin;

  }
  printName() {
    console.log("name= " + this.name);
  }
  printOrigin() {
    console.log("origin = " + this.origin);
  }
}

var bayside = new Band('bayside', 'Queens,New York');

bayside.printName();     // name= bayside
bayside.printOrigin();   // origin = Queens,New York

class 继承和 super 使用

class Band {
  constructor(name, origin) {
    this.name = name;
    this.origin = origin;

  }
  printName() {
    console.log("name= " + this.name);
  }
  printOrigin() {
    console.log("origin = " + this.origin);
  }
}

class Member extends Band{
  constructor(name, origin,genre){
    super()
    this.name = name
    this.origin = origin
    this.genre = genre
  }
  printGenre(){
    console.log(this.genre)
  }
  printName(){
    console.log("this is an override")
  }
}

var bayside = new Member('bayside', 'Queens,New York',"alternative");

bayside.printName();     // this is an override
bayside.printOrigin();   // origin = Queens,New York
bayside.printGenre();   // alternative

函数默认参数 default arguments

// DefaultArguments/index.js
function test(a = 0) {
  console.log(a + 10);
}

test(10); // 20

for…of… 循环

//  ForOf-loops/index.js
var myArray = [1, 2, 3, 4, 5];

for (var x = 0; x < myArray.length; x++) {
  console.log(myArray[x])
}
/*
1
2
3
4
5
*/

for(let i  of myArray){
  console.log(i)
}

/*
1
2
3
4
5
*/

模块加载

通过 import ... from ...

使用 default 导出的引入的时候需要可以直接使用，没有使用 default 导出，导出相当于是一个对象，需要使用 {} 来引入。

// module/test.js
export default function first() {
  console.log('this is first,default');
}

export function second() {
  console.log("this is second,not default")
}

// module/index.js
import  first  from "./test"
import  {second}  from "./test"

first(); // this is first,default
second(); // "this is second,not default"

更新记录

1. 2018/6/18 20:00:27 首次发布

参考链接

发表于 2018/6/18 20:00:27，并被添加「 ecmascript 6, es6, javascript, 前端 」标签，最后修改于 2018/6/18 20:00:27

本文链接：https://lidong.me/blog/es6-learning/