Artikel ini akan mengajar anda cara menggunakan ES6 yang paling biasa digunakan

Artikel ini akan bercakap tentang ES6 dengan anda, dan anda akan mengambil masa 30 minit untuk menguasai ES6 yang paling biasa digunakan Jika anda tidak mempelajarinya, adakah anda menunggu untuk dibunuh?

1 Mengenai ES6

Cara terbaik untuk memahami teknologi atau bahasa ialah mengetahui Apa. bolehkah ia melakukannya?

ES6 Ia adalah spesifikasi piawai untuk bahasa skrip yang dirumuskan oleh ECMA International Organization for Standardization

Jadi mengapa ia muncul?

Kelahiran setiap standard bermakna peningkatan bahasa dan peningkatan fungsi, iaitu, dengan perkembangan zaman, beberapa kelemahan bahasa JavaScript tidak lagi memenuhi keperluan; keperluan perusahaan dan pemaju. [Cadangan berkaitan: Tutorial pembelajaran javascript]

Contohnya:

• Ciri promosi berubah-ubah meningkatkan ketidakpastian masa jalan program
• Sintaks Juga longgar

dan ES6 Tujuan standard baharu ialah:

untuk membolehkan JS digunakan untuk membangunkan aplikasi web berskala besar dan menjadi peringkat perusahaan bahasa pembangunan

Bahasa pembangunan peringkat perusahaan adalah: sesuai untuk pembangunan modular dan mempunyai pengurusan pergantungan yang baik

Kemudian, mari luangkan sedikit masa untuk mempelajari pembangunan yang biasa digunakan dan temuduga yang popular ES6 ?

2. Rentetan templat ES6

Sebelum ada rentetan templat, kami biasanya menyambung pembolehubah rentetan seperti ini

let a = '小明'

let b = '?'

let c = a + '爱吃' + b    // 小明爱吃?

Dan kini kami mempunyai lebih banyak kaedah rentetan templat yang disediakan oleh ES6

let a = '小明'

let b = '?'

let c = ` ${a} 爱吃 ${b}`    // 小明爱吃?

3 ES6 menentukan sama ada rentetan mengandungi nilai tertentu ​​

adalah yang paling biasa digunakan dalam pembangunan. Saya tidak akan menerangkannya terlalu banyak. Saya akan menyenaraikan semua kaedah yang biasa digunakan dan pelajar boleh memilihnya untuk diri mereka sendiri 🎜>

1. Kaedah indexOf()

mengembalikan kedudukan di mana nilai rentetan yang ditentukan mula-mula muncul dalam rentetan

Jika nilai rentetan yang hendak diambil tidak muncul , kaedah ini mengembalikan -1

let str = '?????'

console.log( str.indexOf('?') != -1 );   // false

2 termasuk()

mengembalikan nilai Boolean yang menunjukkan sama ada rentetan parameter

. 3. startsWith()

let str = '?????'

str.includes('?') ? console.log( true ) : console.log( false )    // true

digunakan untuk menentukan sama ada rentetan semasa bermula dengan nilai lain yang diberikan dan mengembalikan benar atau salah mengikut keputusan penghakiman

4. endsWith()

参数：

str.startsWith( searchString , [position])

searchString : 要搜索的值

position: 在 str 中搜索 searchString 的开始位置，默认值为 0


例子：

let str = "前端,熊猫开发团队"; 

console.log( str.startsWith("前端") );              // true 
console.log( str.startsWith("熊猫开发团队") );      // false 
console.log( str.startsWith("熊猫开发团队", 3) );   // true

digunakan untuk menilai sama ada rentetan berakhir dengan nilai yang diberikan dan mengembalikan benar atau salah mengikut keputusan penghakiman

let str = "熊猫开发团队"; 

console.log( str.endsWith("队") );              // true

4 Fungsi Anak Panah ES6

Kemunculan fungsi anak panah memudahkan takrifan fungsi dan menjadikan kod lebih ringkas, menghapuskan keperluan untuk fungsi kata kunci

Tetapi kita juga harus memberi perhatian kepada batasan fungsi anak panah, dan fungsi anak panah itu sendiri tidak mempunyai ini

, dan

ini menunjuk ke induk Kelemahan:

Fungsi anak panah tidak mempunyai prototaip

prototaip
• , jadi fungsi anak panah tidak mempunyai

  ini menunjuk ke

  fungsi anak panah tidak mencipta sendiri
ini
• , jika terdapat fungsi biasa pertama di lapisan luar, ia akan mewarisi

  ini

  Tiada fungsi dalam lapisan luar fungsi anak panah, hanya dalam mod dan mod tidak ketat,
ini
• akan menghala ke

  tetingkap objek global

  Tulisan asas:

//没有参数，写空括号
let getTitle = () => {
    return '熊猫开发团队'
};

//只有一个参数，可以省去参数括号
let getTitle = title => {
    return title
};

//如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中
let getTitle = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}

5 ungkapan objek ES6

Jika sifat dan nilai objek adalah sama, anda boleh meninggalkan menulis nilai apabila menggunakan semula

let a = '?';
let b = '?';

const obj1 = {
    a: a,
    b: b,
}

const obj2 = {
    a,
    b,
}

6 adalah untuk menentukan sama ada dua nilai ​​sama

Selain yang paling biasa digunakan dan

digunakan untuk membandingkan keputusan dua nilai,

ES6 === Terdapat yang baharu == 

Object.is(val1,val2)

console.log( Object.is(88, 88) )                // true
console.log( Object.is('熊猫', '?') )         // false

7 ES6 Object.assign() Salin objek

let obj = {};

Object.assign( obj, { name: '熊猫' } );

console.log( obj )    // { name: '熊猫' }

8 -skop peringkat

Pertama sekali, kita perlu faham apa itu skop?

Skop ialah julat di mana pembolehubah boleh digunakan

Sebelum tiada

ES6

's

let, hanya ada var Skop global dan skop fungsi dan skop peringkat blok sebenarnya bermaksud (blok kod), dan pembolehubah hanya sah dalam

{}{}

Kata kunci

var

{
  let a = '?️?️';
  var b = '1️⃣2️⃣';
  
  console.log( a )   a // '?️?️'
}

console.log( a )   a // ReferenceError: a is not defined.
console.log( b )   b // '1️⃣2️⃣'

digunakan di atas untuk menentukan pembolehubah b dalam blok, yang boleh diakses secara global

Tetapi dalam senario aplikasi sebenar, kami akan bimbang tentang kebocoran pembolehubah atau nama pendua Jika kita hanya mahu pembolehubah ini boleh diakses dalam blok semasa, kita perlu menggunakan kata kunci let

9. Operator pemusnah ES6

Sebagai contoh, jika anda mentakrifkan tatasusunan arr

, sebelum

ES6 menyahbina tatasusunan, kami boleh menggunakan arr[0] Untuk mengakses bahagian dalam tatasusunanDan kini, kami mempunyai lebih banyak cara

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

可能有的同学会问了，既然 ES6 有解构数组，那有解构对象吗 ?

那你往下看

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

十. ES6 展开操作符

直接看代码啦

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊猫' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊猫' , job:'前端'}

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Artikel ini akan mengajar anda cara menggunakan ES6 yang paling biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!