js（JavaScript）基础知识1

繁星流年

已于 2023-08-10 21:34:41 修改

阅读量78

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-25 15:18:29 首次发布

本文链接：https://blog.csdn.net/weixin_67275645/article/details/131918659

版权

JavaScript有三部分组成。分别为核心（ECMAScript）、文档对象模型(DOM)、浏览器对象模型(BOM)。

ECMAScript，描述了该语言的基础语法和基本对象(包含内置对象)，JavaScript的核心，描述了语言的基本语法(变量、运算符、表达式、流程控制语句等)和数据类型(数字、字符串、布尔、array、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准.
文档对象模型（DOM），描述处理网页内容的方法和接口。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性，可以对其中的内容进行修改和删除，同时也可以创建新的元素；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。BOM提供了独立于内容而与浏览器窗口进行交互的对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的 location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象。

1 JavaScript的三种使用方式

第一种：行内式

第二种：内嵌式（嵌入式）

<script>
alert('内嵌式');
</script>

第三种：外部式（外链式）

<script src="main.js"></script>

2 变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。使用变量可以方便地获取或修改内存中的数据。

变量的声明：
```
var age;
```
变量的赋值：
```
age = 18;
```

同时声明多个变量：

var age, name, gender;
age = 10;
name = 'lili';

同时声明多个变量并赋值：

var age = 10, name = 'lili';
var a = b = 10; // a=10，b=10
var a, b = 10; // a=undefined，b=10，如果一个变量没有赋值，它的值是undefined(未定义)。

变量命名

由字母、数字、下划线、$ 符号组成，不能以数字开头；不能是关键字和保留字，例如 for、while；区分大小写。（必须遵守，不遵守会报错）

变量名必须有意义遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword。（建议遵守，不遵守不会报错）

注意：

在为变量赋文本值时，请为该值加引号（单引号或双引号都可以）。
```
var username;
username = “zhangsan”;
```

如果所赋值的变量还未进行过声明，该变量会自动声明。

// 这些语句：
x = 5; carname = "Volvo";
// 与这些语句的效果相同：
var x = 5; var carname = "Volvo";

如果再次声明了 JavaScript 变量，该变量也不会丢失其原始值。
```
var x = 5;
var x; // 5
```
在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。但是如果是在下面这种情况下，JavaScript 变量的值会改变。
```
var x = 5;
var x = 7;
```
此时页面输出的值为7。
关键字、保留字

ECMA-262 描述了一组具有特定用途的关键字。这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。以下就是ECMAScript的全部关键字。

关键字:

break do instanceof typeof
case else new var
catch finally return void
continue for switch while
debugger function this with
default if throw delete
in try
保留字:

ECMA-262 还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途。但它们有可能在将来被用作关键字。

abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
public implements protected volatile
double import

`break`	`do`	`instanceof`	`typeof`
`case`	`else`	`new`	`var`
`catch`	`finally`	`return`	`void`
`continue`	`for`	`switch`	`while`
`debugger`	`function`	`this`	`with`
`default`	`if`	`throw`	`delete`
`in`	`try`

abstract	enum	int	short
`boolean`	`export`	`interface`	`static`
`byte`	`extends`	`long`	`super`
`char`	`final`	`native`	`synchronized`
`class`	`float`	`package`	`throws`
`const`	`goto`	`private`	`transient`
`public`	`implements`	`protected`	`volatile`
`double`	`import`

3 数据类型

3.1 简单类型包括：Number、String、Boolean、Undefined、Null

3.1.1 Number 数值类型：

数值字面量：数值的固定值的表示法。例如： 110 、 1024 、 60.5 。

进制

// 十进制
var num = 9;
// 十六进制
var num = 0xA; // 数字序列范围：0~9及A~F
// 八进制
var num1 = 07; // 数字序列范围：0~7
var num2 = '012';
// var num2Val = parseInt(num2, 8);

浮点数

// 科学计数法
var n = 5e-2; // 5乘以10的-2次方
// 浮点数值的最高精度是17位小数，但在进行算术计算时，其精确度远远不如整数
var res1 = 0.1 + 0.2; // 结果不是0.3，而是0.30000000000000004
var res2 = 0.07 * 100; // 结果是7.000000000000001

// 浮点数不要直接算术运算
var a = 0.1, b = 0.2;
console.log(a + b); // 0.30000000000000004
console.log((a * 10 + b * 10) / 10); // 0.3

数值范围

console.log('最小值，这个值是', Number.MIN_VALUE); // 最小值，这个值是 5e-324
console.log('最大值，这个值是', Number.MAX_VALUE); // 最大值，这个值是
1.7976931348623157e+308
console.log('无穷大', Infinity); // 无穷大 Infinity
console.log('无穷小', -Infinity); // 无穷小 -Infinity

数值判断

NaN ：not a number，是一个值。NaN 与任何值都不相等，包括他本身。

isNaN ：is not a number，是一个函数。

console.log(isNaN(10)); // false
console.log(isNaN(Infinity)); // false
console.log(isNaN('a')); // true
console.log(Infinity - Infinity); // NaN
console.log(NaN == NaN); // false

3.1.2 String 字符串类型

字符串是存储字符（比如 “Bill Gates”）的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号;

可以使用"+"进行字符串的连接。注:字符串类型可以和任何类型做+运算。

字符串字面量。例如： 'abc' 、 '123' 、 '程序猿' 、 "程序猿" 。

转义符

字面量	含义	字面量	含义	字面量	含义
`\n`	换行	`\f`	进纸	`\xnn`	以十六进制代码 nn 表示的一个字符（其中 n 为 0 ~ F）。例如， `\x41` 表示 `"A"` 。
`\t`	制表	`\\`	斜杠	`\unnnn`	以十六进制代码 nnnn 表示的一个 Unicode 字符（其中 n 为 0 ~ F）。例如， `\u03a3` 表示希腊字符 Σ 。
`\b`	空格			`\'`	单引号（ ’ ），在用单引号表示的字符串中使用。例如： `'He said, \'hey.\''` 。
`\r`	回车			`\"`	双引号（ " ），在用双引号表示的字符串中使用。例如： `"He said, \"hey.\""` 。

字符串长度： length 属性用来获取字符串的长度。

var str = '程序员 Hello World';
console.log(str.length); // 15

字符串拼接：字符串拼接使用 +连接。

console.log(11 + 11); // 22
console.log('hello' + ' world'); // hello world
console.log('100' + '100'); // 100100
console.log('11' + 11); // 1111
console.log('male:' + true); // male:true

两边只要有一个是字符串，那么+就是字符串拼接功能。
两边如果都是数字，那么就是算术功能。

3.1.3 Boolean 布尔类型

Boolean 字面量： true 和 false ，区分大小写。

计算机内部存储： true 为 1 ， false 为 0 。

console.log(true); // true
// console.log(True); // 错误：True is not defined
console.log(true + 0); // 1
console.log(true + false); // 1

3.1.4 Undefined 未定义

undefined 的字面意思就是：未定义的值。这个值的语义是，希望表示一个变量最原始的状态，而非人为操作的结果。

这种原始状态会在以下 4 种场景中出现：

声明一个变量，但是没有赋值；

访问对象上不存在的属性或者未定义的变量；

函数定义了形参，但没有传递实参；

使用 void 对表达式求值。

3.1.5 Null 空

null 的字面意思是：空值。这个值的语义是，希望表示一个对象被人为的重置为空对象，而非一个变量最原始的状态。在内存里的表示就是，栈中的变量没有指向堆中的内存对象。

一般在以下 2 种情况下我们会将变量赋值为 null：

如果定义的变量在将来用于保存对象，那么最好将该变量初始化为 null，而不是其他值。

当一个数据不再需要使用时，我们最好通过将其值设置为 null 来释放其引用，这个做法叫做解除引用。

Null和Undefined的区别：Null 已定义，并初始化为null。Undefined 未定义，或者未初始化。

3.2 复杂数据类型包括：Object、Date、Array 等

3.2.1 数组（Array）

为什么需要数组?

之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？

数组的概念

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

数组的定义及使用

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。使用关键字new创建或[ ]。

/*
    JavaScript数组的创建方式:
       1. 构造函数创建
         var 数组名 = new Array(); -- 得到一个空数组
         var 数组名 = new Array(6); -- 创建指定长度为6的数组
         var 数组名 = new Array(值1，值2，值3...); -- 创建数组并赋予值
       2. 快捷创建
         var 数组名 = [];
         var 数组名 = [值1，值2，值3....];
    JavaScript数组的属性:
       length属性 用来获取数组的长度
    JavaScript数组的特点:
       JS数组可以存储任意数据类型
       JS数组自动扩容，不是固定长度
    注意事项:
       当S变量只有声明没有赋值的时候，去调用，那么undefined
       当JS根本没有这个变量的时候，去调用，那么报错 arr is not defined
*/

// 创建数组persons
        var persons=['红色','橙色','黄色','绿色','蓝色'];
        console.log(persons);
// 通过数组的length属性获取数组中的元素个数（长度）
        console.log(persons.length);
// 通过数组的引索获取指定元素
        console.log(persons[4]);
// 如果指定的引索不在合法的范围之内，则会返回undefined
        console.log(persons[5]);
// 为数组中指定位置的元素赋值
        persons[0]='赤色'
        persons[10]='紫色'
        console.log(persons);
//清空数组的两种方法
// 1.为原始数组重新赋值一个空的数组
        persons=[]
        console.log(persons);
// 2.为数组的length属性赋值为0
        persons.length=0
        console.log(persons);
// 遍历数组
        for (var i=0; i<persons.length; i++){
         console.log(persons[i])
        }

3.2.2 对象类型（Object）

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

其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容（字符串、数字或者其他）；
Object往往可以表示一组数据，是其他数据的一个集合；
在JavaScript中我们可以使用花括号{} 的方式来表示一个对象；
Object是对象的意思，后续我们会专门讲解面向对象的概念等；

对象由花括号定义。对象有属性和方法组成。在括号内部，无论是对象的属性还是方法都是以键和值对的形式 (key: value) 来定义。多个属性或方法由逗号分隔。

    var person1 = {
      id: 1001,
      name: "张三",
      age: 12,
      eat: function () {
        alert("吃饭的行为");
      },
      sleep: function () {
        alert("睡觉的行为");
      }
    }
    //获取对象的属性值  对象名.属性名
    console.log(person.name)
    //调用对象中的方法  对象名.方法名()
    person.eat()

在Javascript中，所有的对象都继承自Object对象。对象没有赋值的属性，该属性的值为undefined。对象的方法是函数，后面会详解。

3.3 获取变量的类型

typeof 可以获取变量的类型。但是复杂类型及 null 返回的均是 object，不能确定具体类型。

console.log(typeof 1); // number
console.log(typeof 3.14); // number
console.log(typeof "张三"); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof {}); // object

3.4 数据类型转换

3.4.1 转换成字符串类型

toString()

var num = 5;
console.log(num.toString()); // 5

String()

String() 函数存在的意义：有些值没有 toString() ，这个时候可以使用 String() 函数。比如：undefined 和 null。

var num = 1, un;
console.log(num.toString()); // 1
// console.log(un.toString()); // Cannot read properties of undefined (reading
'toString')
console.log(String(un)); // undefined

拼接字符串方式

num + "" ，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串。
```
var num = 1;
console.log(num + ''); // 1
```

3.4.2 转换成数值类型

Number()

Number() 函数可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN。

parseInt()

var str = '123';
var isRight = false;
console.log(parseInt(str)); //123
// parseInt 无法把布尔类型转换成数值类型 返回的结果是NaN
console.log(parseInt(isRight)); //NaN

var s1 = '123abc';
// parseInt 在转换字符串的时候，如果遇到数字就会转换数字，如果遇到非数字就会返回
console.log(parseInt(s1)); //123

parseFloat()

parseFloat() 函数可以把字符串转换成浮点数。

parseFloat() 和 parseInt() 非常相似，不同之处在于： parseFloat 会解析第一个 . ，当遇到第二个 . 或者非数字时结束。如果解析的内容里只有整数，则解析成整数。
```
console.log(parseFloat("123.45")); // 123.45
console.log(parseFloat("123.45abc")); // 123.45
console.log(parseFloat("123.45.6")); // 123.45
console.log(parseFloat("123")); // 123
```
parseFloat()把字符串转换成浮点数 parseFloat()和parseInt非常相似，不同之处在与parseFloat()可以得到浮点值。

+、-、0 等运算

var str = "500";
console.log(+str); // 500
console.log(-str); // -500
console.log(str - 0); // 500

3.4.3 转换成布尔类型

Boolean()

0 、 ‘’ "（空字符串）、 null 、 undefined 、 NaN 会转换成 false ，其它都会转换成 true 。

繁星流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫