JavaScript超强速成计划（一）【基础语法详解】（学习笔记）

目录：

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

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

<script>

</script>

 

1. 初步探索变量

 

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

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

输出结果：30.5

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

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

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

2.运算符

+、- 、*、/、三目、==、===等...

==和===的区别

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

结果如下所示：

 解释：==，它的底层会有一种转换，将“20”转换成20，然后再进行比较（true）,

　　　　===,表示判断相同的同时，也会判断两者的类型是否相同（false）

3.条件判断

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'm not ten");
            break;
}

结果输出如下所示：

world
I Love You

 4.循环遍历

while、 do while、for、forEach、forof、forin

遍历一个集合的方式也有许多种 . . .

准备的数组（用于测试）：

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

输出结果：2,3,4,5,9

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){
   document.write(arr[index] + " # ");
}
document.write("<br/>");

5.函数与变量作用域

函数

无参函数：

function sum(){
    alert("Hello World");      
}
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 alertData(){
        return "Hello,Namei";
    }
    function sayhello(){
       document.getElementById("pid").innerText = alertData(); 
    } 
</script>
<button onclick="sayhello()">Alert Data</button>

innerText 属性表示的是 标签的内容，我们只是将函数的返回内容将原本已经有的内容进行一个覆盖而已 . . .

变量作用域

局部变量、全局变量

var i = 20;  //全局变量
function func(){
    var k = 10;   //局部变量
    num = 250;        

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

func();
document.write(num + "<br/>");