ES6学习笔记
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函数是一个对象,但是箭头函数不是一个对象,实际上箭头函数就是个语法糖