整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端教程之JavaScript，网页的动态事件基本上都是靠它来实现的。下面我们就一起来学习内容吧！
JavaScript通常缩写为 JS，是一种高级的，解释执行的编程语言。
JavaScript 是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
它已经由 ECMA（欧洲计算机制造商协会）通过 ECMAScript 实现语言的标准化。
它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
JavaScript具有如下特点:
1）JavaScript是一种动态语言，用于在客户端设计网页。
2）它是区分大小写的语言。
3）它是非类型语言，即变量可以保存任何类型的值，Python语言也有相同的特点。
JavaScript的语句可以写在HTML文件中，也可以单独写在.js文件中，其具体如下所示
1）HTML文件
JavaScript写在HTML文件中时必须写在HTML文件中的'script'标签中，下面我们在HTML文件中通过JavaScript输出"Hello World"，具体示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. document.write("Hello World from JavaScript!<br>");
10. </script>
11. </body>
12. </html> 2）js文件
现在我们创建一个单独的js文件，然后在HTML文件中应用具体示列如下：
1. // js文件
2. document.write("Hello World from JavaScript!<br>");
3.
4. // html文件
5. <!DOCTYPE html>
6. <html>
7. <head>
8. <meta charset="UTF-8">
9. <title>JavaScript基础教程</title>
10. </head>
11. <body>
12. <!-- 引入js文件 -->
13. <script src="test.js"></script>
14. </body>
15. </html> （1）JavaScript关键字
JavaScript包含了许多关键字，我们在编写语句时要注意避开这些关键字，以免引起不必要的错误。其常用关键字如下表所示：
（2）JavaScript数据类型
JavaScript包含了三种数据类型具体如下：
1）数值类型，如'123，12.1'在JavaScript中所有的数值类型其实都是浮点数
2）字符串类型，如'JavaScript基础教程'
3）布尔类型，如'true, false'
（3）JavaScript变量
JavaScript的变量一般用var这个关键字来定义，在ES6中变量一般用let定义。JavaScript是非类型化语言，即变量可以包含任何数据类型。JavaScript具体变量使用示列如下：
1. // 1.js文件
2. // document会在文章渲染后再执行，所以看到其在js文件中是在前面，但HTML页面输出的内容在最后
3. document.write("Hello World from JavaScript!<br>");
4.
5. // 定义变量your_name与age
6. var your_name = "成哥";
7. var age = 30;
8. // 在HTML中找到p_name的id标签，然后在内部插入html内容
9. document.getElementById("p_name").innerHTML= "Hello "+ your_name + "<br>Age : " + age;
10.
11. // 2. HTML文件
12. <!DOCTYPE html>
13. <html>
14. <head>
15. <meta charset="UTF-8">
16. <title>JavaScript基础教程</title>
17. </head>
18. <body>
19. <p id='p_name'></p>
20. <script src="test.js"></script>
21. </body>
22. </html> 我们还可以通过prompt方法获取用户在页面的输入的变量具体示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // prompt方法用于获取用户在页面输入的内容
10. var x = prompt("请输入一个数字，计算其10倍的结果");
11. document.write("其10倍结果为：10 * ", x, " = ", 10*x + "<br>");
12. </script>
13. </body>
14. </html> （4）JavaScript运算符
1）算术运算符
2）赋值运算符
3）比较运算符
4）条件运算符
JavaScript的条件运算符为问号加冒号组合（？：），其规则是问号前面条件是否为true如果为true则执行冒号前面的表达式，如果为false则执行冒号后面的表达式，具体如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // prompt方法用于获取用户在页面输入的内容
10. var x = prompt("请输入一个数判断其是奇数还是偶数");
11. // 通过条件运算符来进行判断奇偶数
12. var result = x % 2 === 0 ? '偶数': '奇数';
13. document.write("数值(", x, ")为", result);
14. </script>
15. </body>
16. </html> 5）逻辑运算符
（5）类型转换
1）字符串传数值类型
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 字符串转数值型通过Number方法实现
10. document.write("2 + Number('3.4') = ", 2 + Number('3.4'), "<br>");
11. </script>
12. </body>
13. </html> 2）整型转换
浮点的数值类型与字符串的数值类型可以通过parseInt方法转成整形具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 整型转换
10. document.write("2 + parseInt('3.4') = ", 2 + parseInt('3.4'), "<br>"); // 字符串转整型
11. document.write("2 + parseInt(3.4) = ", 2 + parseInt(3.4), "<br>"); // 浮点数转整型
12. </script>
13. </body>
14. </html> 3）浮点数转换
数值型字符串与数值类型可以通过parseFloat方法转成浮点数，具体示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 浮点数转换
10. document.write("2 + parseFloat('3.4') = ", 2 + parseFloat("3.4"), "<br>");
11. </script>
12. </body>
13. </html> （6）字符串方法
JavaScript内置了好多针对字符串操作的方法，下面我们就演示一些常用的字符串方法具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 字符串示例
10. document.write("hello".toUpperCase(), "<br>") // 转换为大写字母
11. w = "JavaScript"
12. document.write(w.toLowerCase(), "<br>") // 转换为小写
13. document.write(w.small(), "<br>") // 变小字体
14. document.write(w.bold(), "<br>") // 变粗字体
15. document.write(w.strike(), "<br>") // 给文字加上横线
16. document.write(w.fontsize("5em"), "<br>") // 设置字号大小
17. document.write(w.link("http://www.baidu.com"), "<br>") // 给其增加url链接
18. document.write(w.fontcolor("red").fontsize("12em"), "<br>") // 连续使用多个方法设置
19. </script>
20. </body>
21. </html> （7）数组
JavaScript的数组类型可以包含不同的数据类型，比如一个数组同时包含字符串与数值类型，其跟Python非常类似，具体使用示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 数组示例
10. arr = [15, 30, "Meher"]
11.
12. // 遍历数组方式一：
13. document.write("遍历数组方式一：", "<br>");
14. for(a in arr)
15. document.write(arr[a], " ");
16. document.write("<br>");
17.
18. // 遍历数组方式二：
19. document.write("遍历数组方式二：", "<br>");
20. for (var i=0;i<arr.length;i++){
21. document.write(arr[i], " ");
22. }
23. document.write("<br>");
24.
25. document.write(arr.pop(), "<br>"); // 移除数组最后一个元素
26. arr.push("JavaScript"); // 在数组最后增加一个元素
27. document.write(arr.pop(), "<br>");
28. document.write("该数组长度为: ", arr.length, "<br>");
29. </script>
30. </body>
31. </html> 至此我们《JavaScript基础教程上篇》就讲完了，下篇内容主要讲解JavaScript的控制语句、函数编程及异常处理等相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
念：通过判断指定表达式的值来决定执行还是跳过某些语句，用于基于不同条件执行不同的动作。
JavaScript的条件语句，在我的理解中可以分为四种情况：
语法：
if(condition){
// 当条件为 true 时执行的代码
}示例：
账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态
本文分享自华为云社区《如何写出漂亮的条件表达式 - JavaScript 实现篇》，原文作者：查尔斯。
条件表达式，是我们在coding过程中永远躲不开的问题，也是我们骗代码行数最方便的东西（狗头.jpg），但作为一名程序员，我们也要追求自己的“信达雅”，下面就让我们看看以下几种常见的条件表达场景，如何写的漂亮！
多条件语句使用Array.includes
举个例子
function printAnimals(animal) {
if (animal === "dog" || animal === "cat") {
console.log(`I have a ${animal}`);
}
}
console.log(printAnimals("dog")); // I have a dog这种写法在条件比较少的情况下看起来没有问题，此时我们只有 2 种动物，但是如果我们有更多的条件需要判断（更多的动物）呢？如果我们继续拓展判断的条件，那么代码将会变得难以维护，而且逻辑会不清晰。
解决方法
可以使用Array.includes来重写条件语句
function printAnimals(animal) {
const animals = ["dog", "cat", "hamster", "turtle"];
if (animals.includes(animal)) {
console.log(`I have a ${animal}`);
}
}
console.log(printAnimals("hamster")); // I have a hamster在这里，我们创建了一个动物数组，以便将条件与代码的其余部分分开提取。现在，如果我们想要检查任何其他动物，我们需要做的就是添加一个新的数组项。
我们还可以在这个函数的范围之外使用 animals 变量，以便在代码的其他地方重用它。这是一种编写更清晰、更容易理解和维护的代码的方法。不是吗?
这是一个非常好的技巧来压缩你的代码，使它看起来更简洁。让我们以前面的示例为例，添加更多的条件。如果这个动物不是一个简单的字符串，而是一个具有某些属性的对象呢?
所以现在的要求是:
const printAnimalDetails = (animal) => {
let result; // declare a variable to store the final value
// condition 1: check if animal has a value
if (animal) {
// condition 2: check if animal has a type property
if (animal.type) {
// condition 3: check if animal has a name property
if (animal.name) {
// condition 4: check if animal has a gender property
if (animal.gender) {
result = `${animal.name} is a ${animal.gender} ${animal.type};`;
} else {
result = "No animal gender";
}
} else {
result = "No animal name";
}
} else {
result = "No animal type";
}
} else {
result = "No animal";
}
return result;
};
console.log(printAnimalDetails()); // 'No animal'
console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'
console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'
console.log(
printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'上面的代码它工作得很好，但是代码很长，很难维护。如果不使用提示工具，可能会浪费一些时间来确定右括号的位置。想象将会发生什么如果代码更复杂的逻辑。很多if...else的语句!
我们可以使用三元操作符、&&条件等来重构上面的函数，但是让我们使用多个返回语句来编写更精确的代码。
const printAnimalDetails = ({ type, name, gender } = {}) => {
if (!type) return "No animal type";
if (!name) return "No animal name";
if (!gender) return "No animal gender";
// Now in this line of code, we're sure that we have an animal with all //the three properties here.
return `${name} is a ${gender} ${type}`;
};
console.log(printAnimalDetails()); // 'No animal type'
console.log(printAnimalDetails({ type: dog })); // 'No animal name'
console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'
console.log(printAnimalDetails({ type: dog, name: "Lucy", gender: "female" })); // 'Lucy is a female dog'在重构版本中，还包括解构和默认参数。默认参数确保如果我们将 undefined 作为参数传递给方法，我们仍然有一个要解构的值，这里是一个空对象 {}。
通常，代码是在这两种方法之间编写的。
举个例子
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];
// condition 1: vegetable should be present
if (vegetable) {
// condition 2: must be one of the item from the list
if (vegetables.includes(vegetable)) {
console.log(`I like ${vegetable}`);
// condition 3: must be large quantity
if (quantity >= 10) {
console.log("I have bought a large quantity");
}
}
} else {
throw new Error("No vegetable from the list!");
}
}
printVegetablesWithQuantity(null); // No vegetable from the list!
printVegetablesWithQuantity("cabbage"); // I like cabbage
printVegetablesWithQuantity("cabbage", 20);
// 'I like cabbage`
// 'I have bought a large quantity'现在,我们有:
一个通用的规则是发现无效的条件时尽早返回
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];
// condition 1: throw error early
if (!vegetable) throw new Error("No vegetable from the list!");
// condition 2: must be in the list
if (vegetables.includes(vegetable)) {
console.log(`I like ${vegetable}`);
// condition 3: must be a large quantity
if (quantity >= 10) {
console.log("I have bought a large quantity");
}
}
}通过这样做，我们减少了一个嵌套语句的级别。这种编码风格很好，特别是当使用长if语句时。通过反转条件并提前返回，我们可以进一步减少嵌套if。
请看下面的条件 2 是怎么做的:
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];
if (!vegetable) throw new Error("No vegetable from the list!");
// condition 1: throw error early
if (!vegetables.includes(vegetable)) return;
// condition 2: return from the function is the vegetable is not in
// the list
console.log(`I like ${vegetable}`);
// condition 3: must be a large quantity
if (quantity >= 10) {
console.log("I have bought a large quantity");
}
}通过反转条件 2 的条件，代码不再具有嵌套语句。当我们有很多条件并且希望在任何特定条件不满足时停止进一步的处理时，这种技术是有用的。
因此，总是以减少嵌套和尽早返回为目标，但不要过度。
让我们看一下下面的例子,我们想要根据颜色打印水果:
function printFruits(color) {
// use switch case to find fruits by color
switch (color) {
case "red":
return ["apple", "strawberry"];
case "yellow":
return ["banana", "pineapple"];
case "purple":
return ["grape", "plum"];
default:
return [];
}
}
printFruits(null); // []
printFruits("yellow"); // ['banana', 'pineapple']上面的代码实现没有错误，但是很冗长，同样的结果可以使用更简洁的语法来实现。
// use object literal to find fruits by color
const fruitColor = {
red: ["apple", "strawberry"],
yellow: ["banana", "pineapple"],
purple: ["grape", "plum"],
};
function printFruits(color) {
return fruitColor[color] || [];
}同样的，也可以使用 Map 来实现：
// use Map to find fruits by color
const fruitColor = new Map()
.set("red", ["apple", "strawberry"])
.set("yellow", ["banana", "pineapple"])
.set("purple", ["grape", "plum"]);
function printFruits(color) {
return fruitColor.get(color) || [];
}Map是 ES5 以来可用的对象类型，它允许存 key-value。
对于上面的示例，可以使用 Array.filter 实现相同的结果。
const fruits = [
{ name: "apple", color: "red" },
{ name: "strawberry", color: "red" },
{ name: "banana", color: "yellow" },
{ name: "pineapple", color: "yellow" },
{ name: "grape", color: "purple" },
{ name: "plum", color: "purple" },
];
function printFruits(color) {
return fruits.filter((fruit) => fruit.color === color);
}在使用 JavaScript 时，我们总是需要检查 null/undefined 并分配默认值或编译中断。
function printVegetablesWithQuantity(vegetable, quantity = 1) {
// if quantity has no value, assign 1
if (!vegetable) return;
console.log(`We have ${quantity} ${vegetable}!`);
}
//results
}
printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
printVegetablesWithQuantity('potato', 2); // We have 2 potato!如果蔬菜是一个对象呢?我们可以分配一个默认参数吗?
function printVegetableName(vegetable) {
if (vegetable && vegetable.name) {
console.log(vegetable.name);
} else {
console.log("unknown");
}
}
printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage在上面的示例中，我们希望打印蔬菜名(如果它可用)或打印 unknown。
我们可以通过使用默认参数&解构来避免条件if (vegetable && vegetable.name){}。
// destructing - get name property only
// assign default empty object {}
function printVegetableName({ name } = {}) {
console.log(name || "unknown");
}
printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage因为我们只需要属性名，所以我们可以使用 {name} 来改变参数的结构，然后我们可以在代码中使用 name 作为变量，而不是使用 vegetable.name。
我们还将一个空对象 {} 赋值为默认值，否则在执行 printVegetableName(undefined) 时，它将给出一个错误—— Cannot destructure property name of undefined or null，因为在 undefined 中没有 name 属性。
我们可以通过使用这些Array方法来减少代码行数。
下面的代码，我们想要检查是否所有的水果都是红色的:
const fruits = [
{ name: "apple", color: "red" },
{ name: "banana", color: "yellow" },
{ name: "grape", color: "purple" },
];
function test() {
let isAllRed = true;
// condition: all fruits must be red
for (let f of fruits) {
if (!isAllRed) break;
isAllRed = f.color == "red";
}
console.log(isAllRed); // false
}上面的代码太过冗长，我们可以通过使用 Array.every 来减少代码行：
const fruits = [
{ name: "apple", color: "red" },
{ name: "banana", color: "yellow" },
{ name: "grape", color: "purple" },
];
function test() {
// condition: short way, all fruits must be red
const isAllRed = fruits.every((f) => f.color == "red");
console.log(isAllRed); // false
}同样的，如果我们想要测试任何一个水果是否是红色的，我们可以使用 Array.some：
const fruits = [
{ name: "apple", color: "red" },
{ name: "banana", color: "yellow" },
{ name: "grape", color: "purple" },
];
function test() {
// condition: if any fruit is red
const isAnyRed = fruits.some((f) => f.color == "red");
console.log(isAnyRed); // true
}https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE
这两个功能对于 JavaScript 编写更简洁的条件非常有用。在编写本文时，它们还没有得到完全的支持，可能需要使用Babel进行编译。
可选链接能够处理类似树的结构，而不需要显式地检查中间节点是否存在，并且Nullish与可选链接结合使用非常有效，可以确保不存在节点的默认值。
举个例子:
const car = {
model: "Fiesta",
manufacturer: {
name: "Ford",
address: {
street: "Some Street Name",
number: "5555",
state: "USA",
},
},
};
// to get the car model
const model = (car && car.model) || "default model";
// to get the manufacturer street
const street =
(car &&
car.manufacturer &&
car.manufacturer.address &&
car.manufacturer.address.street) ||
"default street";
// request an un-existing property
const phoneNumber =
car &&
car.manufacturer &&
car.manufacturer.address &&
car.manufacturer.phoneNumber;
console.log(model); // 'Fiesta'
console.log(street); // 'Some Street Name'
console.log(phoneNumber); // undefined因此，如果我们想打印出来，如果汽车制造商来自美国，代码应该是这样的:
const isManufacturerFromUSA = () => {
if (
car &&
car.manufacturer &&
car.manufacturer.address &&
car.manufacturer.address.state === "USA"
) {
console.log("true");
}
};
checkCarManufacturerState(); // 'true'可以清楚地看到，对于更复杂的对象结构，这会变得多么混乱。有一些第三方库，如 lodash 或idx，它们有自己的功能。例如 lodash 有 _.get 方法。但是，在 JavaScript 语言本身中引入这个特性。
以下是这些新功能的工作原理:
// to get the car model
const model = car?.model ?? "default model";
// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? "default street";
// to check if the car manufacturer is from the USA
const isManufacturerFromUSA = () => {
if (car?.manufacturer?.address?.state === "USA") {
console.log("true");
}
};目前在 Stage 3 阶段。
以上就是基于JavaScript实现条件表达式的一些分享，希望对你能有所帮助~
点击关注，第一时间了解华为云新鲜技术~
*请认真填写需求信息，我们会在24小时内与您取得联系。
