从零开始学 Web 之 ES6（三）ES6基础语法一

时间 2019-11-17

标签开始 web es6 基础语法栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！html

1、let

做用：与var相似, 用于声明一个变量。前端

let和var的区别：java

在块做用域内有效
不能重复声明
不会预处理, 不存在提高

<script type="text/javascript">
    console.log(res); //不会预处理, 不存在提高，报错

    // 不能重复声明
    let res = 10;
    let res = 10; // 报错

  </script>

应用：循环遍历加监听git

咱们先开看一个例子：github

<body>

  <button>测试1</button>
  <button>测试2</button>
  <button>测试3</button>

  <script type="text/javascript">
    let btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        alert(i);
      }
    }
  </script>
</body>

咱们分别点击按钮的时候，分别打印多少？数组

结果：打印的都是2。由于回调函数的写法会进行覆盖操做。如何解决？微信

方法一：使用闭包。闭包

for (var i = 0; i < btns.length; i++) {
   (function(){
      btns[i].onclick = function () {
        alert(i);
      }
   })(i);  
}

这种方式至关于，每一个回调函数有个本身的区间，各个区间互不干扰。而 let 正好有这个特性。函数

方法二：将 for循环的 var改成let便可。

2、const

做用：定义一个常量。

特色：不能修改，其它特色同let。

const uName = 'Daotin';

3、变量的解构赋值

理解：从对象或数组中提取数据, 并赋值给变量(多个)。

一、对象的解构赋值

以前咱们要获取一个对象的属性，会定义变量而后接收对象的属性值。

let obj = {name : 'kobe', age : 39};
let name = obj.name;
let age = obj.age;
console.log(name, age);

对象的解构赋值能够这样作：

let {name, age} = obj;
console.log(name, age);

注意：
一、对象的解构赋值必须使用大括号 {}

二、大括号里面的变量名必须和obj里面的属性名相同

三、能够只定义一部分变量接收一部分的obj属性，不须要所有接收。

二、数组的解构赋值

数组没有对象的数组名，可是有下标可使用。因此这里的变量名能够随便起。

let arr = ['abc', 23, true];
let [a, b, c] = arr;
console.log(a, b, c);

注意：

一、数组的解构赋值必须使用中括号 []

若是只想取其中的某几个值，那么变量可使用逗号隔开。

let [,,a,,] = arr;

若是定义的变量个数比数组的个数多，多出来的变量的值为 undefined。

4、模板字符串

做用：简化字符串的拼接。

注意：

一、模板字符串必须用 ``` ` 包含；

二、变化的部分使用${xxx}定义

let obj = {
  name: 'anverson',
  age: 41
};
// 咱们以前拼接字符串用的是+
console.log('我叫:' + obj.name + ', 个人年龄是：' + obj.age);
// 使用模板字符串的方式
console.log(`我叫:${obj.name}, 个人年龄是：${obj.age}`);

5、对象的简化写法

若是有变量和对象的属性名称相同，以前的写法是赋值操做：

let a = 1;
let b = 2;

let Obj = {
  a: a,
  b: b,
};

如今，若是变量和对象的属性名称相同，能够简写以下：

let a = 1;
let b = 2;

let Obj = {
  a,
  b,
};

对于对象的属性，若是是个函数的话，也能够简写：

以前的写法为：

let Obj = {
  foo: function(){
    //...
  }
};

如今的写法为：（去掉冒号和function）

let Obj = {
  foo(){
    //...
  }
};

6、箭头函数

做用：箭头函数的做用主要是定义匿名函数。

有下面几种状况的匿名函数均可以使用箭头函数：

let foo = function () {};
// 转换成箭头函数
let foo = () => {};
//------------------------------


let Obj = {
  foo: function () {  }
}
// 转换成箭头函数
let Obj = {
  foo: () => {  }
}

基本语法（参数）：

一、匿名函数没有参数：() 不能省略，占位做用。let foo = () => {};

二、只有一个参数：() 能够省略，也能够不省略。let foo = a => {};

三、多个参数，() 不能省略。let foo = (a,b) => {};

基本语法（函数体）：

一、函数体只有一条语句：能够省略{}，而且默认返回结果（不须要 return）。

let foo = (x, y) => x + y;
console.log(foo(1, 2));

二、函数体若是有多个语句, 须要用{}包围，如有须要返回的内容，须要添加return。

let foo = (x, y) => {
      console.log(x, y);
      return x + y;
    };
    console.log(foo(1, 2));

箭头函数的特色：

一、简介

二、箭头函数没有本身的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this。（意思：箭头函数的外层的是否有函数，若是有，箭头函数的this就是外层函数的this，若是没有，则为 window）

<script type="text/javascript">
    let foo = () => {
      console.log(this);
    };
    foo(); // window 对象

    let Obj1 = {
      bar() {
        let foo = () => {
          console.log(this);
        };
        foo();
      }
    };
    Obj1.bar();  // Obj1 对象，箭头函数外层有函数bar，bar里面的this是Obj1.

    let Obj2 = {
      bar: () => {
        let foo = () => {
          console.log(this);
        };
        foo();
      }
    };
    Obj2.bar(); // window 对象，箭头函数外层有函数bar，bar函数也是箭头函数，bar的外层没有函数，因此bar里面的this是window，因此foo里面的this也是window。
  </script>

7、三点（可变参数）运算符

做用：

一、用来取代 arguments 但比 arguments 灵活,

arguments 是个伪数组，可是三点运算符是真数组，可使用 forEach 等方法。

二、三点（可变参数）运算符只能是最后部分形参参数。 可是前面是能够有参数来占位的。

三、扩展运算符

let arr = [1, 6];
    let arr1 = [2, 3, 4, 5];

    arr = [1, ...arr1, 6];
    console.log(arr); // [1,2,3,4,5,6]
    console.log(...arr); // 1 2 3 4 5 6

语法：...数组名 ：表示遍历数组的全部元素。

8、形参默认值

做用：当不传入参数的时候默认使用形参里的默认值。

<script type="text/javascript">
        //定义一个点的坐标
        function Point(x = 12, y = 12) { // 形参的默认值
            this.x = x;
            this.y = y;
        }

        let p = new Point();
        console.log(p);

        let point = new Point(25, 36);
        console.log(point);
    </script>