Perkara baharu dalam es6 berbanding es5

Kandungan baharu: 1. Kata kunci Let dan const digunakan untuk mengisytiharkan pembolehubah, menyokong skop peringkat blok dan mempunyai zon mati sementara 2. Tugasan memusnahkan ialah padanan corak untuk tatasusunan atau objek, dan kemudian Maksudnya memberikan nilai kepada pembolehubah; 3. Operator pengembangan boleh digunakan untuk mengembangkan elemen dalam set dan tatasusunan menjadi elemen tunggal 4. Tetapkan objek, struktur data baru, serupa dengan tatasusunan, tetapi nilai-nilainya; semuanya unik dan tiada nilai pendua; 5. Kaedah pembina Array.from() dan Array.of().

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Ciri baharu ES6 daripada ES5

let, const:

let and const Menyokong skop peringkat blok dan mempunyai zon mati sementara (mesti diisytiharkan dahulu, kemudian digunakan, promosi pembolehubah tidak disokong); jenis asas, ia tidak boleh diubah Nilainya; apabila tugasan adalah jenis rujukan, rujukannya tidak boleh diubah, tetapi operasi pada jenis rujukan boleh dilakukan, seperti menolak tatasusunan, penambahan, pemadaman dan pengubahsuaian sifat objek

Memusnahkan tugasan: es6 membenarkan mengekstrak nilai daripada tatasusunan atau objek dan memberikan nilai kepada pembolehubah mengikut corak tertentu, yang dipanggil tugasan pemusnahan.

Tugasan memusnahkan adalah mudah dan mudah difahami dalam penulisan kod, dengan semantik yang jelas, menjadikannya mudah untuk mendapatkan medan data dalam objek kompleks.

Menyahstruktur penugasan objek:

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

Menyahstruktur penugasan tatasusunan: (sama seperti rentetan)

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出：
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

Kembangkan operator: Diwakili oleh tiga titik (...), operator spread JavaScript telah diperkenalkan dalam ES6. Ia boleh digunakan untuk mengembangkan elemen dalam koleksi dan tatasusunan menjadi elemen individu tunggal.

Pengendali hamparan boleh digunakan untuk mencipta dan mengklon tatasusunan dan objek, menghantar tatasusunan sebagai hujah fungsi, mengalih keluar pendua daripada tatasusunan dan banyak lagi.

Pengendali hamparan hanya boleh digunakan pada objek boleh lelaran. Ia mesti digunakan sebelum objek boleh lelar tanpa sebarang pemisahan. Contohnya:

console.log(...arr);

Tatasusunan:

let arr1 = [1, 2, 3, 4];
let arr2 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

// 输出：
// ['a', 'b', 1, 2, 3, 4, 'c']

Objek:

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出：
// {a: 1, b: 2, c: 3, d: 4}

Baki parameter Pemprosesan:

Tatasusunan:

Objek:

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: [3, 4, 5]

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出：
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制（不是传地址）
let obj2 = {...obj};

Tetapkan objek: Set ialah struktur data baharu yang disediakan oleh ES6, serupa dengan tatasusunan, tetapi nilai ahli adalah unik dan tiada nilai pendua.

Set sendiri ialah pembina yang digunakan untuk menjana struktur data Set.
Tetapkan objek membolehkan anda menyimpan nilai unik dari sebarang jenis, sama ada nilai primitif atau rujukan objek.
Elemen dalam Set hanya akan muncul sekali sahaja iaitu elemen dalam Set adalah unik.
Selain itu, NaN dan undefined boleh disimpan dalam Set dan NaN dianggap sebagai nilai yang sama (walaupun NaN !== NaN).
Fungsi Set boleh menerima tatasusunan (atau struktur data lain dengan antara muka boleh lelar) sebagai parameter untuk permulaan.

Penyahduplikasi tatasusunan:

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

Kaedah tetapan:

let s = new Set([1, 1, 2, 3, 'a']);
// 得到Set元素个数：
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值，返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项，返回集合本身的引用
s.add('b');

Objek peta: ES6 menyediakan struktur data Peta. Ia serupa dengan objek dan juga merupakan koleksi pasangan nilai kunci, tetapi skop "kunci" tidak terhad kepada rentetan Pelbagai jenis nilai (termasuk objek) boleh digunakan sebagai kunci. Dalam erti kata lain, struktur Objek menyediakan surat-menyurat "nilai-rentetan", dan struktur Peta menyediakan surat-menyurat "nilai-nilai", yang merupakan pelaksanaan yang lebih lengkap bagi struktur Hash. Jika anda memerlukan struktur data "nilai-kunci", Map adalah lebih sesuai daripada Object.

Ciri Peta:

Objek peta menyimpan pasangan nilai kunci dan dapat mengingat susunan sisipan kunci yang asal.
Sebarang nilai (objek atau primitif) boleh digunakan sebagai kunci atau nilai.

Kaedah peta:

let arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
let m = new Map(arr);
// m: {'a' => 1, 'b' => 2, 'c' => 3}

// 清空Map
m.clear();
// 删除某一项，返回操作是否成功
m.delete(key);
// 获取某一项的值，返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项，返回Map本身的引用
m.set(key, val);

Kandungan fungsi baharu:

Fungsi anak panah: tiada
• dan

  thisarguments

lalai parameter

Kaedah baharu untuk tatasusunan:

Kaedah pembina:

Tukar tatasusunan kelas kepada tatasusunan sebenar:

• Array.from(arrLike [, mapFunc, mapThis]);Parameter:

  Seperti tatasusunan
  • arrLike:
  Fungsi operasi untuk setiap item seperti tatasusunan
  • mapFunc:
  Gantikan
  • dengan mapThis: menunjuk ke mapFuncthis
  Cara lain:

  let arr = [...arrLike];

Tukar senarai argumen kepada tatasusunan:

• 检测一个对象是否是一个数组：

  Array.isArray(obj);

对象的方法：

• arr.find(callback [, thisArg])：查找数组中满足条件的第一个元素的值

  let arr = [1, 2, 3, 4];
  let val = arr.find((item, index) => item >= 3);
  // val: 3
  let val = arr.find((item, index) => item >= 5);
  // val: undefined

• arr.findIndex(callback [, thisArg])：查找数组中满足条件的第一个元素的索引

• 数组扁平化：

  • arr.flat([depth])

    参数：depth：指定要提取嵌套数组的结构深度，默认为1，当depth = infinity时，无论数组多少层，都提取为一维数组。

  • arr.flatMap(callback[, thisArg])

    参数：callback：对原数组的每个元素进行操作，返回新数组的元素；

    该函数值支持深度为1的扁平化

• 数组元素填充：arr.fill(value[, start[, end]]);

  用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引；不会改变数组长度

  参数：

  • value：用来填充数组元素的值；
  • start：起始索引，默认值为0；
  • end：终止索引，默认值为 arr.length ；

• arr.includes(valueToFind[, fromIndex])：判断数组中是否包含一个指定的值

  参数：

  • valueToFind：需要查找的值
  • fromIndex：从 fromIndex 处开始向后查找

字符串新增方法：

• str.startsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串开头

  参数：

  • searchString：要搜索的字符串
  • position：在 str 中搜索 searchString 的开始位置，默认为0，也就是真正的字符串开头处

• str.endsWith(searchString[, position])：判断当前字符串是否以另一个给定的子字符串结束

  参数：

  • searchString：要搜索的字符串
  • position：在str中反向搜索的开始位置，默认为 str.length

• str.repeat(times)：返回重复str字符串times次的字符串

模版字符串：

反引号：``，可以换行

插值表达式：${}

对象新增方法：

• 简洁表示法：

  let a = 1, b = 2;
  // 原来的表示方法：
  let obj = {
    a: a,
    b: b,
    c: function() {}
  };
  // 简洁表示法：
  let obj = {
    a,
    b,
    c() {}
  };

• 属性名表达式：

  let name = "小明";
  let obj = {
    [name]: 111
  };
  console.log(obj);
  // 输出：
  // obj: {'小明': 111}
  
  // 等价于：
  let obj = {};
  obj[name] = 111;

• Object.assign(obj1, obj2, ...)：将第二个参数即之后的参数对象合并到第一个参数对象中

  let obj1 = {a: 1, b: 2};
  let obj2 = {c: 3, d: 4};
  Object.assign(obj2, obj1);
  // 等价于
  obj2 = {
    ...obj1,
    ...obj2
  }
  // 等价于
  obj2 = Object.assign({}, obj1, obj2);

• Object.is(value1, value2)：判断两个值是否相等（强类型）

  和===的区别：

  +0 === -0;	// true
  Object.is(+0, -0);	// false
  
  NaN === NaN; // false
  Object.is(NaN, NaN); // true

babel编译器：

将es6语法编译为es5语法

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Perkara baharu dalam es6 berbanding es5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!