ECMAScript6 特性

ECMAScript6 特性文章封面

ES6 简介:

    ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,于 2015年06月正式发布。


ECMAScript与JavaScript之间的关系:

ECMAScript:

    The specification defined in ECMA-262 中定义的标准,是用于创建通用目的脚本语言的。然而ECMA-262是标准的名称,它代表了脚本语言规范ECMAScript

  

    ECMAScript提供脚本语言必须遵守的规则、细节和准则,这些才是其被视为兼容ECMAScript的判断标准。

JavaScript:

    一种通用目的的脚本语言,遵循 ECMAScript 规范。通过阅读 ECMAScript 规范,你将学会如何创建脚本语言。通过阅读 JavaScript 文档,你将学习如何使用脚本语言。

之间的关系总结:

    前者是后者的语法规格,后者是前者的一种实现 。



ES6新特性:

let、const:

    相同点:定义的变量不会变量提升,且都为块作用域。

    不同点:const定义的变量不能被修改。

    在ES6之前,是并没有{}块级作用域的概念,只有(函数作用域、全局作用域、eval作用域)。


export、import(导入、导出):

export 导出模块:

// javascript code-model
// 导出默认
export default {};

// 部分导出
export class App extends Component {};

import 导入模块:

// javascript code-model
// 全部导入
import exaple from './example'

// 将整个模块当做单一模块导入
import * as example from './example.js'

// 引入模块中指定的部分
import { name, age } from './example'
class、super、extends(类、继承):

这里就直接找一个网上包含class、super、extends的例子了。。。

// javascript code-model
// ES5
var Shape = function(id, x, y) {
  this.id = id,
  this.move(x, y);
};
Shape.prototype.move = function(x, y) {
  this.x = x;
  this.y = y;
};

var Rectangle = function id(ix, x, y, width, height) {
  Shape.call(this, id, x, y);
  this.width = width;
  this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var Circle = function(id, x, y, radius) {
  Shape.call(this, id, x, y);
  this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

// ES6
class Shape {
  constructor(id, x, y) {
    this.id = id this.move(x, y);
  }
  move(x, y) {
    this.x = x this.y = y;
  }
}

class Rectangle extends Shape {
  constructor(id, x, y, width, height) {
    super(id, x, y) this.width = width this.height = height;
  }
}

class Circle extends Shape {
  constructor(id, x, y, radius) {
    super(id, x, y) this.radius = radius;
  }
}
arrow functions(箭头函数):
// javascript code-model
// 代替function
let code = (val1, val2) => {
return val1 + val2;
};

// 上面只有一行表达式也可以直接简化为
let code = (val1, val2) => val1 + val2;

// 在其他地方使用
let arr2 = [1, 2, 3];
let newArr2 = arr2.map(x => {
  return x + 1;
});

// 会向上继承this
let names = 'slmBlog';
let code = {
names: 'slm',
getName: val => {
return this.names;
}
};
code.getName(); // slmBlog
code.getName = function () {
return this.names;
};
code.getName(); // slm
template string(字符串模板):

在ES5中字符串拼接一直是一个痛点,如果在多个字符与变量拼接的情况下,可读性极差且及其丑陋...尤其是换行拼接!

// javascript code-model
const name = 'slm';
// ES5
console.log(name + 'Blog');
// ES6
console.log(`${name}Blog`);
destructuring (解构):
// javascript code-model
let web = {
  name: 'slmBlog',
  age: 3,
  color: ['white', 'blue']
};
// ES5
var myName = people1.name;
var myAge = people1.age;
var mainColor = people1.color[0];
console.log(myName + '----' + myAge + '----' + mainColor); // slmBlog----3----white

// ES6
let { name, age } = web;
let [mainColor, affColor] = web.color;
console.log(`${name}----${age}----${mainColor}`); // slmBlog----3----white
default 函数默认参数:
// javascript code-model
// ES5
function bate (val1, val2) {
val1 = val1 || 'slm';
val2 = val2 || 'Blog';
return val1 + val2;
}
// ES6
function bate (val1 = 'slm', val2 = 'Blog') {
// codes ...
return val1 + val2;
}
 rest arguments (rest参数):
// javascript code-model
function fool (val1, val2, ...rest) {
return rest.length * 2;
} console.log(fool(1, 2, 3, 4, 5)); // 6
Spread Operator(展开运算符):
// javascript code-model
const arr = [5, 6, 7, 8, 9];
console.log([1, 2, 3, 4, ...arr]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

第二种用法(取其中某值):

// javascript code-model
const arr = [5, 6, 7, 8, 9];
let [first, val, ...rset] = arr;
console.log(rset); //
对象的简化:
// javascript code-model
// ES5
function fool (name, age) {
  return {
    name: name,
    age: age
  };
}

// ES6
function fool (name, age) {
  return {
    name,
    age
  };
}

function的省略:

// javascript code-model
var obj = {
  name: 'slmBlog',
  getName: function () {
    console.log(this.name);
  }
};

// ES6
let obj2 = {
  name: 'slmBlog',
  getName () {
    console.log(this.name);
  }
};
Promise:
// javascript code-model
// 发起异步请求
fetch('/api/todos')
.then(res => res.json())
.then(data => ({
   data
}))
.catch(err => ({
   this.$router.push({ name: 'error', query: err });
}));

Promise 本身是同步的,但内部代码是异步执行。 



    留言 (2)
  • 用户头像 史莱姆

    如有缺失欢迎补充加載中...

  • 用户头像 haiwendadizi

    666

    音乐封面 点击展开工具栏