JavaScript 基础知识：第 3 部分

百变鹏仔 2个月前 (10-13) #JavaScript

文章标签基础知识

之前在 javascript essentials：第 2 部分中，我们讨论了很多有关字符串属性和方法，以及拆分为数组时索引字符串的内容。在这一部分，我们将看看：

目的

我们已经讨论了对象并看到了对象的一些示例。

示例

const profile = {  name: "john doe",  "date of birth": "2000-12-25",  profession: "software engineer",  "number of pets": 2,  "weight of protein in grams": 12.5,  "has a job": true,};console.log(profile);

我们可以使用点运算符访问对象的属性。我们可以将 profile.name 设置为 name 的值。我们还可以为任何属性或新属性分配或重新分配值。还有另一种方法可以访问属性的值。在索引中，我们传递一个数字，但在这种方法中，我们传递属性名称。个人资料[“属性”]。因此 profile.name 和 profile["name"] 将具有相同的结果。当属性名称中有空格时，我们使用后者。我可能没有提到这一点，但是，最好避免带有空格的属性名称。（你还记得camelcasing、snake_casing、pascalcasing、constant_casing等）。

立即学习“Java免费学习笔记（深入）”；

console.log(`name on profile: ${profile.name}`);console.log(`profession: ${profile.profession}`);console.log(`number of pets: ${profile["number of pets"]}`);console.log(`protein weight (g): ${profile["weight of protein in grams"]}g`);console.log(`is employed: ${profile["has a job"]}`);

我们还可以更改对象中的数据。

profile.name = "michael angelo";profile.isbald = false;console.log(profile);

javascript中有这个object，我们可以用它来对对象变量进行键到值的映射、获取键、获取值等功能。它有一些方法，例如条目（objectvariable），键（objectvariable）和值（objectvariable）。

console.log(object.entries(profile));//it has created an array of the key and value// [//   [ 'name', 'john doe' ],//   [ 'date of birth', '2000-12-25' ],//   [ 'profession', 'software engineer' ],//   [ 'number of pets', 2 ],//   [ 'weight of protein in grams', 12.5 ],//   [ 'has a job', true ]// ]console.log(object.keys(profile));//it returns the keys of the object as an array// [//   'name',//   'date of birth',//   'profession',//   'number of pets',//   'weight of protein in grams',//   'has a job'// ]console.log(object.values(profile));//it returns the values of the object as an array// ["john doe", "2000-12-25", "software engineer", 2, 12.5, true];

还有更多，不过，目前我认为这已经足够了。

大批

数组是一个列表或项目的集合。由于这是 javascript，我们可以列出任何内容，也可以不列出任何内容。我们可以有一个数字、字符串、布尔值等的数组

在 javascript 中，我们可以使用方括号来创建数组。我们讨论的所有关于变量和值的内容都适用于数组。字符串中的一些知识可能适用（借用的知识）。

示例

// an empty arrayconst anemptyarray = [];// array of numbersconst arrayofnumbers = [1, 2, 3, 4, 5];// array of stringsconst stringarray = ["math", "meth", "mith", "moth", "muth"];const listofblacklistedusers = [  "adamdoe",  "peterpen",  "maxbuffer",  "cheesecake",  "paxtingaa",];// array of booleansconst booleanarray = [true, false, false, true, true];// const array of objectsconst 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 },];// array of arraysconst threebythreesudoku = [  [4, 9, 2],  [3, 5, 7],  [8, 1, 6],];

索引数组

我们在字符串部分讨论的索引概念适用于此。索引从零开始。

示例

const evennumbers = [2, 4, 6];const firstevennumber = evennumbers[0];const secondevennumber = evennumbers[1];const thirdevennumber = evennumbers[2];const sumofevennumbers = firstevennumber + secondevennumber + thirdevennumber;const productofevennumbers =  firstevennumber * secondevennumber * thirdevennumber;console.log(  `the sum and product of the even numbers, ${evennumbers} are, ${sumofevennumbers} and ${productofevennumbers} respectively`);// the sum and product of the even numbers, 2,4,6 are, 12 and 48 respectively

数组属性和方法

数组和字符串一样，也有可以使用点运算符、arrayvariable.propertyname 和 arrayvariable.methodname(someargs) 访问的属性和方法；

这些是我专业使用过的一些属性和方法。有很多，但我会提到一些并演示如何使用它们。

const stringarray = ["math", "meth", "mith", "moth", "muth"];// get the length of an arrayconsole.log(  `there are ${stringarray.length} elements in the array, ${stringarray}`);

const numbers = [1, 2, 3, 4, 5];console.log(numbers);console.log(numbers.length);// add an element at the end of the arraynumbers.push(-1);console.log(numbers);console.log(numbers.length);

const numbers = [1, 2, 3, 4, 5];console.log(numbers);console.log(numbers.length);// returns the last element from the arrayconst poppednumber = numbers.pop();console.log(`${poppednumber} was popped from the array`);console.log(numbers);console.log(numbers.length);

const stringarray = ["math", "meth", "mith", "moth", "muth"];const uppercasestringarray = stringarray.map((value, index, thearray) =&gt; {  return value.touppercase();});console.log(uppercasestringarray);// [ 'math', 'meth', 'mith', 'moth', 'muth' ]

本例中未使用索引和 thearray 值。我会修改map方法的使用。

const stringarray = ["math", "meth", "mith", "moth", "muth"];const uppercasestringarray = stringarray.map((value) =&gt; value.touppercase());console.log(uppercasestringarray);

我们能用数学函数做的事情受到我们目前知识的限制。

请记住，=> 返回用于形成数组的新值。

const elementinnature = ["water", "earth", "wind", "fire"];// filter elements that include 'a'const elementsthatincludea = elementinnature.filter((value) =&gt;  value.includes("a"));console.log(elementsthatincludea);// filter elements that end with 'er'const elementsthatendswither = elementinnature.filter((value) =&gt;  value.endswith("er"));console.log(elementsthatendswither);

const numberarray = [4, 6, 5, 9, 2, 8];const sumofnumbers = numberarray.reduce((prev, curr) =&gt; prev + curr, 0);console.log(numberarray);console.log(sumofnumbers);

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

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

 const result = somearray.reduce((initial value, current value)=&gt; 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)=&gt; some action involving the previous value, which is the expected value, and current value, set a default value for the expected result here)

const numberarray = [4, 6, 5, 9, 2, 8];console.log(numberarray.join(""));// 465928console.log(numberarray.join("_"));// 4_6_5_9_2_8console.log(numberarray.join("000"));// 400060005000900020008

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

展望未来

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

考虑用户配置文件数组。

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) =&gt;  user.username.tolowercase().includes("a"));

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

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

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

const usernameswitha = profilearray  .filter((user) =&gt; user.username.tolowercase().includes("a"))  .map((user) =&gt; user.username);console.log(usernameswitha);// [ 'adamdoe', 'maxbuffer', 'cheesecake', 'paxtingaa' ]

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

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

const usernameswitha = profilearray  .map((user) =&gt; user.username)  .filter((username) =&gt; 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) =&gt; user.isbald)  .filter((user) =&gt; user.salary &gt; 200000)  .map((user) =&gt; user.username);console.log(exclusiveusers);// [ 'adamdoe', 'paxtingaa' ]

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

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

const exclusiveusers = profilearray  .filter((user) =&gt; user.isbald &amp;&amp; user.salary &gt; 200000)  .map((user) =&gt; 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) =&gt; user.isbald &amp;&amp; user.salary &gt; 200000);console.log(exclusiveuser);// {//   id: 1,//   username: 'adamdoe',//   pet: 'math',//   isbald: true,//   salary: 250000// }// since we are interested in the username, we can doconsole.log(exclusiveuser.username);// adamdoe

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

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

const exclusiveusers = profilearray.map((user) =&gt; {  user.username = user.username.touppercase();  user.isexclusive = user.isbald &amp;&amp; user.salary &gt; 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) =&gt; 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 usersconst aboveaveragesalaryusers = profilearray.filter(  (user) =&gt; user.salary &gt; 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 namesconst combinedusernames = aboveaveragesalaryusers  .map((user) =&gt; user.username)  .join(" and ");console.log(`these users are ${combinedusernames}`);// these users are peterpen and maxbuffer

我们将在接下来的函数部分了解

文章推荐

JavaScript 基础知识：第 3 部分

目的

大批

索引数组

数组属性和方法

展望未来

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？