JavaScript 基础知识：第 3 部分

我们将初始值设置为零。由于循环从第一个值开始，因此不会定义前一个值（或默认为零）。我们可以选择将其设置为另一个号码。尝试一下，看看结果。

让我使用更多伪代码来重写它，例如：

 const result = somearray.reduce((initial value, current value)=> some action involving the previous value and current value, set the initial value to be something here)

还有一个

 const result = somearray.reduce((expected result, current value)=> some action involving the previous value, which is the expected value, and current value, set a default value for the expected result here)

• include (m)：返回一个布尔值，指示数组中是否存在某个元素。它与字符串.

的includes方法相同

• join (m)：将数组中的元素用分隔符组合成一个字符串。 join 方法采用分隔符参数。这是一个字符串。

const numberarray = [4, 6, 5, 9, 2, 8];

console.log(numberarray.join(""));
// 465928
console.log(numberarray.join("_"));
// 4_6_5_9_2_8
console.log(numberarray.join("000"));
// 400060005000900020008

我们可以用字符串和数组做一些很棒的事情。

• find(m)：与map、filter的参数格式相同。它返回满足条件的第一个元素，否则返回未定义。有一个很好的地方可以使用find代替filter。稍后会详细介绍。

展望未来

我们可以在下一部分中做类似的事情。

考虑用户配置文件数组。

const profilearray = [
  { id: 1, username: "adamdoe", pet: "math", isbald: true },
  { id: 2, username: "peterpen", pet: "meth", isbald: false },
  { id: 3, username: "maxbuffer", pet: "mith", isbald: false },
  { id: 4, username: "cheesecake", pet: "moth", isbald: true },
  { id: 5, username: "paxtingaa", pet: "muth", isbald: true },
];

我们可以使用过滤器来查找用户名中包含“a”或“a”的用户。

const userswitha = profilearray.filter((user) =>
  user.username.tolowercase().includes("a")
);

我们不会通过控制台记录整个对象，而是只记录他们的用户名。

const usernameswitha = userswitha.map((user) => user.username);
console.log(usernameswitha);

我们分别执行这些操作，但是，我们可以通过链接将它们组合在一起。

const usernameswitha = profilearray
  .filter((user) => user.username.tolowercase().includes("a"))
  .map((user) => user.username);

console.log(usernameswitha);
// [ 'adamdoe', 'maxbuffer', 'cheesecake', 'paxtingaa' ]

过滤器和映射中使用的用户变量可以是任何其他变量名称。我选择用户是因为它为我们正在做的事情添加了背景。

知道我们也可以在过滤器方法之前调用映射方法，并且我们会得到相同的输出。然而，我们必须小心。在map方法中，我们正在访问用户名属性（键），因此从map方法返回的数组将是一个字符串数组，而不是具有多个属性的对象。

const usernameswitha = profilearray
  .map((user) => user.username)
  .filter((username) => username.tolowercase().includes("a"));

console.log(usernameswitha);
// [ 'adamdoe', 'maxbuffer', 'cheesecake', 'paxtingaa' ]

//we listed the username, then filtered out usernames that included 'a'

我们可以使用find方法来查找第一个收入超过20万的光头用户。

const exclusiveusers = profilearray
  .filter((user) => user.isbald)
  .filter((user) => user.salary > 200000)
  .map((user) => user.username);

console.log(exclusiveusers);
// [ 'adamdoe', 'paxtingaa' ]

因为我们正在寻找第一个用户，所以我们可以做，exclusiveusers[0]，当我们控制台记录它时，它应该是adamdoe。

在接下来的部分中，我们将学习足够的知识来使用一种过滤方法而不是两种或多种。

const exclusiveusers = profilearray
  .filter((user) => user.isbald && user.salary > 200000)
  .map((user) => user.username);

console.log(exclusiveusers[0]);
// adamdoe

&& 表示“and”，并且 > 大于号。他们都是运营商。我们将更多地讨论它们，并简单或相当现实地重做一些示例。

我们想使用查找而不是过滤。我们提到 find 返回元素。它不会像 map 或 filter 方法那样返回数组。要知道结果可能是未定义的，这意味着在数组中找不到与真值语句（谓词或条件）匹配的值。我们指的条件是 user.isbald && user.salary > 200000，用户是秃头（isbald 将为 true）并且用户的工资超过 200000，（工资值大于 200000）。

const exclusiveuser = profilearray.find(
  (user) => user.isbald && user.salary > 200000
);

console.log(exclusiveuser);
// {
//   id: 1,
//   username: 'adamdoe',
//   pet: 'math',
//   isbald: true,
//   salary: 250000
// }

// since we are interested in the username, we can do
console.log(exclusiveuser.username);
// adamdoe

我们有一个复杂的主体或回调函数，我们可以使用 return 代替 => （粗箭头运算符）。但是我们必须注意并添加左大括号和右大括号 { 和 }。

现在让我们考虑一下我们想要通过添加新字段来更新用户个人资料的情况。

const exclusiveusers = profilearray.map((user) => {
  user.username = user.username.touppercase();
  user.isexclusive = user.isbald && user.salary > 200000;

  return user;
});
console.log(exclusiveusers);

// [
//   {
//     id: 1,
//     username: 'adamdoe',
//     pet: 'math',
//     isbald: true,
//     salary: 250000,
//     isexclusive: true
//   },
//   {
//     id: 2,
//     username: 'peterpen',
//     pet: 'meth',
//     isbald: false,
//     salary: 658000,
//     isexclusive: false
//   },
//   {
//     id: 3,
//     username: 'maxbuffer',
//     pet: 'mith',
//     isbald: false,
//     salary: 850000,
//     isexclusive: false
//   },
//   {
//     id: 4,
//     username: 'cheesecake',
//     pet: 'moth',
//     isbald: true,
//     salary: 90000,
//     isexclusive: false
//   },
//   {
//     id: 5,
//     username: 'paxtingaa',
//     pet: 'muth',
//     isbald: true,
//     salary: 366000,
//     isexclusive: true
//   }
// ]

我们将用户名更新为大写，并添加了一个新密钥，表明该用户（个人资料）是独占的。

我们可以计算平均工资，并过滤掉那些收入高于平均工资的人。

const numberofusers = profilearray.length;
const totalsalaries = profilearray.reduce(
  (total, currentuser) => total + currentuser.salary,
  0
);
const averagesalary = totalsalaries / numberofusers;
console.log(
  `the average salary of ${numberofusers} users with a combined total of ${totalsalaries} is ${averagesalary}`
);
// the average salary of 5 users with a combined total of 2214000 is 442800

// now let's filter the above average salary users
const aboveaveragesalaryusers = profilearray.filter(
  (user) => user.salary > averagesalary
);
console.log(
  `${aboveaveragesalaryusers.length} users who earn above the average salary of ${averagesalary}`
);
// 2 users who earn above the average salary of 442800

// we will get their user names

const combinedusernames = aboveaveragesalaryusers
  .map((user) => user.username)
  .join(" and ");
console.log(`these users are ${combinedusernames}`);
// these users are peterpen and maxbuffer

我们将在接下来的函数部分了解更多关于函数以及函数参数和实参的知识。
我们还将讨论 return 关键字和注释。

电子邮件验证

这是我对上一节中的电子邮件验证的实现。这些是电子邮件验证的规则。电子邮件必须：

• 至少十六个字符
• 全部小写
• 其中没有“电子邮件”
• 不包含下划线
• 有一个“@”
• 有一个“.”
• 以“.com”结尾
• 有'@'之前的字符为字符，大写v，'v'

示例

// email_validation.js

const sampleEmail = "johndoe@email.com";

// Email must:

// - be at least sixteen characters

const emailLength = sampleEmail.length;

console.log(

  - Email must be at least sixteen characters => "${sampleEmail}" has '${emailLength}' characters

);

// - be in all lowercase

// There could be split opinions, either force the users to enter their

// emails in lowercase or cast it to lowercase. The latter seems better

const lowercasedEmail = sampleEmail.toLowerCase();

// or can use the sampleEmail.toLowerCase() from here onwards

// - not have 'email' in it

const hasEmail = lowercasedEmail.includes("email");

// If hasEmail is true then this email is invalid

console.log(

  - Email must not have 'email' in it => It is '${hasEmail}' that "${lowercasedEmail}" has 'email' in it

);

// - not include an underscore

const hasUnderscore = lowercasedEmail.includes("_");

console.log(

  - Email must not include an underscore => It is '${hasUnderscore}' that "${lowercasedEmail}" includes an underscore

);

// - have one '@'

const hasAtSymbol = lowercasedEmail.includes("@");

console.log(

  - Email must have one '@' => It is '${hasAtSymbol}' that "${lowercasedEmail}" has one '@;

);

// get the index of the first at

const indexOfFirstAtSymbol = lowercasedEmail.indexOf("@");

console.log(The index of the first '@' is at: ${indexOfFirstAtSymbol});

// the output from above will let us know if there is even an '@'

// the index must not be -1

// lowercasedEmail.includes("@") and lowercasedEmail.indexOf("@")

// shows that there is an '@' but not how many

// if there is more than one '@' then when we split the email,

// there will be more than two elements

// when you split in the middle (one part), you get 2 parts

// when you split at 2 parts, you get 3 parts

const arrayLengthAfterSplitting = lowercasedEmail.split("@").length;

console.log(

  The number of elements after the email is split at the '@' is: ${arrayLengthAfterSplitting}

);

// there is the lastIndexOf string method, which returns the last occurrence

// of a substring in a string

// - have one '.'

const arrayLengthAfterSplittingAtDot = lowercasedEmail.split(".").length;

console.log(

  The number of elements after the email is split at the '.' is: ${arrayLengthAfterSplittingAtDot}

);

// - end with '.com'

const emailEndsWithDotCom = lowercasedEmail.endsWith(".com");

console.log(

  - Email ends with '.com' => It is '${emailEndsWithDotCom}' that "${lowercasedEmail}" ends with '.com'

);

// - have the character before the '@' to be the character, uppercase v, 'V'

// the character before the '@' is at index, '@' index - 1

const characterBeforeAt = lowercasedEmail.charAt(indexOfFirstAtSymbol - 1);

console.log(

  - Email must have the character before the '@' to be the character, uppercase v, 'V' => The character before the '@' is '${characterBeforeAt}'

);

结论

数组很有用，数组方法可以更轻松地按照我们认为合适的方式操作数据。随着新概念的加入，我们现在可以做更多的事情。尝试使用数组和字符串方法重写密码和电子邮件验证。

我们还有更多关于 javascript 的内容可以讨论，例如：

• 传播和解构
• 运营商
• 控制结构（if 语句、循环）
• 功能
• 回调、承诺、异步和等待
• 下一件大事

理论要掌握，实操不能落！以上关于《JavaScript 基础知识：第 3 部分》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！