这篇文章主要讲解了“ES6新增的特性有哪些及怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ES6新增的特性有哪些及怎么用”吧!
理解ES6
ECMAScript
,是由网景公司制定的一种脚本语言的标准化规范
;最初命名为Mocha
,后来改名为LiveScript
,最后重命名为JavaScript
ECMAScript 2015(ES2015),第 6 版,最早被称作 ECMAScript 6(ES6
),添加了新的特性。
ES6 块级作用域 let
首先,什么是作用域?作用域简单讲就是声明一个变量,这个变量的有效范围,在 let
没来之前。js 只有 var
的全局作用域
和 函数作用域
,ES6
为 js 带来了块级作用域
。【相关推荐:javascript学习教程】
{ var a = "?"; let b = "⛳"; } console.loga); console.logb);
? Uncaught ReferenceError: b is not defined
可以看到,我们使用 var 关键字在块中定义了变量 a,其实全局可以访问到,所以说,var声明的变量是全局的
,但我们想让变量就在块中生效,出了块就访问不了了,这时就可以使用 ES6
新增的块级作用域关键字 let
来声明这个变量 a,当我再次访问,报错了,说 a is not defined
,a 没有定义
ES6 解构数组
如下所示,首先定义了一个函数,返回一个数组,在未使用解构数组前,调用数组并把返回值赋值给 temp ,然后打印 temp 数组,使用了解构数组
后,直接定义一个数组变量,然后将函数返回值指向该变量,他会自动把第一项的值赋值给第一个数组变量,第二项赋值给第二个数组变量,以此类推,最后打印三个变量,看到没有问题
function breakfast) { return ['?', '?', '?']; } var temp = breakfast); console.logtemp[0], temp[1], temp[2]); let [a, b, c] = breakfast); console.loga, b, c);
? ? ? ? ? ?
ES6 解构对象
首先 breakfast
函数返回一个对象
,使用解构对象
,定义对象,键值对中键表示映射的实际对象的键名,值就是自定义变量,解构完成,会自动完成赋值,然后调用 breakfast 函数,返回对象,随后打印变量 a,b,c ,可以看到没问题
function breakfast) { return { a: '?', b: '?', c: '?' } } let { a: a, b: b, c: c } = breakfast); console.loga, b, c);
? ? ?
ES6 模板字符串
在使用模板字符串前,我们拼接字符串变量使用 +
使用 ES6 提供的模板字符串,首先使用 “ 把字符串包起来,当要使用变量时 ,使用 ${变量}
let a = '?', b = '?️'; let c = '今天吃' + a + '吃完看' + b; console.logc); let d = `今天吃 ${a} 吃完看 ${b}`; console.logd);
今天吃?吃完看?️ 今天吃 ? 吃完看 ?️
ES6 判断字符串里是否包含其他字符串
使用这些函数,可以轻松的完成是不是以什么开头的字符串,是不是以什么结尾的字符串,是不是包含了什么字符串等的操作
let str = '你好,我是小周 ❤️'; console.logstr.startsWith'你好')); console.logstr.endsWith'❤️')); console.logstr.endsWith'你好')); console.logstr.includes" "));
true true false true
ES6 默认参数
ES6里,可以使用默认参数,当调用函数时,没有给参数进行赋值时,就使用设置的默认参数执行,当给参数赋值时,就会使用新赋的值执行,覆盖默认值,使用如下:
function saystr) { console.logstr); } function say1str = '嘿嘿') { console.logstr); } say); say1); say1'❤️');
undefined 嘿嘿 ❤️
ES6 展开操作符
使用 ...
可以展开元素,方便操作,使用如下:
let arr = ['❤️', '?', '?']; console.logarr); console.log...arr); let brr = ['王子', ...arr]; console.logbrr); console.log...brr);
[ '❤️', '?', '?' ] ❤️ ? ? [ '王子', '❤️', '?', '?' ] 王子 ❤️ ? ?
ES6 剩余操作符
...
操作符用在函数参数上,接收一个参数数组,使用如下:
function f1a, b, ...c) { console.loga, b, c); console.loga, b, ...c); } f1'?','?','☃️','㊙️');
? ? [ '☃️', '㊙️' ] ? ? ☃️ ㊙️
ES6 函数名字
使用 .name
可以获取函数的名字,具体使用如下:
function f1) { } console.logf1.name); let f2 = function ) { }; console.logf2.name); let f3 = function f4) { }; console.logf3.name);
f1 f2 f4
ES6 箭头函数
使用箭头函数可以让代码更简洁,但是也要注意箭头函数的局限性,以及箭头函数中自身没有 this,this指向父级
let f1 = a => a; let f2 = a, b) => { return a + b; } console.logf110)); console.logf210, 10));
10 20
ES6 对象表达式
使用es6的对象表达式,如果对象属性和值一样,可以省略值,函数写法可以省去function
,用法如下:
let a = '㊙️'; let b = '☃️'; const obj = { a: a, b: b, say: function ) { } } const es6obj = { a, b, say) { } } console.logobj); console.loges6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] } { a: '㊙️', b: '☃️', say: [Function: say] }
ES6 恒量
使用 const
关键字定义衡量,const
限制的是给衡量分配值的动作,并不限制衡量中的值,使用如下:
const app = ['☃️', '?']; console.log...app); app.push'?'); console.log...app); app = 10;
可以看到当再次给衡量分配值就报错了
☃️ ? ☃️ ? ? app = 10; ^ TypeError: Assignment to constant variable.
ES6 对象属性名
使用点定义对象属性时,如果属性名中含有空格字符,是不合法的,语法通不过的,使用 [属性名]
可以完美解决,并且不仅可以直接写明属性名,还可以使用变量来指定,具体使用如下:
let obj = {}; let a = 'little name'; obj.name = '王子'; // 使用点定义属性中间有空格是不合法的 // obj.little name = '小王子'; obj[a] = '小王子'; console.logobj);
{ name: '王子', 'little name': '小王子' }
ES6 判断两个值是否相等
一些特殊值使用 ===
或 ==
进行比较的结果,可能不满足你的需求,这是你可以使用Object.is第一个值,第二个值)
来进行判断,可能你就开心的笑了
console.logNaN == NaN); console.log+0 == -0); console.logObject.isNaN, NaN)); console.logObject.is+0, -0));
false true true false
ES6 复制对象
使用 Object.assign)
可以把一个对象复制到另一个对象,使用如下:
let obj = {}; Object.assign // 源 obj, // 复制目标对象 { a: '☃️' } ); console.logobj);
{ a: '☃️' }
ES6 设置对象的 prototype
使用es6可以设置对象的 prototype,使用如下:
let obj1 = { get) { return 1; } } let obj2 = { a: 10, get) { return 2; } } let test = Object.createobj1); console.logtest.get)); console.logObject.getPrototypeOftest) === obj1); Object.setPrototypeOftest, obj2); console.logtest.get)); console.logObject.getPrototypeOftest) === obj2);
1 true 2 true
ES6 proto
let obj1 = { get) { return 1; } } let obj2 = { a: 10, get) { return 2; } } let test = { __proto__: obj1 } console.logtest.get)); console.logObject.getPrototypeOftest) === obj1); test.__proto__ = obj2; console.logtest.get)); console.logObject.getPrototypeOftest) === obj2);
1 true 2 true
ES6 super
let obj1 = { get) { return 1; } } let test = { __proto__: obj1, get) { return super.get) + ' ☃️'; } } console.logtest.get));
1 ☃️
ES6 生成迭代器
在学习前,先首写一个迭代器
function diearr) { let i = 0; return { next) { let done = i >= arr.length); let value = !done ? arr[i++] : undefined; return { value: value, done: done } } } } let arr = ['☃️', '?', '?']; let dieArr = diearr); console.logdieArr.next)); console.logdieArr.next)); console.logdieArr.next)); console.logdieArr.next));
{ value: '☃️', done: false } { value: '?', done: false } { value: '?', done: false } { value: undefined, done: true }
OK,看看简化的生成器
function* diearr) { for let i = 0; i < arr.length; i++) { yield arr[i]; } } let test = die['?','☃️']); console.logtest.next)); console.logtest.next)); console.logtest.next));
{ value: '?', done: false } { value: '☃️', done: false } { value: undefined, done: true }
ES6 类
使用es6可以快速方便的构建类,好耶
class stu { constructorname) { this.name = name; } say) { return this.name + '说奥里给'; } } let xiaoming = new stu"小明"); console.logxiaoming.say));
小明说奥里给
ES6 get set
定义get/set方法,用于获取或者修改类的属性
class stu { constructorname) { this.name = name; } get) { return this.name; } setnewStr) { this.name = newStr; } } let xiaoming = new stu"小明"); console.logxiaoming.get)); xiaoming.set"大明") console.logxiaoming.get));
小明 大明
ES6 static
使用static关键字修饰的方法,不用实例化对象也可以直接使用
class stu { static saystr) { console.logstr); } } stu.say"奥里给 静态方法");
奥里给 静态方法
ES6 extends
使用继承,可以减少代码冗余,比如:
class Person { constructorname, bir) { this.name = name; this.bir = bir; } showInfo) { return '姓名:' + this.name + '生日:' + this.bir; } } class A extends Person { constructorname, bir) { supername, bir); } } let zhouql = new A"周棋洛", "2002-06-01"); // 周棋洛本身是没有showInfo方法的,是继承自Person的 console.logzhouql.showInfo));
姓名:周棋洛生日:2002-06-01
ES6 Set
Set 集合,与数组不同,Set 集合中不允许有重复元素
// 创建Set集合 let food = new Set'??'); // 重复添加,只有一个能进去 food.add'?'); food.add'?'); console.logfood); // 当前集合大小 console.logfood.size); // 判断集合中是否存在某一元素 console.logfood.has'?')); // 删除集合中某一元素 food.delete'?'); console.logfood); // 循环遍历集合 food.forEachf => { console.logf); }); // 清空集合 food.clear); console.logfood);
Set3) { '?', '?', '?' } 3 true Set2) { '?', '?' } ? ? Set0) {}
ES6 Map
Map结合存储键值对
let food = new Map); let a = {}, b = function ) { }, c = "name"; food.seta, '?'); food.setb, '?'); food.setb, '?'); food.setc, '米饭'); console.logfood); console.logfood.size); console.logfood.geta)); food.deletec); console.logfood); console.logfood.hasa)); food.forEachv, k) => { console.log`${k} + ${v}`); }); food.clear); console.logfood);
Map3) { {} => '?', [Function: b] => '?', 'name' => '米饭' } 3 ? Map2) { {} => '?', [Function: b] => '?' } true [object Object] + ? function ) { } + ? Map0) {}
ES6 模块化
使用模块化开发,es6可以方便的导入和导出一些内容,还有默认导出等等细节
let a = '?'; let f1 = function str = '你丫的写参数') { console.logstr); } export { a, f1 };
import {a, f1} from './27模块测试.js'; console.loga); f1); f1'知道了');