JS基础-变量

1. JavaScript 初识

​ 布兰登·艾奇（Brendan Eich，1961年~）。神奇的大哥用10天完成JavaScript设计。最初命名为Livescript，后来在与Sun合作之后将其改名为JavaScript。

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

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

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

    服务器

1.1 JavaScript 作用

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

1.2 浏览器执行 JS 简介

​ 浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

  1. 渲染引擎：用来解析HTML与CSs，俗称内核，比如chrome浏览器的blink，老版本的webkit
  2. JS 引擎：也称为JS解释器。用来读取网页中的Javascript代码，对其处理后运行，比如chrome浏览器的v8

1.3 JS 的组成

graph TD Javascript --> A[ECMAScript<br>Javascript基础语法] Javascript --> B[DOM<br>页面文档对象模型] Javascript --> C[BOM<br>浏览器对象模型]

  1. ECMAScript

    ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

graph TD ECMAScript --> A[JavaScript<br>网景公司] ECMAScript --> B[Jscript<br>微软公司]

​ ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏 览器厂商共同遵守的一套JS语法工业标准。

  1. DOM——文档对象模型（Document Object Model）

    是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

  2. BOM——浏览器对象模型(Browser Object Model)

    是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.4 JS 初体验

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

  1. 行内式

    <input type="button" value="点我试试" onclick="alert('Hello World')" />
    • 可以将少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
    • 在HTML中推荐使用双引号， JS 中推荐使用单引号
    • 可读性差， 在html中编写JS大量代码时，不方便阅读
    • 引号易错，引号多层嵌套匹配时，非常容易弄混

  2. 内嵌式

    <script>
    alert('Hello  World~!');
</script>
    • 可以将多行JS代码写到 script 标签中
    • 内嵌 JS 是学习时常用的方式

  3. 外部 JS 文件

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

2. JavaScript 注释

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

  • 单行注释

    • 快捷键：ctrl + /

    • 语法：// 单行

  • 多行注释

    • 快捷键修改为：shift + ctrl + /

    • 语法：/* 多行 */

3. JavaScript 输入输出语句

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

方法 说明 归属
alert(msg) 浏览器弹出消息框 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器
console.log(msg) 浏览器控制台输出信息（程序员调试使用） 浏览器

4. 变量的概念

变量是用于存放数据的容器

容器

4.1 变量在内存中的存储

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

空间

5. 变量的使用

5.1 声明变量

语法：var age;（声明了一个名称为 age 的变量）

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

5.2 赋值

语法：age = 10;（给 age 这个变量赋值为 10）

  • 等号用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
  • 变量值是程序员保存到变量空间里的值

5.3 变量的初始化

声明一个变量并赋值， 我们称之为变量的初始化

语法：var age = 18;（声明变量同时赋值为 18）

5.4 变量语法扩展

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

  • 同时声明多个变量时：只需要写一个 var， 多个变量名之间使用英文逗号隔开

  • 声明变量特殊情况

情况 说明 结果
var age ; console.log (age); 只声明 不赋值 undefined
console.log(age) 不声明 不赋值 直接使用 报错（不再向下执行）
age = 10; console.log (age); 不声明 只赋值 10

5.5 变量命名规范

  • 由字母、数字、下划线、美元符号( $ )组成，如：num01，_name
  • 严格区分大小写。var app 和 var App 是两个变量
  • 不能以数字开头。18age 是错误的
  • 不能是关键字、保留字。例如：var、for、while
  • 命名：
    • 见名知意，变量名必须有意义。age → 年龄
    • 遵守驼峰命名法，首字母小写，后面单词的首字母大写
    • 变量的名称一般用名词
    • 函数的名称一般用动词

注意：尽量不要使用 name 作为变量名

6. 数据类型

6.1 为什么需要数据类型

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

​ 简单来说：数据类型就是数据的类别型号

6.2 变量的数据类型

​ 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中

​ JavaScript 是一种弱类型或者说动态语言这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

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

​ 在代码运行时，变量的数据类型是根据变量值的类型来判断的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

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

6.3 数据类型的分类

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

  • 复杂数据类型 （object)

7. 简单数据类型

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

简单数据类型 中文 说明 默认值
Number 数字型 包含整型值和浮点型值，如21、0.21 0
String 布尔值类型 如 true，false，等价于 1 和 0 false
Boolean 字符串类型 如"张三"注意js里面，字符串都带引号 ""
Undefined 未定义 var a；声明了变量 a 但是没有给值 输出结果：undefined undefined
Null 空值 null

7.1 数字型 Number

JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）

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

  • 数字型进制

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

      // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num3 = 010;   // 对应十进制的8

  // 2.十六进制数字序列范围：0~9 及 A~F
 var num = 0xA;   // 对应十进制的10

​ 注意：在JS中八进制的值前面加 0，十六进制加 0x

  • 数字型范围

    JavaScript中数值的最大和最小值

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

    • 最小值：Number.MIN_VALUE，值为：5e-324

  • 数字型三个特殊值

    • Infinity ：无穷大，大于任何数值
    • -Infinity：无穷小，小于任何数值
    • NaN：非数值，Not a number 的缩写

  • isNaN：用来判断变量是否为非数字的类型

    • 非数字返回：ture
    • 是数字返回：false

7.2 字符串型 String

字符串型可以是引号中的任意文本

  • 语法：推荐外单内双

    • 单引号：' '（常用）
    • 双引号：" "

  • 字符串转义符

    转义符 解释说明
    \n 换行符（newline）
    \ \ 斜杠 \
    \' 单引号 '
    \" 双引号 "
    \t 缩进（tab）
    \b 空格（blank）

  • 获取字符串长度 length

    语法：str.length

    var strMsg = "世界你好!";
alert(strMsg.length); // 显示 5

  • 字符串拼接：数值之间相加 ，字符之间相连

  • 字符串与变量拼接：变量名是不能添加引号的

    • 口诀：引引加加 ”，删掉数字，变量写加中间

7.3 布尔型 boolean

  • true：真（对）
  • false：假（错）
// 布尔型和数字型相加的时候，true 为 1，false 为 0
console.log(true + 1);  // 2
console.log(false + 1); // 1

7.4 Undefined 和 Null

  • 一个声明后没有被赋值的变量会有一个默认值 undefined

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

注意：可与字符串文本拼接

7.5 获取变量数据类型

  • 获取变量的数据类型 typeof

    语法：typeof 变量

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

  • 字面量

    字面量是在源代码中一个固定值的表示法，就是通过字面可以识别出这个值的数据类型

    • 数字字面量：8, 9, 10（亮蓝）
    • 字符串字面量：'黑马程序员', "大前端"（黑色）
    • 布尔字面量：true，false（暗蓝）

    注意：未定义（undefined）和空值（null）为灰色

7.6 数据类型转换

1. 转换为字符串

方式 说明 例 (n为变量)
toString() 转成字符串 n.toString()
String() 强制转换字符串 String(n))
隐式转换 ( + ) 加号拼接字符串（常用） n + ''

2. 转换为数字型

方式 说明 例
parseInt() 将字符型转整数 parseInt('6'))
parseFloat() 将字符型转小数 parseFloat('6.9')
Number() 将字符型转数值型 Number('6')
隐式转换 ( - * / ) 利用算术运算转换为数值型 '6' - 0

3. 转换为布尔值

方式 说明 例 (n为变量)
Boolean() 其他类型转成布尔值 Boolean(n)
  • false：0、NaN、null、undefined
  • true：其余值为真

8. 解释和编译型语言

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

程序语言翻译成机器语言的工具，被称为翻译器

翻译器

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

8.1 执行过程

执行过程

例：类似于请客吃饭

  • 编译语言：首先把所有菜做好，才能上桌吃饭
  • 解释语言：好比吃火锅，边吃边涮，同时进行

9. 关键字和保留字

9.1 标识符

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

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

9.2 关键字

指 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

9.3 保留字

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

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

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误

posted @ 2020-09-08 10:46  今夜星河漫漫  阅读(377)  评论(0)    收藏  举报