1. 技术文章
  2. JavaScript

JavaScript

由 和自甴很熟 提交于 2021-01-14 10:57:18

JavaScript 努力学习ing 持续更新ing

js学习目录

1、初始JavaScript

1.1 JavaScript 历史

  • 布兰登艾奇（Brendan Eich,1961年~）.
    • 1995年用10天的时间完成JavaScript设计。
    • 最初命名为LiveScript,后来与sun公司合作后将其改名为JavaScript

1.2 JavaScript是什么

  • JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）

  • 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行

  • 现在也可以基于Node.js技术进行服务器编程

1.3 JavaScript 的作用

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

1.4 HTML/CSS/JS的关系

  • HTML/CSS 标记语言–描述类语言
    • HTML 决定网页结构和内容（决定看到什么），相当于人的身体
    • CSS 决定网页呈现用户的模样（决定好不好看），相当于给人穿衣服、化妆
  • JS脚本语言–编程类语言
    • 实现业务逻辑和页面控制（决定功能 ），相当于人的各种动作

1.5 浏览器执行JS简介

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

  • 渲染引擎：用来解析HTML与CSS，俗称内核，比如Chrome浏览器的bink,老版本的webkit
  • JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如Chrome浏览器的VB
  • 浏览器本身并不会执行代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释，每一句源码（装换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

1.6 JS的组成

  • JavaScript
    • ECMAScript：JavaScript语法
    • DOM:页面文档对象模型
    • BOM:浏览器对象模型
      • 1、ECMAScript
        • ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JacaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。
        • 【ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准】
      • 2、DOM==文档对象模型
        • 文档对象模型（Document Object Model ,简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
      • 3、BOM——浏览器对象模型
        • BOM（Browser Object Model,简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.7 JS 三种书写位置

​ js有3种书写位置，分别为行内、内嵌和外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 3.外部导入js -->
    <script src="js/test.js"></script>  
    <!-- 2。内嵌式的js -->
    <script>
        alert("hello world1")
    </script>
</head>
<body>
    <!-- 1.行内式的js，直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香')"/>
</body>
</html>

​ 1.内行式js

 <!-- 1.行内式的js，直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香')"/>

  • 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号

  • 可读性差，在html中编写JS大量代码时，不方便阅读;

  • 引号易错，引号多层嵌套匹配时，非常容易弄混;

  • 特殊情况下使用

​ 2.内嵌JS

 <!-- 2。内嵌式的js -->
    <script>
        alert("hello world1")
    </script>
  • 可以将多行JS代码写到

​ 3.外部JS文件

<!-- 3.外部导入js -->
<script src="js/test.js"></script>
  • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
  • 引用外部JS文件的script标签中间不可以写代码
  • 适合于JS代码量比较大的情况

1.8 JS中的注释方法

​ 1、单行注释：//

​ 2、多行注释: /* …*/

1.9 JavaScript 输入输出语句

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

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

1-本章节学习问题：

  1. JavaScript是什么:JavaScript是一种运行在客户端的脚本语言
  2. JavaScript的发展历史：由布兰登艾奇在1995年用10天的时间完成，
  3. 描述js在浏览器的执行过程：浏览器中有js引擎，js代码会被js引擎处理后运行，JS引擎执行代码时逐行解释，
  4. JavaScript由哪三部分组成：
    1. ECMAScript：JavaScript语法
    2. DOM:页面文档对象模型
    3. BOM:浏览器对象模型
  5. avaScript三个输入输出语句：
方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(mag) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器

2、变量

2-1 变量概述

2-1-1 什么是变量？

白话：变量就是一个装东西的盒子

通俗：变量是用于存放数据的容器、我们通过变量名获取数据，甚至数据可以修改。

2-1-2 变量在内存中的储存

​ 本质：变量是程序在内存中申请的一块用来存放数据的空间。

2-1-3 变量的使用

​ 变量在使用时分为两步：

  1. 声明变量

    //声明变量
var age;//声明一个名称为age的变量
    • 'var：是一个JS关键字，用来声明变量（variable 变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间看，不需要程序员管
    • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

  2. 赋值

    age = 10; //给age 这个变量赋值为10
    • “=” 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
    • 变量值是程序员保存到变量空间里的值

  3. 变量的初始化

    var age =18; //声明变量同时赋值为18
    • 声明一个变量并赋值，我们称之为变量的初始化

2-2 变量案例

2-2-1 案例一：输出信息

  • 有个叫的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有∶姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下:我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是kakaxi@itcast.cn，我的工资`2000

    实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variable Practice</title>
    <script>
        /*
        Typic:
        有个叫亚索的人住店的时候需要填写一张表，
        这张表里的内容要存到电脑上，表中的内容有∶
        姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下:
        我叫XXX,我住在XXX，我今年xx岁了，我的邮箱是xxx@iqq.com，我的工资2000
        */
       // 声明这些变量：姓名、年龄、邮箱、家庭住址和工资。
       var name = '亚索'; //name
       var age = 30; //age
       var mailBox = '123456@qq.com'; //mailBox
       var salary = 2000; //salary
       var address = '地球村'; //adress
       //按题目要求输出以上信息
       console.log('我叫'+name+',我住在'+address+",我今年"+age+"了，"+"我的邮箱是"+mailBox+",我的工资是"+salary);
    </script>
</head>
<body>
</body>
</html>
2-2-2 案例二：弹出对话框

  1. 弹出一个输入框，提示用户输入姓名。

  2. 弹出一个对话框，输出用户刚才输入的姓名。

    代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>variablePractice02</title>
    <script>
        /*
        Typic：
        1. 弹出一个输入框，提示用户输入姓名。
        2. 弹出一个对话框，输出用户刚才输入的姓名。
        */
       // 弹出一个输入框
       var name = prompt('输入姓名')
       //弹出一个对话框
       alert('刚才输入的姓名是：'+ name)
    </script>
</head>
<body>
    
</body>
</html>

2-3 变量语法扩展

2-3-1 更新变量

  • 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

    var age = 18;
age = 81; //最后的结果是81，18被81覆盖了。
2-3-2 同时声明多个变量

  • 同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。最好用分号结束。

    var age = 10, name = 'name',sex = 2;
2-3-3 声明变量特殊情况
情况 说明 结果
var age;console.log(age); 只声名 不赋值 undefined
console.log(age) 不声明 不赋值 直接使用 报错
age = 10; console.log(age); 不声明 只赋值 10 
 //2-3.声明变量的特殊情况
        // 1 只声明 不赋值 结果是 不赋值，程序也不知道里面是什么 所以结果是 undefined 未定义的
        var age; //只声明
        console.log(age); //undefined
        // 2 不声明 不赋值 直接使用 就是说没有这个变量 程序报错
        // console.log(name1); //报错
        // 3 不声明 只赋值 
        sex = 1;
        console.log(sex); //1

2-4 变量的命名规范

  • 由字母（A-Za-a）、数字（0-9）、下划线（_）、美元符号（$）组成，如：userAge,num01,_name

  • 严格区分大小写。var app;和var App;是两个变量

  • 不能以数字开头。18age 是错误的

  • 不能是关键字、保留字。例如:var、for、while

  • 变量名必须有意义。MMD BBD nl ->age

  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

  • 推荐翻译网站：有道 爱词霸

    var 1; //错误写法
var 18age; //不能以数字开头
var &age; //错误
var theWorld; //驼峰
var for; //不能用关键字
var _age,$age; //正确

练习：变量交换案例

要求：交换两个变量的值（使用一个临时变量用来做中间存储）

var temp; //临时变量
var variableOne = 'apple1'; //第一个变量
var variableTwo = 'apple2'; //第二个变量
temp = variableOne; //把变量一给临时变量
variableTwo = temp; //
console.log(variableOne); //apple2
console.log(variableTwo); //apple1

2-5 变量总结

  • 为什么需要变量？

    数据需要保存，变量就是用来存储数据的。

  • 变量是什么？

    变量就是一个容器，用来存放数据的，

  • 变量的本质是什么？

    变量是内存里的一块空间，用来存储数据。

  • 变量怎么使用的？

    使用变量时，一定要先声明变量，然后赋值。

    声明变量的本质是去内存申请空间。

  • 什么是变量的初始化？

    声明变量并赋值

  • 变量命名规范有哪些？

    变量名尽量要规范，见名知意—驼峰命名法

  • 交换2个变量值的思路？

    通过临时变量来装换。

2-本章节学习内容：

变量的主要作用：用于存放数据的容器
变量的初始化：声明一个变量并赋值，称为变量的初始化

变量的命名规范：

变量是如何在内存中存储：变量是程序在内存中申请的一块用来存放数据的空间。

交换变量案例：

3、数据类型

3-1 数据类型的简介

3-1-1 为什么要使用数据类型？

  • 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
  • 简单来说，数据类型就是数据的类别型号，比如姓名‘张三’（字符型），年龄18（数值型），这些数据的类型是不一样的

3-1-2 变量的数据类型

  • 变量是用来存储值的所在处，它们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。**JavaScript是一种弱类型或者说动态语言。**这意味着不用提前声明变量的类型，在程序运行过程中类型会被自动确定。

  • JS 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

    var age = ; //这是一个数字型
var str = "Hello World"; //这是一个字符串

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

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

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

3-1-2 数据类型的分类

​ JS把数据类型分为两类：

  • 简单数据类型（Number,String,Boolean,Underfined,Null）
  • 复杂数据类型（object）

3-2 基本数据类型（简单数据类型）

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

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

3-2-1 数字型Number

JavaScript 数值类型即可以用来保存整数值，也可以保存小数（浮点数）。

var age = 21; //整数
var Age = 3,14; //小数
-1.1数字型进制

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

<script>
        // 八进制 0~7,程序中以0开头表示八进制
        var number1 = 010; //这是一个八进制数
        console.log(number1); //装换为十进制就是： 8
        // 十六进制，0~9 a~f  如：#fffff 数字前面加 0x 表示十六进制
        var num = 0x99; //声明一个十六进制
        console.log(num);  
    </script>

在JS中八进制前面加0，十六进制前面加0x

-1.2数字型范围

javascript中数值的最大和最小值

        //JavaScript 中数值的最大值和最小值
        alert(Number.MAX_VALUE); //1.7976931348623157e+308
        alert(Number.MIN_VALUE); //5e-324
  • 最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
  • 最小值：Number.MIN_VALUE，这个值为：5e-324
-1.3数字型三个特殊值
    //数字型的三个特殊值
        console.log(Number.MAX_VALUE * 2); //Infinity
        console.log(-Number.MAX_VALUE * 2); // -Infinity
        console.log('ZZQ' - 100); //nor a number
  • Infinity：代表无穷大，大于任何数值
  • -Infinity：代表无穷小，小于任何数值
  • NaN，Not a number , 代表一个非数值
-1.4 isNaN()方法的使用

// isNaN() 这个方法用来判断非数字，并且返回一个值 如果是数字返回false 否则True

​ alert(isNaN(123)); //false

​ alert(isNaN(“zzq”)); //true

3-2-2 字符型 String

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

var str1 = "name"; //使用双引号
var str2 = 'age'; //使用单引号
var str3 = 字符串; //报错，没使用引号，js没有这语法

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

  • JS可以用单引号嵌套双引号，或者用双引号嵌套单引号**（外双内单，外单内双）**

    var strOne = 'This is a "string"'; //用单引号包含双引号。
var strTwo = "This is a 'string'"; //双引号包含单引号
var strThree = 'This is a string"; //报错，不能单双引号搭配。
-2.1 字符串的转义符

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

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

转义符 解释说明
“\n” 换行符，n 是newline 的意思
\\ 斜杠 \
\’ ‘ 单引号
\" “ 双引号
\t tab 缩进
\b 空格，b是blank 的意思 
// 转义字符练习
alert('\t一世一轮回，一季一禅意。\n已是初秋时节，水田里的稻穗"尽染金黄"。\n早晚的天气虽很凉爽，无雨的中午还有些炎热。');
-2.2字符串长度

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

// 检测字符串的长度 length
var str = 'This is a string';
console.log('该字符串的长度是：'+str.length); //16
-2.3字符串的拼接

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

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

//字符串的拼接
console.log('王者' + '荣耀'); //王者荣耀
console.log('age:' + 18); //age:18
//数字型相加
console.log(12 + 12) //24
//字符串+数字型
console.log('12' + 12) //1212

//与变量相结合
var name = '李白';
var age = 18;
alert('My name is ' + name +',My age is ' + age); //My name is 李白,My age is 18

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

我们经常会将字符串个变量来拼接，因为变量可以很方便地修改里面的值。

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

-2.4 字符串拼接案例：

要求：弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“你今年xx岁啦”

//要求：弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“你今年xx岁啦”
var age = prompt("Please enter your age:"); //声明年龄，获取用户的年龄
alert('You are ' + age + ' years old!')

3-2-3 布尔型 Boolean

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

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

var flag1 = true; // falge1 布尔型 1
var flag2 = false; // 0
console.log(flag1);

3-2-4 Undefined 和 Null

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

//变量声明未给值 就是 undefined（未定义数据类型）
var str;
console.log(str); //undefined
var variable = undefined; 
//undefined 和字符串相加
console.log(undefined +  'ZZQ'); //undefinedZZQ
//undefined 和数字型相加
console.log(undefined + 1); //NaN

一个声明变量给null值，里面存的值为空

//null 空值
var space = null; //里面的值为空
console.log(space + 'ZZQ') //nullZZQ
console.log(space + 1) // 1

3-3 获取变量数据类型

3-3-1 获取检测变量的数据类型

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

//typeof 用来获取变量的数据类型
var num = 10;
console.log(typeof num); //number
var str = 'zzq';
console.log(typeof str); //string
var flag = true;
console.log(typeof flag); //boolean
var variable = undefined;
console.log(typeof variable); //undefined
var timer  = null ;
console.log(typeof timer); // object

//pormpt 取过来的值是字符型的
var age = pormpt('Please enter your age:')
console.log(age);
console.log(typeof age); //string

3-3-2 字面量

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

  • 数字字面量：8,9,10
  • 字符串字面量：‘zzq’,“ZZQ”
  • 布尔字面量：true,false

3-4 数据类型转换

3-4-1 什么是数据类型转换

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

三种方式的转换：

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

3-4-2 转换为字符串

方式 说明 案例
toString() 转成字符串 var num =1; alert(num.toString());
Sring() 强制转换 转成字符串 var num =1; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num + ‘我是字符串’); 
// 数字型转换为字符型
var num  = 10;
// 第一种 toString();
var str = num.toString();
console.log('转换后：'+ num); //10
console.log(typeof str);  //string
        
//第二种 String() 强制类型转换
var num1 = 100;
console.log('转换后：'+String(num1));

//第三种 利用 +　拼接字符串的方法是实现转换效果
console.log(num + "");

注意：

  • toString() 和 String() 使用方式不一样。
  • 三种转换方式，常用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

3-4-3 转换为数字型（重点）

方式 说明 案例
parseInt(string)函数 将string类型转换成整数数值型 parseInt(‘18’)
parseFloat(string)函数 将string类型转成浮点数值型 parseFloat(‘3.14’)
Number()强制转换函数 将string类型转换为数值型 Number(‘12’)
js隐式转换（- * /） 利用算术运算隐式转换为数值型 ’12‘ - 0 
//1、parseInt(string)函数 将字符函数转换为数字函数
var age = prompt("Please enter your age:"); //输入框中输入的是String类型。
var strAge =  parseInt(age); 
alert('your age is :' + strAge);
alert(typeof strAge); // number
console.log(parseInt('3.14')); //3
console.log(parseInt('3.99')); // 3
console.log(parseInt('120px')); //120 会去掉单位

//2、parseFloat(string)函数 将string类型转成浮点数值型
console.log(parseFloat('2.23'));
console.log(parseFloat('3.99')); // 3
console.log(parseFloat('120px')); //120 会去掉单位
        
//3、利用Number
var str = '123';
console.log(Number(str));

//4、利用算数运算- * / 隐式转换
console.log('12' - 1); // 11
console.log('12' - '10'); //2

注意:

  • 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
  • 隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

3-4-4 数据转换案例一

①弹出一个输入框( prompt)，让用户输入出生年份（用户输入)

②把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理)

③弹出警示框( alert)，把计算的结果输出（输出结果)

var year = prompt('请输入出生年份：');
var result = 2020 - year;//隐式转换
alert(result);

3-4-5 数据转换案例二

计算两个数的值，用户输入第一个值后，继续单出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

//计算两个数的值，用户输入第一个值后，继续单出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。
var num1 = prompt('Please enter the first value:：');
var num2 = prompt('Please enter the second value:');
var result = parseInt(num1) + parseInt(num2); //将字符串转换为数值型
alert('The result of the addition is：'+result);

3-4-6 转换为布尔型

方式 说明 案例
Boolean()函数 其它类型转成布尔值 Boolean(‘true’); 
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('zzq')); //true
console.log(Boolean(12)); //true

注意：

  • 代表空、否定的值会被转换为false，如 "、0、NaN、null、undefined。
  • 其余值都会被转换为true。

3-5 本章节学习总结：

1、**说出5种简单数据类型：**Number、String、NaN、Null、undefined.

2、使用typeof获取变量的类型: console.log(typeof num);

3、说出1~2中装换为数值型的方法:

方式** 说明 案例
parseInt(string)函数 将string类型转换成整数数值型 parseInt(‘18’)
parseFloat(string)函数 将string类型转成浮点数值型 parseFloat(‘3.14’)
Number()强制转换函数 将string类型转换为数值型 Number(‘12’)
js隐式转换（- * /） 利用算术运算隐式转换为数值型 ’12‘ - 0

4、说出1~2中装换为字符型的方法

方式 说明 案例
toString() 转成字符串 var num =1; alert(num.toString());
Sring() 强制转换 转成字符串 var num =1; alert(String(num));

5、说出什么是隐式装换:

隐式转换, 就是不需要加强制转换, 系统会自动做这个操作

4、编译性语言和解释性语言的区别

1、概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

  • 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不用。
  • 编译器是在 代码执行之前进行编译，生成中间代码文件
  • 解释器是在 运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dwFLJlEA-1610295424928)(C:\Users\ZZQ18\AppData\Roaming\Typora\typora-user-images\image-20210110012129536.png)]

2、标识符：

、就是指开发人员为变量、属性、函数、参数取的名字，

标识符不能是关键字或保留字

3、关键字：

是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、

new、return、switch、this、throw、try、typeof、var、void、while、with等。

4、保留字

实际上就是预指的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、 public、 short、static、 super、synchronized、 throws、transient、volatile等。

5、JavaScript 运算符

5-1 运算符概念

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

JavaScript 中常用的运算符有：

  • 算术运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

5-2 算术运算符

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

运算符 描述 实例
+ 加 10 + 20 = 30
- 减 10 - 20 = -10
* 乘 10 * 20 = 200
/ 除 10 / 20 = 0.5
% 取模（取余数） 9 % 2 = 1 （返回除法的余数） 
console.log(1 + 2); //3
console.log(2 - 1); //1
console.log(2 * 2); //4
console.log(9 % 2); //1

一个数的余数是0，就说明这个数能够被整除，这就是% 取余运算符的主要运算。

注意：

算术运算符优先级：先乘数，后加减，有小括号先算小括号里面的。

①浮点数的精度问题：

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

var result = 0.1 + 0.2; //结果不是0.3，而是 0.30000000000000004
console.log(0.7 * 100); //结果是:7.000000000000001 
//浮点数不能拿来比较相等
var floatNumber = 0.1 + 0.2;
console.log(0.3 == floatNumber); //false

② 表达式和返回值

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

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

表达式最终都会有一个结果，返回给我们，我们称为返回值

console.log(1 +1); // 1 + 1 是表达式 ，2 是返回值。

5-3 递增和递减运算符

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

在JavaScript中，递增(++)和递减( --)既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：

递增和递减运算符必须和变量配合使用

1、前置递增运算符

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

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

//前置递增运算符 ++ 写在变量的前面
var age = 10;
++age; //类似于 age = age + 1
console.log(age); //11
//先加1 ，后返回值
var a = 10;
console.log(++a + 10); //21

2、后置递增运算符

num 后置递增，就是自加1 ，类似于num = num +1 .

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

//后置递增运算符 ++ 写在变量的后面
var num = 10;
num++; //num = num +1
console.log(); //11

注意：前置递增和后置递增如果单独使用 效果是一样的

//这里后置递增先返回值，后自加
var num = 18;
console.log(num++ + 2); //注意结果是20，先返回值，用原值18相加
console.log(num + 2); //21，这里num已经完成了后增，这时的num是19。

案例

var a = 10;
++a; //11
var b = ++a +2; //12 +2
console.log('b:'+b);//14

var c = 10;
c++; //11
var d = c++ +2; //11++++++++++++++++++++
console.log('d:'+d) //13
        
var e = 10;
var f = e++ + ++e; //e++ = 10, e = 11 ,++e = 12 说明：e++先返回原值10，后递增e=11,++e是先递增，后返回值
console.log('f:'+f);//22

总结：

  • 前置递增后后置递增可以简化代码的编写，让变量的值 +1 比以前写法简单
  • 单独使用时，运行结果相同。
  • 后置：先原值运算，后自加（先人后己）
  • 前置：先自加，后运算（先已后人）
  • 开发时，大多数使用后置递增/减，并且代码独占一行，例如：num++;或者 num–;

5-4 比较运算符

1、比较运算符的概念

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

运算符名称 说明 案例 结果
< 小于号 1 < 2 true
> 大于号 1 > 2 false
>= 大于等于号（大于或者等于） 2>=2 true
<= 小于等于号（小于或者等于） 3<=2 false
== 判断号（会转型） 18 ==18 true
!= 不等于 18 != 18 false
=== !== 全等 要求值和数据类型都一致 18 === ’18‘ false

代码练习：

console.log(1 < 2); //true
console.log(2 >= 4);//false
// 程序中 = 是赋值，== 是等于 == 只要求值相等
console.log(3 ==3); //true
console.log('zzq' == 'ZZQ'); //false
// == 隐式转换 会把字符型自动转换为数字型然后进行比较
        
console.log(18 == '18') //true
// != 不等于
console.log(18 != 18); //false
// === 全等 类型和值都一样
console.log(12 === 12); //true
console.log('zzq' === 'zzq'); //true

console.log(18 !== 18); //false

"=" 总结

符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边值是否相等（注意此时有隐式转换）
=== 全等 判断两边的值和数据类型是否完全相同 
console.log(18 -- '18'); //true
console.log(18 === '18'); //false

5-5 逻辑运算符

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

逻辑运算符 说明 案例
&& “逻辑与”，简称“与” and true && false
|| “逻辑或”，简称“或” or true || false
! “逻辑非”，简称“非” not ! true

代码练习：

// && 逻辑与 and 逻辑与：两个都是true，返回true，否则返回false
console.log(3 > 5 && 8 < 10); //false
console.log(5 > 1 && 5 > 3); //true

// || 逻辑或 or 逻辑或：只要有一个是true，返回true，否则false
console.log(4 >= 4 || 2 < 1); //true
console.log(2 > 4 || 2 >5); // false

// ! 逻辑非 not 逻辑非：相反
console.log( !(4 < 6)); // 4<6 本来是true 加！ 后变为false

案例：

//逻辑运算符练习
var num =16;
var str = 'This is a string';
console.log(str.length); //获取字符的长度 16

console.log(num > 5 && str.length >= num); //true
console.log(num < 5 && str.length >= num); //false
console.log(!(num < 20)); //+false
console.log(!(num < 20 || str.length == num)) //false

短路运算（逻辑中段）

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

1、逻辑与

  • 语法：表达式1 && 表达式 2
  • 如果第一个表达式的值为真，则返回表达式2
  • 如果第一个表达式的值为假，则返回表达式1
// 如果表达式1为真，则返回表达式2， 
// 数字中：除了0，其它的数字都是true
// 字符串中：除了""（空字符串），其它的都是true
console.log(123 && 456); //返回456
// 如果表达式为假，则返回表达式1
console.log(0 && 1); //返回0

2、逻辑或

  • 语法：表达式1 || 表达式2
  • 如果第一个表达式的值为真，则返回表达式1
  • 如果第一个表达式的值为假，则返回表达式2
// 如果表达式1为真，则返回表达式1 
// 如果表达式1为假，则返回表达式2
console.log("zzq" || 123); //zzq
console.log("" || 123); //123

逻辑中断在程序中很重要，它会影响我们的程序的运行结果：

var num = 0;
console.log(123 || num++);
console.log(num); //0

5-6 赋值运算符

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

赋值运算符 说明 案例
= 直接赋值 var usrName = ‘zzq’;
+=、-= 加、减一个数后在赋值 var age = 10; age+=5; //15
*+、/+、%= 乘、除、取模后再赋值 var age =2; age*=5; //10

相关代码：

var num = 10;
num += 5 ;
console.log(num); //15
num *= 5;
console.log(num); //75
num /= 5;
console.log(num); //15
var num1 = 10;
num1 %= 3;
console.log(num1); //1

5-7 运算符的优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ – ！
3 算术运算符 先 * / 后 + -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符 ，
  • 一元运算符里面的 逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

相关练习：

//练习一
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 ==144) && true); //true
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() == '22'); //true

//练习二
var a = 3 > 5 && 2 < 7 && 3 == 4; 
console.log(a);  //false

var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); //true

var c = 2 === '2';
console.log(c); //false

var d = !c || b && a;
console.log(d); //true

6、JavaScript 流程控制语句-分支

标签
ECMAScript
node.js
Chrome
javascript
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!