中国农村程序员学习此【JavaScript教程】购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰

简介: 中国农村程序员学习此【JavaScript教程】购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰

注:最后有面试挑战,看看自己掌握了吗


🌸I could be bounded in a nutshell and count myself a king of infinite space.

特别鸣谢:木芯工作室 、Ivan from Russia


在 Switch 语句添加多个相同选项

如果你忘了给 switch 的每一条 case 添加 break,那么后续的 case 会一直执行,直到遇见 break 为止。 如果你想为 switch 中的多个不同的输入设置相同的结果,可以这样写:

let result = "";
switch (val) {
  case 1:
  case 2:
  case 3:
    result = "1, 2, or 3";
    break;
  case 4:
    result = "4 alone";
}

这样,1、2、3 都会有相同的结果。

从函数返回布尔值–聪明方法

你应该还记得 相等运算符 这道挑战题。在那里我们提到,所有比较操作符都会返回布尔值:要么是true,要么是false。

有时人们通过 if/else 语句来做比较,像这样。

function isEqual(a, b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}

但有更好的方式来达到相同的效果。 既然 === 返回 true 或 false 我们可以直接返回比较结果:

function isEqual(a, b) {
  return a === b;
}

undefined

提示

记住 undefined 是关键字 ,不是字符串.

修改函数 abTest 当 a 或 b 小于 0 时,函数立即返回一个 undefined 并退出。

提示

记住 undefined 是关键字 ,不是字符串.

创建 JavaScript 对象

你之前可能听过 object 这个词。

对象和 arrays 类似,区别在于数组使用索引来访问和修改数据,而对象中的数据是通过 properties 访问的。

对象非常适合用来存储结构化数据,可以表示真实世界中的物体,比如一只猫。

这里是一个猫对象的样本:

const cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

在此示例中,所有属性都存储为字符串,例如 name、legs 和 tails。 然而,你也可以使用数字作为属性。 你甚至可以省略单字字符串属性中的引号,如下所示:

const anotherObject = {
  make: "Ford",
  5: "five",
  "model": "focus"
};

然而,如果你的对象有非字符串属性的话,JavaScript 会自动将它们转为字符串。

通过点号表示法访问对象属性

和访问数组类似,访问对象属性有两种方式:点号表示法(.)和方括号表示法([])。

如果我们已经提前知道要访问的属性名,使用点号表示法是最方便的。

这里是一个用点符号(.)读取对象属性的示例:

const myObj = {
  prop1: "val1",
  prop2: "val2"
};
const prop1val = myObj.prop1;
const prop2val = myObj.prop2;

prop1val 的值将为字符串 val1,并且prop2val 的值将为字符串 val2。

使用方括号表示法访问对象属性

访问对象属性的第二种方式是方括号表示法([])。 如果你想访问的属性名中包含空格,就必须使用方括号表示法来获取它的属性值。

当然,如果属性名不包含空格,也可以使用方括号表示法。

这是一个使用方括号表示法读取对象属性的例子:

const myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};
myObj["Space Name"];
myObj['More Space'];
myObj["NoSpace"];

myObj[“Space Name”] 将会是字符串 Kirk,myObj[‘More Space’] 将会是字符串 Spock,并且myObj[“NoSpace”] 将会是字符串 USS Enterprise。

注意,如果属性名中包含空格,就必须使用引号(单引号或双引号)将它们包裹起来。

通过变量访问对象属性

对对象上使用方括号表示法,还可以访问对象上作为变量值存储的属性。 当你需要遍历对象的所有属性,或者根据一个变量的值查找对应的属性值时,这种写法尤其适用

以下是一个使用变量来访问属性的例子:

const dogs = {
  Fido: "Mutt",
  Hunter: "Doberman",
  Snoopie: "Beagle"
};
const myDog = "Hunter";
const myBreed = dogs[myDog];
console.log(myBreed);

字符串 Doberman 将会出现在控制台中。

请注意,我们在使用变量名访问属性时,不要使用引号引起来,因为我们使用的是 值,而不是 属性名

给 JavaScript 对象添加新属性

你也可以像更改属性一样给 JavaScript 对象添加属性。

这里展示了如何给 ourDog 添加一个属性 bark:

ourDog.bark = "bow-wow";

或者

ourDog["bark"] = "bow-wow";

现在,当我们执行 ourDog.bark 时,就能得到他的叫声,bow-wow。

例如:

const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};
ourDog.bark = "bow-wow";

删除对象的属性

我们同样可以删除对象的属性,例如:

delete ourDog.bark;

例如:

const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"],
  "bark": "bow-wow"
};
delete ourDog.bark;

在上面代码的最后一行中,ourDog 是这样的:

{
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
}

删除 myDog 对象的 tails 属性。 可以使用点操作符或者中括号操作符。

使用对象进行查找

对象和字典一样,可以用来存储键/值对。 如果数据是扁平的,你可以用对象来查找你想要的值,而不是链式使用 switch 或 if/else 语句。 当你知道你的输入数据在某个范围时,这种查找方式极为有效

这是一个文章对象的示例:

const article = {
  "title": "How to create objects in JavaScript",
  "link": "https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/",
  "author": "Kaashan Hussain",
  "language": "JavaScript",
  "tags": "TECHNOLOGY",
  "createdAt": "NOVEMBER 28, 2018"
};
const articleAuthor = article["author"];
const articleLink = article["link"];
const value = "title";
const valueLookup = article[value];

articleAuthor 是字符串 Kaashan Hussain,articleLink 是字符串 https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/,valueLookup 是字符串 How to create objects in JavaScript。

把 switch 语句转化为对象 lookup 调用。 使用它来查找 val 属性的值,并赋值给 result 变量。

测试对象的属性

要检查某个对象是否具有一个属性,你可以使用 .hasOwnProperty() 方法。 根据对象是否具有该属性,someObject.hasOwnProperty(someProperty) 返回 true 或 false。

示例

function checkForProperty(object, property) {
  return object.hasOwnProperty(property);
}
checkForProperty({ top: 'hat', bottom: 'pants' }, 'top'); // true
checkForProperty({ top: 'hat', bottom: 'pants' }, 'middle'); // false

第一个 checkForProperty 函数返回 true,第二个返回 false。

相关文章
|
27天前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
38 5
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
82 3
|
26天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
26天前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
22 2
|
26天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
47 1
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
39 4
js学习--制作猜数字
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
52 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
3月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
2月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
38 4