JS 之（一）入门篇

柔情只为你懂 2022-09-25 13:18 167阅读 0赞

# 使用语法规范 #

##### ① 在html代码里边引入js语言 #####

##### ② 代码大小敏感 #####

> true/false  
> TRUE/FALSE

##### ③ 结束符号 #####

*  每个简单语句使用”;”结束，与php类似
 *  在javascript里边，该分号不是必须，但是推荐使用

##### ④ 注释 #####

> // 单行注释  
> /*多行注释*/

##### ⑤ 变量 #####

*  其值可以发生改变的量就是变量。
 *  变量名字命名规则：  
    
    
     *  php里边：字母、数字、下划线组成，开始有$符号标志，数字不能作为开始内容
     *  js里边：字母、数字、下划线、$符号、汉字 等5个组成部分，数字不能作为名字的开始内容。

##### ⑥ 数据类型 #####

*  php：int float string boolean array object null resource
 *  javascript(6种): number(int/float) string boolean null undefined object  
    (数组是对象的一部分)
    
     *  null类型：空对象类型。  
        ![这里写图片描述][20160910181026353]  
        
        
         *  var name = “”; //声明一个变量，后期要使用一个“字符串”进行赋值
         *  var age = 0; //声明一个变量，后期要使用一个“数字”进行赋值
         *  var obj = null; //声明一个变量，后期要使用一个“对象”进行赋值
     *  undefined未定义类型  
        使用一个没有声明的变量
     *  object对象类型：window document

# 数值数据类型 #

### 1. 各种进制数表示 ###

*  十进制： var age = 23;
 *  八进制： var score = 023; 2\*8+3=19的十进制数
 *  十六进制： var color = 0x25; 2\*16+5=37的十进制数  
    10:A 11:B 12:C 13:D 14:E 15:F

### 2. 浮点数 ###

//浮点数
    console.log(12.345);    //12.345
    console.log(0.87);      //0.87
    console.log(.87);       //0.87
    console.log(34.0);      //34
    //计算不准确
    console.log(0.1+0.2);   //0.30000000000000004

### 3. 最大数、最小数 ###

*  最大：Number.MAX\_VALUE;
 *  最小：Number.MIN\_VALUE;

//最大、最小数
    console.log(Number.MAX_VALUE);  //1.7976931348623157e+308 等于1.79*10的308次方
    console.log(Number.MIN_VALUE);  //5e-324 等于5*10的-324次方

### 4. 无穷大的数 ###

//无穷大的数
    console.log(Number.MAX_VALUE + Number.MAX_VALUE);   //Infinity
    console.log(10/0);                                  //Infinity

# 运算符 #

### 1. 算术运算符 ###

//i++ 和 ++i 在没有赋值的时候没有区别 
    var age = 20;
    //age++;
    //++age;
    //console.log('age:' + age); //21
    
    //i++ 和 ++i 有赋值的时候，区别如下
    //var age1 = age++; //先返回值，再++
    console.log("age1:" + age); //20 - 21
    
    var age2 = ++age;           //先++，再返回值
    console.log('age2:' + age2);//21 - 21

### 2. 比较运算符 ###

*  >
 *  <
 *  >=
 *  <=
 *  !=
 *  !==
 *  ==
 *  ===

### 3. 逻辑运算符 ###

#### && 逻辑与 ####

两边结果都为真，结果为真

#### || 逻辑或 ####

两边结果只要有一个为真，结果为真

#### ！逻辑取非 ####

真既假，假既真

**注意点：**

##### **逻辑运算符最终结果** #####

在php里边，最终结果是“布尔”结果  
在javascript里边，&&和||是其中一个操作数，!是布尔结果

##### **短路运算** #####

只给执行一个操作数，不执行另一个操作数，不被执行的操作数就被短路。

var name = "tom";
    var age = 23;
    var money = 0;
    
    console.log(name || money);         //tom money被name短路了
    console.log(money && age);          //0 age被money短路了
    console.log(name && alert(123));    //undefined
    console.log(age || alert("hello")); //23 alert被age短路了

# 流程控制 #

顺序结构  
分支选择结构:if elseif switch  
循环结构:while() do\{\}while() for()

## 条件表达式switch用法 ##

switch()\{  
　case 表达式:  
　　分支;  
　case 表达式：  
　　分支;  
\}

## 两个关键字break和continue ##

*  break：在循环、switch里边有使用  
    跳出当前的本层循环
 *  continue：在循环里边使用  
    跳出本次循环，进入下次循环

多个循环嵌套使用：
    标志flag：
    for1
        red:
        for2
            for3
                break/continue;  //把for3给跳出 / 跳出本次的for3
                //break  3;//php语法
                break flag;   //continue flag;   把标志对应的for循环给做跳出操作
                break red;    //continue red;

例：

var i = 1;
        computer:
        while(true){
            i++;
            switch(i){
                case 5:
                    console.log(i);
                    break;
                case 10:
                    console.log(i);
                    break;
                case 15:
                    console.log(i);
                    break computer;//break 跳出 computer标记的while循环，避免死循环
            }
        }

# 函数 #

## 什么是函数 ##

有一定功能代码体的集合。

## 函数的封装 ##

### 传统方式 ###

function 函数名()\{\}  
该方式的函数有“预加载”过程，允许我们先调用函数、再声明函数  
预加载：代码先把函数的声明放入内存。代码开起来是先调用、后声明，本质是先声明、后调用的。

函数先调用、后声明的条件是，全部代码在一个”<script>”标记里边。

### 变量赋值方式声明函数(匿名函数使用) ###

var 函数名 = function()\{\}  
该方式没有“预加载”，必须先声明、后调用。

//2、变量赋值方式声明函数
        var getName = function(){ 
            console.log('tom');
        }
        getName();

## 函数的参数 ##

function 函数名(形参1,形参2，形参3=’abc’)\{\}  
函数名(‘tom’,23,’beijing’);//传递实参信息

### 实参和形参的对应关系 ###

没有默认值情况：  
在php里边：实参的个数小于形参是不允许的  
在javascript里边：实参与形参没有严格的对应关系

### 关键字arguments ###

function 函数名()\{\} //函数声明没有形参  
函数名(实参，实参); //调用的时候有传递实参  
利用arguments可以在函数里边接收实参信息。

### callee关键字 ###

意思：在函数内部使用，代表当前函数的引用。  
function f1()\{  
　　xxxx具体执行代码  
　　arguments.callee(); //调用本函数（或者f1()）  
　　//都可以使得本函数执行，我们选择callee,其可以降低代码的耦合度。  
　　xxxx执行代码  
\}  
f1();  
耦合：一处代码的修改会导致其他代码也要发生改变。  
在程序项目里边要开发低耦合度的代码。

## 函数返回值 ##

一个函数执行完毕需要返回具体的信息，使用return关键字返回信息。  
在一定层度上看，全部的数据类型(数值、字符串、布尔、对象、null)信息都可以返回  
return本身还可以结束函数的执行。

在函数内部返回一个函数出来。  
在javascript里边，一切都是对象  
在一个函数内部，可以声明数值、字符串、布尔、对象等局部变量信息，言外之意就还可以声明函数(函数内部还要嵌套函数)，因为函数是对象，并且函数可以被return给返回出来。  
![这里写图片描述][20160911230619572]

![这里写图片描述][20160911230702932]

## 函数调用 ##

### 传统方式函数调用 ###

函数名();

### 匿名函数自调用 ###

(function()\{\})();

//匿名函数自调用，好处：不会被同名变量污染
        (function(){ 
            console.log('hello');
        })();
        (function(addr){ 
            console.log('地址：' + addr);
        })('北京');

## 全局/局部变量 ##

### 全局变量 ###

*  php里边：① 函数外部声明的变量。  
    ② 在函数内部也可以声明全局变量(函数调用之后起作用)

<?php funciton f1(){ global $title; $title = “php”; } f1(); echo $title;

*  javascript里边：① 在函数外部声明的变量  
    ② 函数内部不使用“var”声明的变量(函数调用之后起作用)

### 局部变量 ###

*  php里边：在函数内部声明的变量
 *  javascript里边：在函数内部声明的变量，变量前边有”var“关键字。

# 数组 #

## 什么是数组 ##

有许多变量，它们的名称和数据类型都是一致的。

## 数组声明 ##

var arr = \[元素，元素，元素。。。\];  
var arr = new Array(元素，元素，元素。。。);  
var arr = new Array(3);  
arr\[0\] = 元素;  
arr\[1\] = 元素;

## 获取数组长度 ##

数组名.length;

//length可获得数组元素，最大数字下标加1的信息
        //要想获得正确的数组元素个数，该数组下标必须为1、2、3。。规则连续的
        var color = ['red','blue','green'];
        color[3] = 'gold';
        color['juse'] = 'juse';
        color[10] = '10';
        console.log(color.length);//11

## 数组遍历 ##

沿着一定的顺序对数组内部的元素做一次切仅做一次访问，就是遍历。  
for循环 遍历  
for-in遍历

## 数组常用方法 ##

# 字符串 #

在javascript里边，字符串可以调用一些成员。

# 神奇的eval用法 #

*  eval() 接受一个字符串传参，将这个字符串作为代码在上下文环境中执行，并返回执行结果

[20160910181026353]: /images/20220717/6c45daf3be024d7dbe87f0190af5e7d9.png
[20160911230619572]: /images/20220717/3a1c4ca7e68e483e8920d8178c3deb3c.png
[20160911230702932]: /images/20220717/6c139b6edfce4cfe99b4311f8aa2f6bb.png