JS基础学习第1天-CSDN博客

本文链接：https://blog.csdn.net/itsanliannan/article/details/130657524

JS基础第一天

目标

一、认识JavaScript

二、理解变量和常量

三、理解数据类型

一、认识JavaScript

1. 编程语言发展史

阶段一: 机器语言

计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成。

像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码。

一定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言。

优点:

代码能被计算机直接识别，不需要经过编译解析；

直接对硬件产生作用，程序的执行效率非常高；

缺点:

程序全是些0和1的指令代码，可读性差，容易出错；

不易编写(目前没有人这样开发)；

阶段二: 汇编语言

为了解决机器语言的缺陷，人们发明了另外一种语言——汇编语言;

这种语言用符号来代替冗长的、难以记忆的0、1代码。。(mov/push指令，经过汇编器，汇编代码再进一步转成0101)

优点：

像机器语言一样，可以直接访问、控制计算机的各种硬件设备；

占用内存少，执行速度快；

缺点：

不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性。也就是说，一个程序只能在一种机器上运行，换到其他机器上可能就不能运行；

符号非常多、难记。即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试；

阶段三: 高级语言

最好的编程语言应该是什么? 自然语言；

而高级语言, 就是接近自然语言, 更符合人类的思维方式；

跟和人交流的方式很相似, 但是大多数编程语言都是国外发明的, 因为都是接近于英文的交流方式；

优点：

简单、易用、易于理解，语法和结构类似于普通英文；

远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识；

一个程序还可以在不同的机器上运行，具有可移植性；

缺点:

程序不能直接被计算机识别，需要经编译器翻译成二进制指令后，才能运行到计算机上；

种类繁多：JavaScript 、 C语言、C++、C#、Java、Objective-C 、Python等；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hMa2iGfe-1683960941991)(./img/img05.png)]

2. JavaScript起源

JavaScript是一门高级编程语言, 是前端开发的重要组成部分!

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版

这是历史上第一个比较成熟的网络浏览器，轰动一时。

但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。

网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。

网景公司当时想要选择一种语言来嵌入到浏览器中

采用现有的语言，比如Perl、Python、Tcl、Scheme等等, 允许它们直接嵌入网页;

1995年网景公司招募了程序员Brendan Eich，希望将Scheme语言作为网页脚本语言的可能性；

就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出

Java推出之后立马在市场上引起了轰动，Java当初有一个口号：“write once run anywhere”；

网景公司动了心，决定与Sun公司结成联盟，希望将Java嵌入到网页中来运行；

Brendan Eich本人非常热衷于Scheme，但是管理层那个时候有点倾向于Java，希望可以简化Java来适应网页脚本的需求；

但是Brendan Eich对此并不感兴趣，他用10天时间设计出来了JavaScript

最初这门语言的名字是Mocha（摩卡）；

在Navigator2.0 beta版本更名为LiveScript；

在Navigator2.0 beta 3版本正式重命名为JavaScript，当时是为了给这门语言搭上Java这个热词；

当然10天设计出来语言足够说明Brendan Eich是天才，但是这门语言当时更像是一个多种语言的大杂烩

借鉴C语言的基本语法；

借鉴Java语言的数据类型和内存管理；

借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；

借鉴Self语言，使用基于原型（prototype）的继承机制。

Brendan Eich曾经这样描述过JavaScript：

与其说我爱Javascript，不如说我恨它，它是C语言和Self语言一夜情的产物；

十八世纪英国文学家约翰逊博士说得好：'它的优秀之处并非原创，它的原创之处并不优秀。’

微软公司于1995年首次推出Internet Explorer，从而引发了与Netscape的浏览器大战

微软对Netscape Navigator解释器进行了逆向工程，创建了JScript，以与处于市场领导地位的网景产品同台竞争；

这个时候对于开发者来说是一场噩耗，因为需要针对不同的浏览器进行不同的适配；

1996年11月，网景正式向ECMA（欧洲计算机制造商协会）提交语言标准。

1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262;

ECMA-262是一份标准，定义了ECMAScript;

JavaScript成为了ECMAScript最著名的实现之一;

除此之外，ActionScript和JScript也都是ECMAScript规范的实现语言；

所以说，ECMAScript是一种规范，而JavaScript是这种规范的一种实现。

3. JavaScript的组成

JS是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

JavaScript是ECMAScript的语言层面的实现;

因为除了语言规范之外，JavaScript还需要对页面和浏览器进行各种操作;

除了基本实现之外，还包括DOM操作和BOM操作;

在这里插入图片描述

二、理解变量和常量

1. 认识变量

思考：在我们平时开发中，使用最多的并不是固定的数据, 而是会变换的数据

购物车商品的数量、价格的计算等等；

一首歌曲播放的时间、进度条、歌词的展示等等；

微信聊天中消息条数、时间、语音的长度、头像、名称等等；

游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等；

变量就是存放数据的容器

一个变量，就是一个用于存放数值的容器；

这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据；

变量的独特之处在于它存放的数值是可以改变的；

我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称

2. 使用变量

2.1 变量的命名格式

变量的声明： 在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）
  			   刚开始使用var 定义变量，目的是了解var的使用为了后面能和let、const做个区分
变量的赋值： 使用 = 给变量进行赋值；
// 1. 变量申明
var message = "hello"
// 2. 变量赋值
message = "world"
// 3. 同时申明多个变量
var name, age
name = "zhangsan"
age = 10

2.2 变量的命名规范

变量命名规则：必须遵守

组成部分:数字、字母、下划线、美元符号
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）即数字不能作为变量名的开头
其他字符可以是字母、下划线、美元符号或数字
不能使用关键字和保留字命名：关键字和保留字|MDN
变量严格区分大小写

变量命名规范：建议遵守

多个单词使用驼峰标识；

赋值 = 两边都加上一个空格；

一条语句结束后加上分号; 也有很多人的习惯是不加；

变量应该做到见名知意；

注意事项：变量名尽量不要使用name作为变量名，会出现各种问题

2.3 使用注意事项

如果一个变量未声明（declaration）就直接使用，那么会报错

如果一个变量有声明，但是没有赋值，那么默认值是undefined.

如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）

三、理解数据类型

1. JS中常见数据类型

JavaScript 中的值都具有特定的类型。

例如，字符串或数字

我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型

一个变量可以在前一刻是个字符串，下一刻就存储一个数字

允许这种操作的编程语言，例如 JavaScript，被称为“动态类型”（dynamically typed）的编程语言

在 JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型(Object)）

Number

String

Boolean

Undefined

Null

Object

BigInt（后续了解）

Symbol（后续了解）

2. typeof操作符

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型

typeof 操作符就是为此而生的

对一个值使用 typeof 操作符会返回下列字符串之一:

"undefined"表示值未定义;

"boolean"表示值为布尔值;

"string"表示值为字符串;

"number"表示值为数值;

"object"表示值为对象(而不是函数)或 null;

"function"表示值为函数;

“symbol”表示值为符号；

typeof()的用法：

你可能还会遇到另一种语法：typeof(x)，它与 typeof x 相同；

typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已

3. 常见类型详解

3.1 Number类型

number 类型代表整数和浮点数。
var age = 18
var height = 1.88
*数字number可以有很多操作，比如，乘法 、除法 /、加法 +、减法 - 等等
var result = 10 * 2
var result = 10 / 3
除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于Number类型（了解）
// Infinity：代表数学概念中的 无穷大 ∞，也可以表示-Infinity；
console.log(10 / 0) // Infinity
//  NaN：NaN 代表一个计算错误，它是一个错误的操作所得到的结果
onsole.log('abc' * 100) // NaN
数字类型也有其他的进制表示方法
// 1. 十进制
var num1 = 111 // 111
// 2. 十六进制
var num2 = 0x111 // 273
// 3. 八进制
var num3 = 0o111 // 73
// 4. 二进制
var num4 = 0b111 // 7

console.log(num1, num2, num3, num4) // 111 273 73 7
数字表示的范围：

最小正数值：Number.MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为0

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

用于判断是否不是一个数字。不是数字返回true，是数字返回false
console.log(isNaN('abc') // true
console.log(isNaN(123)); // false

3.2 String类型

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String

比如人的姓名，地址
JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式
双引号：“Hello”

单引号：‘Hello’
反引号：Hello（ES6之后学习）
var name = "zhangsan"
var address = '安徽省合肥市'
var description = `张三在合肥良师良职学习前端`
前后的引号类型必须一致：
如果在字符串里面本身包括单引号，可以使用双引号；
如果在字符串里面本身包括双引号，可以使用单引号；
var message = "你们熟悉的老朋友'张三'正是在下"
除了普通的可打印字符以外，一些有特殊功能的字符可以通过转义字符的形式放入字符串中：

字符串的属性和方法

字符串还有很多细节和操作方法，后续详细学习

// 字符串拼接，通过 + 运算符
var str1 = "hello"
var str2 = "world"
var newStr = str1 + str2
console.log(newStr) // helloworld
//字符串长度 空格也算一个字符
console.log(newStr.length) // 10

3.3 Boolean类型

Boolean（布尔）类型用于表示真假：

比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；

比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；

布尔（英语：Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名
Boolean 类型仅包含两个值：true 和 false
var flag = true
var result = 2 === 1
console.log(flag, result) // true false

3.4 Undefined类型

Undefined 类型只有一个值，就是特殊值 undefined

如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined

注意事项

最好在变量定义的时候进行初始化，而不只是声明一个变量；

不要显示的将一个变量赋值为undefined；

如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值；

3.5 Object类型

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型；

其他的数据类型我们通常称之为 “原始类型”，因为它们的值只包含一个单独的内容（字符串、数字或者其他）；

Object往往可以表示一组数据，是其他数据的一个集合；

在JavaScript中我们可以使用花括号{} 的方式来表示一个对象；
var info = {
    name: 'zhangsan'，
    age: 18,
    height: 1.88
}
Object相关的内容我们会在后续详细讲解。

3.6 Null类型

Null 类型同样只有一个值，即特殊值 null。

null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null；
console.log(typeof null) // object

var obj = null
obj = {
  name: 'zhangsan',
  age: 18
}
null和undefined的关系(区别)：

undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到；

并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用；

null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null；

类型小结

JavaScript 中有八种基本的数据类型（前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型，也称为引用类型）

number 用于任何类型的数字：整数或浮点数。

string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。

boolean 用于 true 和 false。

undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。

object 用于更复杂的数据结构。

null 用于未知的值 —— 只有一个 null 值的独立类型。

4. 类型转换

4.1 认识类型转换

在开发中，我们可能会在不同的数据类型之间进行某些操作

比如把一个String类型的数字和另外一个Number类型的数字进行运算；

比如把一个String类型的文本和另外一个Number类型的数字进行相加；

比如把一个String类型或者Number类型的内容，当做一个Boolean类型来进行判断；

也就是在开发中，我们会经常需要对数据类型进行转换：

大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换；

我们也可以，通过显示的方式来对数据类型进行转换；

4.2 String的转换

其他类型经常需要转换成字符串类型，比如和字符串拼接在一起或者使用字符串中的方法。

转换方式一：隐式转换

一个字符串和另一个字符串进行+操作；

如果+运算符左右两边只有一个是字符串，那么另一边会自动转换成字符串类型进行拼接；

某些函数的执行也会自动将参数转为字符串类型；

比如console.log函数；

转换方式二：显式转换

调用String()函数；

调用toString()方法

4.3 Number的转换

其他类型也可能会转成数字类型

转换方式一：隐式转换

在算数运算中，通常会将其他类型转换成数字类型来进行运算；

比如 “6” / “2”；

但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的；

“+”和一个字符串相连会转换成数字型，如果是两个字符串相连就变成连接符了

转换方式二：显式转换

我们也可以使用Number()函数来进行显式的转换；

其他类型转换数字的规则：

4.4 Boolean的转换

布尔（boolean）类型转换是最简单的。

它发生在逻辑运算中，但是也可以通过调用 Boolean()函数显式地进行转换。

转换规则如下：

直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。

其他值变成 true。

[

注意：包含 0 的字符串 “0” 是 true
一些编程语言（比如 PHP）视 “0” 为 false。但在 JavaScript 中，非空的字符串总是 true。