Theo nghĩa javascript

Tiêu đề bài viết là từ một câu hỏi tôi được yêu cầu trả lời trên Quora. Dưới đây, là nỗ lực của tôi để giải thích ba dấu chấm làm gì trong JavaScript. Hy vọng rằng điều này sẽ loại bỏ sương mù xung quanh khái niệm này, cho những người sẽ tìm thấy bài viết này trong tương lai và có cùng câu hỏi

cập nhật

1. Đã thêm cách sử dụng rõ ràng hơn của

   const bill = {
     ...adrian,
     fullName: 'Bill Gates',
     website: '//microsoft.com'
   };
   

   5. Cảm ơn @gabriel đã bình luận và cung cấp phản hồi
2. Đã thêm phần tài nguyên với các liên kết hữu ích

Toán tử trải rộng mảng/đối tượng

Giả sử bạn có đối tượng sau

const adrian = {
  fullName: 'Adrian Oprea',
  occupation: 'Software developer',
  age: 31,
  website: '//oprea.rocks'
};

Giả sử bạn muốn tạo một đối tượng mới [người] có tên và trang web khác, nhưng cùng nghề nghiệp và độ tuổi

Bạn có thể làm điều này bằng cách chỉ xác định các thuộc tính bạn muốn và sử dụng toán tử trải cho phần còn lại, như bên dưới

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

Đoạn mã trên làm gì, là trải rộng trên đối tượng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

6 và lấy tất cả các thuộc tính của nó, sau đó ghi đè lên các thuộc tính hiện có bằng các thuộc tính mà chúng ta đang chuyển qua. Nó sao chép các thuộc tính của đối tượng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

6, sang đối tượng mới được tạo, sau đó ghi đè rõ ràng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

8 và

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

0. Hãy nghĩ về điều lan rộng này như trích xuất từng thuộc tính riêng lẻ và chuyển chúng sang đối tượng mới

Trong trường hợp này, vì chúng tôi đã chỉ định các thuộc tính

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

1 và

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

2 sau khi toán tử trải rộng được kích hoạt, công cụ JavaScript đủ thông minh để biết rằng chúng tôi muốn ghi đè lên các giá trị ban đầu của các thuộc tính đó đến từ đối tượng ban đầu

Đó là một tình huống tương tự với mảng. Ngoại trừ việc thay vì trải rộng trên các khóa và giá trị, toán tử sẽ trải rộng các chỉ mục và giá trị. Không giống như trải rộng đối tượng, nơi bạn sẽ không có các thuộc tính trùng lặp vì đó chỉ là cách các đối tượng JavaScript hoạt động [bạn không thể có một đối tượng có hai thuộc tính

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

1], với các mảng, bạn có thể có các giá trị trùng lặp, nếu bạn định triển khai điều gì đó tương tự

Điều này có nghĩa là mã bên dưới sẽ dẫn đến việc bạn có một mảng có các phần tử trùng lặp

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // this will be [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

Hãy nghĩ về nó như một sự thay thế cho Array. nguyên mẫu. concat

Toán tử nghỉ ngơi

Khi được sử dụng trong chữ ký của một hàm, trong đó các đối số của hàm nên thay thế hoàn toàn các đối số hoặc bên cạnh các đối số của hàm, dấu ba chấm còn được gọi là toán tử còn lại

Khi nó được sử dụng như vậy, toán tử còn lại cho phép nhà phát triển tạo các hàm có thể nhận số lượng đối số không xác định, còn được gọi là các hàm của biến arity hoặc variadic functions

Đây là ví dụ đơn giản nhất của một chức năng như vậy. Giả sử bạn muốn tạo một hàm tính tổng tất cả các đối số của nó. Lưu ý rằng đó không phải là tổng của hai, ba hoặc bốn số mà là tổng của tất cả các số mà hàm sẽ nhận làm đối số

Đây là một triển khai ngây thơ, sử dụng toán tử còn lại

function sum[...numbers] {
	return numbers.reduce[[accumulator, current] => {
		return accumulator += current;
	}];
};
 
sum[1,2] // 3
sum[1,2,3,4,5] // 15

Giải thích đơn giản nhất là toán tử nghỉ lấy các đối số mà một hàm nhận được và đưa chúng vào một mảng thực mà sau này bạn có thể sử dụng

Bạn có thể lập luận rằng bạn có thể làm điều này bằng cách yêu cầu người dùng chuyển một dãy số. Điều đó có thể thực hiện được về mặt kỹ thuật nhưng UX kém cho API của bạn, vì người dùng muốn gọi một hàm tính tổng với các số đơn giản, không phải là một danh sách các số

Bạn cũng có thể lập luận rằng bạn có thể sử dụng mảng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

4. Điều đó cũng đúng nhưng hãy cẩn thận,

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

4 không phải là một mảng thực mà là một đối tượng giống như mảng [một đối tượng có thuộc tính độ dài]. Nó thực sự trông như thế này, đối với lệnh gọi đầu tiên của hàm tổng, trong ví dụ trước

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

0

Để thao tác đối tượng này và sử dụng các phương thức mảng trên nó, chẳng hạn như rút gọn, từ ví dụ trước của tôi, bạn phải thực hiện điều

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

5

Đây là chức năng trước đó được viết bằng cách sử dụng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

7

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

2

Mã này hoạt động giống như phiên bản trải rộng nhưng có một số khác biệt lớn. Đối với người mới bắt đầu, không thể tối ưu hóa trình biên dịch V8. chuyển đối tượng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

4 tới hầu hết các chức năng sẽ gây rò rỉ do răng cưa. Các đối số là một đối tượng và sẽ được truyền bằng tham chiếu và vì vậy V8 không thể xác định loại và hình dạng của các phần tử bên trong đối tượng

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
  website: '//microsoft.com'
};

4, vì chúng có thể bị ghi đè bởi các hàm mà chúng được truyền vào

Vấn đề lớn nhất là tôi đã từng tự làm. Nó rất đơn giản để viết. Các phiên bản an toàn hơn liên quan đến việc tạo mảng tại chỗ, kém thanh lịch hơn

Điểm mấu chốt là mã ở trên chỉ là mã thông minh dễ gây nhầm lẫn cho các đồng nghiệp cấp dưới của bạn. Đừng làm điều đó. Bạn không cần tìm đâu xa ngoài Mạng nhà phát triển Mozilla để có các tùy chọn

Đây phải là mọi thứ bạn cần biết để làm việc hiệu quả với toán tử còn lại/lây lan trong JavaScript

Nếu bạn có bất kỳ lời khuyên nào về cách cải thiện bài viết hoặc bạn cần một số trợ giúp xoay quanh khái niệm này, hãy để lại nhận xét bên dưới

Nghĩ thoáng ra

Adrian

Tài nguyên

• ngăn xếp chồng lên nhau. tối ưu hóa javascript V8 và "rò rỉ đối số"
• Tài liệu web MDN. Các tính năng JavaScript không dùng nữa và lỗi thời

tín dụng hình ảnh. Bởi Otter GFDL hoặc CC-BY-SA-3. 0, từ Wikimedia Commons

Hãy sửa điểm Core Web Vitals của bạn

Nếu bạn đang gặp sự cố với KPI trải nghiệm trang mới của Google và không muốn làm hỏng thứ hạng SEO mà bạn đã xây dựng trong nhiều năm, hãy cùng nhau khắc phục Core Web Vitals cho trang web của bạn

'$' trong JavaScript là gì?

$ đại diện cho Hàm jQuery và thực sự là bí danh viết tắt của jQuery . [Không giống như hầu hết các ngôn ngữ, biểu tượng $ không được đặt trước và có thể được sử dụng làm tên biến. ] Nó thường được sử dụng như một bộ chọn [i. e. một hàm trả về một tập hợp các phần tử được tìm thấy trong DOM].

3 dấu chấm có nghĩa là gì trong JavaScript?

[ba dấu chấm trong JavaScript] được gọi là Cú pháp trải hoặc Toán tử trải . Điều này cho phép một iterable chẳng hạn như một biểu thức mảng hoặc chuỗi được mở rộng hoặc một biểu thức đối tượng được mở rộng bất cứ nơi nào được đặt.

~~ trong JavaScript nghĩa là gì?

Khóa học JavaScript toàn ngăn xếp hoàn chỉnh. Toán tử “dấu ngã kép” [~~] là một toán tử double NOT Bitwise . Sử dụng nó để thay thế cho môn Toán. floor[], vì nó nhanh hơn.

Tại sao. có nghĩa là hoặc trong JavaScript?

Hợp logic OR [. ] [phân tách logic] cho một tập hợp toán hạng là true khi và chỉ khi một hoặc nhiều toán hạng của nó là true . Nó thường được sử dụng với các giá trị boolean [logic]. Khi có, nó trả về giá trị Boolean.