Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1d
|
||||
title: ' Iterate Through the Keys of an Object with a for...in Statement'
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用for ... in Statement中的对象键迭代
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时您可能需要遍历对象中的所有键。这需要JavaScript中的特定语法，称为<dfn>for ... in</dfn>语句。对于我们的<code>users</code>对象，这可能看起来像： <blockquote> for（让用户在用户中）{ <br>的console.log（用户）; <br> }; <br><br> //日志： <br>艾伦<br>杰夫<br>莎拉<br>瑞安</blockquote>在这个语句中，我们定义了一个变量<code>user</code> ，正如您所看到的，在每次迭代期间，当该语句循环遍历该对象时，该变量被重置为每个对象的键，从而导致每个用户的名称被打印到控制台。 <strong>注意：</strong> <br>对象不像数组那样保持对存储键的排序;因此，当引用或访问该密钥时，对象上的键位置或其出现的相对顺序是无关紧要的。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>countOnline</code> ;在此函数中使用<dfn>for ... in</dfn>语句循环访问<code>users</code>对象中的<code>users</code>并返回其<code>online</code>属性设置为<code>true</code>的用户数。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>users</code>对象包含用户<code>Jeff</code>和<code>Ryan</code> ， <code>online</code>设置为<code>true</code> ，用户<code>Alan</code>和<code>Sarah</code> <code>online</code>设置为<code>false</code>
|
||||
testString: 'assert(users.Alan.online === false && users.Jeff.online === true && users.Sarah.online === false && users.Ryan.online === true, "The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>");'
|
||||
- text: 函数<code>countOnline</code>返回<code>online</code>属性设置为<code>true</code>的用户数
|
||||
testString: 'assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, "The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: false
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function countOnline(obj) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(countOnline(users));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 5a661e0f1068aca922b3ef17
|
||||
title: Access an Array's Contents Using Bracket Notation
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用括号表示法访问数组的内容
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当然，任何数据结构的基本特征是不仅能够存储数据，而且能够根据命令检索该数据。所以，既然我们已经学会了如何创建数组，那么让我们开始考虑如何访问该数组的信息。当我们定义一个如下所示的简单数组时，其中有3个项目： <blockquote>让ourArray = [“a”，“b”，“c”]; </blockquote>在数组中，每个数组项都有一个<dfn>索引</dfn> 。此索引兼作数组中该项的位置，以及您如何引用它。但是，值得注意的是，JavaScript数组是<dfn>零索引的</dfn> ，这意味着数组的第一个元素实际上处于第<em><strong>零</strong></em>位，而不是第一个。为了从数组中检索元素，我们可以将一个索引括在括号中，并将其附加到数组的末尾，或者更常见的是附加到引用数组对象的变量。这称为<dfn>括号表示法</dfn> 。例如，如果我们想从<code>ourArray</code>检索<code>"a"</code>并将其分配给变量，我们可以使用以下代码执行此操作： <blockquote>让ourVariable = ourArray [0]; <br> // ourVariable等于“a” </blockquote>除了访问与索引相关的值，你还可以<em>设置</em>索引使用相同的符号中的值： <blockquote> ourArray [1] =“不再是b”; <br> // ourArray现在等于[“a”，“不再b”，“c”]; </blockquote>使用括号表示法，我们现在将索引1处的项目从<code>"b"</code>重置为<code>"not b anymore"</code> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为了完成此挑战，将<code>myArray</code>的第二个位置（索引<code>1</code> ）设置为您想要的任何内容，除了<code>"b"</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>myArray[0]</code>等于<code>"a"</code>'
|
||||
testString: 'assert.strictEqual(myArray[0], "a", "<code>myArray[0]</code> is equal to <code>"a"</code>");'
|
||||
- text: '<code>myArray[1]</code>不再设置为<code>"b"</code>'
|
||||
testString: 'assert.notStrictEqual(myArray[1], "b", "<code>myArray[1]</code> is no longer set to <code>"b"</code>");'
|
||||
- text: '<code>myArray[2]</code>等于<code>"c"</code>'
|
||||
testString: 'assert.strictEqual(myArray[2], "c", "<code>myArray[2]</code> is equal to <code>"c"</code>");'
|
||||
- text: '<code>myArray[3]</code>等于<code>"d"</code>'
|
||||
testString: 'assert.strictEqual(myArray[3], "d", "<code>myArray[3]</code> is equal to <code>"d"</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let myArray = ["a", "b", "c", "d"];
|
||||
// change code below this line
|
||||
|
||||
//change code above this line
|
||||
console.log(myArray);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1a
|
||||
title: Access Property Names with Bracket Notation
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用括号表示法访问属性名称
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在第一个对象挑战中，我们提到使用括号表示法作为使用变量求值来访问属性值的方法。例如，假设我们的<code>foods</code>对象被用于超市收银机的程序中。我们有一些设置<code>selectedFood</code>功能，我们想检查我们的<code>foods</code>对象是否存在该食物。这可能看起来像： <blockquote> let selectedFood = getCurrentFood（scanningItem）; <br>让库存=食物[selectedFood]; </blockquote>此代码将评估存储在<code>selectedFood</code>变量中的值，并在<code>foods</code>对象中返回该键的值，如果不存在则返回<code>undefined</code> 。括号表示法非常有用，因为有时候对象属性在运行时之前是未知的，或者我们需要以更动态的方式访问它们。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>checkInventory</code> ，它接收一个扫描的项目作为参数。返回<code>foods</code>对象中的<code>scannedItem</code>键的当前值。您可以假设只有有效键将作为<code>checkInventory</code>的参数提供。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>checkInventory</code>是一个函数
|
||||
testString: 'assert.strictEqual(typeof checkInventory, "function", "<code>checkInventory</code> is a function");'
|
||||
- text: '<code>foods</code>对象应该只有以下键值对： <code>apples: 25</code> ， <code>oranges: 32</code> ， <code>plums: 28</code> ， <code>bananas: 13</code> ， <code>grapes: 35</code> ， <code>strawberries: 27</code>'
|
||||
testString: 'assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>");'
|
||||
- text: <code>checkInventory("apples")</code>应该返回<code>25</code>
|
||||
testString: 'assert.strictEqual(checkInventory("apples"), 25, "<code>checkInventory("apples")</code> should return <code>25</code>");'
|
||||
- text: <code>checkInventory("bananas")</code>应该返回<code>13</code>
|
||||
testString: 'assert.strictEqual(checkInventory("bananas"), 13, "<code>checkInventory("bananas")</code> should return <code>13</code>");'
|
||||
- text: <code>checkInventory("strawberries")</code>应该返回<code>27</code>
|
||||
testString: 'assert.strictEqual(checkInventory("strawberries"), 27, "<code>checkInventory("strawberries")</code> should return <code>27</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
// do not change code above this line
|
||||
|
||||
function checkInventory(scannedItem) {
|
||||
// change code below this line
|
||||
|
||||
}
|
||||
|
||||
// change code below this line to test different cases:
|
||||
console.log(checkInventory("apples"));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b0e
|
||||
title: Add Items to an Array with push() and unshift()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用push（）和unshift（）将项添加到数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">数组的长度与它可以包含的数据类型一样，并不固定。可以使用任意数量的元素的长度来定义数组，并且可以随时间添加或移除元素;换句话说，数组是<dfn>可变的</dfn> 。在这个挑战中，我们将研究两种方法，我们可以用它们以编程方式修改数组： <code>Array.push()</code>和<code>Array.unshift()</code> 。两种方法都将一个或多个元素作为参数，并将这些元素添加到调用该方法的数组中; <code>push()</code>方法将元素添加到数组的末尾， <code>unshift()</code>将元素添加到开头。考虑以下： <blockquote>让二十三'='XXIII'; <br>让romanNumerals = ['XXI'，'XXII']; <br><br> romanNumerals.unshift（'XIX'，'XX'）; <br> //现在等于['XIX'，'XX'，'XXI'，'XXII'] <br><br> romanNumerals.push（二十三）; <br> //现在等于['XIX'，'XX'，'XXI'，'XXII'，'XXIII']请注意，我们也可以传递变量，这使我们可以更灵活地动态修改数组的数据。 </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>mixedNumbers</code> ，我们将一个数组作为参数传递。修改函数使用<code>push()</code>和<code>unshift()</code>将<code>'I', 2, 'three'</code>到数组的开头，将<code>7, 'VIII', 9</code>到结尾，以便返回的数组包含数字的表示形式按顺序1-9。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>mixedNumbers(["IV", 5, "six"])</code>现在应该返回<code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code>'
|
||||
testString: 'assert.deepEqual(mixedNumbers(["IV", 5, "six"]), ["I", 2, "three", "IV", 5, "six", 7, "VIII", 9], "<code>mixedNumbers(["IV", 5, "six"])</code> should now return <code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code>");'
|
||||
- text: <code>mixedNumbers</code>函数应该使用<code>push()</code>方法
|
||||
testString: 'assert.notStrictEqual(mixedNumbers.toString().search(/\.push\(/), -1, "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method");'
|
||||
- text: <code>mixedNumbers</code>函数应该使用<code>unshift()</code>方法
|
||||
testString: 'assert.notStrictEqual(mixedNumbers.toString().search(/\.unshift\(/), -1, "The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function mixedNumbers(arr) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(mixedNumbers(['IV', 5, 'six']));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d78b3367417b2b2512b11
|
||||
title: Add Items Using splice()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用splice（）添加项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">还记得在上一次挑战中我们提到过<code>splice()</code>最多需要三个参数吗？好吧，我们可以更进一步使用<code>splice()</code> - 除了删除元素之外，我们还可以使用代表一个或多个元素的第三个参数来<em>添加</em>它们。这对于快速切换另一个元素或一组元素非常有用。例如，假设您正在为数组中的一组DOM元素存储颜色方案，并希望根据某些操作动态更改颜色： <blockquote> function colorChange（arr，index，newColor）{ <br> arr.splice（index，1，newColor）; <br>返回<br> } <br><br>让colorScheme = ['＃878787'，'＃a08794'，'＃bb7e8c'，'＃c9b6be'，'＃d1becf']; <br><br> colorScheme = colorChange（colorScheme，2，'＃332327'）; <br> //我们删除了'＃bb7e8c'并在其位置添加了'＃332327' <br> // colorScheme现在等于['＃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>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b18
|
||||
title: Add Key-Value Pairs to JavaScript Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 将键值对添加到JavaScript对象
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在最基本的情况下，对象只是<dfn>键值对的</dfn>集合，换句话说，映射到我们称为<dfn>属性</dfn>或<dfn>键的</dfn>唯一标识符的数据片段。我们来看一个非常简单的例子： <blockquote>让FCC_User = { <br>用户名：'awesome_coder'， <br>粉丝：572， <br>积分：1741， <br>已完成项目：15 <br> }; </blockquote>上面的代码定义了一个名为<code>FCC_User</code>的对象，它有四个<dfn>属性</dfn> ，每个<dfn>属性</dfn>都映射到一个特定的值。如果我们想知道的数量<code>followers</code> <code>FCC_User</code>了，我们可以通过写访问属性： <blockquote> let userData = FCC_User.followers; <br> // userData等于572 </blockquote>这称为<dfn>点符号</dfn> 。或者，我们也可以使用括号访问该属性，如下所示： <blockquote>让userData = FCC_User ['粉丝'] <br> // userData等于572 </blockquote>请注意，带<dfn>支架的符号</dfn> ，我们封闭<code>followers</code>在引号。这是因为括号实际上允许我们传递一个变量以作为属性名称进行评估（提示：请记住这一点以供日后使用！）。如果我们在没有引号的情况下传递了<code>followers</code> ，那么JavaScript引擎会尝试将其作为变量进行评估，而<code>ReferenceError: followers is not defined</code>将被抛出。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用相同的语法，我们还<em><strong>可以</strong></em>向对象<em><strong>添加新的</strong></em>键值对。我们用三个条目创建了一个<code>foods</code>对象。再添加三个条目：价值为<code>13</code> <code>bananas</code> ，价值为<code>35</code> <code>grapes</code>和价值为<code>27</code> <code>strawberries</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foods</code>是一个对象
|
||||
testString: 'assert(typeof foods === "object", "<code>foods</code> is an object");'
|
||||
- text: <code>foods</code>对象有一个值为<code>13</code>的关键<code>"bananas"</code>
|
||||
testString: 'assert(foods.bananas === 13, "The <code>foods</code> object has a key <code>"bananas"</code> with a value of <code>13</code>");'
|
||||
- text: <code>foods</code>对象有一个关键的<code>"grapes"</code> ，价值<code>35</code>
|
||||
testString: 'assert(foods.grapes === 35, "The <code>foods</code> object has a key <code>"grapes"</code> with a value of <code>35</code>");'
|
||||
- text: <code>foods</code>对象有一个关键的<code>"strawberries"</code> ，值为<code>27</code>
|
||||
testString: 'assert(foods.strawberries === 27, "The <code>foods</code> object has a key <code>"strawberries"</code> with a value of <code>27</code>");'
|
||||
- text: 应使用点或括号表示法设置键值对
|
||||
testString: 'assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1, "The key-value pairs should be set using dot or bracket notation");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(foods);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b14
|
||||
title: Check For The Presence of an Element With indexOf()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用indexOf（）检查元素是否存在
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">由于数组可以随时更改或<em>变异</em> ，因此无法保证特定数据在特定数组中的位置，或者该元素是否仍然存在。幸运的是，JavaScript为我们提供了另一种内置方法<code>indexOf()</code> ，它允许我们快速，轻松地检查数组中元素的存在。 <code>indexOf()</code>接受一个元素作为参数，并在调用时返回该元素的位置或索引，如果该元素在数组中不存在，则返回<code>-1</code> 。例如： <blockquote>让水果= ['苹果'，'梨'，'橙子'，'桃子'，'梨子']; <br><br> fruits.indexOf（'dates'）//返回-1 <br> fruits.indexOf（'oranges'）//返回2 <br> fruits.indexOf（'pears'）//返回1，元素所在的第一个索引</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> <code>indexOf()</code>对于快速检查数组中是否存在元素非常有用。我们定义了一个函数<code>quickCheck</code> ，它将一个数组和一个元素作为参数。使用<code>indexOf()</code>修改函数，以便在传递的元素存在于数组时返回<code>true</code>如果不存在则返回<code>false</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code>应该返回<code>false</code>'
|
||||
testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "mushrooms"), false, "<code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code> should return <code>false</code>");'
|
||||
- text: '<code>quickCheck(["squash", "onions", "shallots"], "onions")</code>应该返回<code>true</code>'
|
||||
testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "onions"), true, "<code>quickCheck(["squash", "onions", "shallots"], "onions")</code> should return <code>true</code>");'
|
||||
- text: '<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code>应该返回<code>true</code>'
|
||||
testString: 'assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>");'
|
||||
- text: '<code>quickCheck([true, false, false], undefined)</code>应返回<code>false</code>'
|
||||
testString: 'assert.strictEqual(quickCheck([true, false, false], undefined), false, "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>");'
|
||||
- text: <code>quickCheck</code>函数应该使用<code>indexOf()</code>方法
|
||||
testString: 'assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1, "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function quickCheck(arr, elem) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
// change code here to test different cases:
|
||||
console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1c
|
||||
title: Check if an Object has a Property
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 检查对象是否具有属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在我们可以添加，修改和删除对象中的键。但是，如果我们只是想知道某个对象是否具有特定属性呢？ JavaScript为我们提供了两种不同的方法。一个使用<code>hasOwnProperty()</code>方法，另一个使用<code>in</code>关键字。如果我们有一个具有<code>Alan</code>属性的对象<code>users</code> ，我们可以通过以下任一方式检查其存在： <blockquote> users.hasOwnProperty（ '艾伦'）; <br> '艾伦'在用户; <br> //都返回true </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们创建了一个对象， <code>users</code> ，其中包含一些用户和一个函数<code>isEveryoneHere</code> ，我们将<code>users</code>对象作为参数传递给它。完成编写此函数，以便仅当<code>users</code>对象包含所有四个名称（ <code>Alan</code> ， <code>Jeff</code> ， <code>Sarah</code>和<code>Ryan</code> ）作为键时才返回<code>true</code> ，否则返回<code>false</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>users</code>对象仅包含<code>Alan</code> ， <code>Jeff</code> ， <code>Sarah</code>和<code>Ryan</code>
|
||||
testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");'
|
||||
- text: 如果<code>Alan</code> ， <code>Jeff</code> ， <code>Sarah</code>和<code>Ryan</code>是<code>users</code>对象的属性，则函数<code>isEveryoneHere</code>返回<code>true</code>
|
||||
testString: 'assert(isEveryoneHere(users) === true, "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object");'
|
||||
- text: 如果<code>Alan</code> ， <code>Jeff</code> ， <code>Sarah</code>和<code>Ryan</code>不是<code>users</code>对象的属性，则函数<code>isEveryoneHere</code>返回<code>false</code>
|
||||
testString: 'assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: true
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: true
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b17
|
||||
title: Combine Arrays with the Spread Operator
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 将数组与Spread运算符组合在一起
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <dfn>扩展</dfn>运算符的另一个巨大优势是能够组合数组，或者在任何索引处将一个数组的所有元素插入到另一个数组中。使用更传统的语法，我们可以连接数组，但这只允许我们在一个数组的末尾和另一个数组的开头组合数组。 Spread语法使以下操作非常简单： <blockquote>让thisArray = ['sage'，'迷迭香'，'欧芹'，'百里香']; <br><br>让那个阵容= ['罗勒'，'香菜'，......这个阿雷，'香菜']; <br> //现在等于['罗勒'，'香菜'，'鼠尾草'，'迷迭香'，'欧芹'，'百里香'，'香菜'] </blockquote>使用扩展语法，我们刚刚实现了一个操作，如果我们使用传统方法，这个操作会更复杂，更冗长。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>spreadOut</code> ，它返回变量<code>sentence</code> ，使用<dfn>spread</dfn>运算符修改函数，使它返回数组<code>['learning', 'to', 'code', 'is', 'fun']</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>spreadOut</code>应该返回<code>["learning", "to", "code", "is", "fun"]</code>'
|
||||
testString: 'assert.deepEqual(spreadOut(), ["learning", "to", "code", "is", "fun"], "<code>spreadOut</code> should return <code>["learning", "to", "code", "is", "fun"]</code>");'
|
||||
- text: <code>spreadOut</code>函数应该使用扩展语法
|
||||
testString: 'assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, "The <code>spreadOut</code> function should utilize spread syntax");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function spreadOut() {
|
||||
let fragment = ['to', 'code'];
|
||||
let sentence; // change this line
|
||||
return sentence;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(spreadOut());
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b13
|
||||
title: Copy an Array with the Spread Operator
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Spread Operator复制数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">虽然<code>slice()</code>允许我们选择要复制的数组元素，但在其他几个有用的任务中，ES6的新<dfn>扩展运算符</dfn>允许我们使用简单且高度可读的语法轻松地按顺序复制<em>所有</em>数组的元素。扩展语法看起来像这样： <code>...</code>在实践中，我们可以使用spread运算符来复制数组，如下所示： <blockquote> let thisArray = [true，true，undefined，false，null]; <br>让thatArray = [... thisArray]; <br> // thatArray等于[true，true，undefined，false，null] <br> // thisArray保持不变，与thatArray相同</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>copyMachine</code> ，它将<code>arr</code> （数组）和<code>num</code> （数字）作为参数。该函数应该返回一个由<code>arr</code>的<code>num</code>副本组成的新数组。我们为您完成了大部分工作，但它还没有正常工作。使用扩展语法修改函数以使其正常工作（提示：我们已经介绍过的另一种方法可能会派上用场！）。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>copyMachine([true, false, true], 2)</code>应返回<code>[[true, false, true], [true, false, true]]</code>'
|
||||
testString: 'assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>");'
|
||||
- text: '<code>copyMachine([1, 2, 3], 5)</code>应返回<code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>'
|
||||
testString: 'assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], "<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>");'
|
||||
- text: '<code>copyMachine([true, true, null], 1)</code>应该返回<code>[[true, true, null]]</code>'
|
||||
testString: 'assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>");'
|
||||
- text: '<code>copyMachine(["it works"], 3)</code>应该返回<code>[["it works"], ["it works"], ["it works"]]</code>'
|
||||
testString: 'assert.deepEqual(copyMachine(["it works"], 3), [["it works"], ["it works"], ["it works"]], "<code>copyMachine(["it works"], 3)</code> should return <code>[["it works"], ["it works"], ["it works"]]</code>");'
|
||||
- text: <code>copyMachine</code>函数应该使用带有数组<code>arr</code>的<code>spread operator</code>
|
||||
testString: 'assert.notStrictEqual(copyMachine.toString().indexOf(".concat(_toConsumableArray(arr))"), -1, "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function copyMachine(arr, num) {
|
||||
let newArr = [];
|
||||
while (num >= 1) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
num--;
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
// change code here to test different cases:
|
||||
console.log(copyMachine([true, false, true], 2));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 587d7b7a367417b2b2512b12
|
||||
title: Copy Array Items Using slice()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用slice（）复制数组项
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们将介绍的下一个方法是<code>slice()</code> 。 <code>slice()</code> ，而不是修改数组，将给定数量的元素复制或<em>提取</em>到新数组，而不改变它所调用的数组。 <code>slice()</code>只接受2个参数 - 第一个是开始提取的索引，第二个是停止提取的索引（提取将发生，但不包括此索引处的元素）。考虑一下： <blockquote>让weatherConditions = ['rain'，'snow'，'sleet'，'hail'，'clear']; <br><br>让todaysWeather = weatherConditions.slice（1,3）; <br> //今天天气等于['雪'，'雨夹雪']; <br> // weatherConditions仍等于['rain'，'snow'，'sleet'，'hail'，'clear'] <br></blockquote>实际上，我们通过从现有数组中提取元素来创建一个新数组。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个以数组作为参数的函数<code>forecast</code> 。使用<code>slice()</code>修改函数以从参数数组中提取信息，并返回包含元素<code>'warm'</code>和<code>'sunny'</code>的新数组。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>forecast</code>应该返回<code>["warm", "sunny"]</code>'
|
||||
testString: 'assert.deepEqual(forecast(["cold", "rainy", "warm", "sunny", "cool", "thunderstorms"]), ["warm", "sunny"], "<code>forecast</code> should return <code>["warm", "sunny"]");'
|
||||
- text: <code>forecast</code>函数应该使用<code>slice()</code>方法
|
||||
testString: 'assert(/\.slice\(/.test(code), "The <code>forecast</code> function should utilize the <code>slice()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function forecast(arr) {
|
||||
// change code below this line
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b16
|
||||
title: Create complex multi-dimensional arrays
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 创建复杂的多维数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">真棒！你刚学了很多关于阵列的知识！这是一个相当高级别的概述，有很多关于使用数组的知识，其中大部分将在后面的章节中看到。但在继续观察<dfn>对象之前</dfn> ，让我们再看一下，看看阵列如何变得比我们在之前的挑战中看到的更复杂。将数组视为数据结构时，最强大的功能之一是数组可以包含甚至完全由其他数组组成。我们已经看到在之前的挑战中包含数组的数组，但相当简单。但是，数组可以包含无限深度的数组，这些数组可以包含其他数组，每个数组都有自己的任意深度级别，依此类推。通过这种方式，数组可以非常快速地变成非常复杂的数据结构，称为<dfn>多维</dfn>或嵌套数组。请考虑以下示例： <blockquote>让nestedArray = [// top，或first level - 最外面的数组<br> ['deep']，//数组中的数组，2个深度级别<br> [ <br> ['更深']，['更深'] // 2个数组嵌套3层深<br> ] <br> [ <br> [ <br> ['deepest']，['最深'] // 2个数组嵌套了4个级别<br> ] <br> [ <br> [ <br> ['deepest-est？'] //一个数组嵌套5层深<br> ] <br> ] <br> ] <br> ]。 </blockquote>虽然这个例子看似令人费解，但在处理大量数据时，这种复杂程度并非闻所未闻，甚至不同寻常。但是，我们仍然可以使用括号表示法轻松访问此复杂数组的最深层次： <blockquote>的console.log（nestedArray [2] [1] [0] [0] [0]）; <br> //日志：最深？ </blockquote>现在我们知道那条数据在哪里，如果需要，我们可以重置它： <blockquote> nestedArray [2] [1] [0] [0] [0] =“更深”; <br><br>的console.log（nestedArray [2] [1] [0] [0] [0]）; <br> //现在记录：更深入</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们已经定义了一个变量<code>myNestedArray</code> ，它等于一个数组。修改<code>myNestedArray</code> ，使用数据元素的<dfn>字符串</dfn> ， <dfn>数字</dfn>和<dfn>布尔值的</dfn>任意组合，以便它具有五个深度级别（请记住，最外层的数组是级别1）。某处在第三级上，包括字符串<code>'deep'</code> ，在第四级，包括字符串<code>'deeper'</code> ，并且在第五层上，包括字符串<code>'deepest'</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>myNestedArray</code>应仅包含数字，布尔值和字符串作为数据元素
|
||||
testString: 'assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== "number" && typeof flattened[i] !== "string" && typeof flattened[i] !== "boolean") { return false } } return true })(myNestedArray), true, "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements");'
|
||||
- text: <code>myNestedArray</code>应该有5个级别的深度
|
||||
testString: 'assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) { arrayDepth(array[i], 0, d + 1);} else { depth = (d > depth) ? d : depth;}if (i < array.length) { arrayDepth(array, i + 1, d);} }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, "<code>myNestedArray</code> should have exactly 5 levels of depth");'
|
||||
- text: <code>myNestedArray</code>应该在嵌套3级深度的数组中恰好包含一个字符串<code>"deep"</code>
|
||||
testString: 'assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deep").length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deep")[0] === 2, "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deep"</code> on an array nested 3 levels deep");'
|
||||
- text: <code>myNestedArray</code>应该在嵌套4级深度的数组中恰好包含一个字符串<code>"deeper"</code> deep”
|
||||
testString: 'assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deeper").length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deeper")[0] === 3, "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deeper"</code> on an array nested 4 levels deep");'
|
||||
- text: <code>myNestedArray</code>应该在嵌套5级深度的数组中恰好包含一个字符串<code>"deepest"</code> <code>myNestedArray</code> <code>"deepest"</code>
|
||||
testString: 'assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deepest").length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deepest")[0] === 4, "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deepest"</code> on an array nested 5 levels deep");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let myNestedArray = [
|
||||
// change code below this line
|
||||
['unshift', false, 1, 2, 3, 'complex', 'nested'],
|
||||
['loop', 'shift', 6, 7, 1000, 'method'],
|
||||
['concat', false, true, 'spread', 'array'],
|
||||
['mutate', 1327.98, 'splice', 'slice', 'push'],
|
||||
['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
|
||||
// change code above this line
|
||||
];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1e
|
||||
title: Generate an Array of All Object Keys with Object.keys()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Object.keys（）生成所有对象键的数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们还可以使用<code>Object.keys()</code>方法生成一个数组，其中包含存储在对象中的所有键，并传入一个对象作为参数。这将返回一个数组，其中的字符串表示对象中的每个属性。同样，数组中的条目没有特定的顺序。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">完成编写<code>getArrayOfUsers</code>函数，以便它返回一个数组，该数组包含它作为参数接收的对象中的所有属性。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>users</code>对象仅包含<code>Alan</code> ， <code>Jeff</code> ， <code>Sarah</code>和<code>Ryan</code>
|
||||
testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");'
|
||||
- text: <code>getArrayOfUsers</code>函数返回一个数组，其中包含<code>users</code>对象中的所有键
|
||||
testString: 'assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf("Alan") !== -1 && R.indexOf("Jeff") !== -1 && R.indexOf("Sarah") !== -1 && R.indexOf("Ryan") !== -1 && R.indexOf("Sam") !== -1 && R.indexOf("Lewis") !== -1); })() === true, "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: false
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function getArrayOfUsers(obj) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(getArrayOfUsers(users));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b15
|
||||
title: Iterate Through All an Array's Items Using For Loops
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用for循环遍历所有数组的项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时在使用数组时，能够遍历每个项目以查找我们可能需要的一个或多个元素，或者根据哪些数据项符合某组标准来操作数组非常方便。 JavaScript提供了几种内置方法，每种方法都以稍微不同的方式迭代数组以实现不同的结果（例如<code>every()</code> ， <code>forEach()</code> ， <code>map()</code>等），但是这种技术最灵活并且为我们提供了最大的控制量是一个简单的<code>for</code>循环。考虑以下： <blockquote> function greaterThanTen（arr）{ <br>让newArr = []; <br> for（let i = 0; i <arr.length; i ++）{ <br> if（arr [i]> 10）{ <br> （ARR [I]）newArr.push; <br> } <br> } <br>返回newArr; <br> } <br><br> greaterThanTen（[2,12,8,14,80,0,1]）; <br> //返回[12,14,80] </blockquote>使用<code>for</code>循环，此函数遍历并访问数组的每个元素，并使其经受我们创建的简单测试。通过这种方式，我们可以轻松地以编程方式确定哪些数据项大于<code>10</code> ，并返回包含这些项的新数组。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>filteredArray</code> ，它接受<code>arr</code> ，一个嵌套数组和<code>elem</code>作为参数，并返回一个新数组。 <code>elem</code>表示在<code>arr</code>嵌套的一个或多个数组上可能存在或不存在的元素。使用<code>for</code>循环修改函数，以返回已传递数组的过滤版本，以便删除嵌套在包含<code>elem</code> <code>arr</code>中的任何数组。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code>应该返回<code>[ [10, 8, 3], [14, 6, 23] ]</code>'
|
||||
testString: 'assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>");'
|
||||
- text: '<code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code>应返回<code>[ ["flutes", 4] ]</code>'
|
||||
testString: 'assert.deepEqual(filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2), [["flutes", 4]], "<code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code> should return <code>[ ["flutes", 4] ]</code>");'
|
||||
- text: '<code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code>应该返回<code>[ ["amy", "beth", "sam"] ]</code>'
|
||||
testString: 'assert.deepEqual(filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter"), [["amy", "beth", "sam"]], "<code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code> should return <code>[ ["amy", "beth", "sam"] ]</code>");'
|
||||
- text: '<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code>应该返回<code>[ ]</code>'
|
||||
testString: 'assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>");'
|
||||
- text: <code>filteredArray</code>函数应该使用<code>for</code>循环
|
||||
testString: 'assert.notStrictEqual(filteredArray.toString().search(/for/), -1, "The <code>filteredArray</code> function should utilize a <code>for</code> loop");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function filteredArray(arr, elem) {
|
||||
let newArr = [];
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return newArr;
|
||||
}
|
||||
|
||||
// change code here to test different cases:
|
||||
console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1f
|
||||
title: Modify an Array Stored in an Object
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 修改存储在对象中的数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在您已经看到了JavaScript对象的所有基本操作。您可以添加，修改和删除键值对，检查键是否存在，并迭代对象中的所有键。随着您继续学习JavaScript，您将看到更多功能的对象应用程序。此外，课程后面的可选高级数据结构课程还涵盖ES6 <dfn>Map</dfn>和<dfn>Set</dfn>对象，这两个对象与普通对象类似，但提供了一些附加功能。既然您已经学习了数组和对象的基础知识，那么您已经准备好开始使用JavaScript解决更复杂的问题了！ </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">看看我们在代码编辑器中提供的对象。 <code>user</code>对象包含三个键。 <code>data</code>键包含五个键，其中一个键包含一组<code>friends</code> 。从这里，您可以看到灵活的对象如何作为数据结构。我们已经开始编写一个函数<code>addFriend</code> 。完成编写它以便它获取<code>user</code>对象并将<code>friend</code>参数的名称添加到存储在<code>user.data.friends</code>中的数组并返回该数组。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>user</code>对象具有<code>name</code> ， <code>age</code>和<code>data</code>键
|
||||
testString: 'assert("name" in user && "age" in user && "data" in user, "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys");'
|
||||
- text: <code>addFriend</code>函数接受<code>user</code>对象和<code>friend</code>字符串作为参数，并将朋友添加到<code>user</code>对象中的<code>friends</code>数组
|
||||
testString: 'assert((function() { let L1 = user.data.friends.length; addFriend(user, "Sean"); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object");'
|
||||
- text: '<code>addFriend(user, "Pete")</code>应该返回<code>["Sam", "Kira", "Tomo", "Pete"]</code>'
|
||||
testString: 'assert.deepEqual((function() { delete user.data.friends; user.data.friends = ["Sam", "Kira", "Tomo"]; return addFriend(user, "Pete") })(), ["Sam", "Kira", "Tomo", "Pete"], "<code>addFriend(user, "Pete")</code> should return <code>["Sam", "Kira", "Tomo", "Pete"]</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let user = {
|
||||
name: 'Kenneth',
|
||||
age: 28,
|
||||
data: {
|
||||
username: 'kennethCodesAllDay',
|
||||
joinDate: 'March 26, 2016',
|
||||
organization: 'freeCodeCamp',
|
||||
friends: [
|
||||
'Sam',
|
||||
'Kira',
|
||||
'Tomo'
|
||||
],
|
||||
location: {
|
||||
city: 'San Francisco',
|
||||
state: 'CA',
|
||||
country: 'USA'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addFriend(userObj, friend) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(addFriend(user, 'Pete'));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b19
|
||||
title: Modify an Object Nested Within an Object
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 修改嵌套在对象中的对象
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们来看一个稍微复杂的对象。对象属性可以嵌套到任意深度，它们的值可以是JavaScript支持的任何类型的数据，包括数组甚至其他对象。考虑以下： <blockquote>让nestedObject = { <br> id：28802695164， <br>日期：'2016年12月31日'， <br>数据：{ <br>总用户：99， <br>在线：80， <br> onlineStatus：{ <br>活跃：67， <br>离开：13 <br> } <br> } <br> }; </blockquote> <code>nestedObject</code>有三个唯一的键： <code>id</code> ，其值为数字， <code>date</code>为字符串的<code>data</code> ， <code>data</code> ，其值为另一个嵌套在其中的对象。虽然结构很快就会变得复杂，但我们仍然可以使用相同的符号来访问我们需要的信息。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在这里，我们定义了一个对象<code>userActivity</code> ，其中包含嵌套在其中的另一个对象。您可以像修改上一个挑战中的属性一样修改此嵌套对象的属性。将<code>online</code>密钥的值设置为<code>45</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>userActivity</code>具有<code>id</code> ， <code>date</code>和<code>data</code>属性
|
||||
testString: 'assert("id" in userActivity && "date" in userActivity && "data" in userActivity, "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties");'
|
||||
- text: <code>userActivity</code>具有设置为具有密钥<code>totalUsers</code>和<code>online</code>的对象的<code>data</code>密钥
|
||||
testString: 'assert("totalUsers" in userActivity.data && "online" in userActivity.data, "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>");'
|
||||
- text: 嵌套在<code>userActivity</code> <code>data</code>键中的<code>online</code>属性应设置为<code>45</code>
|
||||
testString: 'assert(userActivity.data.online === 45, "The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>");'
|
||||
- text: <code>online</code>属性使用点或括号表示法设置
|
||||
testString: 'assert.strictEqual(code.search(/online: 45/), -1, "The <code>online</code> property is set using dot or bracket notation");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let userActivity = {
|
||||
id: 23894201352,
|
||||
date: 'January 1, 2017',
|
||||
data: {
|
||||
totalUsers: 51,
|
||||
online: 42
|
||||
}
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(userActivity);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b0f
|
||||
title: Remove Items from an Array with pop() and shift()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用pop（）和shift（）从数组中删除项
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>push()</code>和<code>unshift()</code>都有相应的几乎相反的方法： <code>pop()</code>和<code>shift()</code> 。正如您现在可能已经猜到的那样， <code>pop()</code>不是添加，而是从数组的末尾<em>删除</em>元素，而<code>shift()</code>从头开始删除元素。 <code>pop()</code>和<code>shift()</code>及其兄弟<code>push()</code>和<code>unshift()</code>之间的关键区别在于，两个方法都不接受参数，并且每个方法只允许一次由单个元素修改数组。让我们来看看： <blockquote>让问候= ['什么事情？'，'你好'，'看到你！']; <br><br> greetings.pop（）; <br> //现在等于['whats up？'，'hello'] <br><br> greetings.shift（）; <br> //现在等于['你好'] </blockquote>我们还可以使用以下任一方法返回已删除元素的值： <blockquote> let popped = greetings.pop（）; <br> //返回'你好' <br> //问候现在等于[] </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>popShift</code> ，它将一个数组作为参数并返回一个新数组。使用<code>pop()</code>和<code>shift()</code>修改函数，删除参数数组的第一个和最后一个元素，并将删除的元素分配给它们对应的变量，以便返回的数组包含它们的值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>popShift(["challenge", "is", "not", "complete"])</code>应返回<code>["challenge", "complete"]</code>'
|
||||
testString: 'assert.deepEqual(popShift(["challenge", "is", "not", "complete"]), ["challenge", "complete"], "<code>popShift(["challenge", "is", "not", "complete"])</code> should return <code>["challenge", "complete"]</code>");'
|
||||
- text: <code>popShift</code>函数应该使用<code>pop()</code>方法
|
||||
testString: 'assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1, "The <code>popShift</code> function should utilize the <code>pop()</code> method");'
|
||||
- text: <code>popShift</code>函数应该使用<code>shift()</code>方法
|
||||
testString: 'assert.notStrictEqual(popShift.toString().search(/\.shift\(/), -1, "The <code>popShift</code> function should utilize the <code>shift()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function popShift(arr) {
|
||||
let popped; // change this line
|
||||
let shifted; // change this line
|
||||
return [shifted, popped];
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(popShift(['challenge', 'is', 'not', 'complete']));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b10
|
||||
title: Remove Items Using splice()
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用splice（）删除项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">好的，所以我们已经学会了如何使用<code>shift()</code>和<code>pop()</code>从数组的开头和结尾删除元素，但是如果我们想要从中间某处删除元素呢？或者一次删除多个元素？好吧，这就是<code>splice()</code>用武之地<code>splice()</code>允许我们这样做：从数组中的任何位置<strong>删除任意数量的连续元素</strong> 。 <code>splice()</code>可能需要长达3个参数，但现在，我们将重点放在刚第一2.第2个参数<code>splice()</code>是其代表索引的整数，或位置中，阵列的该<code>splice()</code>是为呼吁。请记住，数组是<em>零索引的</em> ，所以为了表示数组的第一个元素，我们将使用<code>0</code> 。 <code>splice()</code>的第一个参数表示从中开始删除元素的数组的索引，而第二个参数表示要删除的元素的数量。例如： <blockquote>让array = ['今天'，'是'，'不'，'所以'，'伟大']; <br><br> array.splice（2,2）; <br> //删除以第3个元素开头的2个元素<br> //数组现在等于['今天'，'是'，'很棒'] </blockquote> <code>splice()</code>不仅修改了它被调用的数组，而且还返回一个包含被删除元素值的新数组： <blockquote>让array = ['我'，'我'，'感觉'，'真的'，'快乐']; <br><br> let newArray = array.splice（3,2）; <br> // newArray等于['真''，'快乐'] </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个函数<code>sumOfTen</code> ，它将一个数组作为参数，并返回该数组元素的总和。使用<code>splice()</code>修改函数，使其返回值<code>10</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>sumOfTen</code>应该返回10
|
||||
testString: 'assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, "<code>sumOfTen</code> should return 10");'
|
||||
- text: <code>sumOfTen</code>函数应该使用<code>splice()</code>方法
|
||||
testString: 'assert.notStrictEqual(sumOfTen.toString().search(/\.splice\(/), -1, "The <code>sumOfTen</code> function should utilize the <code>splice()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function sumOfTen(arr) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return arr.reduce((a, b) => a + b);
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(sumOfTen([2, 5, 1, 5, 2, 1]));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d7b7e367417b2b2512b20
|
||||
title: Use an Array to Store a Collection of Data
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用数组存储数据集合
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">以下是阵列数据结构最简单实现的示例。这被称为<dfn>一维数组</dfn> ，意味着它只有一个级别，或者它没有嵌套在其中的任何其他数组。请注意，它包含<dfn>布尔值</dfn> ， <dfn>字符串</dfn>和<dfn>数字</dfn> ，以及其他有效的JavaScript数据类型： <blockquote> let simpleArray = ['one'，2，'three'，true，false，undefined，null]; <br>的console.log（simpleArray.length）; <br> //记录7 </blockquote>所有数组都有一个length属性，如上所示，可以使用语法<code>Array.length</code>轻松访问<code>Array.length</code> 。下面可以看到更复杂的数组实现。这称为<dfn>多维数组</dfn> ，或包含其他数组的数组。请注意，此数组还包含JavaScript <dfn>对象</dfn> ，我们将在下一节中详细介绍，但是现在，您需要知道的是，数组也能够存储复杂对象。 <blockquote>让complexArray = [ <br> [ <br> { <br>一：1， <br>二：2 <br> }， <br> { <br>三：3， <br>四：4 <br> } <br> ] <br> [ <br> { <br> a：“a”， <br> b：“b” <br> }， <br> { <br> c：“c”， <br> d：“d” <br> } <br> ] <br> ]。 </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们定义了一个名为<code>yourArray</code>的变量。通过为<code>yourArray</code>变量指定长度至少为5个元素的数组来完成该语句。您的数组应至少包含一个<dfn>字符串</dfn> ，一个<dfn>数字</dfn>和一个<dfn>布尔值</dfn> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: yourArray是一个数组
|
||||
testString: 'assert.strictEqual(Array.isArray(yourArray), true, "yourArray is an array");'
|
||||
- text: <code>yourArray</code>至少有5个元素
|
||||
testString: 'assert.isAtLeast(yourArray.length, 5, "<code>yourArray</code> is at least 5 elements long");'
|
||||
- text: <code>yourArray</code>至少包含一个<code>boolean</code>
|
||||
testString: 'assert(yourArray.filter( el => typeof el === "boolean").length >= 1, "<code>yourArray</code> contains at least one <code>boolean</code>");'
|
||||
- text: <code>yourArray</code>至少包含一个<code>number</code>
|
||||
testString: 'assert(yourArray.filter( el => typeof el === "number").length >= 1, "<code>yourArray</code> contains at least one <code>number</code>");'
|
||||
- text: <code>yourArray</code>至少包含一个<code>string</code>
|
||||
testString: 'assert(yourArray.filter( el => typeof el === "string").length >= 1, "<code>yourArray</code> contains at least one <code>string</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let yourArray; // change this line
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1b
|
||||
title: Use the delete Keyword to Remove Object Properties
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用删除关键字删除对象属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在你知道了什么是对象及其基本特征和优点。简而言之，它们是键值存储，它提供了一种灵活，直观的数据结构方式， <strong><em>并且</em></strong>它们提供了非常快速的查找时间。在其余的挑战中，我们将描述您可以对对象执行的几个常见操作，以便您可以轻松地在程序中应用这些有用的数据结构。在早期的挑战中，我们都添加并修改了对象的键值对。在这里，我们将看到如何从对象中<em>删除</em>键值对。让我们最后一次重新审视我们的<code>foods</code>对象示例。如果我们想删除<code>apples</code>键，我们可以使用<code>delete</code>关键字删除它，如下所示： <blockquote>删除foods.apples; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用delete关键字从<code>foods</code>对象中删除<code>oranges</code> ， <code>plums</code>和<code>strawberries</code>键。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foods</code>对象只有三个键： <code>apples</code> ， <code>grapes</code>和<code>bananas</code>
|
||||
testString: 'assert(!foods.hasOwnProperty("oranges") && !foods.hasOwnProperty("plums") && !foods.hasOwnProperty("strawberries") && Object.keys(foods).length === 3, "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>");'
|
||||
- text: 使用<code>delete</code> <code>oranges</code> ， <code>plums</code>和<code>strawberries</code>键
|
||||
testString: 'assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(foods);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user