JavaScript基础学习总结 - 图1

JavaScript入门

模板字符串

  1. let firstName = '胡';
  2. let lastName = '雪岩';
  3. //使用+号拼接
  4. let say1 = '大家好，我姓' + firstName + '，名' + lastName;
  6. //使用反引号和占位符很方便
  7. let say2 = `大家好，我姓${firstName}，名${lastName}`;

转义符 \

  1. let str = "华为正式发布操作系统---\"鸿蒙OS\"";
  2. let say = `大家好，我姓${firstName}，名${lastName}，喜欢\`看书\``;

多行字符串拼接、使用表达式

  1. //使用+号要用到\n
  2. let str = '春眠不觉晓\n' + '处处闻啼鸟\n' + '夜来风雨声\n' + '花落知多少\n';
  4. //使用反引号直接回车很方便
  5. let str = `春眠不觉晓
  6. 处处闻啼鸟
  7. 夜来风雨声
  8. 花落知多少`;
  10. //或者在字符串中使用表达式
  11. let number1 = 20;
  12. let number2 = 10;
  13. console.log(`两个数的和是：${number1 + number2} 
  14. 两个数的差是：${number1 - number2} 。`);
  16. //使用三元表达式
  17. //结果为江苏
  18. let str = `这里是${false ? '浙江' : '江苏'}`;
  19. //结果为江苏-南京
  20. let str = `这里是${false ? '浙江' : `江苏-${true ? '南京' : '常州'}`}`;

三元表达式的使用场景

  1. 场景一 根据屏幕的宽度来动态改变样式 ```javascript // 定义屏幕的宽度，当然这个宽度是根据window的api去获取的 let screen = 750;

// 判断屏幕是大屏还是小屏，这里我们认为大于760px的就是大屏 function isLargeScreen() { return screen > 760; }

// 定义元素的排列方式，大屏row排列，小屏column排列 // 具体什么排列方式，是根据屏幕大小决定的 let item = { isCollapsed: screen < 760, };

// 这里我们就要根据上面的信息来动态的获取类名（多个） const classes = header ${ isLargeScreen() ? '' :icon-${item.isCollapsed ? ‘column’ : ‘row’}}; //输出为header icon-column console.log(classes);

  2. 2. 场景二
  4. 在JS中组装HTML代码
  5. ```javascript
  6. let htmlCode = `
  7.     <img src='' />
  8.     ${
  9.       true
  10.         ? `<img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg' />`
  11.         : `<img src='' />`
  12.     }
  13. `;
  14. console.log(htmlCode);

基础数据类型

浮点数的精度丢失现象

浮点数值的精度最高时17位小数，但是在算数运算中精度远不如整数。例如，0.1加0.2的值不是0.3：

  1. let number1 = 0.1;
  2. let number2 = 0.2;
  3. console.log(number1 + number2); // 0.30000000000000004

所以在使用条件判断时不要使用 == 

  1. //由于精度丢失，素以条件不成立
  2. if (a + b == 0.3) {
  3.   console.log('输出成功');
  4. }