64 lines
4.3 KiB
Markdown
64 lines
4.3 KiB
Markdown
|
---
|
||
|
|
id: 587d78b3367417b2b2512b11
|
||
|
|
title: Add Items Using splice()
|
||
|
|
challengeType: 1
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: إضافة عناصر باستخدام لصق ()
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> تذكر في التحدي الأخير ذكرنا أن <code>splice()</code> يمكن أن يستغرق ما يصل إلى ثلاثة معلمات؟ حسنا ، يمكننا أن نذهب خطوة أخرى مع <code>splice()</code> - بالإضافة إلى إزالة العناصر ، يمكننا استخدام هذه المعلمة الثالثة ، والتي تمثل واحد أو أكثر من العناصر ، <em>لإضافتها</em> كذلك. يمكن أن يكون هذا مفيدًا بشكل لا يصدق للتبديل السريع لعنصر أو مجموعة من العناصر ، لعنصر آخر. على سبيل المثال ، لنفترض أنك تخزن نظام ألوان لمجموعة من عناصر DOM في مصفوفة ، وتريد تغيير لون بشكل ديناميكي بناءً على إجراء ما: <blockquote style=";text-align:right;direction:rtl"> function colorChange (arr، index، newColor) { <br> arr.splice (index، 1، newColor)؛ <br> عودة arr؛ <br> } <br><br> let colorScheme = ['# 878787'، '# a08794'، '# bb7e8c'، '# c9b6be'، '# d1becf']؛ <br><br> colorScheme = colorChange (colorScheme، 2، '# 332327')؛ <br> // أزلنا '# bb7e8c' وأضفنا '# 332327' في مكانها <br> // colorScheme now equalals '' # 878787 '،' # a08794 '،' # 332327 '،' # c9b6be '،' # d1becf '] </blockquote> تأخذ هذه الدالة صفيفًا من القيم السداسية ، وهو فهرس يتم عنده إزالة عنصر ، واللون الجديد لاستبدال العنصر المُزال به. قيمة الإرجاع هي صفيف يحتوي على نظام ألوان تم تعديله حديثًا! في حين أن هذا المثال مفرط في التبسيط ، يمكننا أن نرى القيمة التي يمكن أن تستخدم بها <code>splice()</code> إلى أقصى إمكاناتها. </section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions"> لقد حددنا وظيفة ، <code>htmlColorNames</code> ، والتي تأخذ مصفوفة من ألوان HTML كوسيطة. قم بتعديل الوظيفة باستخدام <code>splice()</code> لإزالة العنصرين الأولين من الصفيف وأضف <code>'DarkSalmon'</code> و <code>'BlanchedAlmond'</code> في <code>'DarkSalmon'</code> الخاصة. </section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: 'يجب أن <code>htmlColorNames</code> <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>'
|
||
|
|
testString: 'assert.deepEqual(htmlColorNames(["DarkGoldenRod", "WhiteSmoke", "LavenderBlush", "PaleTurqoise", "FireBrick"]), ["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"], "<code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>");'
|
||
|
|
- text: يجب أن تستخدم الدالة <code>htmlColorNames</code> الأسلوب <code>splice()</code>
|
||
|
|
testString: 'assert(/.splice/.test(code), "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method");'
|
||
|
|
- text: يجب عدم استخدام <code>shift()</code> أو <code>unshift()</code> .
|
||
|
|
testString: 'assert(!/shift|unshift/.test(code), "You should not use <code>shift()</code> or <code>unshift()</code>.");'
|
||
|
|
- text: يجب عدم استخدام تدوين قوس الصفيف.
|
||
|
|
testString: 'assert(!/\[\d\]\s*=/.test(code), "You should not use array bracket notation.");'
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
<div id='js-seed'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
function htmlColorNames(arr) {
|
||
|
|
// change code below this line
|
||
|
|
|
||
|
|
// change code above this line
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
|
||
|
|
// do not change code below this line
|
||
|
|
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|