问题:

有一篮苹果，两个两个的拿剩一个，三个三个的拿剩一个，四个四个的拿剩一个，五个五个的拿剩一个，六个六个的拿剩一个，七个七个的拿，能拿完，请问这篮子里有多少个苹果？

(一) if else 语句 demo1

  1. // 条件为true, 执行if后面的括号代码, 否则执行 else 后面括号代码
  2. if(条件) {
  3.   // todo
  4. }else{
  5.   // todo
  6. }
  8. // 多重判断
  9. if(){
  11. } else if() {
  13. } else {
  15. }
  1. <script>
  2.     var count = -10;
  3.     if (count>0) {
  4.         console.log(count);
  5.     } else {
  6.         console.log('count 小于或等于 0');
  7.     }
  8.     var sex = prompt();
  9.     if (sex === '男') {
  10.         alert('这是个男人');
  11.     } else if(sex === '女') {
  12.         alert('这是个女人');
  13.     } else {
  14.         alert('从泰国回来的');
  15.     }
  16. </script>

1. 隐式转换 demo2-1

运算的过程中, 类型自动进行转换, 称之为隐式类型转换
  1. <script>
  2.     // 类型转换
  3.     var a = 2;
  4.     var b = 3;
  6.     if (a+b) {
  7.         console.log('a+b的值大于0');
  8.     } else {
  9.         console.log('a+b的值小于或等于0');
  10.     }
  11. </script>

2. 显式转换-其他类型转布尔类型 demo2-2

  • 转换方法 Boolean(变量名) 和 !!变量名
  • 转换结果为 true 或者 false
  • 字符串转布尔
  • 数字转布尔
  • undefined 转布尔
  • null 转布尔
  • 对象转布尔
    1. <script>
    2. var a = 5;
    3. var boo1 = Boolean(a);
    4. console.log(boo1);
    5. var boo2 = !!a;
    6. console.log(boo2);
    7. console.log('字符串转布尔-------');
    8. var str1 = 'asdfasdf';
    9. var str2 = '';
    10. var str3 = ' ';
    11. console.log(!!str1); // true
    12. console.log(!!str2); // false
    13. console.log(!!str3); // true
    14. console.log('数字转布尔------');
    15. var num1 = 2323; 
    16. var num2 = 0.8; 
    17. var num3 = 0;  
    18. var num4 = NaN; 
    19. console.log(!!num1); // true
    20. console.log(!!num2); // true
    21. console.log(!!num3); // false
    22. console.log(!!num4); // false
    23. console.log('undefined转布尔------');
    24. var x;
    25. console.log(!!x);
    26. </script>
    1. 总结:
    2. - 转换方法 Boolean(变量)或者 !!变量
    3. - 意思上若包含'无','空'的时候转为false,其他为true
    4. - 对象全部为true

    3. 显式转换-其他类型转数字类型 demo2-3

    1. <script>
    2. // 其他类型转数字类型
    3. console.log('字符串转数字');
    4. var str1 = 'asdfasdf';
    5. var str2 = '';
    6. var str3 = ' ';
    7. var str4 = '666';
    8. console.log(Number(str1)); // NaN
    9. console.log(Number(str2)); // 0
    10. console.log(Number(str3));
    11. console.log(Number(str4)); // 666
    12. console.log('布尔类型转数组----=');
    13. var boo1 = true;
    14. var boo2 = false;
    15. console.log(Number(boo1));  // 1
    16. console.log(Number(boo2));  // 0
    17. console.log(boo1+boo2);  // 1
    18. console.log('undefined转数字-----');
    19. var y = undefined;
    20. console.log(Number(y));
    21. console.log('null转数字-----');
    22. var z = null;
    23. console.log(Number(z));
    24. console.log('对象转数字-----');
    25. var obj = {a:2, b:3}
    26. console.log(Number(obj)); // NaN
    27. </script>
    ```javascript
    • 转换方法 Number(变量);
    • 转换结果: 数字, 0, NaN
    • 字符串转数字
    • 布尔转数字
    • undefined 转数字
    • null 转数字
    • 对象转数字

总结: (1)数字的转换结果有三种: 数字, 0 , NaN (2)其他类型转数字类型的时候, 就拿这三种结果区推断, 会是那一个

  1. <a name="oxna8"></a>
  2. #### 4. 显式转换-其他数据类型转字符串类型 demo2-4
  3. ```javascript
  4. <script>
  5.     var num = 100;
  6.     var obj = {a:2,b:3};
  7.     var boo = true;
  8.     console.log(num+'');
  9.     console.log(String(obj));
  10.     console.log(boo.toString());
  11. </script>
  1. (1)有三种方式
  2.   var num = 20;
  3.   - num + ''; // 常用
  4.   - String(num);
  5.   - num.toString();
  6. (2)转换规则: 把变量直接添加双引号,变成字符串

(三) 算术运算

加减乘除 + - * / % demo3-1

  1. <script>
  2.     // 算术运算符
  3.     var a = 5;
  4.     var b = 3;
  5.     console.log(a+b); // 8
  6.     console.log(a-b); // 2
  7.     console.log(a*b); // 15
  8.     console.log(a/b); // 1.66666
  9.     console.log(a%b); // 2
  10. </script>

2. 两个变量相加规则

  1. (1)两个数字相加,直接相加
  2. (2)有一个加数是字符串时,其它变量都转换成字符串,然后进行拼接 demo3-2.1
  3. <script>
  4.     var a = 100;
  5.     var str = 'hu';
  6.     var b = '5';
  7.     console.log(a+str);  // 100hu
  8.     console.log(b + null); // 5null
  9.     console.log(a+null);  // 100
  10.     console.log(a+NaN); // NaN
  11.     var c;
  12.     console.log(a+c); // NaN
  13. </script>
  14. (3)NaN,null,undefined + 数字
  15. (4)两个小数相加,有可能出现很多小数 demo3-2.2
  16. <script>
  17.     var a = 0.1;
  18.     var b = 0.2;
  19.     console.log((a*10+b*10)/10);  
  20. </script>

3. 两个小数相减规则

(四) 关系运算符(比较运算符)

1. == 等于

2. === 恒等于,全等于

3. == 和 === 的区别

  • == 不同类型的变量进行比较, 不比较变量类型, 类型转换后, 只比较值, 值相等, 则为true, 否则为false
  • === 先比较类型, 若类型不同,结果为false, 若类型相同,再比较值, 值相同, 则为true

    4. 建议尽量使用 ===

    1. <script>
    2. var count1 = 100;
    3. var count2 = '100';
    4. // 只比较值是否相等
    5. console.log(count1 == count2);
    6. // 1.先比较类型, 若类型不同,结果为false, 若类型相同,再比较值, 值相同, 则为true
    7. console.log(count1 === count2);
    8. </script>

    (五) 逻辑运算符

1. 逻辑非!, 取反即可

  1. <script>
  2.     var boo1 = true;
  3.     console.log(!boo1); // false
  4.     var boo2 = false;
  5.     console.log(!boo2); // true
  6.     var count = 100;
  7.     console.log(!count);   // false
  8.     var aa = NaN;
  9.     console.log(!aa);  // true;
  10.     var str = 'asdfsadfsad';
  11.     console.log(!str);  // false
  12.     console.log(!!str);  // true
  13. </script>

2. 逻辑与&&: 中文里并且的意思

  1. (1)对于布尔类型: 两者为true,结果为true demo5-2.1
  2. <script>
  3.     var boo1 = true;
  4.     var boo2 = false;
  5.     var boo3 = true;
  6.     var boo4 = false;
  7.     console.log(boo1 && boo3);  // 两者为true,结果为true, 其他情况皆为false
  8.     console.log(boo1 && boo2);
  9.     console.log(boo1 && boo4);
  10.     console.log(boo2 && boo3);
  11.     console.log(boo2 && boo4);
  12.     console.log(boo3 && boo4);
  13. </script>
  14. (2)对于其他类型: 前者为true取后者,前者为false取前者 demo5-2.2
  15. <script>
  16.     var count1 = 0;
  17.     var count2 = 200;
  18.     var count3 = 100;
  19.     console.log(count1 && count2);  // false
  20.     console.log(count2 && count3);  // true
  21.     // 逻辑与的妙用
  22.     var obj = null;
  23.     // console.log(obj.a); 
  24.     obj && obj.a;
  25. </script>
  26. (3)逻辑与的妙用: 
  27. var obj = null;
  28. console.log(obj.a); // 报错
  29. console.log(obj && obj.a); // 防止报错

3. 逻辑或|| : 中文里的或者的意思 demo5-2.3

  1. <script>
  2.       var boo1 = true;
  3.     var boo2 = false;
  4.     var boo3 = true;
  5.     var boo4 = false;
  6.     console.log(boo1 || boo3); // true
  7.     console.log(boo1 || boo2); // true
  8.     console.log(boo1 || boo4); //true
  9.     console.log(boo2 || boo3); //true
  10.     console.log(boo2 || boo4); //false
  11.     console.log(boo3 || boo4); // true
  12. </script>
  1. <script>
  2.     var num1 = 100;
  3.     var str = '';
  4.     var aa = null;
  5.     var obj = {};
  6.     console.log(num1 || str);  // 100
  7.     console.log(obj || num1);  // obj
  8.     console.log(aa || str);  
  9. </script>
  1. (1)对于布尔类型: 一个为true,结果为true
  2. (2)对于其他类型:前者为true取前者, 前者为false取后者

4. 总结: 逻辑与&& 和 逻辑或 ||, 只需要记住两句话

  1. 逻辑与: 前者为true取后者,前者为false取前者
  2. 逻辑或: 前者为true取前者, 前者为false取后者

资料1: 逻辑运算符练习

  1. 1. var num1 = 0;
  2.    !num1;  // true
  3. 2. var num2 = 100;
  4.    !num2;  // false
  5.    !!num2; // true
  6. 3. var num3 = NaN;
  7.    !num3;  // true
  8. 4. var str1 = '';
  9.    !str1;  // true
  10. 5. var str2 = 'abc';
  11.    !str2;  // false
  14. 10. 0 && 100;  // 0
  15. 11. 0 && NaN;  // 0
  16. 12. 100 && 0; // 0
  17. 13. 100 && NaN; // NaN
  18. 14. NaN && 0; // NaN
  19. 15. NaN && 100; // NaN
  21. 16. '' && 'abc';  // ''
  22. 17. 'abc' && '';  // ''
  23. 18. 'abc' && '456'; // '456'
  25. 19. true && true;  // true
  26. 20. true && false; // false
  27. 21. false && true; // false
  28. 22. false && false; // false
  30. 23. 0 && undefined; // 0
  31. 24. NaN && null; // NaN
  32. 25. 100 && 'abc'; 'abc'

资料2: 逻辑运算符练习2

  1. 6. var boo1 = true;
  2.    !boo1;  // false
  3. 7. var boo2 = false;
  4.    !boo2; // true
  5. 8. var name;
  6.    !name; // true
  7. 9. var cat = null;
  8.    !cat; // true
  10. var obj;
  11. 27. 'abc' && obj.name;  // 报错
  12. 28. undefined && obj.name;  // undefined
  13. 29. obj && obj.name; // undefined
  15. 30. 0 || 100;  // 100
  16. 31. 0 || NaN; // NaN
  17. 32. 100 || 0; // 100
  18. 33. 100 || NaN; // 100
  19. 34. NaN || 0; // 0
  20. 35. NaN || 100;  // 100
  22. 36. '' || 'abc';  // 'abc'
  23. 37. 'abc' || '';  // 'abc'
  24. 38. 'abc' || '456'; // 'abc'
  26. 39. true || true; // true
  27. 40. true || false; // true
  28. 41. false || true; // true
  29. 42. false || false; // false
  31. 43. 0 || undefined; // undefined
  32. 44. NaN || null;  // null
  33. 45. 100 || 'abc';  // 100
  34. 46. 'abc' || undefined // 'abc'
  36. 47. var obj;   'abc' || obj.name;  // 'abc'
  37. 48. undefined || obj.name;  // 报错

资料3: 编程题练习

  1. 编程题, 运算并打印结果
  2.    有一篮苹果，两个两个的拿剩一个，三个三个的拿剩一个，四个四个的拿剩一个
  3.    ，五个五个的拿剩一个，六个六个的拿剩一个，七个七个的拿，能拿完，请问这篮子里有多少个苹果？

资料4: 作业

  1. 编程题: 

    1. 有以下两个变量 num1 和 num2,若两个变量相加等于 15.3,则输出'运算正确',否则输出'运算错误'
    2. var num1 = 7.1;
    3. var num2 = 8.2;

  2. 编程题, 运算并打印结果
    有一篮苹果，两个两个的拿剩一个，三个三个的拿剩一个，四个四个的拿剩一个，五个五个的拿剩一个，六个六个的拿剩一个，七个七个的拿，能拿完，请问这篮子里有多少个苹果？

  3. 写出下面式子的值

    1. typeof 100
    2. typeof true
    3. typeof(undefined) )
    4. typeof({})
    5. typeof( [1,2] )
    6. typeof(NaN)
    7. typeof(null)

  4. 编程题: 多重判断
    作业要求: 在屏幕输入一个数字,确定后弹出相应的年龄段

    1. 年龄划分:
    2. “0-6岁为婴幼儿；
    3. 7-12岁为少儿；
    4. 13-17岁为青少年；
    5. 18-45岁为青壮年；
    6. 46-69岁为中年；
    7. 69岁以上为老年

  5. 写出下面式子的值 ```javascript ‘1.23’ == 1.23 0 == false null == undefined NaN == NaN 1 == ‘1’
    1 === ‘1’
    1 + ‘2’ === ‘1’ + 2
    1 + true === false + 2 1 + null == undefined + 1 ‘a’ - ‘b’ == ‘b’ - ‘a’ false 4 == ‘4.00’ 4 === ‘4.00’ 0 == false
    0 == null null == false

加减作业题 var score = 50; var grade = ‘7’; score + 10;
score + ‘10’;
score + null;
score + undefined; score + NaN;
score + 10; score + ‘10’; score + null; var num1 = 8;
var num2 = ‘8’; num1 - num2;
num1 - ‘web01’;
num1 - null;
num1 - undefined;
num1 - true;
num1 - false;
num1 - num2; ```