javascript简单加法计算,javascript加法计算器

大家好，小编来为大家解答以下问题，javascript简单加法计算，javascript加法计算器，今天让我们一起来看看吧！

 7  数据类型:

7.1数据类型简介:

为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

 简单来说，数据类型就是数据的类别型号快码论文。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

变量的值具有数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。

这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

 js
 var age = 10;        // 这是一个数字型
 var areYouOk = '是的';   // 这是一个字符串 

   

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

 js
var x = 6;           // x 为数字
  var x = "Bill";      // x 为字符串

   

数据类型的分类

  JS 把数据类型分为两类：

  简单数据类型 （Number,String,Boolean,Undefined,Null）

  复杂数据类型 （object)

7.2 简单数据类型：

简单数据类型（基本数据类型）

JavaScript 中的简单数据类型及其说明如下：

类型	说明	默认值
Number	数字型，包含 整型值和浮点值，如21、0.21	0
Boolean	布尔值类型，如 true、false，等价于 1 和 0	false
String	字符串类型，如 “黄伟” 注意咱们 js 里面，字符串都带引号	""
Undefined	let a；生命了变量 a 但是没有给值，此时 a = undefined	undefined
Null	let a = null；生命了变量 a 为空值	null

7.2.1- 数字型 Number：

  JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。   IEEE754，64位浮点格式。

 js
  var age = 21;       // 整数
  var Age = 21.3747;  // 小数

     

 7.2.1.1 数字型进制：

    最常见的进制有二进制、八进制、十进制、十六进制。

 js
       // 1.八进制数字序列范围：0~7
      var num1 = 0o7;   // 对应十进制的7
      var num2 = 0o10;  // 对应十进制的8
      var num3 = 0o20;   // 对应十进制的16
       // 2.十六进制数字序列范围：0~9以及A~F
      var num = 0xA;   

     现阶段我们只需要记住，在JS中八进制前面加0o，十六进制前面加 0x  ，二进制 0b10101

  7.2.1.2 数字型范围：

     JavaScript中数值的最大和最小值

     最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

     最小值：Number.MIN_VALUE，这个值为：5e-32

数字中有一个Math（全局对象）

数值字面量中的分割符： let billion = 1_000_000_000;

     

7.2.1.3 数字型三个特殊值：

  

   Infinity ，代表无穷大，大于任何数值（全局常量） 1/0

   -Infinity ，代表无穷小，小于任何数值 -1/0

   NaN ，Not a number，代表一个非数值 a/0

  

  7.2.1.4 isNaN：

  

     用来判断一个变量是否为非数字的类型，返回 true 或者 false

  

NaN 包含{boolean,undefined,null,string,objct}

NaN === NaN 返回false

NaN 是一个全局常量

isNaN（）是一个全局函数

  

 js
     var usrAge = 21;
   var isOk = isNaN(userAge);
     console.log(isOk);          // false ，21 不是一个非数字
   var usrName = "andy";
     console.log(isNaN(userName));// true ，"andy"是一个非数字

  

7.2.2 字符串型 String：

  ​ 字符串型可以是引号中的任意文本，其语法为 双引号 " " 和 单引号' '

  js
  var strMsg = "我爱香哥~";  // 使用双引号表示字符串
  var strMsg2 = '我爱黄伟~';    // 使用单引号表示字符串
  // 常见错误
  var strMsg3 = 我爱smm;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

  ​ 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

  7.2.2.1 字符串引号嵌套：

     ​ JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

 js
     var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
     var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
     //  常见错误
     var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

  7.2.2.2 字符串转义符：

     ​ 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

     ​ 转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n   是   newline   的意思
\ \	斜杠   \
\'	'   单引号
\"	”双引号
\t	tab  缩进
\b	空格 ，b   是   blank  的意思

  

  7.2.2.3 字符串长度：

     ​字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

js
     var strMsg = "我是帅气多金的程序猿！";
     alert(strMsg.length); // 显示 11

    

  7.2.2.4 字符串拼接：

     多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

     拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

js
       //1.1 字符串 "相加"
       alert('hello' + ' ' + 'world'); // hello world
       //1.2 数值字符串 "相加"
       alert('100' + '100'); // 100100
       //1.3 数值字符串 + 数值
       alert('11' + 12);     // 1112 

      

       总结口诀：数值相加 ，字符相连

  7.2.2.5. 字符串拼接加强：

  js
     console.log('黄伟' + 18);        // 只要有字符就会相连 
     var age = 18;
     console.log('黄伟age岁啦');      // 这样不行哦
     console.log('黄伟' + age);         // pink老师18
     console.log('黄伟' + age + '岁啦'); // pink老师18岁啦

     经常会将字符串和变量来拼接，变量可以很方便地修改里面的值

     变量是不能添加引号的，因为加引号的变量会变成字符串

     如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

7.2.3 布尔型Boolean:

  ​ 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

  ​ 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

false{0,-0,NaN,undefined,null}

js
  console.log(true + 1);  // 2
  console.log(false + 1); // 1

7.2.4 Undefined和 Null:

  ​ 一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果），undefined是一个全局常量

 js
  var variable;
  console.log(variable);           // undefined
  console.log('你好' + variable);  // 你好undefined
  console.log(11 + variable);     // NaN
  console.log(true + variable);   //  NaN

  ​ 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

js
  var vari = null;
  console.log('你好' + vari);  // 你好null
  console.log(11 + vari);     // 11
  console.log(true + vari);   //  1

null的(typeof)返回值是objct，并且是一个关键字

7.3获取变量数据类型:

获取检测变量的数据类型

  typeof 可用来获取检测变量的数据类型

 js
  var num = 18;
  console.log(typeof num) // 结果 number      

  ​不同类型的返回值:

类型	例	结果
String	typeof "小白"	"string"
Number	typeof 18 typeof(NaN)	"number"
Boolean	typeof true	"boolean"
Undefined	typeof undefined	"undefined"
Null	typeof null	"object"

字面量:

  ​字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  数字字面量：8, 9, 10

  字符串字面量：'黑马程序员', "大前端"

  布尔字面量：true，false

7.4 数据类型转换:

​7.4.1 什么是数据类型转换？

​使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

转换为字符串类型

转换为数字型

转换为布尔型

7.4.2 转换为字符串:

  toString() 和 String()  使用方式不一样。

  三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。7.4.3 转换为数字型（重点）

  一元加法运算，可以将字符型转为数字型。但是在算数运算（有字符的情况下）中加号看作是字符连接。

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点

  隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

7.4.4 转换为布尔型:

  代表空、否定的值会被转换为 false  ，如 ''、0、NaN、null、undefined  

  其余值都会被转换为 true

 js
    console.log(Boolean('')); // false
    console.log(Boolean(0)); // false
    console.log(Boolean(NaN)); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    console.log(Boolean('小白')); // true
    console.log(Boolean(12)); // true

   

true 1 ,false 0 ; Number(true)= 1

 8  运算符（操作符）

8.1 运算符的分类:

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

算数运算符 //+ - * / %

 递增和递减运算符 ++ -- let sum= i++ ; sum = ++i;

比较运算符 > < == ===

逻辑运算符 ! && ||

 赋值运算符 =

8.2 算数运算符:

算术运算符概述

 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

浮点数的精度问：

 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

 js
  var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

  所以：不要直接判断两个浮点数是否相等 ! 

表达式和返回值

 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

 简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给开发者，称为返回值

8.3 递增和递减运算符:

8.3.1 递增和递减运算符概述:

  如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

  在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。

放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

  注意：递增和递减运算符必须和变量配合使用。 

8.3.2 递增运算符:

  前置递增运算符

  ++num 前置递增，就是自加1，类似于 num =  num + 1，但是 ++num 写起来更简单。

  使用口诀：先自加，后返回值

js
  var  num = 10;
  alert(++num + 10);   // 21

后置递增运算符

    num++ 后置递增，就是自加1，类似于 num =  num + 1 ，但是 num++ 写起来更简单。

    使用口诀：先返回原值，后自加 

 js
  var  num = 10;
  alert(10 + num++);  // 20

8.4 比较运算符:

8.4.1 比较运算符概述:

  概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

8.4.2 等号比较

  js
  console.log(18 == '18');
  console.log(18 === '18'); 

8.5 逻辑运算符:

8.5.1 逻辑运算符概述:

  概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

8.5.2 逻辑与&&:

  两边都是 true才返回 true，否则返回 false ​               

8.5.3 逻辑或 ||:

  两边都是 false才返回 false，否则返回 true        

8.5.4 逻辑非 ！:

  逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

 js
  var isOk = !true;
  console.log(isOk);  // false

8.5.5 短路运算（逻辑中断）:

   短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

  8.5.6 逻辑与:

      语法： 表达式1 && 表达式2

      如果第一个表达式的值为真，则返回表达式2

      如果第一个表达式的值为假，则返回表达式1

 js
      console.log( 123 && 456 );        // 456
      console.log( 0 && 456 );          // 0
      console.log( 123 && 456&& 789 );  // 789

     

  8.5.7 逻辑或:

     语法： 表达式1 || 表达式2

     如果第一个表达式的值为真，则返回表达式1

     如果第一个表达式的值为假，则返回表达式2

js
      console.log( 123 || 456 );         //  123
      console.log( 0 ||  456 );          //  456
      console.log( 123 || 456 || 789 );  //  123

8.6 赋值运算符:

概念：用来把数据赋值给变量的运算符。

js
var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

8.7 运算符优先级:

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

 9  流程控制

9.1 流程控制概念:

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。

很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。

9.2 顺序流程控制：

​ 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

               

9.3 分支流程控制：

分支结构

  由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

                 

JS 语言提供了两种分支结构语句：if 语句、switch 语句

if 语句

  语法结构

 js
  // 条件成立执行代码，否则什么也不做
  if (条件表达式) {
      // 条件成立执行的代码语句
  }

  语句可以理解为一个行为，循环语句和分支语句就是典型的语句。

一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

  执行流程

   

if else语句（双分支语句）

  语法结构

 js
    // 条件成立  执行 if 里面代码，否则执行else 里面的代码
    if (条件表达式) {
        // [如果] 条件成立执行的代码
    } else {
        // [否则] 执行的代码
    }

    

  执行流程

   

if else if 语句(多分支语句)

  语法结构

 js
    // 适合于检查多重条件。
    if (条件表达式1) {
        语句1；
    } else if (条件表达式2)  {
        语句2；
    } else if (条件表达式3)  {
       语句3；
     ....
    } else {
        // 上述条件都不成立执行此处代码
    }

  执行逻辑

   

9.4 三元表达式：

语法结构

 js
 表达式1 ? 表达式2 : 表达式3;

执行思路

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

  简单理解： 就类似于  if  else （双分支） 的简写

9.5 switch分支流程控制：

语法结构

 switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。

当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

js
  switch( 表达式 ){ 
      case value1:
          // 表达式 等于 value1 时要执行的代码
          break;
      case value2:
          // 表达式 等于 value2 时要执行的代码
          break;
      default:
          // 表达式 不等于任何一个 value 时要执行的代码
  }

  switch ：开关 转换 

case ：小例子   选项

  关键字 switch 后面括号内可以是值， 通常是一个变量

  关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号

  switch 表达式的值会与结构中的 case 的值做比较 

  如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

  如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

   注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

switch 语句和 if else if 语句的区别

  一般情况下，它们两个语句可以相互替换

  switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)

  switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。

而 if…else 语句有几种条件，就得判断多少次。

  当分支比较少时，if… else语句的执行效率比 switch语句高。

  当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。