本文介绍了JavaScript的基本概念，包括JavaScript的组成、特点和应用场景。详细讲解了变量的声明、类型以及命名规则，数字类型与运算符的使用。此外，还深入探讨了数组的创建、操作和转换方法，以及null和undefined的区别。文章通过实例演示了如何在JavaScript中进行字符串操作，包括连接、转换、获取长度和查找子字符串等。
文章目录
一、JavaScript 认识
-
JavaScript, 通常缩写为JS， 是一种高级的，解释执行的编程语言
-
JavaScript组成：
- ECMAScript：JavaScript 的语法标准。
- DOM：JavaScript 操作网页上的元素的 API。
- BOM：JavaScript 操作浏览器的部分功能的 API。
-
JavaScript 的特点：
- 可以使用任何文本编辑工具编写，然后使用浏览器就可以执行程序。
- 是一种解释型脚本语言：代码不进行预编译，从上往下逐行执行，不需要进行严格的变量声明。
- 主要用来向 HTML 页面添加交互行为。
-
写在哪：
- 代码放在script标签里，而包含JavaScript 代码的 script 标签，我们可以放在body标签里，也可以放在head标签里。
- JavaScript 也可以通过外部引入。首先我们需要创建一个扩展名为 .js 的文件，然后在 html 页面中引入它。同样的拿上述范例来修改，我们首先创建一个叫 test.js，名字可以自己取，但是扩展名一定要是 .js，只有这样才能够识别包含 JavaScript 代码的文件，然后在里面写上我们的 JavaScript 代码：
console.log("hello world");
- 在 html 文件中写上如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
- 值得注意的是 test.js 文件要和你的 html 文件在同一目录下才能用上面的方式引用，否则的话需要使用绝对路径来引入 js 文件，具体引入需要根据实际情况灵活运用了。前两种方式都是直接把 JavaScript 代码放在 HTML 中，在页面加载的同时，那些 JavaScript 的代码就被解析了。而把 JavaScript 代码放在外部文件中，只有在事件被触发，需要该段 JavaScript 代码时，才调用执行。这样做有个好处，当页面比较复杂的时候，把大量的 JavaScript 代码放到外部文件，只有在需要的时候才执行，那么会明显地加快页面加载速度，而且实现结构化分离，也便于我们维护自己的代码，所以建议大家养成外部引入的方式来写我们的 JavaScript 代码。
二、变量
变量是什么？
-
在计算机中，数据都存在内存中。而一个变量，就是一个用于存放数值的容器，每个变量存放的数值是可变的，每个变量都有其独有的名字，每个变量都占有一段内存。
-
注：变量不是数值本身，变量仅仅是一个用于储存数值的容器。
声明变量
-
用var关键字来声明变量
var name = "zz"; -
变量的命名规则如下：
- 变量名必须以字母、下划线 “_”、美元符号 “$” 开头，不能以数字开头。 - 变量可以包含字母、数字、下划线和美元符号。 - 不能使用 JavaScript 中的关键字做为变量名。 - 变量名不能有空格。 - 变量名对大小写敏感，比如：name 和 Name 就是两个完全不同的变量。 -
另外在 JavaScript 中，变量也可以不作声明，而在使用时再根据数据的类型来确其变量的类型:
x = 50; // 变量 x 为整数
变量类型
-
Number：你可以在变量中存储数字，不论这些数字是 10（整数），或者是 3.1415926（浮点数）。
var x1 = 10; var x2 = 3.1415926; -
String：存储字符（比如 “shiyanlou”）的变量，字符串可以是引号中的任意文本，你可以使用单引号或双引号，也可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
var carname = "shiyanlou"; var carname = "shiyanlou"; var answer = "I Love 'shiyanlou'"; var answer = 'I Love "shiyanlou"'; -
Boolean：布尔类型的值有两种：true 和 false。通常被用于在适当的代码之后，测试条件是否成立，后续会讲到。
-
Array：数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。后续我们将会对数值进行详细的讲解：
var myNameArray = ["Tom", "Bob", "Jim"]; var myNumberArray = [10, 15, 20]; -
Object：对象类型。同样的我们会在后续的课程中详细讲解什么是对象：
var student = { name: "Tom", age: 18 }; -
动态类型: JavaScript 是一种“动态类型语言”，这意味着不同于其他一些语言（如 C、Java），你不需要指定变量将包含什么数据类型（例如 number 或 string），全部用 var 关键字声明就是了。比如如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串
var myString = "Hello";
注释
- 单行注释：用来描述下面一个或多行代码的作用。单行注释快捷键：Ctrl + /。
// 这是一个变量
var name = "zhangsan";
- 多行注释：用来注释多条代码。多行注释快捷键：Ctrl + Shift + /。
/*
var name = "zhangsan";
var age = 18;
console.log(name, age);
*/
三、数字与运算符
数字类型
- 整数。例如：1, 2, 100, -10。
- 浮点数：就是小数。例如：0.2, 3.1415926。
- 双精度：是一种特定类型的浮点数，它们具有比标准浮点数更高的精度。
- 注：我们这里作为了解就可以了。因为和其他语言不同的是，在 JavaScript 中，不管什么数字类型的全部用 var 声明就可以了，而且 JavaScript 中只有一个数字类型：Number。
算术运算符
- num++ : 先赋值再自增
- ++num : 先自增在赋值
- num-- 和 --num同上
操作运算符
比较运算符
逻辑运算符
运算符的优先级
四、数组
数组语法
var myarray = new Array(1, 2, 3, 4, 5); // 创建数组同时赋值
// or
var myarray = [1, 2, 3, 4, 5]; // 直接输入一个数组（称“字面量数组”）
多维数组
- 多维数组就是数组中还包含数组，我们可以一层一层的来看
var student = [
["张三", "男", "18"],
["李四", "女", "20"],
];
student[0][2]; // returns "18"
修改数组
var color = ["red", "green", "blue", "yellow"];
color[0] = "black";
color; // returns ["black", "green", "blue", "yellow"]
获取数组的长度
```javascript
var color = ["red", "green", "blue", "yellow"];
color.length; // returns 4
```
数组和字符串之间的转换
"1:2:3:4".split(":"); // returns ["1", "2", "3", "4"]
"|a|b|c".split("|"); // returns ["", "a", "b", "c"]
["1", "2", "3", "4"].join(":"); // returns "1:2:3:4"
["", "a", "b", "c"].join("|"); // returns "|a|b|c"
添加数组项
var arr = ["1", "2", "3", "4"];
arr.push("5", "6");
arr; // returns ["1", "2", "3", "4", "5", "6"]
删除数组项
var arr = ["1", "2", "3", "4"];
arr.pop(); // returns 4
arr; // returns ["1", "2", "3"]
var arr1 = [];
arr1.pop(); // returns undefined
arr1; // returns []
- unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同，只是它们分别作用于数组的开始，而不是结尾。大家可以直接在控制台自行尝试一番。
五、Null 和 Undefined
- null 和 undefined 都表示无，但是也有一些区别。现在控制台上执行以下语句：
- 这里需要说明的是：== 是相等操作符，比较值是否相等，如果相等输出为 true，否则为 false。=== 是全等操作符，比较值和类型是否都相等，如果都相等输出为 true，否则为 false。通过我们在控制台中的实践可以发现，null 和 undefined 的值不等于 0，它们的值相等，但是类型不相等。undefined 表示所有没有赋值变量的默认值，而 null 则表示一个变量不再指向任何对象地址。
六、字符串
- 在前面的变量章节中，我们已经简单讲过字符串的基础知识，这里我们再拓展一下。我们前面讲过我们可以使用单引号或双引号，也可以在字符串中使用引号，只要不匹配包围字符串的引号即可。比如：
var carname = "shiyanlou";
var carname = "shiyanlou";
var answer = "I Love 'shiyanlou'";
var answer = 'I Love "shiyanlou"';
- 但是如果中间有单引号，双引号怎么办，用转义字符：
连接字符串
- 通过 “+” 连接字符串，比如在控制台中输入下面的代码：
var one = "Hello,jack.";
var two = "I'm rose";
result = one + two;
字符串转换
- 通过 toString() 方法把数字转换成字符串。
var myNum = 123;
var myString = myNum.toString();
typeof myString;
- 也可通过Number()
var myString = "123";
var myNum = Number(myString);
typeof myNum;
- 注：如果传递的不是纯数字的字符串，则返回的不是数字，而是 NaN（not a number）。
- parseFloat() 把字符串转换成浮点数
- parseInt() 把字符串转化为整数
- Boolean() 转化成Boolean
获取字符创的长度
- 通过 length 属性获取字符串的长度，结果返回一个数字。比如：
var myString = "hello world ";
myString.length;
在字符串中查找子字符串并提取它
- indexof() ： str.indexOf(searchValue, fromIndex);
"Blue Sky".indexOf("Blue"); // returns 0
"Blue Sky".indexOf("Ble"); // returns -1
"Blue Sky".indexOf("Sky", 0); // returns 5
"Blue Sky".indexOf("Sky", -1); // returns 5
"Blue Sky".indexOf("Sky", 5); // returns 5
"Blue Sky".indexOf("Sky", 9); // returns -1
"Blue Sky".indexOf("", 0); // returns 0
"Blue Sky".indexOf("", 5); // returns 5
"Blue Sky".indexOf("", 9); // returns 8
- indexOf() 方法区分大小写
- slice() 当你知道字符串中的子字符串开始的位置，以及想要结束的字符时
"Blue Sky".slice(0, 3); // returns "Blu"
转换大小写
- 字符串方法 toLowerCase() 和 toUpperCase() 字符串并将所有字符分别转换为小写或大写。比如：
var string = "I like study";
string.toLowerCase(); // returns "i like study"
string.toUpperCase(); // returns "I LIKE STUDY"
- 替换字符串的某部分
var string = "I like study";
string.replace("study", "sleep"); // returns "I like sleep"
- 注意这样只能替换第一个出现的字符串，如果字符串是类似 I like study study，那么第二个 study 不会被替换。
- 可以用这个：
var string = "I like study study";
string.replace(/study/g, "sleep");
- 注：字符串的操作方法其实还有很多，我们将在后续的课程中再为大家作深入讲解。
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
