Apakah ciri yang ada pada ecmascript?

Ciri-ciri ecmascript ialah: 1. kelas; 3. Fungsi anak panah; 9. Operator eksponen "**"; 10. "async/wait" dan sebagainya.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Apakah itu ECMAScript

ECMAScript ialah bahasa pengaturcaraan skrip yang diseragamkan oleh ECMA International (dahulunya Persatuan Pengilang Komputer Eropah) melalui ECMA-262.

Ecma International ialah organisasi piawaian maklumat dan telekomunikasi berasaskan keahlian antarabangsa. Sebelum 1994, ia dipanggil Persatuan Pengeluar Komputer Eropah. Kerana pengantarabangsaan komputer, piawaian organisasi melibatkan banyak negara lain, jadi organisasi memutuskan untuk menukar namanya untuk menunjukkan sifat antarabangsanya. Nama itu bukan lagi akronim.

Berbeza daripada organisasi standard kerajaan kebangsaan, Ecma International ialah organisasi keahlian korporat. Proses penyeragaman organisasi adalah lebih komersial, mendakwa bahawa cara operasi ini mengurangkan usaha birokrasi untuk mencapai hasil.

Malah, Ecma International bertanggungjawab untuk merumuskan banyak piawaian, seperti spesifikasi berikut. Anda dapat melihat bahawa terdapat protagonis kami hari ini, spesifikasi ECMAScript, spesifikasi bahasa C#, spesifikasi bahasa C/CLI, dsb.

ECMAScript Hubungan dengan JavaScript

Pada November 1996, Netscape, pencipta JavaScript, memutuskan untuk menyerahkan JavaScript kepada organisasi penyeragaman ECMA It diharap bahasa ini akan menjadi taraf antarabangsa. Pada tahun berikutnya, ECMA mengeluarkan versi pertama Dokumen Standard 262 (ECMA-262), yang menetapkan standard untuk bahasa skrip penyemak imbas dan memanggil bahasa ini ECMAScript Versi ini adalah versi 1.0.

Standard ini telah dibangunkan untuk bahasa JavaScript dari awal, tetapi ia tidak dipanggil JavaScript atas dua sebab. Satu ialah tanda dagangan Java ialah tanda dagangan Sun Menurut perjanjian pelesenan, hanya Netscape yang boleh menggunakan nama JavaScript secara sah, dan JavaScript itu sendiri telah didaftarkan sebagai tanda dagangan oleh Netscape. Kedua, saya ingin menunjukkan bahawa pembangun bahasa ini ialah ECMA, bukan Netscape, yang akan membantu memastikan keterbukaan dan neutraliti bahasa ini.

Oleh itu, hubungan antara ECMAScript dan JavaScript ialah yang pertama adalah spesifikasi yang kedua, dan yang terakhir adalah pelaksanaan yang pertama.

Hubungan antara ES6 dan ECMAScript 2015

Istilah ECMAScript 2015 (dirujuk sebagai ES2015) juga sering dilihat. Bagaimanakah ia berkaitan dengan ES6?

Pada tahun 2011, selepas ECMAScript versi 5.1 dikeluarkan, kerja bermula pada versi 6.0. Oleh itu, makna asal perkataan ES6 merujuk kepada versi bahasa JavaScript yang seterusnya.

Walau bagaimanapun, kerana versi ini memperkenalkan terlalu banyak ciri tatabahasa, dan semasa proses pembangunan, banyak organisasi dan individu terus menyerahkan ciri baharu. Ia dengan cepat menjadi jelas bahawa tidak mungkin untuk memasukkan semua ciri yang akan diperkenalkan dalam satu keluaran. Pendekatan konvensional adalah untuk mengeluarkan versi 6.0 dahulu, kemudian versi 6.1 selepas beberapa ketika, kemudian versi 6.2, versi 6.3, dan seterusnya.

Jawatankuasa Standard akhirnya memutuskan bahawa piawaian itu akan dikeluarkan secara rasmi sekali setiap bulan Jun sebagai versi rasmi tahun itu. Pada masa berikutnya, perubahan akan dibuat berdasarkan versi ini Sehingga Jun tahun depan, draf itu akan menjadi versi tahun baharu. Dengan cara ini, nombor versi sebelumnya tidak diperlukan, hanya setem tahun.

Oleh itu, ES6 ialah istilah sejarah dan istilah umum Ia bermaksud piawaian JavaScript generasi seterusnya selepas versi 5.1, meliputi ES2015, ES2016, ES2017, dsb., manakala ES2015 ialah nama rasmi, secara khusus merujuk. kepada Versi rasmi standard bahasa yang dikeluarkan pada tahun itu.

ECMAScript Sejarah

Pada November 1996, Netscape menyerahkan Js kepada organisasi piawaian antarabangsa ECMA Pada masa itu, bahasa itu boleh menjadi piawaian antarabangsa.
Pada tahun 1997, ECMAScript versi 1.0 telah dilancarkan. (Pada tahun ini, ECMA mengeluarkan versi pertama Dokumen Standard No. 262 (ECMA-262), yang menetapkan standard untuk bahasa skrip pelayar dan memanggil bahasa ini ECMAScript, iaitu versi ES1.0.)
1998 Pada tahun Jun tahun ini, ES versi 2.0 telah dikeluarkan.
Pada Disember 1999, ES versi 3.0 telah dikeluarkan dan menjadi standard biasa untuk JS dan menerima sokongan yang meluas.
Pada Oktober 2007, draf versi 4.0 ES telah dikeluarkan.
Pada Julai 2008, disebabkan perbezaan yang terlalu besar antara pihak, ECMA memutuskan untuk menamatkan pembangunan ES 4.0. Sebaliknya, satu set kecil penambahbaikan pada fungsi sedia ada akan dikeluarkan sebagai ES 3.1. Walau bagaimanapun, ia telah dinamakan semula ES versi 5.0 sejurus selepas kembali;
Pada Disember 2009, ES versi 5.0 telah dikeluarkan secara rasmi.

Pada Jun 2011, ES versi 5.1 telah dikeluarkan dan menjadi standard antarabangsa ISO (ISO/IEC 16262:2011).
Pada Mac 2013, draf ES 6 telah tamat dan tiada ciri baharu akan ditambah.
Pada Disember 2013, draf ES 6 telah dikeluarkan.
Pada bulan Jun 2015, versi rasmi ES 6 telah dikeluarkan.

Mulai sekarang, versi rasmi akan dikeluarkan pada bulan Jun setiap tahun, jadi versi terkini ialah ES12 dikeluarkan pada Jun 2021.

Ciri baharu dalam setiap versi ECMAScript

Ciri baharu dalam ES6

1

ES6 memperkenalkan kelas, menjadikan pengaturcaraan berorientasikan objek dalam JavaScript lebih mudah dan lebih mudah difahami.

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

2. Pemodulasian

ES5 menyokong pemodulatan asli, dan modul ditambah sebagai komponen penting dalam ES6. Fungsi modul terutamanya terdiri daripada eksport dan import. Setiap modul mempunyai skop tersendiri Hubungan panggilan bersama antara modul adalah untuk menentukan antara muka yang didedahkan oleh modul melalui eksport, dan untuk merujuk antara muka yang disediakan oleh modul lain melalui import. Pada masa yang sama, ruang nama dicipta untuk modul untuk mengelakkan konflik penamaan fungsi.

export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

3. Fungsi Anak panah

=> Fungsi anak panah berkongsi perkara yang sama dengan kod yang mengelilinginya, yang boleh membantu anda menyelesaikan masalah penunjuk ini. Contohnya, var self = this; atau var that =ini ialah corak yang merujuk kepada sekeliling ini. Tetapi dengan =>, corak ini tidak diperlukan lagi.

() => 1

v => v+1

(a,b) => a+b

() => {
  alert("foo");
}

e => {
  if (e == 0){
    return 0;
  }
  return 1000/e;
}

4. Rentetan templat

ES6 menyokong rentetan templat, menjadikan penyambungan rentetan lebih ringkas dan intuitif.

//不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
//使用模板字符串
var name = `Your name is ${first} ${last}.`

Dalam ES6, penggabungan rentetan boleh diselesaikan melalui ${}, cuma letakkan pembolehubah dalam kurungan kerinting.

5. Memusnahkan tugasan

Memusnahkan sintaks tugasan ialah ungkapan JavaScript yang boleh mengekstrak nilai dengan mudah daripada tatasusunan atau objek dan menetapkannya kepada pembolehubah yang ditentukan.

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

6. Operator sambungan

Operator sambungan... boleh mengembangkan ungkapan tatasusunan atau rentetan pada peringkat sintaksis semasa pembinaan panggilan fungsi/tatasusunan; mengembangkan ungkapan objek dalam istilah nilai kunci semasa membina objek.

//在函数调用时使用延展操作符
function sum(x, y, z) {
  return x + y + z
}
const numbers = [1, 2, 3]
console.log(sum(...numbers))

//数组
const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)

7. Promise

Promise ialah penyelesaian untuk pengaturcaraan tak segerak, yang lebih elegan daripada panggilan balik penyelesaian tradisional. Ia pertama kali dicadangkan dan dilaksanakan oleh komuniti ES6 menulisnya ke dalam standard bahasa, menyatukan penggunaannya, dan menyediakan objek Promise secara asli.

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

8 let and const

Sebelum ini, JS tidak mempunyai skop peringkat blok, const dan let mengisi jurang yang mudah ini, const dan biarkan Mereka berada. semua skop peringkat blok.

function f() {
  {
    let x;
    {
      // 正确
      const x = "sneaky";
      // 错误，常量const
      x = "foo";
    }
    // 错误，已经声明过的变量
    let x = "inner";
  }
}

Ciri baharu ES7

1 Array.prototype.includes()

includes() function Digunakan. untuk menentukan sama ada tatasusunan mengandungi nilai yang ditentukan Jika ia, ia mengembalikan benar, jika tidak ia mengembalikan palsu.

[1, 2, 3].includes(-1)                   // false
[1, 2, 3].includes(1)                    // true
[1, 2, 3].includes(3, 4)                 // false
[1, 2, 3].includes(3, 3)                 // false
[1, 2, NaN].includes(NaN)                // true
['foo', 'bar', 'quux'].includes('foo')   // true
['foo', 'bar', 'quux'].includes('norf')  // false

2. Operator eksponen

Operator eksponen ** telah diperkenalkan dalam ES7, ** mempunyai setara dengan Math.pow(…) Kira hasilnya . Gunakan operator eksponen **, sama seperti , - dan operator lain.

//之前的版本
Math.pow(5, 2)

// ES7
5 ** 2
// 5 ** 2 === 5 * 5

Ciri baharu ES8

1 async/menunggu

Fungsi tak segerak mengembalikan objek AsyncFunction dan lulus. Gelung acara beroperasi secara tidak segerak.

const resolveAfter3Seconds = function() {
  console.log('starting 3 second promsise')
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(3)
      console.log('done in 3 seconds')  
    }, 3000)  
  })  
}

const resolveAfter1Second = function() {
  console.log('starting 1 second promise')
  return new Promise(resolve => {
      setTimeout(function() {
        resolve(1) 
        console.log('done, in 1 second') 
      }, 1000)
  })  
}

const sequentialStart = async function() {
  console.log('***SEQUENTIAL START***')
  const one = await resolveAfter1Second()
  const three = await resolveAfter3Seconds()

  console.log(one)
  console.log(three)
}

sequentialStart();

2. Object.values()

Object.values() ialah fungsi baharu yang serupa dengan Object.keys(), tetapi What dikembalikan ialah semua nilai sifat Objek sendiri, tidak termasuk nilai yang diwarisi.

const obj = { a: 1, b: 2, c: 3 }
//不使用 Object.values()
const vals = Object.keys(obj).map((key) => obj[key])
console.log(vals)
//使用 Object.values()
const values = Object.values(obj1)
console.log(values)

Seperti yang dapat dilihat daripada kod di atas, Object.values() menyelamatkan kita daripada langkah melintasi kunci dan mendapatkan nilai berdasarkan kekunci ini.

3. Object.entry()

Fungsi Object.entry() mengembalikan tatasusunan pasangan nilai kunci bagi sifat terhitung objek yang diberikan itu sendiri.

//不使用 Object.entries()
Object.keys(obj).forEach((key) => {
  console.log('key:' + key + ' value:' + obj[key])
})
//key:b value:2

//使用 Object.entries()
for (let [key, value] of Object.entries(obj1)) {
  console.log(`key: ${key} value:${value}`)
}
//key:b value:2

4. Pelapik rentetan

Dalam ES8, String telah menambah dua fungsi contoh baharu, String.prototype.padStart dan String.prototype.padEnd, membenarkan An rentetan kosong atau rentetan lain ditambahkan pada permulaan atau penghujung rentetan asal.

console.log('0.0'.padStart(4, '10'))
console.log('0.0'.padStart(20))

console.log('0.0'.padEnd(4, '0'))
console.log('0.0'.padEnd(10, '0'))

5. Jika tiada atribut diri, mengembalikan objek kosong.

Ciri baharu ES9

let myObj = {
  property1: 'foo',
  property2: 'bar',
  property3: 42,
  property4: () => console.log('prop4')  
}

Object.getOwnPropertyDescriptors(myObj)

/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
  property1: {value: "foo", writable: true, enumerable: true, configurable: true}
  property2: {value: "bar", writable: true, enumerable: true, configurable: true}
  property3: {value: 42, writable: true, enumerable: true, configurable: true}
  property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
  __proto__: Object
*/

1. iterator tak segerak

ES9 memperkenalkan iterator tak segerak ), await boleh digunakan dengan for...of loops untuk menjalankan operasi tak segerak secara bersiri.

2 Promise.finally()

//如果在 async/await中使用循环中去调用异步函数，则不会正常执行
async function demo(arr) {
  for (let i of arr) {
    await handleDo(i);
  }
}

//ES9
async function demo(arr) {
  for await (let i of arr) {
    handleDo(i);
  }
}

Rantai panggilan Promise sama ada berjaya mencapai .then() terakhir atau gagal mencetuskan .catch() . Dalam sesetengah kes, anda ingin menjalankan kod yang sama tanpa mengira sama ada Promise berjalan dengan jayanya atau gagal, seperti mengosongkan, memadamkan perbualan, menutup sambungan pangkalan data, dsb.

.finally() membolehkan anda menentukan logik akhir.

3. Atribut Rehat/Sebarkan

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {})
}

Rehat: sifat baki tugasan pemusnah objek.

Spread: Atribut sebaran tugasan memusnahkan objek.

Ciri baharu dalam ES10

//Rest
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}

//Spread
let info = {fname, lname, ...rest};
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }

1 kaedah flat() Array dan kaedah flatMap()

The. kaedah flat() merentasi tatasusunan secara rekursif mengikut kedalaman yang ditentukan, dan menggabungkan semua elemen dengan unsur-unsur dalam sub-tatasusunan yang dilalui ke dalam tatasusunan baharu dan mengembalikannya. Kaedah

flatMap() mula-mula memetakan setiap elemen menggunakan fungsi pemetaan dan kemudian memampatkan hasilnya ke dalam tatasusunan baharu. Ia hampir sama dengan memetakan dan merata dengan nilai kedalaman 1, tetapi flatMap biasanya lebih cekap sedikit apabila digabungkan menjadi satu kaedah.

2 kaedah trimStart() String dan kaedah trimEnd()

let arr = ['a', 'b', ['c', 'd']];
let flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

arr = ['a', , , 'b', ['c', 'd']];
flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]
console.log(arr.flat(Infinity));    // => [10, 20, 30]

分别去除字符串首尾空白字符

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

3、Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

而 Object.fromEntries() 则是 Object.entries() 的反转，Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

ES11新增特性

1、Promise.allSettled

Promise.all最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。

Promise.allSettled在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务 value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

2、String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll出现之前，通过在循环中调用 regexp.exec来获取所有匹配项信息（regexp需使用 /g 标志)。如果使用 matchAll，就可以不必使用 while 循环加 exec 方式（且正则表达式需使用／g标志）。使用 matchAll会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能。

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

ES12新增特性

1、Promise.any

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise。

const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});

2、逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&=，||=，??=）。

a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)

3、replaceAll

返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉。

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"

4、数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性。

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true

【相关推荐：javascript学习教程】

Atas ialah kandungan terperinci Apakah ciri yang ada pada ecmascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!