第四天

02-语言基础-第01天{变量、语句}

• 第四天
  • JS基础知识
    • 输出语句
    • JS书写位置
      • 内嵌式
      • 外联式
    • 标签属性
  • 变量
    • 变量的声明
    • 变量的赋值
    • 申明赋值连写
    • 变量命名规范
    • 交换两个变量
      • 使用临时变量
      • 不使用临时变量
  • 数据类型
    • 字符串类型(string)
    • 数值类型(number)
    • boolean类型
    • undefined类型
  • 数据类型转换
    • 转字符串
    • 转数值
    • 转boolean
  • 运算符
    • 算术运算符
    • 逻辑运算符
    • 赋值运算符
    • 一元运算符
    • 三元运算符
  • 流程控制
    • 条件判断 if else
    • 分支选择 switch case

JS基础知识

输出语句

JS书写位置

内嵌式

<script>
    console.log("在下江湖人称...")
</script>   

外联式

<script src="main.js"></script>

标签属性

<script type="text/javascript"></script>
<script async="async" src="main.js"></script>// 针对外部JS使用
<script defer="defer" src="main.js"></script>// 针对外部JS使用

变量

变量的声明

• 关键字 var

  var name;
  var age;
  
  

变量的赋值

• 等号赋值

  name = ”白玉京“;
  age = 18;
  
  

申明赋值连写

var name = "白玉京";
var age = 18;

变量命名规范

• 变量名取值范围:0-9,a-z,A-Z,_,$
• 数字不能作为变量名的开始部分
• 变量名称区分大小写
• 变量名称不能是关键字和保留字

交换两个变量

使用临时变量

    var a = 10;
    var b = 20;

    var temp = a;// 临时变量保存a的值
    a = b;
    b = temp;
    console.log(a);// 20
    console.log(b);// 10

不使用临时变量

    var a = 10;
    var b = 20;

    a = a + b;
    b = a - b;
    a = a - b;
    console.log(a);// 20
    console.log(b);// 10

数据类型

字符串类型(string)

• 特点:用引号引起来的一段文本（可以是英文状态下的单引号或双引号）

  var str = "在下江湖人称...";
  
  

• 字符串的不可变性:拼接字符串时会在内存中重新开辟空间存储新字符串,大量拼接会消耗性能

数值类型(number)

作用:用来表示数字(整数,小数,负数,0)

alert(123);
alert(0.5);
alert(-0.5);

boolean类型

• 作用:表示事物的正确和错误

• 取值:

  • 正确: true

  • 错误: false

    var isRight;
    isRight = true;
    var isWrong = false;
    
    

• 使用:通过表达式赋值

  var a = 1 > 3; // false
  var b = 10 > 1; // true
  
  

undefined类型

• 只申明未赋值的变量

数据类型转换

转字符串

使用String()转换

var a = 123;
a = String(a);
console.log(typeof a); // string

使用.toString()转换

var a = 123;
a = a.toString();
console.log(typeof a); // string

隐式转string

var a = 123;
a = a + "";
console.log(typeof a); // string

转数值

使用Number()进行转换

• 使用:

  var a = "123";
  a = Number(a);
  console.log(typeof a); // number
  
  

• 注意:

  • 如果转换的字符串是数字,则返回该数值

  • 如果转换的字符串不是数字,则转换后结果是NaN

    var a = "我叫赵日天";
    a = Number(a);
    console.log(a); // NaN
    
    

  • 如果是空字符串,则转换结果是0

    var a = "";
    a = Number(a);
    console.log(a); // 0
    
    

使用parseInt()转换

• 使用:

  var a = "123";
  a = parseInt(a);
  console.log(typeof a); // number
  
  

• 特点:

  1. 忽略字符串前面的空格,直至找到第一个非空字符串,并且将数字后面的非数字字符去掉
  2. 如果第一个字符不是数字或者符号,返回NaN
  3. 会将小数向下取整

使用parseFloat()转换

• 和parseInt()基本一样,唯一区别是转换时可以保留小数

隐式转换:字符串通过算术运算可以隐式转换成number

var a = "123";
a = +a;
console.log(typeof a);// number

转boolean

使用Boolean()转换

var a = "true";
a = Boolean(a);
console.log(a); // true
console.log(typeof a); //boolean

隐式转boolean

var a = 123;
a = !!a;
console.log(typeof a); // true

• 特点:除开false "" 0 NaN undefined这些值会被转换成bool值 false之外,可以将其他任意内容转换成bool值 true

运算符

算术运算符

基本运算符

+  -  * /  %    ()
加 减 乘 除 取余  提高运算优先级

逻辑运算符

&&:与运算(并且,和)

var a = 1 > 3 && 1 < 3; false

• 一假则假

||:或运算(或者)

var b = 3 > 3 || 1 < 3; true

• 一真则真

!:非(取反)

var a = 1 > 3 && 1 < 3; false
var b = !a; true

• 非真即假 非假即真 ### 比较运算符

• > < >= <=:大于 小于 大于等于 小于等于

• ==:比较(判断是否相等),只比较内容,不关心数据类型

  var a = 3;
  var b = "3";
  var c = a==b; // true
  
  

• ===:全等(判断是否相等),既比较内容也比较类型

  var a = 3;
  var b = "3";
  var c = a===b; // false
  
  

• !=:不等于,只比较内容

  var a = 1;
  var b = "1";
  var c = a != b; // false
  
  

• ！==:不全等,既比较内容,也比较类型

  var a = 1;
  var b = "1";
  var c = a !== b; // true
  
  

赋值运算符

= += -= /= %=

var a = 1;
a+=1;//a = a + 1;

一元运算符

• a++ 和 ++a:相当于a = a + 1;

  var a = 1;
  var b = a++ + 1;
  var c = ++a + 1;
  
  console.log(b); // 2
  console.log(c); // 3
  
  

• a-- 和 --a:相当于a = a - 1;

• 区别:

  • ++/-- 在前,先自增再参与运算
  • ++/-- 在后,先参与运算后自增

三元运算符

bool表达式?代码段1:代码段2;

// 判断bool表达式是否成立,如果成立执行代码段1,否则执行代码段2

流程控制

条件判断 if else

• if else

  if(条件语句/bool值){
  
      // 满足条件(bool值为true),执行这里面的代码
  
  }else{
  
      // 不满足条件语句(bool值为false),执行这里面的代码
  
  }
  
  

• if else if

  if(条件语句1/bool值){
  
      // 满足条件语句1(bool值为true),执行这里面的代码
  
  }else if(条件语句2/bool值){
  
      // 满足条件语句2(bool值为true),执行这里面的代码
  
  }else{
  
      // 不满足条件语句(bool值为false),执行这里面的代码
  
  }
  
  

分支选择 switch case

• switch后面是需要判断的数值

• 每一个case后面具体的数值用来和switch后面的值进行判断

• 如果所有的case都不满足,执行default

  switch(判断值){
      case 具体值1:
      // 代码
      break;
      case 具体值2:
      // 代码
      break;
      case 具体值3:
      // 代码
      break;
      case 具体值4:
      // 代码
      break;
      ...
      case 具体值n:
      // 代码
      break;
      default:
      // 代码
      break;
  }