How to add elements at the beginning of an array in JS?

Front end tips 2021-02-23 09:06:47
add elements beginning array js

author :Orkhan Jafarov
translator : The front end little wisdom
source : dev

today , Let's learn how to add elements to the first element of an element .


let fruits = ["Apple", "Banana", "Mango"];
// Prints ["Orange", "Apple", "Banana", "Mango"]
fruits.unshift("Guava", "Papaya");
// Prints ["Guava", "Papaya", "Orange", "Apple", "Banana", "Mango"]

2. Use the expansion operator (...)

var fruits = ["Apple", "Banana", "Mango"];
var moreFruits = ["Orange", ...fruits];
// Prints ["Orange", "Apple", "Banana", "Mango"]
var someoMoreFruits = ["Guava", "Papaya", ...moreFruits];
// Prints ["Guava", "Papaya", "Orange", "Apple", "Banana", "Mango"]
// Prints ["Apple", "Banana", "Mango"]

3. Use Array.concat()

We can also use concat() Method joins two at the beginning ( Or more ) Array .

var fruits = ["Apple", "Banana", "Mango"];
var moreFruits = ["Orange"];
var someoMoreFruits = ["Guava", "Papaya"];
var allFruits = someoMoreFruits.concat(moreFruits, fruits);
// Prints ["Guava", "Papaya", "Orange", "Apple", "Banana", "Mango"]

End ~ This is Xiaozhi , I'm going to do the dishes , See you next time ~

Possible after code deployment BUG There's no way to know in real time , In order to solve these problems afterwards BUG, It took a lot of time log debugging , This way, I'd like to recommend an easy-to-use one for you BUG Monitoring tools Fundebug.

original text :


Articles are updated every week , You can search by wechat 「 The big move the world 」 First time reading and urging ( One or two articles earlier than blog ), this paper GitHub Included , I organized a lot of my documents , welcome Star And perfection , You can refer to the interview site review , Pay attention to official account. , The background to reply welfare , You can see the benefits , You'll see .

本文为[Front end tips]所创,转载请带上原文链接,感谢

  1. How to build a high performance front end intelligent reasoning engine
  2. How to become a professional front end engineer in 2021?
  3. How to transform single / micro service application into serverless application
  4. How to transform single / micro service application into serverless application
  5. How to transform single / micro service application into serverless application
  6. How to connect the ground gas to the micro front end?
  7. How to connect the ground gas to the micro front end?
  8. How to connect the ground gas to the micro front end?
  9. Vue server rendering principle analysis and introduction
  10. Realize the correct loading of text message
  11. Building my own project scaffolding with yeoman
  12. JavaScript advanced prototype and prototype chain
  13. React background management front end system (based on open source framework development) start
  14. JS practical skills breakpoint debugging
  15. I'd like to share with you 20 super easy-to-use Chrome extension plug-ins
  16. Get page element location
  17. Use the powerful API of modern browser to record any interface in the browser and realize export, save and management
  18. Delayed code execution in flutter
  19. Reconfiguration experience of KOA middleware system
  20. Add comments to your blog
  21. Svg editor -- new path
  22. Detailed explanation of debounce and throttle of JavaScript function
  23. Anti shake and throttling and corresponding react hooks package
  24. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  25. Front end, school recruitment, Taobao, guide
  26. [vue2 & G6] get started quickly
  27. Canvas from the beginning to the pig
  28. Take five minutes to standardize the code comments?
  29. Some thoughts on sass
  30. what?! You haven't filled in the award information yet
  31. How to get the interface + tsdoc needed by TS through swagger
  32. Binary tree
  33. Canvas drawing method in Web screenshot
  34. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  35. Become a big influence of technology? Coding pages quickly build personal blog
  36. Object and array deconstruction, spread operator, rest operator
  37. Analysis of Axios source code
  38. Two ways to delete useless code in project (Practical)
  39. Edit your picture with canvas
  40. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone
  41. JS mechanism 3: stack, heap, garbage collection
  42. [grid compression evaluation] meshquan, meshopt, Draco
  43. Deep understanding of Vue modifier sync [Vue sync modifier example]
  44. WebView for front end engineers
  45. React form source code reading notes
  46. Deep thinking about modern package manager -- why do I recommend pnpm instead of NPM / yarn?
  47. On the sequence of event capture and event bubbling
  48. Help you build a systematic understanding of the front end scaffolding
  49. commander.js Principle analysis
  50. Common usage of nginx
  51. H5 jump to wechat app
  52. Front end algorithm interview must brush questions series [14]
  53. Thinking of cross end practice
  54. Vue server rendering principle analysis and introduction
  55. [KT] vscode plug in development example series (2)
  56. Design ideas of react and Vue framework
  57. JavaScript String.prototype.replaceAll 兼容性导致的问题
  58. JavaScript String.prototype.replaceAll Problems caused by compatibility
  59. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  60. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%