Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript基础语法（二）（运算符、流程控制、函数）
Blogger Information
Blog 5
fans 0
comment 0
visits 2394
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基础语法（二）（运算符、流程控制、函数）
幽幽小帆
Original
479 people have browsed it

1、运算符

（1）赋值运算符

一个 赋值运算符(assignment operator) 将它右边操作数的**值**赋给它左边的操作数。最简单的赋值运算符是等于（=），它将右边的操作数值赋给左边的操作数。那么 x = y 就是将 y 的值赋给 x。

  1. =
  2. +=
  3. -=
  4. *=
  5. /=

（2）算术运算符

算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值。标准的算术运算符就是加减乘除(+ - * /)。

当操作数是浮点数时，这些运算符表现得跟它们在大多数编程语言中一样（特殊要注意的是，除零会产生Infinity）。

除了标准的算术运算符（+， - ，* /），JavaScript还提供了下表中的算术运算符。

  • %：求余，返回相除之后的余数。
  • ++：自增
  • --：自减
  • -：返回操作数的负值
  • +：如果操作数在之前不是number，试图将其转换为number
  • **：指数运算符
    • 2 ** 3 returns 8
    • 10 ** -1 returns 0.1

（2）逻辑运算符

逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上&&和||返回的是一个特定的操作数的值，所以当它用于非布尔值的时候，返回值就可能是非布尔值。

  1. &&
  2. ||
  3. !

短路求值：

作为逻辑表达式进行求值是从左到右，它们是为可能的“短路”的出现而使用以下规则进行测试：

  • false && anything // 被短路求值为false
  • true || anything // 被短路求值为true

逻辑的规则，保证这些评估是总是正确的。请注意，上述表达式的anything部分不会被求值，所以这样做不会产生任何副作用。

（3）比较运算符

  1. =        // 赋值运算符
  2. ==       // 等于（类型不一样，值一样，也会判断true
  3. ===      // 绝对等于（类型一样，值一样）
  • 这是js的一个缺陷，坚持不要使用 == 比较
  • NaN 和任何值都不相等，包括自身，只能通过 isNaN(NaN) 来判断这个数是否是NaN
  • 浮点数问题：

null 和 undefined

  • null 空
  • undefined 未定义

（4）字符串运算符

除了比较操作符，它可以在字符串值中使用，连接操作符（+）连接两个字符串值相连接，返回另一个字符串，它是两个操作数串的结合。

  1. var myString = "alpha";
  3. myString += "bet"; // 返回 "alphabet"

（5）逗号运算符

逗号操作符（,）对两个操作数进行求值并返回最终操作数的值。它常常用在 for 循环中，在每次循环时对多个变量进行更新。

例如

  • 假如 a 是一个二维数组，每个维度各有10个元素，以下代码利用逗号操作符来同时改变两个变量的值。
  • 这段代码的功能是打印出该二维数组的对角线元素的值：
  1. var x = [0,1,2,3,4,5,6,7,8,9]
  2. var a = [x, x, x, x, x];
  4. for (var i = 0, j = 9; i <= j; i++, j--)
  5.   console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
  7. 结果：
  8. a[0][9]= 9
  9. a[1][8]= 8
  10. a[2][7]= 7
  11. a[3][6]= 6
  12. a[4][5]= 5

（6）一元操作符

  • delete
    • delete操作符，删除一个对象的属性或者一个数组中某一个键值
    • 如果 delete 操作成功，属性或者元素会变成 undefined。
    • 删除数组中的元素时，数组的长度是不变的，例如删除a[3], a[4]，a[4]和a[3] 仍然存在变成了undefined。
  • typeof
    • typeof 操作符返回一个表示 operand 类型的字符串值。operand 可为字符串、变量、关键词或对象，其类型将被返回。
  • void
    • void运算符表明一个运算没有返回值。
    • 如下创建了一个超链接文本，当用户单击该文本时，不会有任何效果。
  1. <a href="javascript:void(0)">Click here to do nothing</a>

（7）关系操作符

  • in
    • in操作符，如果所指定的属性确实存在于所指定的对象中，则会返回true
  1. // Arrays
  2. var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
  3. 0 in trees;        // returns true
  4. 3 in trees;        // returns true
  5. 6 in trees;        // returns false
  6. "bay" in trees;    // returns false (you must specify the index number,
  7.                    // not the value at that index)
  8. "length" in trees; // returns true (length is an Array property)
  10. // Predefined objects
  11. "PI" in Math;          // returns true
  12. var myString = new String("coral");
  13. "length" in myString;  // returns true
  15. // Custom objects
  16. var mycar = {make: "Honda", model: "Accord", year: 1998};
  17. "make" in mycar;  // returns true
  18. "model" in mycar; // returns true
  • instanceof
    • 如果所判别的对象确实是所指定的类型，则返回true。
    • 当你需要确认一个对象在运行时的类型时，可使用instanceof

（7）运算符优先级

运算符的优先级，用于确定一个表达式的计算顺序。在你不能确定优先级时，可以通过使用括号显式声明运算符的优先级。

Operator type Individual operators
member . []
call / create instance () new
negation/increment ! ~ - + ++ -- typeof void delete
multiply/divide * / %
addition/subtraction + -
bitwise shift << >> >>>
relational < <= > >= in instanceof
equality == != === !==
bitwise-and &
bitwise-xor ^
bitwise-or ` `
logical-and &&
logical-or ` `
conditional ?:
assignment `= += -= *= /= %= <<= >>= >>>= &= ^= =`
comma ,

更为详细的版本：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table

2、流程控制

（1）if else

  1. let age = 3;
  2. if (age >= 18){
  3.     console.log("成年人");
  4. }else if (age >= 12){
  5.     console.log("青少年");
  6. }else{
  7.     console.log("儿童");
  8. }

（2）switch

  1. <script>
  2.     let err = 0;
  3.     switch(err){
  4.         case 0:
  5.             console.log('请求错误');
  6.             break;
  7.         case 1:
  8.             console.log("请求超时");
  9.             break;
  10.         case 2:
  11.             console.log("请求成功");
  12.             break;
  13.         default:
  14.             console.log("未知错误");
  15.             break;
  16.     }
  17. </script>
  1. <script>
  2.     let age = 0;
  3.     switch(true){
  4.         case age >=18 && age < 65:
  5.             console.log('青壮年');
  6.             break;
  7.         case age >= 12 && age < 18:
  8.             console.log("青少年");
  9.             break;
  10.         case age >=3 && age < 12:
  11.             console.log("儿童");
  12.             break;
  13.         case age < 3:
  14.             console.log("婴幼儿");
  15.             break;
  16.         default:
  17.             console.log("退休了");
  18.             break;
  19.     }
  20. </script>

（3）三元表达式

Boolean(条件)? A : B 

  1. // 如果Boolean(gender)则输出女，否则输出男。
  2. Boolean(gender)? '女': '男';

（3）for循环

循环三条件：

  1. 初始条件：数组索引的引用（i= 0）
  2. 循环条件：为真则执行循环体（i < arr.length）
  3. 更新条件：必须要有，否则进入死循环（i++）

①、for循环

  1. for(let i=0; i< 100; i++){
  2.     console.log(i)
  3. }
  5. let age = [12, 3, 45, 24, 53, 32, 56, 45, 67];

②、while循环

  1. var num = 0;
  2. while(num <= 100){
  3.     console.log(num);
  4.     num++;
  5. }
  7. do{
  8.     console.log(num);
  9.     num++;
  10. }while(num < 100)

③、for of 循环

ES6语法糖，类似python

  1. let age = [12, 3, 45, 24, 53, 32, 56, 45, 67];
  2. for (let num of age){
  3.     console.log(num);
  4. }

④、for in 循环

对象遍历用 for…in

  1. let age = [12, 3, 45, 24, 53, 32, 56, 45, 67];
  2. for (let num in age){
  3.     console.log(num);         // num 是age的索引
  4.     console.log(age[num]);    // 输出值
  5. }
  1. let obj = {
  2.     id:1,
  3.     username: 'xiaoniu',
  4.     'max salary': 123456,
  5. };
  6. for (var key in obj){
  7.     console.log(key);         // key obj
  8.     console.log(obj[key]);    // 输出值
  9. }

3、函数

对于重复的计算过程，可以考虑函数进行封装，实现“代码复用”。

（1）函数的声明和调用

这部分基础语法（一）中已有。

（2）匿名函数

匿名函数有两种：

  • 第一种：函数是一次性的，称为立即调用函数， IIFE
    • 将声明与调用二合一
  1. (function(a,b){
  2.    console.log(a+b);
  3. })(10,50);
  • 第二种：函数不是一次性的，可以使用函数表达式
    • 将匿名函数当成值赋给一个变量
    • 调用方式：通过变量
  1. let getUserName = function(username){
  2.     return "Hello" + username;
  3. }
  4. console.log(getUserName('小牛同学'));
  • 第三种：箭头函数
    • 用于简化匿名函数
  1. // 命名函数
  2. function sum(a, b){
  3.     return a + b
  4. }
  6. // 匿名函数
  7. let add1 = function(a, b){
  8.     return a + b
  9. }
  11. // 箭头函数
  12. let add2 = (a, b)=>{
  13.     console.log(a + b)
  14. }

转化方法：

  • 去掉function
  • 在参数列表与大括号之间使用 =>
  1. // 如果函数体只有一条语句，**大括号**可以不写
  2. <script>
  3.     let sum = (a, b)=>a+b;
  4.     let res = sum(23, 342);
  5.     console.log(res);      // 结果为：365
  6. </script>
  8. <script>
  9.     let sum = (a, b)=>console.log(a+b);
  10.     sum(23, 342);         // 结果为：365
  11. </script>
  13. // 如果参数只有一个，那么**参数的括号**也可以不写
  14. add = a => a+5;
  15. console.log(add(34, 42));
  17. // 但是没有参数时，括号必须写
  18. add = ()=>15+3;
  19. console.log(add());

补充

  • 胖箭头：=>
  • 瘦箭头：→

（3）函数传参

①、参数不足时，可以设置默认参数

参数不足时，可以设置默认参数

  1. function sum1(num1, num2){
  2.     let total = 0;
  3.     total = num1 + num2;
  4.     console.log("total =", total); 
  5. }
  6. sum1(12, 34);
  7. sum1(23);    // 输出： NaN，原因是由于参数不足。
  10. //对于参数不足可以设置一个默认参数
  11. function sum2(num1, num2=0){
  12.     let total = 0;
  13.     total = num1 + num2;
  14.     console.log("total =", total); 
  15. }
  16. sum2(23);
  • function: 函数声明的关键字
  • sum1：函数名称
  • (num1, num2)： 参数列表
  • (12, 34)：调用参数，实际参数（实参），与上面参数列表中的参数一一对应。

③、参数过多时，可以使用rest语法

对于传入函数参数过多的情况，可以使用 rest语法 来解决，这种方式叫做归内参数/剩余参数/不定参数，将多余参数压到一个数组参数中。

  1. function sum3(...args){
  2.     console.log(args);     // 输出：[23, 34, 545, 7, 23]
  3. }
  4. sum3(23,34,545,7,23);

①、将 … 用在函数的形参中，就是rest，归并操作，把多余的参数压到一个数组中。

  1. <script>
  2.     let f = (a,b,...c)=>console.log(a,b,c);
  3.     f(1,2,3,4,5,6);                             // 输出： 1 2 [3, 4, 5, 6]
  4. </script>

②、将 … 用在函数的调用参数中，就是扩展/展开，spread。

  1. let f = (a,b,...c)=>console.log(a,b,c);
  2. f(1,2,3,4,5,6);
  4. const arr = [12,45,67,76,34]
  5. f(...arr)

（4）函数的返回值

函数只能有一个返回值，默认单值返回。

如果需要返回多个值呢？

  • 可以使用数组或者对象
  1. <script>
  2.     let fn = () => [1,2,3]
  3.     let res = fn();
  4.     console.log(res);
  6.     fn = () =>({
  7.         id:2,
  8.         name:'admin',
  9.         age:'23',
  10.     });
  11.     console.log(fn());
  12. </script>

（5）作用域

作用域分为：全局作用域、函数作用域，还有块作用域（块作用域不常用）。

  1. // 块作用域
  2. {
  3.   let a = 1;
  4.   console.log(a);
  5. }
  6. console.log(a);

①、函数作用域

函数作用域，即为在函数里边的变量。

②、全局作用域

全局作用域，即在函数外边的变量。

注：

函数里可以调用函数外的变量，但是函数外不能调用函数内的变量。

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

  1. function foo() {
  2.     var x = 1;
  3.     function bar() {
  4.         var x = 'A';
  5.         console.log('x in bar() = ' + x);
  6.     }
  7.     console.log('x in foo() = ' + x);       // 1
  8.     bar();                                  // 'A'
  9.     console.log('x in foo() = ' + x);       // 1
  10. }
  12. foo();
  15. // 输出：
  16. x in foo() = 1
  17. x in bar() = A
  18. x in foo() = 1

作用域链：作用域链用于查询变量。作用域链的内容是：查询变量的时候，先从函数内部查询，如果有就直接访问，如果没有则向上一个作用域查询，一级一级向上，直到全局作用域。

作用域链的特点：

  • 单向的。
  • 由外向内传递可以，但是由内向外禁止。

（6）闭包

闭包的两个条件：

  1. 父子函数
  2. 自由变量
  1.   <body>
  2.     <script>
  3.       function parent() {
  4.         let a = 5;
  5.         function f(b) {
  6.           let c = 7;
  7.           return a + b + c;
  8.         }
  9.         return f;
  10.       }
  11.       console.log(parent());
  12.       const f1 = parent();
  13.       console.log(f1);
  14.       console.log(f1(3));
  15.     </script>
  16.   </body>

以下代码中 a 是子函数f 的自由变量。

  1.   <body>
  2.     <script>
  3.       function parent1(a) {
  4.         function f(b) {
  5.           let c = 7;
  6.           return a + b + c;
  7.         }
  8.         return f;
  9.       }
  11.       // 这时候，在外部调用 parent1() 会返回一个函数，此时闭包就产生了。
  12.       console.log(parent1(4));
  13.       // parent1() 调用结束，应该将空间和参数都释放的，但是由于父函数中第一个变量a 被它的一个子函数引用着，所有就不能销毁，这就会产生闭包。
  14.       const f1 = parent1(4);
  15.       console.log(f1);
  16.       console.log(f1(3));
  17.     </script>
  18.   </body>

  1. // 如果：
  2. const f1 = parent1();
  3. console.log(f1(3));      // 结果为NaN，因为a缺少参数。

闭包的示例：

  1. let counter = (function(n){return function(){return n++}})(1);
  2. console.log(counter());
  3. console.log(counter());
  4. console.log(counter());


（7）对象字面量的简化

①、属性简化

  1. <script>
  2.     let username = 'jack';
  3.     let name = 'marry';
  5.     let user1 = {
  6.         username: 'tom',
  7.     };
  8.     console.log(user1.username);    // 输出：tom
  10.     let user2 = {
  11.         username: name,
  12.     };
  13.     console.log(user2.username);    // 输出：marry
  15.     let user3 = {
  16.         username: username,
  17.     };
  18.     console.log(user3.username);    // 输出：jack
  20.     // 简化熟悉
  21.     let user4 = {
  22.         username,
  23.     };
  24.     console.log(user4.username);    // 输出：jack
  26. </script>

当满足以下两个条件的时候，可以简化属性：

  1. 作用域相同：对象属性与变量处于同一作用域下面。
  2. 名称相同：对象属性与变量同名。

②、方法简化

  1. <script>
  2.     let username = 'jack';
  3.     let user = {
  4.         username,
  5.     };
  6.     console.log(user.username);    // 输出：jack
  8.     let user1 = {
  9.         username,
  10.         getName: function(){
  11.             return 'Hello ' + this.username;
  12.         },
  13.     };
  14.     console.log(user1.getName())    // 输出：Hello jack
  16.     // 简化方法
  17.     // 语法：省略 ": function"
  18.     let user2 = {
  19.         username,
  20.         getName(){
  21.             return 'Hello ' + this.username;
  22.         },
  23.     };
  24.     console.log(user2.getName())    // 输出：Hello jack
  25. </script>

（8）模板字面量和模板函数

模板字面量：也叫”模板字符串”，是同义词，我觉得用”模板字面量”更直观，准确
模板函数：有的书也翻译与”标签函数”，因为它使用”模板字面量”做参数，称为”模板函数”更准确。

①、模板字符串

  1. <script>
  2.     // 传统的输出字符串，使用双引号或者单引号
  3.     console.log("Hello World!");  
  5.     // 如果要输出多行字符串，那么传统方法：
  6.     console.log("html \n" + "css\n" + "js");
  8.     // 输出表达式计算结果：
  9.     let a = 10, b=20;
  10.     console.log(a + "+" + b + "=" + (a, b))
  12.     // 使用模板字符串
  13.     // 模板字符串语法： 对变量或表达式可以使用 ${x} 来引用。
  14.     let res = `${a} + ${b} = ${a + b}`
  15.     console.log(res);
  17.     // 模板表达式可以嵌套
  18.     let gender = 0;
  19.     let res1 = `${gender? `男:${name}`: `女`}`;
  20.     console.log(res1);
  21. </script>

注：使用插值占位符： **${}** ，可以将变量或表达式插入到字符串中。

②、模板函数

使用模板字符串为参数的函数

例如：

  1. alert`Hello World!`
  1. <script>
  2.     function calc(strs, ...args){
  3.         console.log(strs);
  4.         console.log(args);
  5.         console.log(args[0] * args[1])
  6.     }
  7.     calc`数量: ${10}, 单价: ${50}`
  8. </script>

注：

  • 模板函数就是在“模板字面量”之前加一个标签/标识符，而这个标签就是一个函数名。
  • 模板函数的参数是有约定的，不能乱写，第一个是字面量数组，从第二个开始才是内部的占位符参数。
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post