Trong hướng dẫn này, hãy tìm hiểu cách nối tất cả các chuỗi trong một mảng trong JavaScript bằng phương thức join (), concat () cũng như toán tử +, với điểm chuẩn hiệu suất có tính đến một số trường hợp.

Bạn đang xem : mảng chuỗi kết hợp javascript

Dữ liệu có nhiều dạng – và danh sách là một dạng rất phổ biến. Nối các chuỗi là một nhiệm vụ phổ biến và có một số cách để thực hiện.

Theo cách tương tự, việc nối các chuỗi trong một mảng được xây dựng dựa trên nhiệm vụ đó, cho mỗi chuỗi trong mảng đó. Tuy nhiên, có một phương pháp rất hữu ích khác mà chúng tôi có thể sử dụng – phương thức join () tự động hóa quá trình này một cách dễ dàng và liền mạch.

Trong hướng dẫn này, chúng ta sẽ xem xét cách nối tất cả các chuỗi trong một mảng, sau đó đánh giá hiệu suất của tất cả các phương pháp.

Array.prototype.join ()

Cách dễ nhất để nối tất cả các phần tử trong một mảng thành một là phương thức join () của lớp Array . Nó nối tất cả các phần tử thành một chuỗi với dấu phân cách tùy chọn đã cho.

Nếu bạn bỏ qua dấu phân cách – nó được đặt thành dấu phẩy (, ):

  

let

platonicSolids = [

'Tetrahedron'

,

'Khối lập phương'

,

'Khối bát diện'

,

'Khối đa diện'

,

'Khối đa diện'

];

let

joinWithDefaultDelimiter = platonicSolids.join ();

let

joinWithDelimiter = platonicSolids.join (

''

);

let

joinWithUnderscore = platonicSolids.join (

'_'

);

console

.log (joinWithDefaultDelimiter);

console

.log (joinWithDelimiter);

console

.log (joinWithUnderscore);

Điều này dẫn đến:

  Khối tứ diện, Khối lập phương, Khối bát diện, Khối Dodecahedron, Khối Icosahedron
Khối tứ diệnCubeOctahedronDodecahedronIcosahedron
Tetrahedron_Cube_Octahedron_Dodecahedron_Icosahedron
 

Đây là một cách tuyệt vời để tạo mục nhập từ các đối tượng cho tệp CSV – hãy xác định một đối tượng đơn giản với một vài trường và join () nó thành một chuỗi có định dạng CSV:

  

const

book = {

thể loại

:

" Khoa học Phổ thông "

,

name

:

" Vũ trụ Toán học của chúng ta "

,

tác giả

:

"Max Tegmark"

};

let

csvString =

Object

.keys (book) .map (

field

= & gt;

book [field]). join ();

bảng điều khiển

.log (csvString);

Bằng cách này, chúng tôi có thể dễ dàng chuyển đổi một đối tượng JavaScript thành một chuỗi có định dạng CSV, với các giá trị trường của nó được kết hợp với nhau:

  Khoa học Phổ thông, Vũ trụ Toán học của chúng ta, Max Tegmark
 

String.concat ()

Hàm concat () là hàm đơn giản – nó nối hai chuỗi. Với một mảng các mục nhập, chúng ta có thể chỉ cần lặp qua nó và concat () mỗi mục nhập vào một chuỗi trống và trả về:

  

let

platonicSolids = [

'Tetrahedron'

,

'Khối lập phương'

,

'Khối bát diện'

,

'Khối đa diện'

,

'Khối đa diện'

];

let

result =

''

;

cho

(

let

i =

0

; i & lt; platonicSolids.length; i ++) { result = result.concat (platonicSolids [i]); }

bảng điều khiển

.log (kết quả);

Hãy nhớ rằng các chuỗi là bất biến và chúng ta phải gán kết quả của phép toán concat () cho một biến tham chiếu.

Kết quả là:

  TetrahedronCubeOctahedronDodecahedronIcosahedron
 

Bạn cũng có thể thêm bất kỳ dấu phân tách nào tại đây, chỉ cần nối nó trong vòng lặp với dấu kiểm cho phần tử cuối cùng:

  

let

platonicSolids = [

'Tetrahedron'

,

'Khối lập phương'

,

'Khối bát diện'

,

'Khối đa diện'

,

'Khối đa diện'

];

let

result =

''

;

cho

(

let

i =

0

; i & lt; platonicSolids.length; i ++) { result = result.concat (platonicSolids [i]);

if

(i & lt; platonicSolids.length -

1

) { result = result.concat (

","

); } }

bảng điều khiển

.log (kết quả);

Điều này dẫn đến:

  Khối tứ diện, Khối lập phương, Khối bát diện, Khối Dodecahedron, Khối Icosahedron
 

+ Toán tử

Đương nhiên, nếu bạn có thể kết hợp các chuỗi concat () với nhau, bạn cũng có thể nối chúng qua toán tử + :

  

let

platonicSolids = [

'Tetrahedron'

,

'Khối lập phương'

,

'Khối bát diện'

,

'Khối đa diện'

,

'Khối đa diện'

];

let

result =

''

;

cho

(

let

i =

0

; i & lt; platonicSolids.length; i ++) { result = result + platonicSolids [i]; }

bảng điều khiển

.log (kết quả);

Hoặc thậm chí tốt hơn – bạn có thể sử dụng toán tử + = viết tắt thay thế:

  result + = platonicSolids [i];
 

Điều này cũng dẫn đến:

  TetrahedronCubeOctahedronDodecahedronIcosahedron
 

Điểm chuẩn Hiệu suất

Vậy, cách tiếp cận nào là tốt nhất về mặt hiệu suất? Phương thức join () chắc chắn là phương thức dễ sử dụng nhất và trông sạch sẽ nhất, nhưng nó có phải là phương thức hiệu quả nhất cho kho phần tử lớn không?

Hãy thử nghiệm các phương pháp này và đánh giá chúng.

Trước hết, hãy tạo một hàm sẽ tạo các chuỗi ngẫu nhiên cho chúng tôi:

  

function

createStrings (

num

)

{

let

array = [];

cho

(

let

i =

0

; i & lt; num; i ++) { array.push ((

Math

.random () +

1

) .toString (

36

) .substring (

2

); }

return

mảng; } }

Hàm tạo một số ngẫu nhiên, chuyển đổi nó thành một chuỗi có cơ số là 36 và cắt bớt số còn lại ở đầu chuỗi bằng substring () . Mặc dù phương pháp này có những hạn chế đối với việc tạo chuỗi – nhưng nó sẽ hoạt động đủ tốt cho tối đa 50.000 phần tử và chúng sẽ khá ngẫu nhiên cho đến thời điểm đó.

Lưu ý: Hãy nhớ rằng phương pháp này không an toàn về mặt mật mã đối với các số ngẫu nhiên và nó chỉ được sử dụng cho các mục đích minh họa, để đạt được tối ưu hóa bộ nhớ đệm bẩm sinh mà chúng ta sẽ gặp phải khi lặp lại nhiều các trường hợp của cùng một chuỗi, để đảm bảo rằng điểm chuẩn là chính xác.

Hãy cùng kiểm tra:

  

let

stringArray = createStrings (

5

);

bảng điều khiển

.log (stringArray)

Điều này dẫn đến:

  ['e8e3mbqczk', '2wqjp9hko', 'szazekngkv', 'xsxl2bvh3w', 'd4vadxk9ny']
 

Tuyệt vời! Hãy tạo 25.000 chuỗi và nối chúng bằng các phương pháp của chúng tôi:

  

let

stringArray = createStrings (

25000

);

console

.time (

'Nối với Toán tử'

);

let

join1 = plusOperator (stringArray);

console

.timeEnd (

'Nối với Toán tử'

);

console

.time (

'Nối với concat ()'

);

let

join2 = concat (stringArray);

console

.timeEnd (

'Nối bằng concat ()'

);

console

.time (

'Nối với join ()'

);

let

join3 = stringArray.join (

''

);

console

.timeEnd (

'Nối với join ()'

);

function

createStrings

(

số

)

{

let

array = [];

cho

(

let

i =

0

; tôi & lt; num; i ++) { array.push ((

Math

.random () +

1

) .toString (

36

) .substring (

2

)); }

return

mảng; }

function

plusOperator

(

mảng

)

{

let

result =

''

;

cho

(

let

i =

0

; i & lt; array.length; i ++) { kết quả + = array [i]; }

trả về kết quả

; }

function

concat

(

mảng

)

{

let

result =

''

;

cho

(

let

i =

0

; i & lt; array.length; i ++) { result = result.concat (array [i]); }

trả về kết quả

; }

Sau khi chúng được tạo và kết hợp – đây là kết quả:

  Kết nối với Toán tử: 3.417ms
Nối với concat (): 2,879ms
Nối với join (): 8.930ms
 

Nếu bạn đang xử lý số lượng lớn dữ liệu, phương thức join () hoạt động tốt hơn so với các triển khai tùy chỉnh, ở một mức độ lớn do logic dấu phân cách bẩm sinh. Ngay cả khi bạn không thực sự muốn thêm dấu phân cách, bạn thực sự thêm một ký tự trống, điều này sẽ mất thêm thời gian trên các mảng lớn.

Nếu chúng tôi thêm lại các dấu phân cách trong các phương pháp tùy chỉnh của mình:

Sách điện tử miễn phí: Git Essentials

Kiểm tra đưa ra hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Hãy dừng các lệnh của Google Git và thực sự học nó!

  

function

plusOperator

(

array < / p>)

{

let

result =

''

;

cho

(

let

i =

0

; i & lt; array.length; i ++) { kết quả + = array [i];

if

(i & lt; array.length -

1

) { kết quả + =

','

; } }

trả về kết quả

; }

function

concat

(

mảng

)

{

let

result =

''

;

cho

(

let

i =

0

; i & lt; array.length; i ++) { result = result.concat (array [i]);

if

(i & lt; array.length -

1

) { result = result.concat (

','

); } }

trả về kết quả

; }

Kết quả của chúng tôi sẽ khác nhiều:

  Kết nối với Toán tử: 3.914ms
Nối với concat (): 23,988ms
Nối với join (): 3,452ms
 

Toán tử thực hiện chậm hơn một chút so với phương thức join () và phương thức concat () thực sự chậm hơn so với cả hai phương pháp này.

Cũng cần lưu ý tuyên bố chính thức từ MDN , về lợi ích hiệu suất của việc nối các chuỗi với concat () hoặc các toán tử là:

Chúng tôi khuyên bạn nên sử dụng các toán tử gán (+, + =) thay vì phương thức concat ().

Tuy nhiên, điều này hoàn toàn không phải giữ và bạn có thể dễ dàng nhận được concat () để hoạt động tốt hơn toán tử + :

  

console

.time (

'Nối với Toán tử'

); concatWithOperator ();

console

.timeEnd (

'Nối với Toán tử'

);

console

.time (

'Nối với Hàm'

); concatWithFunction ();

console

.timeEnd (

'Nối với Hàm'

);

function

concatWithOperator

(

)

{

let

result =

""

;

cho

(

let

i =

0

; i & lt;

10000

; i ++) { kết quả + = i; } }

function

concatWithFunction

(

)

{

let

result =

""

;

cho

(

let

i =

0

; i & lt;

10000

; i ++) { result = result.concat (i); } }

Điều này dẫn đến:

  Kết nối với Toán tử: 1.921ms
Kết hợp với chức năng: 0,855ms
 

Trình duyệt của bạn, phiên bản của nó cũng như trình tối ưu hóa mà nó sử dụng có thể khác nhau giữa các máy và các thuộc tính như chúng thực sự ảnh hưởng đến hiệu suất.

Kiểm tra và xác minh mã của riêng bạn thay vì nhận lời khuyên theo mệnh giá. Không phải tất cả máy móc và môi trường đều giống nhau và cái nào hoạt động tốt trên máy này thì có thể không hoạt động tốt trên máy khác.

Kết luận

Trong hướng dẫn này, chúng tôi đã xem xét chi tiết các cách tiếp cận khác nhau để nối danh sách các chuỗi thành một chuỗi duy nhất, có và không có dấu phân cách.

Chúng tôi đã xem xét phương thức join () phổ biến, cũng như triển khai hai phương pháp của riêng chúng tôi để cải thiện hiệu suất khi không cần đến dấu phân cách.

Cuối cùng, chúng tôi đã đánh giá điểm chuẩn để so sánh hiệu suất của chúng.


Xem thêm những thông tin liên quan đến chủ đề javascript kết hợp mảng chuỗi

Arrays in Javascript | Arrays Tutorial for Beginners

  • Tác giả: Dave Gray
  • Ngày đăng: 2020-09-14
  • Đánh giá: 4 ⭐ ( 7457 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: An Introduction to Arrays in JavaScript that shows examples of how to create new arrays, modify array elements, and delete array elements as well as exploring examples of array methods and multidimensional arrays.

    ▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT

    ✅ Quick Concepts outline:
    Arrays in Javascript
    (00:00) Intro
    (0:14) Arrays are Data Structures
    (0:20) How to create an array
    (1:00) How to add elements to an array
    (2:00) Reference an array and view it in the console
    (2:35) Length property of an array
    (2:55) Reference the last element in an array
    (3:55) Reference any item in an array by position
    (4:20) Using the push() method to add elements to an array
    (5:00) Using the pop() method to remove elements from an array
    (6:00) Using the unshift() method to add elements to an array
    (7:15) Using the shift() method to remove elements from an array
    (8:15) Do the element positions change in the array?
    (9:15) Referencing an element that does not exist
    (9:35) How to remove an element from the middle of an array
    (9:50) What happens when you delete an element from an array
    (10:55) Using the splice() method to remove, replace, and insert elements
    (13:45) The slice() method
    (15:00) The reverse() method
    (15:30) The join() method
    (16:15) The split() method is a string method that creates a new array
    (18:00) The concat() method
    (18:55) Using the spread operator to combine arrays
    (20:55) Multidimensional arrays / Nested arrays: Sports Store example
    (21:45) Referencing an element in a single dimension array
    (22:50) Referencing an element in a two dimensional array
    (25:25) Referencing an element in a three dimensional array

    📚 Further Reading:
    MDN Web Docs:
    Arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
    Eloquent JavaScript Chapter 4:
    https://eloquentjavascript.net/04_data.html

    📺 More Beginner JS Videos:
    freeCodeCamp: https://youtu.be/PkZNo7MFNFg
    Traversy Media: https://youtu.be/hdI2bqOjy3c
    The Net Ninja: https://youtu.be/iWOYAxlnaww

    ✅ Follow Me:
    Twitter: https://twitter.com/yesdavidgray
    Reddit: https://www.reddit.com/user/DaveOnEleven
    Medium: https://medium.com/@davegray_86804

    arrays javascript tutorial

Mảng trong JavaScript | JS ARRAY

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 2316 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Nối chuỗi trong Javascript

  • Tác giả: vi-magento.com
  • Đánh giá: 4 ⭐ ( 1835 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ tìm hiểu về chuỗi và cách nối chuỗi trong JavaScript. Trong javascript, chuỗi (string) là một kiểu dữ liệu...

Kết hợp tất cả các từ trong chuỗi

  • Tác giả: hiepsiit.net
  • Đánh giá: 3 ⭐ ( 3787 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phương Thức Chuỗi Trong JavaScript

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 4496 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức chuỗi giúp ta làm việc với chuỗi.

Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 4048 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tồng hợp Các hàm xử lý chuỗi trong Javascript, thực hành các bài tập liên quan đến hàm xử lý chuỗi trong javascript bằng hàm

Mảng trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 3 ⭐ ( 5552 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở phần hằng và biến trong javascript mình cũng có nói qua về cách khai báo mảng trong javascript rồi. Nhưng đó mới chỉ là mức độ khai báo còn sử dụng thì mình chưa nói, nên bài này mình sẽ giới thiệu lại với mọi người về mảng trong javascript một cách chi tiết hơn.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách xác định hàm trong Python 3 - cách xác định các hàm trong python

By ads_php