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

1, memusnahkan tugasan es6 membenarkan mengikut corak tertentu, daripada tatasusunan atau Mengekstrak nilai daripada objek dan memberikan nilai kepada pembolehubah dipanggil tugasan memusnahkan

Tugasan memusnahkan adalah mudah dan mudah difahami dalam penulisan kod, dengan semantik yang jelas dan akses mudah kepada medan data dalam objek kompleks. . >Dalam pemusnahan, sumber pemusnahan berada di sebelah kanan ungkapan tugasan pemusnah, dan sasaran pemusnahan berada di sebelah kiri Pemusnahan Penyusunan Tugasan

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 lalai

Perhatikan 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"

Terdapat perbezaan penting antara penstrukturan objek dan tatasusunan, dan unsur tatasusunan disusun mengikut tertib, dan pembolehubah diperolehi nilainya kedudukan; atribut objek tidak teratur, dan pembolehubah mesti mempunyai nama yang sama dengan atribut untuk mendapatkan nilai yang betul

• Memusnahkan dan menetapkan objek dengan mudah boleh menetapkan nilai. objek sedia ada, tetapkan nilai kepada pembolehubah.

Contoh 1 kod di atas memberikan kaedah logaritma, sinus dan kosinus objek Matematik kepada pembolehubah yang sepadan, yang akan lebih mudah digunakan. Contoh 2 memberikan console.log kepada pembolehubah log.

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"

Apabila memusnahkan tugasan, jika sebelah kanan sama tanda ialah nilai berangka dan nilai Boolean, ia akan ditukar menjadi objek terlebih dahulu.

(5), memusnahkan tugasan parameter fungsi

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

(6 ), Tujuan

1) 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 fungsi

Tugasan 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]); // 3

Jika anda hanya ingin mendapatkan nama kunci atau nilai kunci, anda boleh menulisnya seperti berikut.

2, 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 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

（1）字符串的遍历器接口

ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

（2）模板字符串

模板字符串（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

3，函数的增强

（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"

（2）函数参数增强：参数默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

（3）箭头函数的简化

箭头函数的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

4.对象的扩展

属性的简洁表示法

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!