Rumah > Artikel > hujung hadapan web > Apakah ciri yang telah dipertingkatkan oleh es6
Fungsi dipertingkatkan ES6: 1. Memusnahkan tugasan, membenarkan nilai diekstrak daripada tatasusunan atau objek dan diberikan kepada pembolehubah mengikut corak tertentu. 2. Antara muka traverser ditambah pada rentetan, supaya rentetan itu boleh dilalui oleh "for...of loop. 3. Rentetan templat ialah versi rentetan yang dipertingkatkan. 4. Templat label ialah bentuk khas panggilan fungsi . 5. Tetapkan nilai lalai untuk parameter fungsi 6. Fungsi anak panah ini menghala ke skop atas 7. Pembolehubah dan fungsi dibenarkan untuk ditulis secara langsung dalam kurungan kerinting sebagai atribut dan kaedah objek. 🎜>
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3
ES6 meningkatkan sintaks asal
ES6 membolehkan anda mengekstrak nilai dari tatasusunan dan objek dan menetapkan nilai kepada pembolehubah mengikut corak tertentu Ini dipanggil destructuring Pada asasnya, ini adalah "padanan corak". adalah sama, pembolehubah di sebelah kiri akan diberikan nilai yang sepadan
Jika penyahbinaan tidak berjaya, nilainya akan sama dengan kes yang tidak ditakrifkan, iaitu, tanda sama kiri hanya sepadan dengan sebahagian daripada tatasusunan di sebelah kanan tanda sama. Dalam kes ini, penstrukturan masih boleh berjaya Penugasan penstrukturan membenarkan penetapan nilai lalaiPerhatikan bahawa ES6 menggunakan pengendali kesaksamaan yang ketat (===) secara dalaman . Oleh itu, nilai lalai hanya akan berkuat kuasa jika ahli tatasusunan adalah sama dengan tidak ditentukan >
Dalam kod di atas, kerana x boleh mendapat nilai, fungsi f tidak akan dilaksanakan sama sekali
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []
(2) , Pemusnahan dan penugasan objek
let [x, y, z] = new Set(['a', 'b', 'c']); x // "a"
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' let [x = 1] = [null];x // null
Dalam kod di atas, foo ialah corak padanan dan baz ialah pembolehubah. Apa yang sebenarnya diberikan ialah baz pembolehubah, bukan corak foo.
Mekanisme dalaman pemusnahan dan penetapan objek adalah untuk mencari atribut dengan nama yang sama dahulu dan kemudian menetapkannya kepada pembolehubah yang sepadan. Yang ditugaskan sebenarnya adalah yang kedua, bukan yang terdahulu.function f() { console.log('aaa'); } let [x = f()] = [1];
Seperti tatasusunan, penstrukturan juga boleh digunakan untuk objek dengan struktur bersarang.
Nilai lalai Memusnahkan objek juga boleh menentukan nilai lalai.
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }; foo // "aaa" bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' }; baz // undefined
(3), memusnahkan tugasan rentetan
// 例一 let { log, sin, cos } = Math; // 例二 const { log } = console; log('hello') // hello
Objek seperti tatasusunan mempunyai atribut panjang, jadi anda juga boleh Sifat ini diberikan nilai pemusnah.
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" foo // error: foo is not defined
(4) Menyahstruktur penugasan nilai berangka dan Boolean
let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
(5), memusnahkan tugasan parameter fungsi
var {x = 3} = {x: undefined}; x // 3 var {x = 3} = {x: null}; x // null1) Tukar nilai pembolehubah
let {length : len} = 'hello'; len // 5
2) Kembalikan berbilang nilai daripada fungsi Fungsi hanya boleh mengembalikan satu nilai, jika anda ingin mengembalikan berbilang Nilai hanya boleh dikembalikan dengan meletakkannya dalam tatasusunan atau objek. Dengan memusnahkan tugasan, adalah sangat mudah untuk mendapatkan semula nilai ini.
3) Definisi parameter fungsiTugasan memusnahkan boleh dengan mudah sepadan dengan set parameter kepada nama pembolehubah.
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
4) Ekstrak data JSON Tugasan pemusnahan amat berguna untuk mengekstrak data daripada objek JSON. 5) Lintas struktur Peta
Sebarang objek yang digunakan dengan antara muka Iterator boleh dilalui menggunakan gelung for...of. Struktur Peta secara asli menyokong antara muka Iterator, dan dengan penstrukturan dan penetapan pembolehubah, adalah sangat mudah untuk mendapatkan nama kunci dan nilai kunci.function add([x, y]){ return x + y; } add([1, 2]); // 32, peningkatan rentetan
let x = 1; let y = 2; [x, y] = [y, x];
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();
ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。
"\uD842\uDFB7" // "?" "\u20BB7" // " 7"
ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。
ES6 为字符串添加了遍历器接口,使得字符串可以被for…of循环遍历。
for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o"
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串 `In JavaScript '\n' is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入变量 let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
let x = 1; let y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" let obj = {x: 1, y: 2}; `${obj.x + obj.y}` // "3"
模板字符串之中还能调用函数。如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
function fn() { return "Hello World"; } `foo ${fn()} bar` // foo Hello World bar
字符串的新增方法
1,String.fromCodePoint()
ES5 提供String.fromCharCode()方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。
2,String.raw()
ES6 还为原生的 String 对象,提供了一个raw()方法。该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。
String.raw`Hi\n${2+3}!` // 实际返回 "Hi\\n5!",显示的是转义后的结果 "Hi\n5!" String.raw`Hi\u000A!`; // 实际返回 "Hi\\u000A!",显示的是转义后的结果 "Hi\u000A!"
3, 实例方法:includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!'; s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // true
(1)标签模板
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
let a = 5; let b = 10; function tag(s, v1, v2) { console.log(s[0]); console.log(s[1]); console.log(s[2]); console.log(v1); console.log(v2); return "OK"; } tag`Hello ${ a + b } world ${ a * b}`; // "Hello " // " world " // "" // 15 // 50 // "OK"
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello
箭头函数的this指向上级作用域
const name = 'tony' const person = { name: 'tom', say: () => console.log(this.name), sayHello: function () { console.log(this.name) }, sayHi: function () { setTimeout(function () { console.log(this.name) }, 500) }, asyncSay: function () { setTimeout(()=>console.log(this.name), 500) } } person.say() //tony person.sayHello() //tom person.sayHi() //tony person.asyncSay() //tom
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。除了属性简写,方法也可以简写。
const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {foo: foo}; const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { return "Hello!"; } };
1、如果key与value变量名相同,省略:value
2、省略函数:function
3、计算属性:[Math.random()]
const bar = 'bar' const obj = { bar, fn () { console.log('1111') }, [Math.random()]: '123' } console.log(obj)
【推荐学习:javascript视频教程】
Atas ialah kandungan terperinci Apakah ciri yang telah dipertingkatkan oleh es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!