您的位置: 首页  >  IT文章  >  javaScript 基础知识汇总（二）

javaScript 基础知识汇总（二）

分类: IT文章 • 2023-11-24 16:06:43

1、运算符

　　术语或者叫法：一元运算符、二元运算符、运算元（参数）

　　let x=0; x=5+2; //5和2为运算元，“+” 为二元运算符； x=-x; //"-" 为一元运算符

　　字符串连接功能，二元运算符 +

　　示例：

 1 let s = "my" + "string";
 2 alert(s); // mystring
 3  
 4  
 5 alert( '1' + 2 ); // "12"
 6 alert( 2 + '1' ); // "21"
 7 
 8 //运算符的运算方向是由左至右。如果是两个数字，后面再跟一个字符串，那么两个数字会先相加，再转化为字符串
 9 alert(2 + 2 + '1' ); // "41" 而不是 "221"
10 
11 字符串连接和转化是二元运算符加号 + 的一个特性。其它的数学运算符都只对数字有效。通常，他们会转化运算元为数字。
12 
13 alert( 2 - '1' ); // 1
14 alert( '6' / '2' ); // 3

　　数字转化功能，一元运算符 +

 1 //对数字无效
 2 let x = 1;
 3 alert(+x);//1
 4 
 5 let y = -2;
 6 alert(+y);//-2
 7 
 8 //转化非数字
 9 alert(+true); //1
10 alert(+""); //0
11 //这种方式和Number(...)相同，但是更加简短
12 
13 let apples = "5"
14 let oranges = "3"
15 alert(+apples+ +oranges);//5
16 //或者
17 alert( Number(apples) + Number(oranges) );//5

运算符优先级

javaScript 基础知识汇总（二）

赋值运算符

1 let x= 3*7+9-3
2 alert(x)

求余运算符 %

1 alert(5%2);//1是5/2的余数
2 alert( 8 % 3 ); // 2 是 8 / 3 的余数
3 alert( 6 % 3 ); // 0 是 6 / 3 的余数

幂运算符 **

1 alert( 2 ** 2 ); // 4  (2 * 2)
2 alert( 2 ** 3 ); // 8  (2 * 2 * 2)
3 alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
4 
5 alert( 4 ** (1/2) ); // 2 (1 / 2 幂相当于开方，这是数学常识)
6 alert( 8 ** (1/3) ); // 2 (1 / 3 幂相当于开三次方)

自相加/自相减

//自相加
let counter = 2;
counter++;      // 和 counter = counter + 1 效果一样，但是更加简洁
alert( counter ); // 3

//自相减
let counter = 2;
counter--;      // 和 counter = counter - 1 效果一样，但是更加简洁
alert( counter ); // 1
1 //符号前置 与后置
2              
3 let counter = 1;
4 let a = ++counter; //  返回自增完之后的值
5 alert(a); // 2
6 
7 let counter = 1;
8 let a = counter++;// 返回未自增时的值
9 alert(a)

位运算符

  • 按位与 ( & )
  • 按位或 ( | )
  • 按位异或 ( ^ )
  • 按位非 ( ~ )
  • 左移 ( << )
  • 右移 ( >> )
  • 无符号右移 ( >>> )

修改并替换

1 let n = 2;
2 n += 5; // now n = 7 (同 n = n + 5)
3 n *= 2; // now n = 14 (同n = n * 2)
4 alert( n ); // 14

逗号运算符

1 let a = (1 + 2, 3 + 4);
2 alert( a ); // 7 (3 + 4 的结果) 第一个语句 1 + 2 运行了，但是它的结果被丢弃了，然后 3 + 4 运行，计算结果被返回

 2、值的比较

　　比较方式：

  • 大于 / 小于：a > b，a < b。
  • 大于等于 / 小于等于：a >= b，a <= b。
  • 检测两个值的相等写为 a == b（注意表达式中是两个等号 =，若写为单个等号 a = b 则表示赋值）。
  • 检测两个值的不等，在数学中使用 ≠ 符号，而在 JavaScript 中则通过在赋值符号前增加叹号表示：a != b。

　　比较逻辑：

  • 比较操作符始终返回逻辑值。
  • 字符串间按“词典”顺序逐字符比较大小。
  • 当待比较的值类型不同时，它们会被转为数字（不包括严格相等检测）进行比较。
  • 在非严格相等 == 下，null 和 undefined 相等且各自不等于任何其他的值。
  • 在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。比较好的方法是单独检查变量是否等于 null/undefined。

　　注意事项：

//严格相等  比如区分0和false
alert( 0 == false ); // true
alert( '' == false ); // true
alert( 0 === false ); // false，这种方式可以区分出来，上面两种不可以
 1 null 和 0 的比较
 2     alert(null > 0) ;//false    
 3     alert(null < 0 );//false
 4     alert(null >=0);//true
 5 //原因：因为 “==” 比较是独立的，当判断null > 0 时已经返回了false 所以再进行“==”比较叫返回的为true
 6 
 7 undefined 和 0
 8 alert( undefined > 0 ); // false (1)
 9 alert( undefined < 0 ); // false (2)
10 alert( undefined == 0 ); // false (3)
11 原因：
12 (1) 和 (2) 中返回 false 是因为 undefined 在比较中被转换为了 NaN，而 NaN 是一个特殊的数值型取值，它与任何值进行比较都会返回 false。
13 (3) 中返回 false 是因为这是一个相等性检测，而 undefined 只与 null 相等，不会与其他值相等。

3、交互 alert prompt confirm

alert
显示信息。
1 alert("Hello");
prompt
显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null 
1 let age = prompt('How old are you?', 100);
2 
3 alert(`You are ${age} years old!`); // You are 100 years old!
confirm
显示信息等待用户点击确定或取消。点击确定返回 true，点击取消或 Esc 键返回 false。
1 let isBoss = confirm("Are you the boss?");
2 
3 alert( isBoss ); // true 如果“确定”被按下

这些方法都是模态的：它们暂停脚本执行，并且不允许用户与该页面的其余部分交互，直到窗口被解除。

上述所有方法共有两个限制：

  1. 模态窗口的确切位置由浏览器决定。通常在页面中心。
  2. 窗口的确切外观还取决于浏览器。我们不能修改它。

4、条件运算符 if    ?

if 的使用

1 let year = prompt('In which year was ECMAScript-2015 specification published?', '');
2 
3 if (year < 2015) {
4   alert( 'Too early...' );
5 } else if (year > 2015) {
6   alert( 'Too late' );
7 } else {
8   alert( 'Exactly!' );
9 }

？的使用

1 let age = prompt('age?', 18);
2 
3 let message = (age < 3) ? 'Hi, baby!' :
4   (age < 18) ? 'Hello!' :
5   (age < 100) ? 'Greetings!' :
6   'What an unusual age!';
7 
8 alert( message );

5、逻辑运算符

　　JavaScript 里有三个逻辑运算符：|| (或), && (与), ! (非)。

　　或运算符寻找第一个真值

  
3 alert( 1 || 0 ); // 1（1 是真值）
4 alert( true || 'no matter what' ); //（true 是真值）
5 
6 alert( null || 1 ); // 1（1 是第一个真值）
7 alert( null || 0 || 1 ); // 1（第一个真值）
8 alert( undefined || null || 0 ); // 0（所有的转化结果都是 false，返回最后一个值）

　　与操作寻找第一个假值

1 // 如果第一个操作符是真值，
2 // 与操作返回第二个操作数：
3 alert( 1 && 0 ); // 0
4 alert( 1 && 5 ); // 5
5 
6 // 如果第一个操作符是假值，
7 // 与操作直接返回它。第二个操作数被忽略
8 alert( null && 5 ); // null
9 alert( 0 && "no matter what" ); // 0

　　！（非）

　　操作符接受一个参数，并按如下运作：

    1. 　将操作数转化为布尔类型：true/false。
    2. 返回相反的值。

　　

1 alert( !true ); // false
2 alert( !0 ); // true
1 //两个非运算 !! 有时候用来将某个值转化为布尔类型：
2 alert( !!"non-empty string" ); // true
3 alert( !!null ); // false
4 //更详细方式
5 alert( Boolean("non-empty string") ); // true
6 alert( Boolean(null) ); // false

　　

　　

相关推荐