Các chủ đề nâng cao trong javascript là gì?
JavaScript là một ngôn ngữ phức tạp. Nếu bạn là nhà phát triển JavaScript ở mọi cấp độ, điều quan trọng là phải hiểu các khái niệm cơ bản của nó. Bài viết này giải quyết 12 khái niệm quan trọng mà bất kỳ nhà phát triển JS nào cũng phải hiểu, nhưng không có cách nào trình bày toàn bộ những gì một nhà phát triển JS nên biết Show
Ghi chú. Nếu bạn thích bài viết này, xin hãy vỗ tay 👏 (hoặc 50. ) để giúp quảng bá Tôi sẽ liên tục cập nhật danh sách này trong kho lưu trữ Github có tên là JS Tips and Tidbits. Hãy đánh dấu sao ⭐ và chia sẻ nếu bạn muốn theo dõi cùng 1. Giá trị so với. Gán biến tham chiếuHiểu cách JavaScript gán cho các biến là nền tảng để viết JavaScript không có lỗi. Nếu bạn không hiểu điều này, bạn có thể dễ dàng viết mã làm thay đổi giá trị ngoài ý muốn JavaScript luôn gán các biến theo giá trị. Nhưng phần này rất quan trọng. khi giá trị được gán là một trong năm kiểu nguyên thủy của JavaScript (i. e. , thời gian ví dụ. Trong đoạn mã sau, let var1 = 'Chuỗi của tôi';let var2 = var1; var2 = 'Chuỗi mới của tôi'; bảng điều khiển. log(var1);// 'Chuỗi của tôi'console. log(var2);// 'Chuỗi mới của tôi' Hãy so sánh điều này với gán đối tượng hãy để var1 = { tên. 'Jim' }hãy để var2 = var1; var2. tên = 'John'; bảng điều khiển. nhật ký (var1); // { tên. 'John' }bảng điều khiển. nhật ký (var2); // { tên. 'John' } Người ta có thể thấy điều này có thể gây ra vấn đề như thế nào nếu bạn mong đợi hành vi như phép gán nguyên thủy. Điều này có thể trở nên đặc biệt xấu nếu bạn tạo một hàm vô tình thay đổi một đối tượng 2. đóng cửaĐóng cửa là một mẫu JavaScript quan trọng để cấp quyền truy cập riêng tư vào một biến. Trong ví dụ này, function createGreeter(lời chào) {return function(name) {console. log(lời chào + ', ' + tên);}} const sayXin chào = createGreeter('Xin chào');sayXin chào('Joe');// Xin chào, Joe Trong một tình huống thực tế hơn, bạn có thể hình dung một hàm ban đầu function api Connect(api Key) {function get(route) {return fetch(`${root}?key=${apiKey}`);} chức năng đăng (tuyến đường, thông số) {trả về tìm nạp (tuyến đường, trả lại { nhận, đăng }} const api = apiConnect('my-secret-key'); // Không cần thêm apiKey nữaapi. lấy ('http. //www. ví dụ. com/get-end');api. bài đăng ('http. //www. ví dụ. com/post-endpoint', { tên. 'Joe' }); 3. hủy diệtĐừng bị loại bỏ bởi việc phá hủy tham số JavaScript. Đó là một cách phổ biến để trích xuất rõ ràng các thuộc tính từ các đối tượng const obj = {tên. 'Joe', thức ăn. 'bánh ngọt'} const {tên, món ăn} = obj; bảng điều khiển. log(tên, món ăn);// 'Joe' 'bánh' Nếu bạn muốn trích xuất các thuộc tính dưới một tên khác, bạn có thể chỉ định chúng bằng định dạng sau const obj = {tên. 'Joe', thức ăn. 'bánh ngọt'} const { tên. myName, thức ăn. myFood } = obj; bảng điều khiển. log(Tên của tôi, Thức ăn của tôi);// 'Joe' 'bánh' Trong ví dụ sau, phá hủy được sử dụng để chuyển hoàn toàn đối tượng const người = {tên. 'Eddie', tuổi. 24} chức năng giới thiệu ({tên, tuổi}) {bảng điều khiển. log(`Tôi là ${name} và tôi là ${age} tuổi. `);} bảng điều khiển. log(introduce(person));// "Tôi là Eddie và tôi 24 tuổi. " 4. Cú pháp lây lanMột khái niệm JavaScript có thể khiến mọi người thất vọng nhưng tương đối đơn giản là toán tử trải rộng. Trong trường hợp sau, không thể áp dụng const mảng = [4, 6, -1, 3, 10, 4];const max = Toán học. tối đa (. mảng); bảng điều khiển. nhật ký (tối đa); // 10 5. Nghỉ Cú phápHãy nói về cú pháp nghỉ ngơi JavaScript. Bạn có thể sử dụng nó để đặt bất kỳ số lượng đối số nào được truyền cho một hàm vào một mảng hàm myFunc(. args) {bảng điều khiển. log(args[0] + args[1]);} myFunc(1, 2, 3, 4);// 3 6. Phương thức mảngCác phương thức mảng JavaScript thường có thể cung cấp cho bạn những cách tinh tế, đáng kinh ngạc để thực hiện chuyển đổi dữ liệu mà bạn cần. Là người đóng góp cho StackOverflow, tôi thường thấy các câu hỏi liên quan đến cách thao tác một mảng đối tượng theo cách này hay cách khác. Đây có xu hướng là trường hợp sử dụng hoàn hảo cho các phương thức mảng Tôi sẽ đề cập đến một số phương thức mảng khác nhau ở đây, được tổ chức bởi các phương thức tương tự đôi khi bị lẫn lộn. Danh sách này không phải là toàn diện. Tôi khuyến khích bạn xem xét và thực hành (tài liệu tham khảo JavaScript yêu thích của tôi) **map, filter, reduce**Có một số nhầm lẫn xung quanh các phương thức mảng JavaScript
const mảng = [1, 2, 3, 4, 5, 6];const ánh xạ = mảng. bản đồ(el => el + 20); bảng điều khiển. log(ánh xạ);// [21, 22, 23, 24, 25, 26]
const mảng = [1, 2, 3, 4, 5, 6];const lọc = mảng. bộ lọc (el => el === 2. el===4); bảng điều khiển. nhật ký (đã lọc); // [2, 4]
const mảng = [1, 2, 3, 4, 5, 6];const giảm = mảng. giảm ((tổng, hiện tại) => tổng + hiện tại); bảng điều khiển. nhật ký (giảm); // 21 **find, findIndex, indexOf**Các phương thức mảng
const mảng = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const found = mảng. tìm(el => el > 5); bảng điều khiển. nhật ký (tìm thấy); // 6 Một lần nữa, lưu ý rằng mặc dù mọi thứ sau
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];const foundIndex = arr. find Index(el => el === 'Frank'); bảng điều khiển. log(foundIndex);// 1
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];const foundIndex = arr. indexOf('Frank'); bảng điều khiển. log(foundIndex);// 1 **push, pop, shift, unshift**Có rất nhiều phương pháp mảng tuyệt vời để giúp thêm hoặc xóa các phần tử khỏi mảng theo cách được nhắm mục tiêu
để mảng = [1, 2, 3, 4];const đẩy = mảng. đẩy(5); bảng điều khiển. log(mảng);// [1, 2, 3, 4, 5] bảng điều khiển. nhật ký (được đẩy); // 5
let arr = [1, 2, 3, 4];const popped = arr. nhạc pop(); bảng điều khiển. log(mảng);// [1, 2, 3] bảng điều khiển. nhật ký (xuất hiện); // 4
let arr = [1, 2, 3, 4];const shift = arr. sự thay đổi(); bảng điều khiển. log(mảng);// [2, 3, 4] bảng điều khiển. nhật ký (đã dịch chuyển); // 1
let arr = [1, 2, 3, 4];const unshifted = arr. unshift(5, 6, 7); bảng điều khiển. log(arr);// [5, 6, 7, 1, 2, 3, 4] bảng điều khiển. nhật ký (không dịch chuyển); // 7 **splice, slice** Các phương thức này sửa đổi hoặc trả về các tập hợp con của mảng
Mẫu mã sau đây có thể được đọc là. tại vị trí let arr = ['a', 'c', 'd', 'e'];arr. mối nối (1, 0, 'b')
let arr = ['a', 'b', 'c', 'd', 'e'];const slice = arr. lát (2, 4); bảng điều khiển. log(sliced);// ['c', 'd']console. log(arr);// ['a', 'b', 'c', 'd', 'e'] loại
let arr = [1, 7, 3, -1, 5, 7, 2];const sorter = (firstEl, secondEl) => firstEl - secondEl;arr. sắp xếp(sắp xếp); bảng điều khiển. log(mảng);// [-1, 1, 2, 3, 5, 7, 7] Phew, bạn đã bắt được tất cả những thứ đó chưa? . Trên thực tế, tôi đã phải tham khảo tài liệu MDN rất nhiều khi viết bài này — và điều đó không sao cả. Chỉ cần biết loại phương pháp nào hiện có sẽ giúp bạn đạt được 95% 7. máy phát điệnĐừng sợ ________ 42. Hàm tạo chỉ định những gì function* helloer() {yield 'Xin chào';yield 'Bạn khỏe không?';yield 'Tạm biệt';} const chào = lời chào(); bảng điều khiển. nhật ký (chào. tiếp theo(). giá trị); // 'Xin chào'console. nhật ký (chào. tiếp theo(). value);// 'Bạn có khỏe không?'console. nhật ký (chào. tiếp theo(). giá trị); // 'Bye'console. nhật ký (chào. tiếp theo(). giá trị); // không xác định Và sử dụng trình tạo cho các giá trị vô hạn function* idCreator() {let i = 0;while (true)yield i++;} const ids = idCreator(); bảng điều khiển. nhật ký (id. tiếp theo(). giá trị); // 0 bảng điều khiển. nhật ký (id. tiếp theo(). giá trị); // 1 bảng điều khiển. nhật ký (id. tiếp theo(). giá trị); // 2 // v.v. 8. Toán tử nhận dạng (Number7) so với. Toán tử bình đẳng (Number8)Đảm bảo biết sự khác biệt giữa toán tử đồng nhất (________ 47) và toán tử đẳng thức (________ 48) trong JavaScript. Toán tử bảng điều khiển. log(0 == '0');// trueconsole. nhật ký (0 === '0'); // sai 9. So sánh đối tượngMột lỗi mà tôi thấy những người mới sử dụng JavaScript mắc phải là so sánh trực tiếp các đối tượng. Các biến đang trỏ đến các tham chiếu đến các đối tượng trong bộ nhớ, không phải chính các đối tượng đó. Một phương pháp để thực sự so sánh chúng là chuyển đổi các đối tượng thành chuỗi JSON. Điều này có một nhược điểm mặc dù. thứ tự thuộc tính đối tượng không được đảm bảo. Một cách an toàn hơn để so sánh các đối tượng là lấy trong thư viện chuyên so sánh đối tượng sâu (e. g. , ) Các đối tượng sau đây có vẻ giống nhau nhưng thực tế chúng trỏ đến các tham chiếu khác nhau const joe1 = {tên. 'Joe' };const joe2 = { tên. 'Joe' }; bảng điều khiển. nhật ký (joe1 === joe2); // sai Ngược lại, những điều sau đây đánh giá là đúng vì một đối tượng được đặt bằng đối tượng kia và do đó đang trỏ đến cùng một tham chiếu (chỉ có một đối tượng trong bộ nhớ) const joe1 = {tên. 'Joe' };const joe2 = joe1; bảng điều khiển. nhật ký (joe1 === joe2); // đúng Đảm bảo xem lại Giá trị so với. Phần tham khảo ở trên để hiểu đầy đủ về sự phân nhánh của việc đặt một biến bằng với một biến khác đang trỏ đến một tham chiếu đến một đối tượng trong bộ nhớ 10. Chức năng gọi lạiQuá nhiều người bị đe dọa bởi các chức năng gọi lại JavaScript. Chúng rất đơn giản, lấy ví dụ này. Hàm function myFunc(text, callback) {setTimeout(function() {callback(text);}, 2000);} myFunc('Xin chào thế giới. ', bảng điều khiển. log);// 'Xin chào thế giới. ' 11. lời hứaMột khi bạn hiểu các lệnh gọi lại JavaScript, bạn sẽ sớm thấy mình trong “địa ngục gọi lại” lồng nhau. ” Đây là nơi Lời hứa giúp đỡ. Gói logic không đồng bộ của bạn trong một Lời hứa và const myPromise = new Promise(function(res, rej) {setTimeout(function(){if (Toán. ngẫu nhiên() < 0. 9) {return res('Hoan hô. ');}return rej('Ồ không. ');}, 1000);}); lời hứa của tôi. sau đó (hàm (dữ liệu) {bảng điều khiển. log('Thành công. ' + dữ liệu);}). bắt (chức năng (err) {bảng điều khiển. nhật ký ('Lỗi. ' + sai);}); // Nếu Toán. ngẫu nhiên () trả về ít hơn 0. 9 mục sau được ghi lại. // "Thành công. hoan hô. "// Nếu Toán. ngẫu nhiên() trả về 0. 9 hoặc lớn hơn những điều sau đây được ghi lại. // "Lỗi. trên không. " 12. Không đồng bộ Đang chờKhi bạn hiểu rõ về các lời hứa JavaScript, bạn có thể thích const helloer = new Promise((res, rej) => {setTimeout(() => res('Xin chào thế giới. '), 2000);}) chức năng không đồng bộ myFunc() {const chào = chờ chào; bảng điều khiển. nhật ký (lời chào);} myFunc();// 'Xin chào thế giới. ' Phần kết luậnNếu bạn không biết bất kỳ khái niệm nào trong số 12 khái niệm này, thì có lẽ bạn đã nâng cao ít nhất một chút kiến thức về JavaScript của mình. Và nếu bạn biết tất cả, thì hy vọng đây là cơ hội để thực hành và nâng cao kiến thức của bạn. Những khái niệm nào khác mà bạn nghĩ là quan trọng? Chủ đề khó nhất trong JavaScript là gì?JavaScript không đồng bộ (hứa hẹn, gọi lại, không đồng bộ/chờ đợi) Đóng cửa. Vòng lặp sự kiện. đệ quy.
Chủ đề nào quan trọng trong JavaScript?10 khái niệm JavaScript năm 2021 giúp kiếm việc làm . 10) Giao tiếp không đồng bộ. . 9) Tạo và sửa đổi Dom. . 8) Vòng lặp, Vòng lặp, Vòng lặp, Vòng lặp. . 7) Gỡ lỗi công cụ dành cho nhà phát triển. . 6) Phạm vi. . 5) Hàm và lời gọi hàm. . 4) Câu lệnh điều kiện. . 3) Sự kiện và Xử lý sự kiện Có bao nhiêu chủ đề trong JavaScript?Mặc dù 16 khái niệm ghi chú bên dưới không phức tạp cũng không khó, nhưng bạn sẽ hiểu chúng tốt nhất nếu bạn đã biết ít nhất một số JavaScript cơ bản. Mười sáu khái niệm mà mọi nhà phát triển JavaScript hiện đại nên biết rõ. Các đối tượng JavaScript chi tiết. Nguyên mẫu JavaScript bằng ngôn ngữ đơn giản, chi tiết.
Tôi có thể học JavaScript nâng cao ở đâu?Dưới đây là một số hướng dẫn giúp bạn bắt đầu. . W3schools học viện mật mã Học JS JavaScript. thông tin hướng dẫn điểm Con chó HTML Hướng dẫn JavaScript của Mozilla JavaScript cho mèo |