ES6(1)

作者: 寒梁沐月 | 来源:发表于2017-04-30 10:42 被阅读8次
  • let & const
可以通过 let 和 const 来声明块级作用于的变量
(通过 var 声明的是函数级作用域)。
而且 const 用来定义常量,即无法被更改值的变量。
  • 箭头操作符
用箭头语法来写函数了,很像 lambda 表达式,
并且arrow function 会自动绑定this为当前上下文。 
不支持arguments
var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
    console.log(v);
});
//ES6
array.forEach(v = > console.log(v));
[1,2,3,4].map(d=>d*d); //单行
//也可以写多行
[1,2,3,4].map(d=>{
    console.log(this);
    return d*d
});
  • class类的支持
现在原生支持 class 关键字来声明一个类了,虽然只是一个语法糖,最终还是基于原型继承实现的。
但是毕竟可以很方便的实现创建和继承一个类了
class People {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(sayName);
    }
}
  • 增强的对象字面量
    对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。具体表现在:
  • 可以在对象字面量里面定义原型
  • 定义方法可以不用function关键字
  • 直接调用父类方法

这样一来,对象字面量与前面提到的类概念更加吻合,在编写面向对象的JavaScript时更加轻松方便了

var people = {
      name: "Tom",
      sayName() {    //更方便定义函数
        console.log(this.name);
      },
      [ 'prop_' + (() => 42)() ]: 42    //甚至可以计算属性名
}
  • 字符串模板
    字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。
//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
  • 解构
    自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。
var [x,y]=getVal(),//函数返回值的解构
    [name,,age]=['wayou','male','secrect'];//数组解构
function getVal() {
    return [ 1, 2 ];
}
console.log('x:'+x+', y:'+y);//输出:x:1, y:2 
console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect 
  • 参数默认值,不定参数,拓展参数
    • 默认参数值
      现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name){
    //传统的指定默认参数的方式
    var name=name||'dude';
    console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
    console.log(`Hello ${name}`);
}
sayHello();//输出:Hello dude
sayHello('Wayou');//输出:Hello Wayou
sayHello2();//输出:Hello dude
sayHello2('Wayou');//输出:Hello Wayou
  • 不定参数
    不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中,…x代表了所有传入add函数的参数。
//将所有参数相加的函数
function add(...x){
    return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出:6
console.log(add(1,2,3,4,5));//输出:15
  • 拓展参数
    拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock 
//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock 
  • for of 值遍历
    我们都知道for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。
var someArray = [ "a", "b", "c" ];
for (v of someArray) {
    console.log(v);//输出 a,b,c
}
  • modules
    对模块的语法级支持。
export function sum(x, y) {
  return x + y;
}
import sum from "math"
sum(1,2);

相关文章

网友评论

      本文标题:ES6(1)

      本文链接:https://www.haomeiwen.com/subject/cjhmzttx.html