JS第一天：数据类型及运算

lemon呀
286 阅读8分钟

javascript

概念

诞生

JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言, 最初名字叫做Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势。

1996年3月， Netscape公司的浏览器Navigator2.0浏览器正式内置了JavaScript脚本语言. 此后其他主流浏览器逐渐开始支持JavaScript。

版本

JavaScript这种语言的基本语法结构是由ECMAScript来标准化的, 所以我们说的JavaScript版本一般指的是ECMAScript版本.

版本说明实现
ECMAScript 1标准化了JavaScript1.1的基本特性，并添加了一些新特性。没有标准化switch语句和正则表达式。由Netscape 4.5和IE 4实现。
ECMAScript 2ECMA v1的维护版本，只添加了说明由Netscape 4.5和IE 4实现。
ECMAScript 3标准化了switch语句、异常处理和正则表达式。由Mozilla、Netscape 6和IE 5.5实现。
ECMAScript 5添加了“严格模式”。添加了 JSON 支持。添加了 String.trim()。添加了 Array.isArray()。添加了数组迭代方法。-
ECMAScript 2015（ES6）添加了 let 和 const添加了默认参数值添加了 Array.find()添加了 Array.findIndex() [4]-
ECMAScript 2016添加了指数运算符（**）。添加了 Array.prototype.includes [4]-
ECMAScript 2017添加了字符串填充。添加了新的 Object 属性。添加了异步功能。添加了共享内存。 [4]-
ECMAScript 2018添加了 rest / spread 属性。添加了异步迭代。添加了 Promise.finally()。增加 RegExp。 [4]-

ES6以后的版本，我们经常统称为ESNext。

语言的组成

javascript = ECMAScript + BOM + DOM

  • 核心(ECMAScript)
  • 浏览器对象模型(BOM) brower
  • 文档对象模型(DOM) document

ECMA(欧洲电脑厂商联合会)制定js规范。

W3C(万维网联盟)制定html及css规范

语法

js代码的书写位置

  1. 作为html属性值

<a href="javascript:alert(100)"></a> 点击a执行js代码

  1. 通过script标签

    script标签

    • [src] 引入外部js的路径
    • [type="text/javascript"] 链接文件的类型，可省略
    • 内部js代码
    <script type="text/javascript">
  // 书写javascript代码
</script>
    • 链接外部js文件
    <script src="引入外部js的路径" type="text/javascript">
  // ！！！拥有src属性的script标签里，不要写js代码，无效
</script>

js注释

<script type="text/javascript">
  // 单行注释
  /*
    多行注释
  */
</script>

声明变量及赋值

<script type="text/javascript">
  // 1.声明变量（容器）,通过关键字var
  var uname;
  // 2.对变量赋值,通过=, 将右边的值赋给左边的变量
  uname = "xiaotiantian";
  // 3.声明变量及赋值
  var age = 38; //将38的值赋给age
  
  // 4.同时声明多个变量
  var a,b;
  a = 30;
  b = 40;
  // 等同于
  var a=30,b=40,c=50;
</script>

变量命名规范：

  • 变量名由数字,字母,下划线_和美元符$组成,不能由数字开头
  • 不能使用关键字或保留字
  • 严格区分大小写，如：age和Age是不同的变量

变量命名建议：

  1. 见名知义，例如苹果就写apple
  2. 驼峰命名，例如我的苹果就写myApple

数据类型

基本数据类型

Number

// 1.数字类型Number, 值:纯数字、NaN(非数字)
var a = 10;

String

// 2.字符串类型string, 有引号的值都是字符串类型。
var str = "true";//字符串

Boolean

// 3.布尔类型Boolean, 只有两个值:true、false
var tianqi = true;//布尔类型

备注：若是字符串里还存在引号，怎么办？

// 若是这样写，会报SyntaxError语法错误
var str = 'It‘s fine'
​
// 解决办法：
// 1. 将外层引号修改成另一种引号
var str = “It‘s fine”
// 2. 通过转义字符\
var str = 'It's fine'

特殊数据类型

Null

Null 类型只有一个特殊的值为 null，表示一个空对象引用(指针)。

Undefined

  • Undefined类型只有一个特殊的值为 undefined。
  • 通过var声明变量后,没有对变量进行赋值，这个变量的值就是undefined。

underfine与not defined的区别：

underfine是没有对变量进行初始化赋值;

not defined是报错，意思是该变量未定义、不存在，不能使用。

判断数据类型 typeof()

typeof(123) // "number"
typeof(NaN) // "number"
typeof("123") // "string"
typeof("ang") // "string"
typeof(true) // "boolean"
typeof(false) // "boolean"
typeof(null) // "object"

数据类型的转换

  • 主动转换

    • Number() 转成数字

    • String() 转成字符串，在值两侧加引号

    • Boolean() 转成布尔值，true、false

      • 0、NaN、""、null、undefined转换布尔值为false，其他都是true
Number("111");   //111
Number("true");   //NaN,非数字
Number(true);    //1
Number(false);   //0
​
String(111);   //"111"
String(true);  //"true"
​
Boolean(111);  //true

  • 隐式转换

    • 如果运算不能进行下去，内部就会尝试进行数据类型的转换

      "10"-"3" ===> 10-3=7

    • 当隐式转换后，运算仍无法进行，得到NaN

      "lemon"-2 ==> NaN -2 ==>NaN

常用输出

  • alert(具体的值||变量(不加引号)) 弹窗输出
  • console.log(具体的值||变量(不加引号)) 打印到控制台，多用于调试
  • document.write(具体的值||变量(不加引号)) 往body输出内容
// 输出具体的值
document.write(100)
document.write("zifuchuan")
document.write(false)
// 输出变量
var uname = 'lemon'
document.write(uname)
// 还可配合标签输出
document.write('<div>我的内容会呈现在div标签里面</div>');
  • 元素.innerHTML = 具体的值||变量(不加引号) 往元素里面输出内容

运算

算术运算

// +  -  *  /  % 
// 加 减 乘  除 取余(取模)
var num1 = 10
var num2 = 20
alert(num1 + num2)

字符串拼接

若加号两侧中，有一个值为字符串类型，则相加为字符串拼接。

小技巧：若字符串里面拼接变量，遵循口诀：在字符串里面写引号引号，往引号里面写加号加号，往加号里面写变量

var num1 = 10
var str = "aa" + num1
console.log(str)  //aa10      

案例：计算两个文本框算术运算的值。

通过该案例，了解获取元素节点、事件， 学习数据类型的转换及NaN。

NaN

非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN。

  • 不代表任何值，也不等于任何值，甚至自己都不等于自己
  • 任何数据与NaN运算都返回NaN
  • isNaN(a)用来判断a到底是不是非数字,返回布尔值

案例：为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

赋值运算

  • = 将右边的值赋值给左边的变量

  • += 将右边的值追加给左边的变量

    var str = "my name is"
var uname = "lemon"
str = str + uname //先进行右边的运算，再赋值。等同于str += uname

  • -=、*=、/=、%=

var age = 17
age *= 2 // 等同于age = age * 2，最终age为34

关系运算

  • ==(等于)、 !=(不等于)
  • === 全等于、!== 不全等于

== 判断左右两边的值隐式转换后相等返回true

=== 判断当两边的值和数据类型完全相等时，才返回true

  • <(小于)、>(大于)、<=(小于等于)、>=(大于等于)

案例：猜数字游戏。通过该案例掌握关系运算的比较规则。

比较规则

  • 数字和数字比较, 直接比较大小
  • 数字和字符串比较, 字符串转换为数字后再比较
  • 字符串和字符串比较, 进行字符的ASCII码值比较

思考：两个文本框的数字如何比大小？

逻辑运算（返回布尔值）

  • &&逻辑与

    • 与运算，当运算符两侧条件都返回true，才返回true
    • 若与运算符左侧条件返回false，右侧代码不执行

  • ||逻辑或

    • 或运算，当运算符两侧条件都返回false，才返回false
    • 若或运算符左侧条件返回true，右侧代码不执行

  • ! 逻辑非，取反

    !true得到false

&&比||优先级高

案例：闰年平年（能被4整除但不能被100整除，或者能被400整除的才叫闰年）

通过该案例，学习逻辑运算及判断语句

一元运算

  • ++ 自增1
  • -- 自减1

相关知识点

数字的常用方法

  • Math.round() 四舍五入取整
  • parseInt() 转化成整数
  • parseFloat() 转化成浮点数
  • Math.random() 生成0-1随机数,不包括1
  • number.toFixed(n) 将数字转化成带有n位小数的字符串（四舍五入）

点击事件

  1. 声明函数function 函数名(){ js代码 }

  2. 点击事件时执行函数

    • 写法1：作为HTML属性[onclick="函数名()"]
    • 写法2：通过js代码元素.onclick = 函数名
// 或者，直接通过匿名函数的写法
元素.onclick = function () { js代码 }

参考

操作符优先级

运算符描述
., [], ()对象成员存取、数组下标、函数调用、分组等
++, –, ~, !, delete, new, typeof, void一元运算符
*, /, %乘法、除法、取模
+, -加法、减法、字符串连接
<, <=, >, >=, instanceof关系比较、检测类实例
==, !=, ===, !==等于、恒等(全等)
&&逻辑与
``逻辑或
?:三元运算条件
=, +=, -=, *=, /=, %=赋值、运算赋值
,多重赋值、数组元素

术语

  • js表达式的概念:

    • 由运算符和操作数（变量或常量）组成的式子

      • 算术运算符组成的式子叫算术表达式

      • 关系运算符组成的式子叫关系表达式或者条件表达式

      • 逻辑运算符组成的式子叫做逻辑表达式

      • ...

      如：2+3；a+5；c>3; a&&b等

    • 一个表达式会产生一个值，可以放在任何一个需要值的地方

  • js语句

    • 主要为了进行某种操作，一般情况下不需要返回值
    • 循环语句和判断语句就是典型的语句，一个程序是由一系列语句组成的

进制

  • 二进制 var num = 0b10101101
  • 八进制var num = 0o0123
  • 十进制
  • 十六进制var num = 0xef9302

进制转换

  • 十进制转其他number.toString(n)
var number = 20
number.toString(2) //转成2进制
  • 其他转十进制 paserInt(str,n)
var x='110';  
parseInt(x,16);  //16进制转成10进制

  • 其他转其他

    • 先用parseInt转成十进制，再用toString转到目标进制
avatar
文章
阅读
粉丝