荐 超强的入门文章 ！！！ JavaScript 速成计划第一篇（基础语法详解）!

作者：浪子花梦，一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西，如变量、运算符、分支、循环、函数等等 . . .

其他二篇文章如下：

1. 超强的入门文章 ！！！ JavaScript 速成计划第二篇（杂项详解：JS操作HTML 与 CSS、异常、事件）!
2. 超强的入门文章 ！！！ JavaScript 速成计划第三篇（面向对象与常用的内置对象、DOM对象、浏览器对象）!

---

文章目录

• 初步探索变量
• 运算符
• 条件判断
• 循环遍历
• 函数与变量作用域

---

所有的 JS 代码都是放在如下的标签之中：

废话不多说，直接开干 ！

---

初步探索变量

变量用关键字 var进行声明，var会自动推断出数据的类型，使用如下所示：

var i = 20.5;
var j = 10;
document.write(i + j + "<br/>");

将 i 与 j 相加，然后输出结果，并且加上换行

结果如下：

除了这浮点型、整形数据外，还有许多其它的数据，如下所示：

var bool = true;			// bool 类型
var str = "hello";			// 字符串类型
var arr = [1,2,3,4,5];		// 数组类型

其中，数组的访问和其它语言一样，都是通过下标进行索引，如 arr[0] 等 . . .

---

运算符

运算符的使用也非常的简单，像一些 +、-、*、/ 之内的运算符这里就不详细的讲了，例如下面的三目运算符：

document.write(1? "Hello":"World!");

效果如下所示：

我们主要来说说 == 与 === 的区别，看看如下的代码：

var i = 20;
var j = "20";
document.write(i == j);
document.write("<br/>");
document.write(i === j);

结果如下所示：

这是为什么呢？ 20 与 “20” 相等吗？ === 又是什么东西？ 当我们使用 == 时，他的底层会使用一种转换，将 “20” 转换成20，然后再进行比较（true)，=== 表示判断相等的同时，也会判断两者的类型是否相等（false） . . .

---

条件判断

条件判断有两种语法格式，if 与 switch，和其它语言使用方式是一样的，我们看下面这个例子：

var i = 10;
if(i > 10){
	document.write("Hello");
}
else{
	document.write("World!");
}

switch (i) {
case 10:
	document.write("<br/>" + "I Love You" + "<br/>");
	break;
        
default:
	document.write("i don't ten !");
	break;
} 

结果输出如下所示：

---

循环遍历

循环有三种方式，分别是 while、do while、for，遍历一个集合的方式也有许多种 . . .
首先，我们准备一个数组（用于测试）：

var arr = [9,2,3,4,5];
arr.sort();
//document.write(arr);

while：

var i = 0;
while(i<arr.length){
	document.write(arr[i++] + "  ");
}
document.write("<br/>");

do while：

i = 0;
do{
	document.write(arr[i++] + "  ");
}while(i < arr.length);
document.write("<br/>");

for：

for (let index = 0; index < arr.length; index++) {
	document.write(arr[index] + "  ");
}
document.write("<br/>");

forEach 遍历数据：

arr.forEach(item => {
	document.write(item + "  ");
});
document.write("<br/>");

forof 遍历数据：

for (const item of arr) {
	document.write(item + " ");
}
document.write("<br/>");

forin 遍历数据：

for (const index in arr) {      // i 表示 arr的下标索引
	document.write(arr[index] + " ");
}
document.write("<br/>");

这几种访问数组元素的结果都是一样的，如下所示：

---

函数与变量作用域

函数

函数是非常重要的一个方法，合理的使用函数，可以使程序的可读性变的非常的优秀，下面我将介绍几种不同的使用方式 . . .

无参函数：

function sum(){
	alert("Hello, World!");		// alert的作用是弹出一个警示框
}
 
sum();

效果如下所示：

有参函数：

function showinfo(m, n){
	document.write(m + "  " + n + "<br/>");
}

showinfo("huameng", 20);
showinfo("langzihuameng", 30);
showinfo(25, 0);        

效果如下所示：

有返回的方法：

<p id="pid">Hello, World!</p>
    <script>
        function alterdata(){
            return "Hello, langzihuameng";
        }

        function sayhello(){
            document.getElementById("pid").innerText = alterdata();
        }
    </script>
    <button onclick="sayhello()">Alter Data</button>

当我们点击按钮时，对改变 p元素中的内容，其中有几个方法大家可能不知道，没关系，我会在后面的文章中进行详细的讲解，innerText 属性表示的是 标签的内容，我们只是将函数的返回内容将原本已经有的内容进行一个覆盖而已 . . .
.

变量作用域

说起变量的作用域，我们就容易的想到 局部变量与全局变量，那么 在JS中我们是怎么使用的呢？
代码如下所示：

var i = 20;         // 全局变量

function func(){
	var k = 10;     // 局部变量
	num = 250;      // 全局还是局部呢？

	document.write(i + "<br/>");        // 20
	document.write(k + "<br/>");        // 10
	document.write(num + "<br/>");      // 250
}

func();
document.write(num + "<br/>");          // 250 全局变量  能够被访问到

代码中，哪些是局部变量，哪些是全局变量，我已经说明清楚了，特别注意的是 num = 250；这一句代码，它是全局变量 . . .

.
.
.

---

本文地址：https://blog.csdn.net/weixin_42100963/article/details/107339433