0
点赞
收藏
分享

微信扫一扫

JavaScript-ECMAScript5

JavaScript-ECMAScript5

JavaScript各大模块笔记地址

模块地址
JavaScript-ECMAScript5-JS基础语法https://blog.csdn.net/weixin_44882488/article/details/124240800

一、计算机编程基础

1. 编程语言

1.1 编程

  • 编程
    就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程

  • 计算机程序
    就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令

  • 程序员
    就是从事编程的人员, 但是一般程序员都比较幽默,为了形容自己的辛苦工作,也成为“码农”,
    或者 “程序猿”/ “程序媛”

  • 注意!!!
    上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器
    等等

1.2 计算机语言

  • 计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介
  • 计算机语言的种类非常的多,总的来说可以分成机器语言,汇编语言和高级语言三大类
  • 实际上计算机最终所执行的都是 机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基
例如:
0=00000000 1=00000001 2=00000010 3=00000011 4=00000100 
5=00000101 6=00000110 7=00000111 8=00001000 9=00001001 
10=00001010

1.3 编程语言

  • 可以通过类似于人类语言的 ”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言
  • 编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守
  • 如今通用的编程语言有两种形式:汇编语言和高级语言
    汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆
    高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等
C语言:puts("你好");
PHP:echo "你好";
Java:System.out.println("你好");
JavaScript: alert("你好";

1.4 翻译器

  • 高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器。
  • 翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化, 记住1和 0
    在这里插入图片描述

1.5 编程语言和标记语言区别

  • 编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的
    指令,这是主动的。
  • 标记语言(html)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的

1.6 总结

计算机可以帮助人类解决某些问题

  • 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
  • 编程语言有机器语言、汇编语言、高级语言
  • 高级语言需要一个翻译器转换为计算机识别的机器语言
  • 编程语言是主动的有很强的逻辑性

2、计算机基础

2.1 计算机组成

  • 组成图
    在这里插入图片描述
    在这里插入图片描述

2.2 数据存储

  • 计算机内部使用二进制 0 和 1来表示数据
  • 所有数据,包括文件、图片等最终都是以二进制数据(0 和 1)的形式存放在硬盘中的
  • 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中
  • 硬盘、内存都是保存的二进制数

2.3 数据存储单位

bit < byte < kb < GB < TB<…

  • 位(bit): 1bit 可以保存一个 0 或者 1 (最小的存储单位)
  • 字节(Byte):1B = 8b
  • 千字节(KB):1KB = 1024B  兆字节(MB):1MB = 1024KB
  • 吉字节(GB): 1GB = 1024MB
  • 太字节(TB): 1TB = 1024GB

2.4 程序运行

  • 打开某个程序时,先从硬盘中把程序的代码加载到内存中
  • CPU执行内存中的代码
    在这里插入图片描述
  • 注意:之所以要内存的一个重要原因,是因为 cpu 运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)

二、初识JavaScript

1. 初识 JavaScript

1.1 JavaScript 是什么?

  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)
  • 脚本语言:不需要编译,运行过程中由
  • 现在也可以基于 Node.js 技术进行服务器端编程
  • 为了阅读方便,我们后面把JavaScript 简称为 JS
    在这里插入图片描述

1.2 JavaScript 的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

1.3 HTML/CSS/JS 的关系

1.3.1 HTML/CSS 标记语言–描述类语言 JS 脚本语言–编程类语言

  • HTML 决定网页结构和内容( 决定看到什么 ),相当于人的身体
  • CSS 决定网页呈现给用户的模样( 决定好不好看 ),相当于给人穿衣服、化妆

1.3.2 JS 脚本语言–编程类语言

  • 实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作

1.4 浏览器执行 JS 简介

浏览器分成两部分:渲染引擎和 JS 引擎

  • 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
  • JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
  • 浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释
    每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行
    在这里插入图片描述

1.5 JavaScript 组成

  • JavaScript的组成
    在这里插入图片描述
  • ECMAScript
  1. ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展
    在这里插入图片描述
  2. ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准

更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

  • DOM ——文档对象模型
  1. DOM(Document Object Model,简称DOM)是指文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口
  2. 通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
  • BOM ——浏览器对象模型
  1. BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行
  2. 互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等

1.6 JS 位置

JS 有3种书写位置,分别为 行内内嵌外部

  • 行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />
  1. 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
  2. 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  3. 可读性差, 在html中编写JS大量代码时,不方便阅读;
  4. 引号易错,引号多层嵌套匹配时,非常容易弄混;
  5. 特殊情况下使用
  • 内嵌式
 <script>
 alert('Hello World~!');
 </script>
  1. 可以将多行JS代码写到<script></script>标签中
  2. 内嵌 JS 是学习时常用的方式
  • 外部 JS文件引入
<script src="my.js"></script>
  1. 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  2. 引用外部 JS文件的 script 标签中间不可以写代码
  3. 适合于JS 代码量比较大的情况

三、ECMAScript5 基础语法

1. JavaScript 注释

为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释、多行注释两种

1.1 单行注释

单行注释的注释方式如下:

// 我是一行文字,不想被 JS引擎 执行,所以 注释起来
  • // 用来注释单行文字( 快捷键 ctrl + / )

1.2 多行注释

多行注释的注释方式如下:

/*
  获取用户年龄和姓名
 并通过提示框显示出来
*/
  • /* */ 用来注释多行文字( 快捷键: ctrl + shift + / )

2. JavaScript 输入输出语句

为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框,用户可以输入浏览器

注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息

3.变量

3.1 变量概述

  • 什么是变量
  1. 白话:变量就是一个装东西的盒子
  2. 通俗:变量是用于存放数据的容器,我们通过 变量名 获取数据,甚至数据可以修改
    在这里插入图片描述
  • 变量在内存中的存储
  1. 本质:变量是程序在内存中申请的一块用来存放数据的空间。
  2. 类似我们酒店的房间,一个房间就可以看做是一个变量。
    在这里插入图片描述

3.2 变量的使用

变量在使用时分为两步: 1. 声明变量 2. 赋值

  • 声明变量
// 声明变量
 var age; // 声明一个 名称为age 的变量
  1. var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配
    内存空间,不需要程序员管
  2. age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
  • 赋值
  1. = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
  2. 变量值是程序员保存到变量空间里的值
  • 变量的初始化
  1. 声明一个变量并赋值, 我们称之为变量的初始化
var age = 18; // 声明变量同时赋值为 18
  • 案例
  1. 弹出一个输入框,提示用户输入姓名
  2. 弹出一个对话框,输出用户刚才输入的姓名
<script>
     //弹出输入框 propmt()
    var myName = prompt("请输入你的姓名");
    //弹出输入的内容 alert()
    alert(myName)
</script>

3.3 变量语法扩展

  • 更新变量
    一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准
<script>
    var age = 18;
    age = 81; // 最后的结果就是81因为18 被覆盖掉了
    console.log(age)//81
</script>
  • 同时声明多个变量
    同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开
<script>
    var age = 10,
     name = 'zs',
     sex = 2;
     console.log(age,name,sex)//10 zs 2
</script>
  • 声明变量特殊情况
情况说明结果
var age ; console.log (age);只声明 不赋值undefined
console.log(age)不声明 不赋值 直接使用报错
age = 10; console.log (age);不声明 只赋值10

3.4 变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。 18age 是错误的
  • 不能 是关键字、保留字。例如:var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
  • 推荐翻译网站: 有道 爱词霸

3.5 案例

  • 要求:交换两个变量的值 ( 实现思路:使用一个 临时变量 用来做中间存储 )
    <script>
        var num1 = 10,
            num2 = 20,
            num3 = num2,//将num2的值存在num3中
            num2 = num1,//将num1的值赋给num2
            num1 = num3;//将num3的值赋给num1
        console.log(num1) //20
        console.log(num2) //10
    </script>

4.数据类型

4.1 数据类型的分类

  • JS 把数据类型分为两类
  1. 简单数据类型 (Number,String,Boolean,Undefined,Null)
  2. 复杂数据类型 (object)

4.2 简单数据类型(基本数据类型)

  • JavaScript 中的简单数据类型及其说明如下:
简单数据类型说明默认值
Number数字型,包含整型值和浮点型值,如21,0.210
String字符串类型,如“张三”“”
Boolean布尔值类型,如true,false ,等价于1和0false
Undefinedvar a; 声明了变量a但是没有赋值,此时a=undefinedundefined(未定义的)
Nullvar a = null;声明了变量a为空值null

4.3 数字型 Number

  • JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)
<script>
    var nun = 10; //整数
    var num = 3.14; //小数
</script>
  • 数字型进制
  1. 最常见的进制有二进制、八进制、十进制、十六进制
  2. 在JS中八进制前面加0,十六进制前面加 0x
  3. 进制之间的转换过程 https://jingyan.baidu.com/article/495ba84109665338b30ede98.html
<script>
    //进制
    // 1.生活中常用的是十进制数字,也就是逢10进一
    var num4 = 20;
    console.log(num4)

    // 2.八进制数字序列范围:0~7
    var num1 = 07; // 对应十进制的7
    var num2 = 012; // 对应十进制的12
    var num3 = 08; // 对应十进制的8

    // 3.十六进制数字序列范围:0~9以及A~F
    var num = 0xA;
</script>
  • 数字型范围
  1. JS中数值的最大值 MAX_VALUE
  2. JS中数值的最小值 MIN_VALUE
<script>
    //数字的范围 javascript中数字的最大值和最小值
    // 1.最大值
    var num5 = Number.MAX_VALUE
    console.log(num5) //1.7976931348623157e+308

    // 2.最小值
    var num6 = Number.MIN_VALUE
    console.log(num6) //5e-324
</script>
  • 数字型的三个特殊值
  1. Infinity 代表无穷大,大于任何数值
  2. -Infinity 代表无穷小,小于任何数值
  3. Nan Not a Number,代表一个非数值
<script>
    //数字型的三个特殊值 
    // 1.无穷大 Infinity
    var num7 = Number.MAX_VALUE * 2
    console.log(num7) //Infinity

    // 2.无穷小 -Infinity
    var num8 = -Number.MAX_VALUE * 2
    console.log(num8) //-Infinity

    // 3.非数字 NaN
    var num9 = 5 - "你好"
    console.log(num9) //NaN
</script>
  • isNaN 判断是不是非数字型
    这个方法用来判断非数字,并且返回一个值,如果是数字返回的是false,如果不是数字返回的是true
    在这里插入图片描述
<script>
    //判断是不是非数字型
    // isNaN()这个方法用来判断非数字,返回值为Boolean类型
    var num1 = 12
    console.log(isNaN(num1)) //false 数字型

    var num2 = 'aaa'
    console.log(isNaN(num2)) //true 非数字型
</script>

4.4 字符串型 String

  • 字符串型可以是引号中的任意文本,其语法为 “双引号” 和 "单引号’’
  • 因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号
<script>
    var strMsg = "我爱北京天安门~"; //使用双引号表示字符串
    var strMsg = '我爱北京'; //使用单引号表示字符串
</script>
  • 字符串引号嵌套 JS可以用 单引号嵌套双引号,或者用 双引号嵌套单引号(外双内单,外单内双)
<script>
    // 1.外双内单 用" "  包含  ''
    var strMsg2 = "我是'高富帅'"
    // 2.内双外单 ' ' 包含 " "
    var strMsg = '我是一个"高富帅"'
</script>
  • 字符串转义符
  1. 类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符
  2. 转义字符参考 https://blog.csdn.net/butbabuc/article/details/108109829
    转义符都是 \ 开头的,常用的转义符及其说明如下:
转义符解释说明
\n换行符,n是newline
\ \斜杠\ (重点)
\ ’’ 单引号
\ ‘’‘’ 双引号
\ ttab 缩进 (重点)
\ b空格,b是blank
  • 转义字符案例
<script>
    //字符串转义符案例
    var s = '酷热难耐,火辣的太阳底下,我挺拔的身姿,\n 成为了最为独特的风景。我审视四周,\n这里,是我的舞台,\n我就是天地间的王者。这一刻,\n我豪气冲天,终于大喊一声:"收破烂啦"'
    alert(s)
</script>

在这里插入图片描述

  • 字符串长度 length
  1. 字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符
    串的长度
  2. 注意:字符串的长度包括里面的空格
<script>
    //字符串长度 length
    // 1.检测获取字符串的长度
    var str = 'my name is andy'
    console.log(str.length) //15
</script>
  • 字符串的拼接 +
  1. 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  2. 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
    注意:字符串 + 任何类型 =拼接之后的新字符串
  3. + 号总结口诀:数值相加 ,字符相连
<script>
    //字符串的拼接 +
    // 1.字符串型+字符串
    var str1 = '沙漠';
    var str2 = '骆驼'
    console.log(str1 + str2) //沙漠骆驼
    console.log('我是' + '孙悟空') //我是孙悟空
    console.log('12' + '12') //1212

    // 2.字符串型+数字型
    console.log('我今年' + 18 + '岁啦') //我今年18岁啦

    // 3.字符串型+Boolean型
    console.log('我是' + true) //我是true

    // 4.数字型+数字型
    console.log(12 + 12) //24
</script>
  1. 字符串拼接加强
<script>
    //字符串拼接的加强
    var age1 = 18;
    var age2 = age1 + 1;
    console.log('我今年' + age1 + '岁啦')//我今年18岁啦
    console.log('我明年' + age2 + '岁啦')//我今年19岁啦
</script>

 我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
 变量是不能添加引号的,因为加引号的变量会变成字符串
 如果变量两侧都有字符串拼接,口诀“引引加加 ”,删掉数字,变量写加中间

  • 显示年龄案例
<script>
    //显示年龄案例
    // 弹出一个输入框,需要用户输入年龄,之后弹出一个警示框显示“您今年 xx 岁啦”(xx 表示刚才输入的年龄)
    var age = prompt('请输入你的你年龄');
    var str = '你今年' + age + '岁啦'; //引引加加
    alert(str)
</script>

4.5 布尔型 Boolean

  • 布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)
  • 布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0
<script>
    // true做加法时当1来看
    var flag1 = true;
    console.log(flag1 + 1) // 2
    var flag2 = false;

    // false做加法时当0来看
    console.log(flag2 + 1) // 1
</script>

4.6 未定义 Undefined

  • 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
  1. undefined 和 字符串 相加,会拼接字符串
  2. undefined 和 数字相加,最后结果是NaN
  3. undefined 和 boolean值相加,最后结果是NaN
<script>
    // 如果一个变量声明未赋值,就是undefined 未定义数据类型
    var num;
    console.log(num) //undefined

    // 0.undefined拼接
    // 1.undefined+undefined
    var num1;
    var num2;
    console.log(num1 + num2) //NaN

    // 2.undefined+string
    var num3;
    console.log(num + '你好啊') //undefined你好啊

    // 3.undefined+boolean
    var num4;
    console.log(num4 + true) //NaN
    console.log(num4 + false) //NaN

    // 4.undefined+number
    var num5;
    console.log(num5 + 44) //NaN
</script>

4.7 空值 Null

  • 一个声明变量给 null 值,里面存的值为空
  1. null+null=0
  2. null+number=number
  3. null+string=nullstring
  4. null+boolean=0/1
  5. null+undefined=NaN
<script>
    //一个声明变量给 null 值,里面存的值为空
    var space = null
    console.log(space) //null

    // null+null
    console.log(space + space) //0

    // 1.null+string
    console.log(space + '你好呀') //null你好呀

    // 2.null+number
    console.log(space + 3) //3

    // 3.null+boolean
    console.log(space + false) //0
    console.log(space + true) //1

    // 4.null+undefined
    var num;
    console.log(space + num) //NaN
</script>

4.8 检测数据类型 Typeof

  • typeof 可用来获取检测变量的数据类型
  • 注意 Null的数据类型为 object
类型结果
stringtypeof “你哈”string
numbertypeof 18number
booleanttypeof truefalse
undefinedtypeof undefinedundefined
nulltypeof nullobject
<script>
    var num = 3;
    console.log(typeof num) //number
    var str = '你哈'
    console.log(typeof str) //string
    var flag = true
    console.log(typeof flag) //boolean
    var undefined;
    console.log(typeof undefined) //undefined
    var num22 = null;
    console.log(typeof num22) //object 
</script>

4.9 数据类型的颜色

  • 通过控制台的颜色判断属于哪种数据类型
数据类型颜色
String黑色
Number蓝色
Boolean深蓝色
Null浅灰色
Undefined浅灰色
<script>
    //String 黑色
    console.log('贝克汉姆') //黑色

    //Number 蓝色
    console.log(12) //蓝色

    //Boolean 深蓝色
    console.log(true); //深蓝色

    //Null和Undefined 浅灰色
    var num = null;
    console.log(num) //浅灰色
    var nu2;
    console.log(nu2) //浅灰色
</script>

5. 数据类型的转换

  • 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型
  • 我们通常会实现3种方式的转换:
  1. 转换为字符串类型
  2. 转换为数字型
  3. 转换为布尔型

5.1 转换为字符串型

  • 转换方式
  1. toString()
  2. String()强制转换
  3. 加号拼接字符串(隐式转换 重点)
<script>
    //转换为字符串型
    // 1. 字型转换为字符型
    // 1.1 toString
    var num = 10;
    var str = toString(num)
    console.log(typeof str) //string

    // 1.2 String
    var num2 = 10;
    var str2 = String(num2)
    console.log(typeof str2) //string

    // 1.3 加号拼接字符串
    var num3 = 10;
    var str3 = num3 + '';
    console.log(typeof str3) //string
</script>
  • toString() String() 使用方式不一样
  • 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一方式也称为隐式转换

5.2 转换为数字型

  • 注意 parseInt parseFloat 单词的大小写,这两个是重点
  • 隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型
方式说明案例
parseInt(string)函数将string类型转成整数数值型 向下取整parseInt(‘18.9’)
parseFloat(string)函数将string类型转成浮点数数值型parseFloat(‘18.99’)
Number()强制转换函数将string类型转换为数值型Number(‘30.22’)
js 隐式转换(- * /)利用算术运算隐式转换为数值型‘12’ - 0
<script>
    // 1. 转换成数字型
    // 1.1 转换成整数型 parseInt(变量) 向下取整
    console.log(parseInt('18.9'), typeof parseInt('18.9')) //18 number
    console.log(parseInt('18.1')) //18
    console.log(parseInt('120px')) //120
    console.log(parseInt('rem120px')) //NaN非数字型

    // 1.2 转换成小数型 parseFloat(变量) 得到小数(浮点数)
    console.log(parseFloat('18.99'), typeof parseFloat('18.99')) //18.99 number

    // 1.3 Number强制转换
    console.log(Number('30.22'), typeof Number('30.22')) //30.22 'number'
    console.log(Number('30'), typeof Number('30')) // 30 'number'

    // 1.4 利用算数运算 -*/隐式转换
    console.log('12' - 0, typeof('12' - 0)); //12 'number'
    console.log('12' * 2, typeof('12' * 2)); //24 'number'
    console.log('12' / 2, typeof('12' / 2)); // 'number'
</script>

5.3 转换为布尔型

  • 代表否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined
  • 其余值都会被转换为 true
方法说明案例
Boolean()函数其他类型转成布尔值Boolean(‘true’)
<script>
    //转换成布尔型
    // 1.1  代表空,否定的值会被转换为false,如 ’ ’ , 0, NaN , null , undefined
    console.log(Boolean(0)) //false
    console.log(Boolean('')) //false
    console.log(Boolean(null)) //false
    console.log(Boolean(undefined)) //false
    console.log(Boolean(NaN)) //false

    // 1.2 其余的值都会被被转换为true
    console.log(Boolean(3.14)) //true
    console.log(Boolean('你好啊')) //true
</script>

6. 运算符

6.1 运算符分类

  • 运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号
  • JavaScript 中常用的运算符有:
  1. 算数运算符
  2. 递增和递减运算符
  3. 比较运算符
  4. 逻辑运算符
  5. 赋值运算符

6.2 算术运算符

  • 概念:算术运算使用的符号,用于执行两个变量或值的算术运算
  • 规则:先* /,后 +- ,有括号就先算括号里面的
运算符描述实例
+10 + 20 =30
-10 - 20 =-10
*10 * 20 =200
/10 / 20 =0.5
%取余数(取模)返回除法的余数 9 % 2 =1
%取余数(取模)返回除法的余数 9 % 3 =0
<script>
    //算数运算符 先*/,后+-,有括号就先算括号里面的
    // 1.  + - * /
    console.log(10 + 10) //20
    console.log(10 - 10) //0
    console.log(10 * 10) //100
    console.log(10 / 10) //1

    // 2. % 取余数
    console.log(9 % 3) //0
    console.log(9 % 2) //1
    console.log(2 % 9) //2

    // 3. 浮点数 
    // 3.1 所参与的式子都是浮点数的时候算数运算里面会有问题
    // 3.2 不要直接判断两个浮点数是否相等 !
    var num1 = 0.1 + 0.2;
    console.log(num1) //0.30000000000000004
    console.log(num1 == 0.3) //false 判断是否相等
    var num2 = 0.1 * 0.2
    console.log(num2) //0.020000000000000004
    console.log(num2 == 0.02) //false

    // 4. 当浮点数和整数相加的时候,就不会有问题 乘法不适用
    var num3 = 1 + 0.2 + 0.3
    console.log(num3) //1.5
    console.log(num3 == 1.5) //true
    var num4 = 3 * 0.3
    console.log(num4) //0.8999999999999999
    console.log(num4 == 0.9) //false
</script>

6.3 表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们称为返回值

<script>
    // 是由数字、运算符、变量等组成的式子,我们称为表达式 1+1
    console.log(1 + 1); //2 就是返回值

    // 正常情况下计算方式 1 + 1= 2
    // 在程序里面 2 = 1+ 1 把右边的表达式计算完毕之后返回值给左边(赋值)
    var num = 1 + 1;
</script>

6.4 递增和递减运算符

  1. 递增(++)
  2. 递减(- -)
    放在变量前面时,我们称为前置递增(递减)运算符
    放在变量后面时,我们称为后置递增(递减)运算符
    注意:递增和递减运算符必须和变量配合使用。
  • 前置递增运算符
  1. ++num
  2. num = num + 1
  3. 使用口诀: 先自加,后返回值
<script>
    // 1.想要变量自己加1 num=num+1 比较麻烦
    var num1 = 10;
    num1 = num1 + 1; //++num1
    console.log(num1) //11

    // 2.前置递增运算符 ++num ++写在变量的前面
    var num2 = 10;
    ++num2; //类似于 num2=num2+1
    console.log(num2) //11

    // 3.++前置使用口诀:先自加,后返回值
    var p = 10;
    console.log(++p + 10) //21  p+1+10

    // 4.前置--同理
    var num3 = 10;
    --num3;
    console.log(num3) //9
</script>
  • 后置递增运算符
  1. num ++
  2. num = num +1
  3. 使用口诀: 先返回原值,后自加
<script>
    // 1.num++ 后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单
    var num = 10;
    num++;
    console.log(num) //11

    // 2. 使用口诀:先返回原值,后自加
    var p = 20;
    console.log(p++ + 10) //30

    // 3.后置递减同理
     var num2 = 20;
    num2--;
    console.log(num2) //19
</script>

6.5 前置自增和后置自增的区别

  • 相同点:前置自增和后置自增单独写的时候,执行程序和结果是一样的
  • 不同点:
    前置口诀 先自加,后返回值
    后置口诀 先返回原值,后自加
<script>
    // 1.前置自增和后置自增单独写的时候,执行程序和结果是一样的
    var num1 = 10,
        num2 = 10;
    ++num1
    num2++
    console.log(num1, num2) //11 11

    // 2.前置口诀 先自加,后返回值
    var num3 = 20,
        num4 = ++num3 + 10; //num3=num3+1(先自加) num4=21+10
    console.log(num3, num4) //21 31

    // 3.后置口诀 先返回原值,后自加
    var num5 = 20,
        num6 = num5++ + 10 //num6=20+10(先返回值) num5++(后自增)
    console.log(num5, num6) //21 30
</script>
举报

相关推荐

0 条评论