【ES6】(一）const和let、模板字符串、函数之默认值、剩余参数、扩展运算符、箭头函数

ES6简介

有关内容可以查阅文档 阮一峰ES6

一、const和let

1、let、const没有变量提升

这么写会报错

console.log(a);
let a = 10;

var中就不会报错，因为var存在变量提升

console.log(a);
var a = 10;

2、let、const是一个块作用域

这里定义的b只作用于if语句中，外面无法使用和获取

if(1===1){
    let b = 10;
}
console.log(b);

3、let、const不能重复声明

会提示a已经被声明

let a = 1；
let a = 3;
console.log(a);

4、const 声明常量

一旦被声明，无法修改，不可以直接修改常量对象，但可以修改常量对象内部的属性

const person = {
	name:'zh'
}
person.name = 'alex'；
console.log(person);

5、优点

用var时，变量i只用来控制循环，但是循环结束后，它并没有消失，用于变量提升，泄露成了全局变量。

var arr = []
for(var i = 0; i < 10; i++){
    arr[i] = function(){
        return i;
    }
}
console.log(arr[5]());

使用let声明i可以避免此类问题

var arr = [];
for(let i = 0; i < 10; i++){
    arr[i] = function () {
        return i;
    }
}

6、建议

在默认情况下使用const，只有在你知道变量值需要被修改的情况下使用let

二、模板字符串

传统写法是这样的：

<div class="box">
        <ul>
            <li>
                <p id="zh">zh</p>
            </li>
        </ul>
    </div>

往这个div里加内容

const oBox = document.querySelector('.box');
// 模板字符串
let id = zh,name = 'zh';
let htmlTel = "<ul><li><p>id:" + id + "</p><p>name:" + name + "</p></li></ul>";
oBox.innerHTML = htmlTel;

传统写法写起来相当麻烦，但用ES6来写的话：用反引号``包起来，插入变量用${变量名}替换

<div class="box">
        
</div>
<script>
   const oBox = document.querySelector('.box');
   let id = 'z', 
       name = 'zh';
   let htmlStr= `<ul>
            <li>
                <p id=${id}>${name}</p>
            </li>
        </ul>`;
   oBox.innerHTML = htmlStr;
</script>

三、函数之默认值、剩余参数、扩展运算符

1、函数的默认值

如果要写一个求个函数，在以前是这么写：

function add(a, b) {
            a = a || 10;
            b = b || 20;
            return a + b;
        }
        console.log(add());

在有了ES6之后可以这么写：

 function add(a = 10, b = 20) {
            return a + b;
        }
        console.log(add());

默认的表达式也可以是一个函数

function add(a, b = getVal(5)) {
     return a + b;
}
function getVal(val) {
     return val + 5;
        }
console.log(add(10));

2、剩余参数

由三个点…和一个紧跟着具名参数指定 …keys

 function pick(obj, ...keys) {
      let result = Object.create(null);
      for (let i = 0; i < keys.length; i++) {
          result[keys[i]] = obj[keys[i]];
      }
      return result;
}

let book = {
    title: '我爱学习',
    author: 'zh',
    age: '22'
}
let bookData = pick(book, 'title', 'author', 'age')

解决了arguments的问题，arguments返回的是伪数组，…keys返回的是一个真实的数组

3、扩展运算符

将一个数组分割，并将各个项作为分离的参数传给函数

假设有一个数组，要取数组中的最大值

const arr = [10,20,30,40,50,100,40,60];

在以前的方法中是这样的：

console.log(Math.max.apply(null,arr));

在ES6中拓展运算符更方便

console.log(Math.max(...arr));

四、箭头函数

1、使用=>来定义 function( ){ } 等于 ( )=>{ }

//以前的写法
let add function (a,b){
	return a + b;
}
//现在的写法
let add = (a, b) => {
	return a + b;
}
console.log(add(10, 20));

假如只有一个返回值，可以直接写成：

let add = (a, b) => val;

如果没有参数也要保留括号

let fn = () => 'hello world' + 123;
console.log(fn());

返回对象或者数组要加小括号（）

let getObj = id => ({ id: id, name: 'zh' });
console.log(getObj(z)); // id: z, name: 'zh'

2、箭头函数this指向和注意事项

（1）this指向

箭头函数没有this指向，箭头函数内部this值只能通过查找作用域链来确定
看this指向谁就看父级是谁，如果有函数包裹，就是指向函数，如果没有，就是指向window

例如：我定义了一个book函数，此函数中的this就是指向函数的调用者，也就是book对象，所以输出了“我爱学习”

let book = {
    title: '我爱学习',
    author: 'zh',
    getTitle: function (){
        console.log(this.title);
    }
}
book.getTitle(); // 我爱学习

当换成箭头函数后，this指向window ，输出的是undefined

let book = {
    title: '我爱学习',
    author: 'zh',
    getTitle: ()=>{
        console.log(this.title);
    }
}
book.getTitle(); //undefined

注：一旦使用箭头函数，当前就不存在作用域链

（2）注意事项

1、使用箭头函数，函数内部没有arguments

当调用函数查看arguments的时候会报错，因为箭头函数没有作用域链，既不存在arguments

let getVal = (a, b) => {
    console.log(arguments);
    return a + b;
}
console.log(getVal(1, 8));

2、箭头函数不能用来构造函数，因为function函数是一个对象，但是箭头函数不是一个对象，实际上箭头函数就是个语法糖