目录:
- 模块化
- let和const
- 字符串模板
- 解构赋值
- 数组深拷贝
- 箭头函数
- Promise
模块化
一个模块就是一个.js文件,内部定义的所有变量和函数,外部是没有权限获取的。如果希望获取,只有采用export将函数、变量、类给暴露出去。
- 引入特定模块
// 导出
export let A=123
export function test(){
console.log('test')
}
export class Hello{
test(){
console.log('class')
}
}
// 引入
import {A,test,Hello} from './export.js'
- 引入所有模块
// 导出不变
// 引入
import * as data from './export.js'
console.log(data.A)
缺点:必须多次导出,且引入后名称须保持一致。
- export default(推荐)
// export.js
let A = 123
let test = function(){
console.log('test')
}
class Hello{
test(){
console.log('class')
}
}
export default{
A,
test,
Hello
}
//import.js
import data from './export.js'
console.log(data.A)
let和const
es6引入块级作用域概念,简单说,一对大括号
{}
内就是一个块级作用域,let和const声明的量只在其作用域内生效。
let
声明块级变量,const
声明块级常量
window.onload = function(){
var aInput = document.getElementsByTagName("input");
// 传统解决办法
for(var i=0;i<aInput.length;i++){
(function(i){
// 函数闭包自执行来解决i索引的问题
aInput[i].onclick = function(){
alert(i);
};
})(i);
}
// let变量的出现相当于给你加了一个封闭空间来极度简化了i值索引的问题
for(let i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
alert(i);
};
}
};
//对于let和const来说,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错,而以前var的时候并不会报错,只是覆盖定义
let a = 12;
let a = 13; //Identifier 'a' has already been declared
//const必须在初始化的时候同时赋初值,且不能更改
const b; //Uncaught SyntaxError: Missing initializer in const declaration
const b = 14;
b = 15; //Uncaught TypeError: Assignment to constant variable.
字符串模板
更方便地拼接字符串和变量,用反引号`将整体包裹,用${}的花括号内包裹变量。
var food = '烤鸭';
var text = `我爱吃${food},带面皮和葱还有酱的那种。`;
解构赋值
// 以前我们给变量赋值,只能直接指定值
var a = 1;
var b = 2;
var c = 3;
console.log(a,b,c); // 1 2 3
// 现在用解构赋值的写法就变得简单了,只要模式匹配上了就行了,如下
// 注意数组是有顺序的
var [a,b,c] = [11,22,33];
console.log(a,b,c); // 11 22 33
var [b,a,c] = [11,22,33];
console.log(a,b,c); // 22 11 33
// 当然解构赋值还有嵌套比较复杂的写法,如下
let [foo,[[bar],[baz]]] = [111,[[222],[333]]];
console.log(foo,bar,baz); // 111 222 333
let [head,...foot] = [1,2,3,4];
console.log(head,foot); // 1 [2,3,4]
// 如果解构不成功,变量的值就等于undefined,如下
var [bar3,foo3] = [1000];
console.log(bar3,foo3); // 1000 undefined
// 另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功
let [x,y] = [10000,20000,30000];
console.log(x,y); // 10000 20000
// 默认值可以引用解构赋值的其他变量,但该变量必须已经声明
let [a=1,b=a] = [2,3];
console.log(a,b); // 2 3
// 对象的解构也可以指定默认值
var {x,y=5} = {x:1};
console.log(x,y); // 1 5
//对象的解构赋值解构不仅可以用于数组,还可以用于对象(json)
//对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;
//而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
var {a,b} = {a:'apple',b:'banana'};
console.log(a,b); // apple banana
var {b,a} = {a:'apple',b:'banana'};
console.log(a,b); // apple banana
// 如果变量名与属性名不一致,必须写成下面这样
let obj = {first:'hello',last:'world'};
// first ---> f,那么此时f就是first,而不是undefined了,有点类似别名的概念
let {first:f,last} = obj;
console.log(f,last); // hello world
//1.也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。 真正被赋值的是后者,而不是前者
//2.v是匹配的模式,n才是变量。真正被赋值的是变量n,而不是模式v。
//注意,采用这种写法时,变量的声明和赋值是一体的
// v ---> n,那么此时n就是vue,而不是undefined了
var {v:n} = {v:'vue',r:'react'};
console.log(n); // vue
console.log(v); // Uncaught ReferenceError: v is not defined
console.log(r); // Uncaught ReferenceError: r is not defined
数组深拷贝
// 数组的浅拷贝,引用之间的拷贝,没有实现数组的真正复制
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1, arr2);
// 复制数组深拷贝,传统做法
var arr1 = [1,2,3];
var arr2 = [];
//通过for循环遍历之后将arr1数组的每一项赋值给arr2数组的每一项, 就实现了数组的深拷贝,这时候我再去操作arr2的数组的时候,arr1就不会受影响了
for(var i=0;i<arr1.length;i++){
arr2[i] = arr1[i];
}
// 数组尾部添加
arr2.push(4);
console.log(arr1,arr2);
// ES6实现的数组的深拷贝方法1
var arr1 = [1,2,3];
var arr2 = Array.from(arr1);
// 数组尾部添加
arr2.push(100);
console.log(arr1,arr2);
// ES6实现的数组的深拷贝方法2
var arr1 = [1,2,3];
// 超引用拷贝数组
var arr2 = [...arr1];
// 数组尾部添加
arr2.push(1000);
console.log(arr1,arr2);
function show(...args){
// 此时这个形式参数就是一个数组,我们可以直接push东西进来,如下
args.push(5);
console.log(args);
}
// 调用
show(1,2,3,4); // 1,2,3,4,5
箭头函数
function(){}
变为了 ()=>{}
,简少代码量、增强可读性
注意:this的指向会变化,箭头函数体中this始终指向window对象或开发框架的实例对象(如Vue实例和小程序实例),而function函数体中的this则指向调用此函数的对象。
var c=1;
var json = {
a: function() {
return this.c;
},
b: () =>{
return this.c;
},
c:2
};
console.log(json.a()) // 2
console.log(json.b()) // 1
Promise
promise内容较多,参见我的另一篇文章:
ES6-Promise
部分内容出自 ES6常用知识点学习小结