字符串拼接
-
es6使用
包裹字符串，插入变量数据${变量名}// 字符模板的写法 var ss= '苹果'; var str = `我要吃${ss}`; console.log(str);
解构赋值
-
合并赋值，数组的解构需并一一对应
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] 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 -
对象的解构，无序，变量必须与属性同名，才能取到正确的值
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
数组复制
-
传统数组的浅拷贝，引用之间的拷贝，没有实现数组的真正复制
var arr1 = [1, 2, 3]; var arr2 = arr1; arr2.push(4); console.log(arr1, arr2); //[1, 2, 3, 4] [1, 2, 3, 4] -
ES5数组深拷贝
const a1 = [1, 2]; const a2 = a1.concat(); a2[0] = 2; a1 // [1, 2] -
ES6实现的数组的深拷贝方法
var arr1 = [1,2,3]; var arr2 = Array.from(arr1); // 数组尾部添加 arr2.push(100); console.log(arr1,arr2); // [1, 2, 3] [1, 2, 3, 100] -
ES6中扩展运算符进行数组深拷贝
const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法二 const [...a2] = a1;
箭头函数
function(){ } 变成 ()=>{ }
不能用作构造函数，不能使用new
-
箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply()
var obj = { a: 10, b: function(){ console.log(this.a); //输出10 }, c: function() { return ()=>{ console.log(this.a); //输出10，捕获了上面obj的this作为自己的this //c方法里面return的那个箭头函数捕获的是c:function(){} //这个环境的this，而这个环境的this是obj } } } obj.b(); obj.c()(); var obj = { a: 10, b: function() { console.log(this.a); //10 console.log(this); //obj{...} }, c: () => { console.log(this.a); //undefined console.log(this); //window //c箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window } } obj.b(); obj.c();
模块化 export 和 import
import 导入模块、export 导出模块
-
可以直接在任何变量或者函数前面加上一个 export 关键字，就可以将它导出
// 书写方式一 //ex.js let a = 1; let b = 2; let c = 3; export { a, b, c as cc // as是别名，使用的时候只能用别名，特别注意下 }; //im.js // 导入模块的方式 import { a, b, cc // cc是导出的，as别名 } from './ex.js'; console.log(a); // 1 console.log(b); // 2 console.log(cc); // 3 //书写方式二 // default方式的优点，import无需知道变量名，就可以直接使用 // 每个模块只允许一个默认出口 //mod.js var name = 'cat'; var age = '8'; export default { name, age, default(){ console.log('welcome to china!'); }, getName(){ return 'dog'; }, getAge(){ return 2; } }; //index.js // 导入模块的方式 import mainAttr from './mod.js'; // 直接调用 console.log(`我的英文名是:${mainAttr.name}我的年龄是 ${mainAttr.age}`); mainAttr.default(); // welcome to china! console.log(mainAttr.getName()); // dog console.log(mainAttr.getAge()); // 2
类和继承（class和extends）
-
传统面向对象的写法
function Person(name,age){ // 类、构造函数 this.name = name; this.age = age; } Person.prototype.showName = function(){ return this.name; }; Person.prototype.showAge = function(){ return this.age; }; var p1 = new Person('cat',28); var p2 = new Person('dog',101); console.log(p1.showName()); // cat console.log(p2.showAge()); // 101 -
ES6面向对象写法
class Person{ // 构造器 constructor(name,age){ this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; } } var p1 = new Person('A',18); var p2 = new Person('B',20); console.log(p1.name); // A console.log(p1.showName()); // A console.log(p2.showAge()); // 20 -
ES6面向对象给class赋值默认值
class Person{ // 构造器 constructor(name='default',age=0){ this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; } } var person = new Person(); console.log(person .name); // 构造器里面给的默认值 default console.log(person .age); // 构造器里面给的默认值 0 -
ES6面向对象实现类继承
class Person{ // 构造器 constructor(name,age){ this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; } } class Worker extends Person{ constructor(name,age,job='eat'){ // 继承超父类的属性 super(name,age); this.job = job; } showJob(){ return this.job; } } var p1 = new Person('cat',1); var w1 = new Person('dog',3); var w2 = new Worker('小红',9); console.log(w1.showName()); // dog console.log(w2.showJob()); // 默认给的值 ‘eat’
