首页 > 代码库 > JavaScript ES6特性
JavaScript ES6特性
ES6 核心特性
块级作用域
let : 声明的变量存在块级作用域 不会声明提前
ES5
// ES5
// 声明提前 var x = ‘outer‘; function test(inner) { if (inner) { var x = ‘inner‘; console.log(x); } console.log(x); } test(false) //undefined test(true) // inner inner
ES6
// ES6 // 声明不提前 let x = ‘outer‘; function test(inner) { if (inner) { let x = ‘inner‘; console.log(x); } console.log(x); } test(false) // outer test(true) // inner outer
优点
// ES5 { var a = 1; } console.log(a) // ES6 { let b = 2; } console.log(b)
const : 常量 不可以修改
模板字符串
使用 ` ` 包裹 变量使用${}
// ES5 var str1 = ‘lpt‘; var str2 = ‘want to eat everything!‘; console.log(‘我想说的是:‘ + str1 + ‘ ‘ + str2) // ES6 const str3 = ‘lpt‘; const str4 = ‘want to eat everything!‘; console.log(`我想说的是:${str3} ${str4}`)
解构复制
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量
如果默认值是一个函数,那么函数只会在有需要才会去求值
function fn(num){ console.log(num); return num; } let [a = fn(1)] = [10]; // 不执行函数 let [b = fn(2)] = []; // 执行函数 a // 10 b // 2
解构赋值允许指定默认值
// ES5 var arr = [1, 2, 3, 4]; var first = arr[0]; var third = arr[2]; console.log(first, third); // 1 3 // ES6 const arr1 = [1, 2, 3, 4]; const [a, ,c=9] = arr1; console.log(a,c)
交换value
// ES5 var a = 1; var b = 2; var tmp = a; a = b; b = tmp; console.log(a, b); // 2 1 // ES6 let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b); // 2 1
解构为多个返回值
// ES6 function margin() { const left=1, right=2, top=3, bottom=4; return { left, right, top, bottom }; } const { left, bottom } = margin(); console.log(left, bottom); // 1 4
类和对象
// ES5 var Animal = (function () { function MyConstructor(name) { this.name = name; } MyConstructor.prototype.speak = function speak() { console.log(this.name + ‘ makes a noise.‘); }; return MyConstructor; })(); var animal = new Animal(‘lpt‘); animal.speak(); // lpt makes a noise.
// ES6 class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ‘ makes a noise.‘); } } const animal = new Animal(‘lpt‘); animal.speak(); // lpt makes a noise.
继承
// ES5 var Animal = (function () { function MyConstructor(name) { this.name = name; } MyConstructor.prototype.speak = function speak() { console.log(this.name + ‘ makes a noise.‘); }; return MyConstructor; })(); var Monkey = (function () { function MyConstructor(name){ Animal.call(this, name); } // prototypal inheritance MyConstructor.prototype = Object.create(Animal.prototype); MyConstructor.prototype.constructor = Animal; MyConstructor.prototype.speak = function speak() { Animal.prototype.speak.call(this); console.log(this.name + ‘ roars‘); }; return MyConstructor; })(); var monkey = new Monkey(‘Simba‘); monkey.speak(); // Simba makes a noise. // Simba roars. // ES6 class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ‘ makes a noise.‘); } } class Lion extends Animal { speak() { super.speak(); console.log(this.name + ‘ roars‘); } } const lion = new Lion(‘Simba‘); lion.speak(); // Simba makes a noise. // Simba roars.
箭头函数
箭头函数完全修复了this
的指向,this
总是指向词法作用域,也就是外层调用者obj
// ES6 var obj = { birth: 1992, getAge: function () { var b = this.birth; // 1992 var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象 console.log( fn() ); } }; obj.getAge(); // 24
For…of
// for var array = [‘a‘, ‘b‘, ‘c‘, ‘d‘]; for (var i = 0; i < array.length; i++) { var element = array[i]; console.log(element); } // forEach array.forEach(function (element) { console.log(element); }); // for …of for (const element of array) { console.log(element); }
默认参数
// ES5 function point(x, y, isFlag){ x = x || 0; y = y || -1; isFlag = isFlag || true; console.log(x,y, isFlag); } point(0, 0) // 0 -1 true point(0, 0, false) // 0 -1 true point(1) // 1 -1 true point() // 0 -1 true // ES6 function point(x = 0, y = -1, isFlag = true){ console.log(x,y, isFlag); } point(0, 0) // 0 0 true point(0, 0, false) // 0 0 false point(1) // 1 -1 true point() // 0 -1 true
求数组最大值
Math.max(...[2,100,1,6,43]) // 100
使用扩展运算符(...)拷贝数组
// bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items];
使用Array.from方法,将类似数组的对象转为数组
const foo = document.querySelectorAll(‘.foo‘);
const nodes = Array.from(foo);
未完待续
JavaScript ES6特性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。