Skip to content

1 js/05 data types/05 array methods #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
d73ea15
Update solution.md
sunhaokk May 2, 2018
c5eff15
Update solution.md
sunhaokk May 2, 2018
9141dd0
Update task.md
sunhaokk May 2, 2018
86a2279
Update article.md
sunhaokk May 2, 2018
0a7ae48
Update solution.md
sunhaokk May 2, 2018
d0339a0
Update article.md
sunhaokk May 2, 2018
71d80e8
Update task.md
sunhaokk May 2, 2018
0a3fd35
Update task.md
sunhaokk May 2, 2018
49af46e
Update task.md
sunhaokk May 2, 2018
9ebe5df
Update task.md
sunhaokk May 2, 2018
55e6f14
Update task.md
sunhaokk May 2, 2018
cea21cc
Update solution.md
sunhaokk May 7, 2018
b4955fb
Update article.md
sunhaokk May 7, 2018
89a634a
Update article.md
sunhaokk May 7, 2018
f72fc0d
Update task.md
sunhaokk May 7, 2018
294c8b7
Update article.md
sunhaokk May 15, 2018
c208abf
Update article.md
sunhaokk May 16, 2018
f267154
Update task.md
sunhaokk May 16, 2018
e6a0c06
Update article.md
sunhaokk May 17, 2018
e2109aa
Update article.md
sunhaokk May 18, 2018
1d8fd3c
Update article.md
sunhaokk May 23, 2018
17ee2c0
Update article.md
sunhaokk May 23, 2018
d009d15
Update article.md
sunhaokk May 25, 2018
c89222d
Update task.md
sunhaokk May 25, 2018
facdf39
Update task.md
sunhaokk May 25, 2018
e039f4a
Update task.md
sunhaokk May 25, 2018
67578ae
Update task.md
sunhaokk May 25, 2018
67f6280
Update task.md
sunhaokk May 25, 2018
b5b102f
Update solution.md
sunhaokk May 25, 2018
3a1ea4f
Update task.md
sunhaokk May 25, 2018
6ac2cfb
Update task.md
sunhaokk May 25, 2018
d050382
Update task.md
sunhaokk May 25, 2018
4697dcf
Update solution.md
sunhaokk May 25, 2018
674a490
Update solution.md
sunhaokk May 25, 2018
ddace69
Update task.md
sunhaokk May 25, 2018
58540e0
Update task.md
sunhaokk May 25, 2018
8ca51a0
Update solution.md
sunhaokk May 25, 2018
62744ce
Update solution.md
sunhaokk May 25, 2018
5beeb90
Update solution.md
sunhaokk Jun 4, 2018
81c6fee
Update article.md
sunhaokk Jun 5, 2018
413edef
Update task.md
sunhaokk Jun 5, 2018
11d5066
Update task.md
sunhaokk Jun 5, 2018
b595372
Update solution.md
sunhaokk Jun 5, 2018
d94f72a
Update task.md
sunhaokk Jun 5, 2018
b13bd20
Update article.md
sunhaokk Jun 5, 2018
985a47a
Merge branch 'zh-hans' into 1-js/05-data-types/05-array-methods
sunhaokk Jun 5, 2018
37186db
Update article.md
sunhaokk Jun 6, 2018
c0c0891
Update solution.md
leviding Jun 8, 2018
cf443b7
Update solution.md
leviding Jun 9, 2018
b20a969
Update task.md
leviding Jun 9, 2018
f7c2d61
修正格式问题
leviding Jun 9, 2018
82b4710
Update article.md
sunhaokk Jun 11, 2018
6bad336
Update solution.md
sunhaokk Jun 11, 2018
cc06a0e
Update task.md
leviding Jun 12, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@ alert(str.test);
```

这里有两种结果:

1. `undefined`
2. 报错。

在 `(*)` 的那一行到底发生了什么呢:

1. 当访问 `str` 属性时,创建一个“包装对象”。
1. 当访问 `str` 的属性时,创建一个“包装对象”。
2. 当对属性进行操作的时候。这个对象获得了 `test` 属性。
3. 操作结束,“包装对象”消失。

Expand Down
19 changes: 11 additions & 8 deletions 1-js/05-data-types/01-primitives-methods/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

JavaScript 允许我们像对象一样使用基本类型(字符串,数字等)。

基本类型还提供调用方法等。我们会尽快研究这些,但首先我们会看看它是如何工作的,毕竟基本类型不是对象(在这里我们会更加清楚)。
基本类型还提供调用方法等。我们会尽快研究这些,但首先我们会看看它是如何工作的,毕竟基本类型不是对象(在这里我们会分析的更加清楚)。

我们来看看基本类型和对象之间的关键区别。

Expand All @@ -27,11 +27,11 @@ john.sayHi(); // Hi buddy!

所以我们在这里创建了一个包含 `sayHi` 方法的对象 `john`。

许多内置对象已经存在,例如那些与日期,错误,HTML 元素等一起工作的内置对象。它们具有不同的属性和方法。
许多内置对象已经存在,例如那些处理日期,错误,HTML 元素等的内置对象。它们具有不同的属性和方法。

但是,这些特性都是有成本的!

对象比基本对象“更重”。他们需要额外的资源来支持运作。但是,由于属性和方法在编程中非常有用,JavaScript 引擎会尝试优化它们以减少额外的负担。
对象比基本类型“更重”。他们需要额外的资源来支持运作。但是,由于属性和方法在编程中非常有用,JavaScript 引擎会尝试优化它们以减少额外的负担。

## 作为对象的基本类型

Expand Down Expand Up @@ -79,7 +79,8 @@ alert( n.toFixed(2) ); // 1.23
我们将在后面章节中看到更具体的方法 <info:number> 和 <info:string>。


````warn header="Constructors `String/Number/Boolean` are for internal use only"
````warn header="构造函数 `String/Number/Boolean` 仅供内部使用"

像 Java 这样的一些语言允许我们使用 `new Number(1)` 或 `new Boolean(false)` 等语法明确地为基本类型创建“包装对象”。

在 JavaScript 中,由于历史原因,这也是可以的,但极其**不推荐**。因为这样会出问题。
Expand All @@ -106,13 +107,13 @@ if (zero) { // zero is true, because it's an object

例如,下面完全是有效的:
```js
let num = Number("123"); // convert a string to number
let num = Number("123"); // 将字符串转成数字
```
````


````warn header="null/undefined have no methods"
特殊的基本类型 `null` 和 `undefined` 是个例外。他们没有相应的“包装对象”,并没有提供任何方法。从某种意义上说,他们是“最原始的”。
````warn header="null/undefined 没有任何方法"
特殊的基本类型 `null` 和 `undefined` 是个例外。他们没有相应的“包装对象”,也没有提供任何方法。从某种意义上说,他们是“最原始的”。

尝试访问这种值的属性会导致错误:

Expand All @@ -123,4 +124,6 @@ alert(null.test); // error
## 总结

- 除 `null` 和 `undefined` 以外的基本类型都提供了许多有用的方法。我们将在即将到来的章节中研究这些内容。
- 从形式上讲,这些方法通过临时对象工作,但 JavaScript 引擎可以很好地调整以优化内部,因此调用它们运行成本并不昂贵。

- 从形式上讲,这些方法通过临时对象工作,但 JavaScript 引擎可以很好地调整以优化内部,因此调用它们并不需要太高的成本。

10 changes: 5 additions & 5 deletions 1-js/05-data-types/05-array-methods/1-camelcase/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ importance: 5

---

# Translate border-left-width to borderLeftWidth
# border-left-width 转换成 borderLeftWidth

Write the function `camelize(str)` that changes dash-separated words like "my-short-string" into camel-cased "myShortString".
写函数 `camelize(str)` 将诸如 "my-short-string" 之类的由短划线分隔的单词变成骆驼式的 "myShortString"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

写出一个函数 camelize(str),能够将诸如 "my-short-string" 之类的由短横线分隔的单词变成驼峰式的 "myShortString"。


That is: removes all dashes, each word after dash becomes uppercased.
即:删除所有短横线,短横线后的第一个单词变为大写。

Examples:
例如:

```js
camelize("background-color") == 'backgroundColor';
camelize("list-style-image") == 'listStyleImage';
camelize("-webkit-transition") == 'WebkitTransition';
```

P.S. Hint: use `split` to split the string into an array, transform it and `join` back.
提示:使用 `split` 将字符串拆分成数组,然后将其转换 `join` 并返回。
8 changes: 4 additions & 4 deletions 1-js/05-data-types/05-array-methods/10-average-age/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ importance: 4

---

# Get average age
# 获取平均
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

获取平均 => 获取平均年龄


Write the function `getAverageAge(users)` that gets an array of objects with property `age` and gets the average.
编写 `getAverageAge(users)` 函数,该函数获取一个具有 age 属性的对象数组,并获取平均值。

The formula for the average is `(age1 + age2 + ... + ageN) / N`.
平均的公式是 `(age1 + age2 + ... + ageN) / N`

For instance:
例如:

```js no-beautify
let john = { name: "John", age: 25 };
Expand Down
22 changes: 11 additions & 11 deletions 1-js/05-data-types/05-array-methods/11-array-unique/solution.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Let's walk the array items:
- For each item we'll check if the resulting array already has that item.
- If it is so, then ignore, otherwise add to results.
遍历数组
- 对于每个元素,我们将检查结果数组是否已经有该元素。
- 如果有,则忽略,否则添加结果。

```js run
function unique(arr) {
Expand All @@ -22,18 +22,18 @@ let strings = ["Hare", "Krishna", "Hare", "Krishna",
alert( unique(strings) ); // Hare, Krishna, :-O
```

The code works, but there's a potential performance problem in it.
代码有效,但其中存在潜在的性能问题。

The method `result.includes(str)` internally walks the array `result` and compares each element against `str` to find the match.
方法 `result.includes(str)` 在内部遍历数组 `result` 并将每个元素与 `str` 进行比较以找到匹配项。

So if there are `100` elements in `result` and no one matches `str`, then it will walk the whole `result` and do exactly `100` comparisons. And if `result` is large, like `10000`, then there would be `10000` comparisons.
所以如果 `result` 中有 `100` 个元素,并且没有一个匹配上 `str`,那么它将遍历整个 `result` 并进行完全的 `100` 比较。如果 `result` 很大,比如 `10000`,那么会有 `10000` 次的比较。

That's not a problem by itself, because JavaScript engines are very fast, so walk `10000` array is a matter of microseconds.
这本身并不是问题,因为 JavaScript 引擎速度非常快,所以遍历 10000 次就是几微秒的事。

But we do such test for each element of `arr`, in the `for` loop.
但是我们在 `for `循环中为 `arr` 的每个元素做了这样的测试。

So if `arr.length` is `10000` we'll have something like `10000*10000` = 100 millions of comparisons. That's a lot.
所以如果 `arr.length` `10000`,我们会有 `10000 * 10000` = 100 百万的比较。好多啊。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

百万的比较。好多啊。=> 百万次的比较。这样就太多了。


So the solution is only good for small arrays.
所以该解决方案仅适用于小型数组。

Further in the chapter <info:map-set-weakmap-weakset> we'll see how to optimize it.
进一步,在 <info:map-set-weakmap-weakset> 我们将看到如何优化它。
8 changes: 4 additions & 4 deletions 1-js/05-data-types/05-array-methods/11-array-unique/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ importance: 4

---

# Filter unique array members
# 数组去重

Let `arr` be an array.
`arr` 是一个数组

Create a function `unique(arr)` that should return an array with unique items of `arr`.
创建一个函数 `unique(arr)`,返回去除重复元素的 arr

For instance:
例如:

```js
function unique(arr) {
Expand Down
12 changes: 6 additions & 6 deletions 1-js/05-data-types/05-array-methods/2-filter-range/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ importance: 4

---

# Filter range
# 过滤范围

Write a function `filterRange(arr, a, b)` that gets an array `arr`, looks for elements between `a` and `b` in it and returns an array of them.
写一个函数 `filterRange(arr, a, b)` 获取一个数组 `arr`,查找 `a` `b` 之间的元素并返回它们的数组。

The function should not modify the array. It should return the new array.
该函数不应该修改原数组。它应该返回新的数组。

For instance:
例如:

```js
let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

alert( filtered ); // 3,1 (matching values)
alert( filtered ); // 3,1(匹配值)

alert( arr ); // 5,3,8,1 (not modified)
alert( arr ); // 5,3,8,1(未修改)
```

Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ importance: 4

---

# Filter range "in place"
# 范围过滤

Write a function `filterRangeInPlace(arr, a, b)` that gets an array `arr` and removes from it all values except those that are between `a` and `b`. The test is: `a ≤ arr[i] ≤ b`.
写一个函数 `filterRangeInPlace(arr, a, b)` 获取一个数组 `arr`,并从中除去 `a` `b` 区间以外的所有值。测试:`a ≤ arr[i] ≤ b`

The function should only modify the array. It should not return anything.
该函数只应修改数组。它不应该返回任何东西。

For instance:
例如:
```js
let arr = [5, 3, 8, 1];

filterRangeInPlace(arr, 1, 4); // removed the numbers except from 1 to 4
filterRangeInPlace(arr, 1, 4); // 删除了从 1 到 4 之外的数字

alert( arr ); // [3, 1]
```
5 changes: 2 additions & 3 deletions 1-js/05-data-types/05-array-methods/4-sort-back/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,12 @@ importance: 4

---

# Sort in the reverse order
# 倒序

```js
let arr = [5, 2, 1, -10, 8];

// ... your code to sort it in the reverse order

// ... 倒序
alert( arr ); // 8, 5, 2, 1, -10
```

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
We can use `slice()` to make a copy and run the sort on it:
我们可以使用 `slice()` 来创建一个副本并对其进行排序:

```js run
function copySorted(arr) {
Expand Down
10 changes: 5 additions & 5 deletions 1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ importance: 5

---

# Copy and sort array
# 复制和排序数组

We have an array of strings `arr`. We'd like to have a sorted copy of it, but keep `arr` unmodified.
我们有一个字符串数组 `arr`。我们希望有一个排序过的副本,但保持 `arr` 不变。

Create a function `copySorted(arr)` that returns such a copy.
创建一个函数 `copySorted(arr)` 返回这样一个副本。

```js
let arr = ["HTML", "JavaScript", "CSS"];

let sorted = copySorted(arr);

alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (no changes)
alert( sorted ); // CSSHTMLJavaScript
alert( arr ); // HTMLJavaScriptCSS(没有变化)
```
6 changes: 3 additions & 3 deletions 1-js/05-data-types/05-array-methods/6-array-get-names/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ importance: 5

---

# Map to names
# 映射到 names

You have an array of `user` objects, each one has `user.name`. Write the code that converts it into an array of names.
你有一个 `user` 对象数组,每个对象都有 `user.name `。编写将其转换为 names 数组的代码。

For instance:
例如:

```js no-beautify
let john = { name: "John", age: 25 };
Expand Down
10 changes: 5 additions & 5 deletions 1-js/05-data-types/05-array-methods/7-map-objects/solution.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,19 @@ alert( usersMapped[0].id ); // 1
alert( usersMapped[0].fullName ); // John Smith
```

Please note that in for the arrow functions we need to use additional brackets.
请注意,在箭头函数中,我们需要使用额外的括号。

We can't write like this:
我们不能这样写:
```js
let usersMapped = users.map(user => *!*{*/!*
fullName: `${user.name} ${user.surname}`,
id: user.id
});
```

As we remember, there are two arrow functions: without body `value => expr` and with body `value => {...}`.
我们记得,有两个箭头函数写法:直接返回值`value => expr` 和带主体的 `value => {...}`

Here JavaScript would treat `{` as the start of function body, not the start of the object. The workaround is to wrap them in the "normal" brackets:
JavaScript 会把 `{` 作为函数体的开始,而不是对象的开始。解决方法是将它们包装在正常括号中:

```js
let usersMapped = users.map(user => *!*({*/!*
Expand All @@ -46,6 +46,6 @@ let usersMapped = users.map(user => *!*({*/!*
}));
```

Now fine.
现在就好了。


10 changes: 5 additions & 5 deletions 1-js/05-data-types/05-array-methods/7-map-objects/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ importance: 5

---

# Map to objects
# 映射到对象

You have an array of `user` objects, each one has `name`, `surname` and `id`.
你有一个 `user` 对象数组,每个对象都有 `name``surname` `id`

Write the code to create another array from it, of objects with `id` and `fullName`, where `fullName` is generated from `name` and `surname`.
编写代码以从中创建另一个具有 `id` `fullName` 的对象,其中 `fullName` `name` `surname` 生成。

For instance:
例如:

```js no-beautify
let john = { name: "John", surname: "Smith", id: 1 };
Expand All @@ -33,4 +33,4 @@ alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith
```

So, actually you need to map one array of objects to another. Try using `=>` here. There's a small catch.
所以,实际上你需要将一个对象数组映射到另一个对象数组。可以尝试使用箭头函数来编写。
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ let arr = [ john, pete, mary ];

sortByName(arr);

// now sorted is: [john, mary, pete]
// 现在排序是:[john, mary, pete]
alert(arr[1].name); // Mary
```

6 changes: 3 additions & 3 deletions 1-js/05-data-types/05-array-methods/8-sort-objects/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ importance: 5

---

# Sort objects
# 排序对象

Write the function `sortByName(users)` that gets an array of objects with property `name` and sorts it.
编写函数 `sortByName(users)` 获得对象数组 property的属性 `name` 并对它进行排序。

For instance:
例如:

```js no-beautify
let john = { name: "John", age: 25 };
Expand Down
Loading