คุณบอกว่าใช้ ES6 ได้ แล้วรีบใช้!

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เริ่มต้นด้วยการเรียนรู้

"ถ้าคุณรู้วิธีใช้ ES6 ก็ใช้มัน!": นี่คือ "เสียงคำราม" ที่ผู้นำทำกับสมาชิกในทีมในระหว่างการตรวจสอบโค้ดเพราะเขาค้นพบหลายอย่าง ระหว่างการตรวจสอบโค้ด ควรใช้วิธีเขียน ES5 ไม่ได้หมายความว่าการเขียนใน ES5 จะไม่ได้ผลและจะมีข้อบกพร่องเกิดขึ้น

มันบังเอิญที่ผู้นำคนนี้มีเครื่องรางโค้ด เขาไม่พอใจกับสมาชิกที่มีประสบการณ์ในการเขียนโค้ดในระดับนี้มา 3 ถึง 5 ปีและเอาแต่บ่นเกี่ยวกับโค้ดนี้ อย่างไรก็ตาม ฉันรู้สึกว่าฉันยังคงได้ประโยชน์มากมายจากการร้องเรียนของเขา ดังนั้นฉันจึงบันทึกคำร้องเรียนของผู้นำและแบ่งปันให้กับเพื่อนนักขุด หากคุณคิดว่ามันมีประโยชน์ ก็ยกนิ้วให้พวกเขา หากมีข้อผิดพลาดหรือวิธีเขียนที่ดีกว่า คุณยินดีที่จะแสดงความคิดเห็น

PS: ไวยากรณ์ JS หลังจาก ES5 เรียกรวมกันว่า ES6! - -

1. Tucao เกี่ยวกับการรวบรวมค่า

Value เป็นเรื่องธรรมดามากในโปรแกรม เช่น การรับค่าจากอ็อบเจ็กต์ obj

const obj = {
    ก:1,
    ข:2,
    ค:3,
    จ:4,
    อ:5,
}

ทูเคา :

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

หรือ

const f = obj.a + obj.d;
const g = obj.c + obj.e;

Tucao: "คุณไม่สามารถใช้การกำหนดการทำลายล้างของ ES6 เพื่อรับค่าได้หรือไม่ การใช้โค้ด 5 บรรทัดในโค้ด 1 บรรทัดนั้นดีหรือไม่ เพียงใช้ชื่อวัตถุบวก ชื่อแอตทริบิวต์เพื่อรับค่า ถ้ามันโอเคถ้าชื่อวัตถุสั้น แต่ถ้ายาวมาก ชื่อวัตถุจะอยู่ทุกที่ในโค้ด "

การปรับปรุง :

const {a,b,c,d,e} = วัตถุ;
const ฉ = a + d;
const g = c + e;

ข้อโต้แย้ง

ไม่ใช่ว่าฉันไม่ได้ใช้การกำหนดการทำลายล้างของ ES6 แต่ชื่อแอตทริบิวต์ในวัตถุข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ไม่ใช่สิ่งที่ฉันต้องการ เพื่อให้ได้ค่าด้วยวิธีนี้ สร้างการมอบหมายการแวะผ่านอีกครั้ง

ดูเหมือน

ว่าความเข้าใจของคุณเกี่ยวกับการทำลายล้างและการมอบหมายงานของ ES6 ยังไม่เพียงพอ ถ้าชื่อของตัวแปรที่คุณต้องการสร้างไม่สอดคล้องกับชื่อคุณสมบัติของวัตถุ คุณสามารถเขียน:

const {a:a1} = obj;
console.log(a1); // 1

เพิ่มเติม

นั้นใช้งานง่าย แต่โปรดทราบว่าอ็อบเจ็กต์ที่ถูกทำลายนั้นไม่สามารถ undefined หรือ null มิฉะนั้นจะรายงานข้อผิดพลาด ดังนั้นวัตถุที่ทำลายโครงสร้างจะต้องได้รับค่าเริ่มต้น

const {a,b,c,d,e} = obj ||. {};

2. การร้องเรียนเกี่ยวกับการรวมข้อมูล

เช่น การรวมสองอาร์เรย์และการรวมสองวัตถุ

const = [1,2,3];
constข = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  ก:1,
-
const obj2 = {
  ข:1,
-
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

บ่นว่า

ตัวดำเนินการส่วนขยายของ ES6 ถูกลืมหรือไม่ และการรวมอาร์เรย์เข้าด้วยกันไม่ถือเป็นการขจัดข้อมูลซ้ำซ้อนหรือไม่

ปรับปรุง

const a = [1,2,3];
constข = [1,5,6];
const c = [...ชุดใหม่([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  ก:1,
-
const obj2 = {
  ข:1,
-
const obj = {...obj1,...obj2};//{a:1,b:1}

3. Tucao เกี่ยวกับการประกบสตริง

const name = 'Xiao Ming';
คะแนนคอนสตรัค = 59;
ให้ผลลัพธ์ = '';
ถ้า(คะแนน > 60){
  result = `${name} คะแนนสอบผ่าน`; 
}อื่น{
  result = `${name} สอบไม่ผ่าน`; 
}

การบ่นเกี่ยวกับ

การใช้เทมเพลตสตริง ES6 เช่นเดียวกับที่คุณทำ จะเป็นการดีกว่าที่จะไม่ใช้มัน คุณไม่รู้ว่าการดำเนินการใดที่สามารถทำได้ใน ${} ใน ${} คุณสามารถใส่นิพจน์ JavaScript ดำเนินการ และอ้างอิงคุณสมบัติของอ็อบเจ็กต์ได้

ปรับปรุง

ชื่อ const = 'Xiao Ming';
คะแนนคอนสตรัค = 59;
const result = `${name}${score > 60?''s test Score failed'}`;

4. ความคิดเห็นเกี่ยวกับเงื่อนไขการตัดสินใน if

(
    พิมพ์ == 1 ||
    พิมพ์ == 2 ||
    พิมพ์ == 3 ||
    พิมพ์ == 4 ||
-
   -
}

บ่นว่า

วิธี includes อาร์เรย์อาร์เรย์จะถูกใช้ใน ES6 หรือไม่?

ปรับปรุง

เงื่อนไข const = [1,2,3,4];

ถ้า ( เงื่อนไขรวม (ประเภท) ) {
   -
}

5. ข้อร้องเรียนเกี่ยวกับการค้นหารายการ

ในโครงการ ฟังก์ชั่นการค้นหาของรายการที่ไม่แบ่งหน้าบางรายการถูกนำมาใช้โดยส่วนหน้า โดยทั่วไป การค้นหาจะแบ่งออกเป็นการค้นหาที่แม่นยำและการค้นหาแบบคลุมเครือ การค้นหาเรียกอีกอย่างว่าการกรอง และโดยทั่วไปจะดำเนินการโดยใช้ filter

const = [1,2,3,4,5];
ผล const = a.filter( 
  รายการ =>{
    คืนสินค้า === 3
  -
)

บ่น

เกี่ยวกับการค้นหาแบบตรงทั้งหมด คุณจะไม่ใช้ find ใน ES6 ใช่ไหม คุณเข้าใจการปรับประสิทธิภาพให้เหมาะสมหรือไม่ หากพบรายการที่ตรงตามเงื่อนไขในวิธี find รายการนั้นจะไม่สำรวจอาร์เรย์ต่อไป

ปรับปรุง

const a = [1,2,3,4,5];
ผล const = a.find( 
  รายการ =>{
    คืนสินค้า === 3
  -
)

6. ข้อร้องเรียนเกี่ยวกับอาร์เรย์ที่แบนราบ

ในข้อมูล JSON ของแผนก ชื่อแอตทริบิวต์คือรหัสแผนก และค่าแอตทริบิวต์คือชุดอาร์เรย์ของรหัสสมาชิกแผนก ตอนนี้เราจำเป็นต้องแยกรหัสสมาชิกแผนกทั้งหมดลงในคอลเลกชันอาร์เรย์

const deps = {
'แผนกจัดซื้อ':[1,2,3],
'ฝ่ายบุคคล':[5,8,12],
'ฝ่ายธุรการ':[5,14,79],
'กระทรวงคมนาคม':[3,64,105],
-
ให้สมาชิก = [];
สำหรับ (ให้รายการเป็น deps){
    ค่า const = deps [รายการ];
    ถ้า (Array.isArray (ค่า)) {
        สมาชิก = [...สมาชิก,...ค่า]
    -
-
member = [...new Set(member)]

จำเป็นหรือไม่ที่จะต้องสำรวจเพื่อให้ได้ค่าแอ็ตทริบิวต์ทั้งหมดของอ็อบเจ็กต์

?

Object.values ​​​​ลืม? นอกจากนี้ยังมีกระบวนการทำให้ราบเรียบที่เกี่ยวข้องกับอาร์เรย์ด้วย ทำไมไม่ลองใช้วิธี flat ที่ ES6 เตรียมไว้ให้ล่ะ? วนซ้ำซ้อนวนให้แบน?

ปรับปรุง

const deps = {
    'แผนกจัดซื้อ':[1,2,3],
    'ฝ่ายบุคคล':[5,8,12],
    'ฝ่ายธุรการ':[5,14,79],
    'กระทรวงคมนาคม':[3,64,105],
-
la member = Object.values(deps).flat(Infinity);

Infinity ถูกใช้เป็นพารามิเตอร์ของ flat ดังนั้นจึงไม่จำเป็นต้องทราบขนาดของอาร์เรย์ที่แบน

เสริมว่า

วิธี flat ไม่รองรับเบราว์เซอร์ IE

7. Tucao เกี่ยวกับการรับค่าแอตทริบิวต์ของวัตถุ

const

name = obj && obj.name;

จะใช้ตัวดำเนินการลูกโซ่ทางเลือกใน ES6 หรือไม่

ปรับปรุง

const name = obj?.name;

8. ความคิดเห็นเกี่ยวกับการเพิ่มแอตทริบิวต์ของวัตถุ

เมื่อเพิ่มคุณลักษณะให้กับวัตถุ สิ่งที่ควรทำหากชื่อแอตทริบิวต์เปลี่ยนแปลงแบบไดนามิก

ให้ obj = {};
ให้ดัชนี = 1;
ให้คีย์ = `topic${index}`;
obj[key] = 'เนื้อหาหัวข้อ';

Tucao

เหตุใดเราจึงต้องสร้างตัวแปรเพิ่มเติม ฉันสงสัยว่านิพจน์สามารถใช้กับชื่อคุณสมบัติของวัตถุใน ES6 ได้หรือไม่

ปรับปรุง

ให้ obj = {};
ให้ดัชนี = 1;
obj[`topic${index}`] = 'เนื้อหาหัวข้อ';

9. การตัดสินว่ากล่องอินพุตไม่ว่างเปล่า

เมื่อประมวลผลธุรกิจที่เกี่ยวข้องกับกล่องอินพุต มักจะตัดสินว่ากล่องอินพุตไม่มีค่าอินพุต

ถ้า (ค่า !== ค่า null && !== ไม่ได้กำหนด && ค่า !== ''){
    -
}

คุณเคยได้ยินเกี่ยวกับตัวดำเนินการรวมค่า Null ใหม่ใน ES6 บ้างไหม คุณจำเป็นต้องเขียนเงื่อนไขมากมาย

หรือไม่

ถ้า((ค่า??'') !== ''){
  -
}

10. ข้อร้องเรียนเกี่ยวกับฟังก์ชันอะซิงโครนัส

ฟังก์ชันอะซิงโครนัสเป็นเรื่องปกติมากและมักนำไปใช้โดยใช้ Promise

const fn1 = () =>{
  คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
    setTimeout(() => {
      แก้ไข (1);
    }, 300);
  -
-
const fn2 = () =>{
  คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
    setTimeout(() => {
      แก้ไข (2);
    }, 600);
  -
-
const fn = () =>{
   fn1().แล้ว(res1 =>{
      console.log(res1); // 1
      fn2().แล้ว(res2 =>{
        console.log(res2)
      -
   -
}

คุณเรียก

ใช้ฟังก์ชันอะซิงโครนัสเช่นนี้ คุณจะไม่กลัวการเรียกกลับที่เลวร้าย!

ปรับปรุง

const fn = async () =>{
  const res1 = รอ fn1();
  const res2 = รอ fn2();
  console.log(res1); // 1
  console.log(res2);// 2
}

ภาคผนวก

: เมื่อทำการร้องขอพร้อมกัน คุณยังคงต้องใช้ Promise.all()

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);//[1,2]
   - 
}

หากมีคำขอเกิดขึ้นพร้อมกัน ตราบใดที่ฟังก์ชันอะซิงโครนัสฟังก์ชันใดฟังก์ชันหนึ่งเสร็จสมบูรณ์ ผลลัพธ์จะถูกส่งกลับ และต้องใช้ Promise.race()

11.

คุณสามารถหักล้างข้อร้องเรียนของผู้นำทั้ง 10 ข้อข้างต้นได้ หากการโต้แย้งของคุณสมเหตุสมผล ฉันจะหักล้างข้อร้องเรียนดังกล่าวให้คุณในการประชุมทบทวนโค้ดครั้งถัดไป

นอกจากนี้หากมีข้อผิดพลาดในเนื้อหาที่จัดไว้ข้างต้นโปรดแก้ไขในความคิดเห็นขอบคุณมาก

บทความนี้ทำซ้ำจาก: https://juejin.cn/post/7016520448204603423

ผู้แต่ง: Hongchen Lianxin

[คำแนะนำวิดีโอการสอนที่เกี่ยวข้อง: ส่วนหน้าของเว็บ]

ข้างต้นคือสิ่งที่คุณบอกว่าคุณสามารถใช้ ES6 ได้ จากนั้นใช้งานได้อย่างรวดเร็ว! สำหรับรายละเอียดเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ php Chinese!