入门ES6基础内容

在2015年2月20号 ECMAScript 第六版就正式推出了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受。


入门ES6基础内容_第1张图片

代码转换

能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaScript 引擎中。
我们这里目前在使用 Babel,主要是因为它对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的在线交互式编程环境。

分享一种简单的方法

a.
首先通过npm下载 (或者到官网手动下载)

 $ npm install -g traceur

b.
引入

  

c.

 
 

当然还有更多的方法,欢迎互相学习!

开启ES6的入门学习

let

let是ES6中新增关键字。
它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码块内有效。(简单理解,let有有作用域)

 if(true){
        var a = 1;
       let b = 2;
    }
    document.write(a);
    document.write(b);  // 报错:ReferenceError: b is not defined
    for循环的计数器,就很合适使用let命令。
            var a = [];
            for (let i = 0; i < 10; i++) {
              a[i] = function () {
                document.write(i);
              };
            }

const

1.声明的是常量,一旦声明,值将是不可变的。

       const PI = 3.1415;
     console.log(PI);//3.1415
     PI = 3;
     console.log(PI);//3.1415

2.const 也具有块级作用域

if (true) {
  const max = 5;
}
document.write(max);  // ReferenceError 常量MAX在此处不可得

3.const不可以重复声明

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

repeat

repeat表示重复几次

  var str = "x";
    console.log(str.repeat(3));// "xxx"
    var str1 = "hello";
    str1.repeat(2) // "hellohello"

模板字符串

``两个点(一般在左上角1前面)

        let first = '我叫张三';
        let last = '我是代码搬砖工';
        document.write(first+'--'+last);//拼接字符串方法
        document.write(`${first}---${last}`);//模板方法

ES6的默认参数

括号之间可以写默认值,若无参数,则是默认值;
1.运用传统的默认参数

        function sayHello(name){
            //传统的指定默认参数的方式
            var name = name|| 'grape';
            document.write('Hello '+name);
        }
        sayHello();  //输出:Hello grape
        sayHello('我是代码搬砖工');  //输出:Hello我是代码搬砖工

2.运用ES6的默认参数

        function sayHello2(name='grape'){
            document.write(`Hello ${name}`);  /*注意引号*/
        }
        sayHello2();  //输出:Hellogrape
        sayHello2('我是代码搬砖工');  //输出:Hello我是代码搬砖工

三个点运算符 ...

括号之间可以写默认值,若无参数,则是默认值;

  1. “...” 能很好的将数组内的数据,与变量一一匹配(当然可以是更多的数据)
        var people=['张三','李四','王五'];
            //sayHello函数本来接收三个单独的参数people1,people2和people3
            function sayHello(people1,people2,people3){
                document.write(`Hello ${people1},${people2},${people3}`);
            }
            //但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
            sayHello(...people);   //输出:Hello 张三,李四,王五

2.拼接数组

              var arr1 = ['a', 'b'];
            var arr2 = ['c','b'];
            var arr3 = ['d', 'e'];
// ES5的合并数组
            arr1.concat(arr2, arr3);
            // [ 'a', 'b', 'c', 'd', 'e' ]
// // ES6的合并数组
                console.log([...arr1, ...arr2, ...arr3]);
             // [ 'a', 'b', 'c', 'd', 'e' ]

箭头函数=>

  1. 箭头函数是使用=>语法的函数简写形式。这在语法上与 C#、Java 8 和 CoffeeScript 的相关特性非常相似。
    ES5写法
                var array = [1, 2, 3];
                // //传统写法
                array.forEach(function(v, i, a) {
                    document.write(v);
                });

ES6方法

              array.forEach(v => document.write(v));
              array.forEach((v,i, a) => document.write(v));//也可以多个参数

2.它们同时支持表达式体和语句体。与(普通的)函数所不同的是,箭头函数和其上下文中的代码共享同一个具有词法作用域的this
ES5的方法

           var person = {
          _name: "张三",
          _friends: ["Amy", "Bob", "Cinne", "Dylan", "Ellen"],
          printFriends:function(){
              var that=this;
                this._friends.forEach( function(value, index) {
            //因为this的指向不同,所以无法再下面的语句中直接使用this._friends
                document.write(`${that._name} 的好朋友  ${value}  
`) }); } } person.printFriends();

ES6的方法

          var person = {
          _name: "张三",
          _friends: ["Amy", "Bob", "Cinne", "Dylan", "Ellen"],
          printFriends:function(){
                this._friends.forEach((value,key)=>document.write(this._name+'的好朋友'+value+' 
')); //.bind(this) 表示把当前this 给绑定的方法 } } person.printFriends();

目前是比较常用的ES6,简单的分享一下自己的理解,后期会不定期更新ES6相关方面的内容。(未完待续)

你可能感兴趣的:(入门ES6基础内容)