Cet article vous donnera une compréhension approfondie d'ES6 et découvrira les nouvelles fonctionnalités d'ES6. J'espère qu'il vous sera utile !
ECMAScript
est unespécification standardisée d'un langage de script
formulée à l'origine par Netscape sous le nom deMocha
, renommé plus tard ;LiveScript
, et finalement renomméJavaScript
ECMAScript 2015 (ES2015), 6e édition, d'abord connu sous le nom d'ECMAScript 6 (ES6
), ajoutant nouvelles fonctionnalités.ECMAScript
,是由网景公司制定的一种脚本语言的标准化规范
;最初命名为Mocha
,后来改名为LiveScript
,最后重命名为JavaScript
ECMAScript 2015(ES2015),第 6 版,最早被称作 ECMAScript 6(ES6
),添加了新的特性。
ES6 块级作用域 let
首先,什么是作用域?作用域简单讲就是声明一个变量,这个变量的有效范围,在 let
没来之前。js 只有 var
的全局作用域
和 函数作用域
,ES6
为 js 带来了块级作用域
。【相关推荐:javascript学习教程】
{ var a = "?"; let b = "⛳"; } console.log(a); console.log(b);
? Uncaught ReferenceError: b is not defined
可以看到,我们使用 var 关键字在块中定义了变量 a,其实全局可以访问到,所以说,var声明的变量是全局的
,但我们想让变量就在块中生效,出了块就访问不了了,这时就可以使用 ES6
新增的块级作用域关键字 let
来声明这个变量 a,当我再次访问,报错了,说 a is not defined
,a 没有定义
如下所示,首先定义了一个函数,返回一个数组,在未使用解构数组前,调用数组并把返回值赋值给 temp ,然后打印 temp 数组,使用了解构数组
后,直接定义一个数组变量,然后将函数返回值指向该变量,他会自动把第一项的值赋值给第一个数组变量,第二项赋值给第二个数组变量,以此类推,最后打印三个变量,看到没有问题
function breakfast() { return ['?', '?', '?']; } var temp = breakfast(); console.log(temp[0], temp[1], temp[2]); let [a, b, c] = breakfast(); console.log(a, b, c);
? ? ? ? ? ?
首先 breakfast
函数返回一个对象
,使用解构对象
,定义对象,键值对中键表示映射的实际对象的键名,值就是自定义变量,解构完成,会自动完成赋值,然后调用 breakfast 函数,返回对象,随后打印变量 a,b,c ,可以看到没问题
function breakfast() { return { a: '?', b: '?', c: '?' } } let { a: a, b: b, c: c } = breakfast(); console.log(a, b, c);
? ? ?
在使用模板字符串前,我们拼接字符串变量使用 +
使用 ES6 提供的模板字符串,首先使用 `` 把字符串包起来,当要使用变量时 ,使用 ${变量}
let a = '?', b = '?️'; let c = '今天吃' + a + '吃完看' + b; console.log(c); let d = `今天吃 ${a} 吃完看 ${b}`; console.log(d);
今天吃?吃完看?️ 今天吃 ? 吃完看 ?️
使用这些函数,可以轻松的完成是不是以什么开头的字符串,是不是以什么结尾的字符串,是不是包含了什么字符串等的操作
let str = '你好,我是小周 ❤️'; console.log(str.startsWith('你好')); console.log(str.endsWith('❤️')); console.log(str.endsWith('你好')); console.log(str.includes(" "));
true true false true
ES6里,可以使用默认参数,当调用函数时,没有给参数进行赋值时,就使用设置的默认参数执行,当给参数赋值时,就会使用新赋的值执行,覆盖默认值,使用如下:
function say(str) { console.log(str); } function say1(str = '嘿嘿') { console.log(str); } say(); say1(); say1('❤️');
undefined 嘿嘿 ❤️
使用 ...
可以展开元素,方便操作,使用如下:
let arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); let brr = ['王子', ...arr]; console.log(brr); console.log(...brr);
[ '❤️', '?', '?' ] ❤️ ? ? [ '王子', '❤️', '?', '?' ] 王子 ❤️ ? ?
...
ES6 block scope let
🎜Tout d'abord, qu'est-ce qu'un scope ? La portée signifie simplement déclarer une variable. La portée valide de cette variable est avant l'arrivée delet
. js n'a qu'une portée globale
et une portée de fonction
de var
, et ES6
amène le bloc à la portée du niveau js
. [Recommandations associées : tutoriel d'apprentissage Javascript🎜]🎜🎜🎜🎜function f1(a, b, ...c) { console.log(a, b, c); console.log(a, b, ...c); } f1('?','?','☃️','㊙️');
? ? [ '☃️', '㊙️' ] ? ? ☃️ ㊙️
var est globale
, mais nous voulons que la variable prenne effet dans le bloc et ne soit pas accessible en dehors du bloc. À l'heure actuelle, vous pouvez utiliser le nouveau mot-clé de portée au niveau du bloc let
dans ES6
pour déclarer la variable a. Lorsque j'y accède à nouveau, une erreur est signalée, indiquant <. code>a n'est pas défini, a n'est pas défini🎜🎜🎜🎜🎜🎜Tableau de déstructuration ES6🎜🎜🎜 comme indiqué ci-dessous, définissez d'abord une fonction, renvoyez un tableau, avant d'utiliser le tableau de déstructuration, appelez le tableau et attribuez la valeur de retour Donnez temp, puis imprimez le tableau temp. Après avoir utilisé tableau de déstructuration
, définissez directement une variable de tableau, puis pointez la valeur de retour de la fonction vers la variable. Elle attribuera automatiquement la valeur de. le premier élément à la première variable du tableau, le deuxième élément est affecté à la deuxième variable du tableau, et ainsi de suite. Enfin, imprimez les trois variables et voyez qu'il n'y a pas de problème🎜function f1() { } console.log(f1.name); let f2 = function () { }; console.log(f2.name); let f3 = function f4() { }; console.log(f3.name);
f1 f2 f4
objet
. Utilisez déconstruire l'objet
pour définir l'objet. La clé dans la paire clé-valeur représente le nom de clé de l'objet réel mappé. .La valeur est la variable personnalisée.Une fois la déconstruction terminée, elle terminera automatiquement l'affectation, puis appellera la fonction petit-déjeuner, renverra l'objet, puis imprimera les variables a, b, c. Vous pouvez voir qu'il n'y a pas de problème. 🎜let f1 = a => a; let f2 = (a, b) => { return a + b; } console.log(f1(10)); console.log(f2(10, 10));
10 20
${variable}
🎜let a = '㊙️'; let b = '☃️'; const obj = { a: a, b: b, say: function () { } } const es6obj = { a, b, say() { } } console.log(obj); console.log(es6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] } { a: '㊙️', b: '☃️', say: [Function: say] }
const app = ['☃️', '?']; console.log(...app); app.push('?'); console.log(...app); app = 10;
☃️ ? ☃️ ? ? app = 10; ^ TypeError: Assignment to constant variable.
let obj = {}; let a = 'little name'; obj.name = '王子'; // 使用点定义属性中间有空格是不合法的 // obj.little name = '小王子'; obj[a] = '小王子'; console.log(obj);
{ name: '王子', 'little name': '小王子' }
...
pour développer les éléments pour une utilisation facile, et est utilisé comme suit : 🎜console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
false true true false
...
L'opérateur est utilisé sur les paramètres de fonction et reçoit un tableau de paramètres. Il est utilisé comme suit : 🎜let obj = {}; Object.assign( // 源 obj, // 复制目标对象 { a: '☃️' } ); console.log(obj);
{ a: '☃️' }
使用 .name
可以获取函数的名字,具体使用如下:
function f1() { } console.log(f1.name); let f2 = function () { }; console.log(f2.name); let f3 = function f4() { }; console.log(f3.name);
f1 f2 f4
使用箭头函数可以让代码更简洁,但是也要注意箭头函数的局限性,以及箭头函数中自身没有 this,this指向父级
let f1 = a => a; let f2 = (a, b) => { return a + b; } console.log(f1(10)); console.log(f2(10, 10));
10 20
使用es6的对象表达式,如果对象属性和值一样,可以省略值,函数写法可以省去function
,用法如下:
let a = '㊙️'; let b = '☃️'; const obj = { a: a, b: b, say: function () { } } const es6obj = { a, b, say() { } } console.log(obj); console.log(es6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] } { a: '㊙️', b: '☃️', say: [Function: say] }
使用 const
关键字定义衡量,const
限制的是给衡量分配值的动作,并不限制衡量中的值,使用如下:
const app = ['☃️', '?']; console.log(...app); app.push('?'); console.log(...app); app = 10;
可以看到当再次给衡量分配值就报错了
☃️ ? ☃️ ? ? app = 10; ^ TypeError: Assignment to constant variable.
使用点定义对象属性时,如果属性名中含有空格字符,是不合法的,语法通不过的,使用 [属性名]
可以完美解决,并且不仅可以直接写明属性名,还可以使用变量来指定,具体使用如下:
let obj = {}; let a = 'little name'; obj.name = '王子'; // 使用点定义属性中间有空格是不合法的 // obj.little name = '小王子'; obj[a] = '小王子'; console.log(obj);
{ name: '王子', 'little name': '小王子' }
一些特殊值使用 ===
或 ==
进行比较的结果,可能不满足你的需求,这是你可以使用Object.is(第一个值,第二个值)
来进行判断,可能你就开心的笑了
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
false true true false
使用 Object.assign()
可以把一个对象复制到另一个对象,使用如下:
let obj = {}; Object.assign( // 源 obj, // 复制目标对象 { a: '☃️' } ); console.log(obj);
{ a: '☃️' }
使用es6可以设置对象的 prototype,使用如下:
let obj1 = { get() { return 1; } } let obj2 = { a: 10, get() { return 2; } } let test = Object.create(obj1); console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj1); Object.setPrototypeOf(test, obj2); console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj2);
1 true 2 true
let obj1 = { get() { return 1; } } let obj2 = { a: 10, get() { return 2; } } let test = { __proto__: obj1 } console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj1); test.__proto__ = obj2; console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj2);
1 true 2 true
let obj1 = { get() { return 1; } } let test = { __proto__: obj1, get() { return super.get() + ' ☃️'; } } console.log(test.get());
1 ☃️
在学习前,先首写一个迭代器
function die(arr) { 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 = die(arr); console.log(dieArr.next()); console.log(dieArr.next()); console.log(dieArr.next()); console.log(dieArr.next());
{ value: '☃️', done: false } { value: '?', done: false } { value: '?', done: false } { value: undefined, done: true }
OK,看看简化的生成器
function* die(arr) { for (let i = 0; i <pre class="brush:php;toolbar:false">{ value: '?', done: false } { value: '☃️', done: false } { value: undefined, done: true }
使用es6可以快速方便的构建类,好耶
class stu { constructor(name) { this.name = name; } say() { return this.name + '说奥里给'; } } let xiaoming = new stu("小明"); console.log(xiaoming.say());
小明说奥里给
定义get/set方法,用于获取或者修改类的属性
class stu { constructor(name) { this.name = name; } get() { return this.name; } set(newStr) { this.name = newStr; } } let xiaoming = new stu("小明"); console.log(xiaoming.get()); xiaoming.set("大明") console.log(xiaoming.get());
小明 大明
使用static关键字修饰的方法,不用实例化对象也可以直接使用
class stu { static say(str) { console.log(str); } } stu.say("奥里给 静态方法");
奥里给 静态方法
使用继承,可以减少代码冗余,比如:
class Person { constructor(name, bir) { this.name = name; this.bir = bir; } showInfo() { return '姓名:' + this.name + '生日:' + this.bir; } } class A extends Person { constructor(name, bir) { super(name, bir); } } let zhouql = new A("周棋洛", "2002-06-01"); // 周棋洛本身是没有showInfo方法的,是继承自Person的 console.log(zhouql.showInfo());
姓名:周棋洛生日:2002-06-01
Set 集合,与数组不同,Set 集合中不允许有重复元素
// 创建Set集合 let food = new Set('??'); // 重复添加,只有一个能进去 food.add('?'); food.add('?'); console.log(food); // 当前集合大小 console.log(food.size); // 判断集合中是否存在某一元素 console.log(food.has('?')); // 删除集合中某一元素 food.delete('?'); console.log(food); // 循环遍历集合 food.forEach(f => { console.log(f); }); // 清空集合 food.clear(); console.log(food);
Set(3) { '?', '?', '?' } 3 true Set(2) { '?', '?' } ? ? Set(0) {}
Map结合存储键值对
let food = new Map(); let a = {}, b = function () { }, c = "name"; food.set(a, '?'); food.set(b, '?'); food.set(b, '?'); food.set(c, '米饭'); console.log(food); console.log(food.size); console.log(food.get(a)); food.delete(c); console.log(food); console.log(food.has(a)); food.forEach((v, k) => { console.log(`${k} + ${v}`); }); food.clear(); console.log(food);
Map(3) { {} => '?', [Function: b] => '?', 'name' => '米饭' } 3 ? Map(2) { {} => '?', [Function: b] => '?' } true [object Object] + ? function () { } + ? Map(0) {}
使用模块化开发,es6可以方便的导入和导出一些内容,还有默认导出等等细节
let a = '?'; let f1 = function (str = '你丫的写参数') { console.log(str); } export { a, f1 };
import {a, f1} from './27模块测试.js'; console.log(a); f1(); f1('知道了');
恭喜你,读完了本篇文章,能力 + 100 ,颜值 + 10,欢迎下次再来。先别走,如果觉得文章写的不错,还请点赞,收藏,关注帅气的博主啊,手动狗头,我会继续努力,原创不易,你的支持就是小周的动力
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!