08学习js-从一个简单样例开始

太过爱你忘了你带给我的痛 2022-09-09 04:47 136阅读 0赞

参考教程:[【尚硅谷】JavaScript基础&实战丨JS入门到精通全套完整版  
][JavaScript_JS_]  
参考文章:Han\_python的博客的[JavaScript][]专栏1.2.3

### 文章目录 ###

*  基础部分
 *   *  从一个九九乘法表讲起
     *   *  首先,js代码写在哪里
         *  变量声明,var i
         *   *  语法
             *  数据类型：
             *  最大最小值,转义,注释等
         *  显示到哪里:document.write('XXX')
         *  运算: \`+\`和\`-\*/%\`,+-号
         *   *  自增(\`++\`)
             *  逻辑运算符,比较运算符
             *  三目运算符
         *  流程控制:for循环
         *   *  while循环,do-while循环
             *  if语句
         *  弹出输入框
     *  其他
     *   *  undefine和null

# 基础部分 #

## 从一个九九乘法表讲起 ##

<head>
        
        <script type="text/javascript">
            for (var i = 1; i <= 9; i++) {
        
                for (var n = 1; n < i + 1; n++) {
        
                    document.write('<span>' + n + '*' + i + '=' + i * n + '</span>')
                }
                document.write('</br>')
            }
        </script>
    
        
        <style type="text/css">
            span {
        
                display: inline-block;
                width: 80px;
            }
        </style>
    </head>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]

### 首先,js代码写在哪里 ###

如上所示,可以写在<script>标签里

*  此外,还可以以属性的方式,写在body里

*  可以将代码编写在外部js文件中，然后通过script标签引入。

所以呢,**下面的代码都是写在这三种区域内的**,特此提醒.

### 变量声明,var i ###

#### 语法 ####

js中,语法与C语言很像,比如

> 区分大小写  
> 语句以分号（;）结尾  
> 标识符可用于函数名、变量名、属性名等，标识符中可以含有字母、数字、\_、**$**,不能以数字开头,不能是ES中的关键字(一般驼峰命名法,ES是一种标准)

**忽略多个空格和换行，可以用于格式化**  
**使用var 关键字来声明一个变量**

#### 数据类型： ####

共6种,String,Number（包括整数和浮点数）,Boolean,Null（用来表示一个空对象）,Undefined（当声明一个变量但是未赋值时）,Object(叫引用数据类型,用来new新的**对象**).

*  查看数据类型  
    使用`console.log(typeof a);`其中,**a是一个变量**
 *  类型转换  
    转换为string类型,两种:  
    成员方法`toString()`,或者函数`String()`强转

b = a.toString();   // 除null和undefined两种类型,其他数据可
    
    b = String(a);		// 可以转换所有类型的数据。

转换成Number,两种:  
`Number()` 函数,或`parseInt()`函数

a = "123a567";
    b = parseInt(a);   // 结果为123

> 与`parseInt()`类似,`parseFloat()`函数可以转换小数。  
> 如果使用JS进行浮点数运算，可能得到一个不精确的结果。

`Number()`函数转换规则如下:

<table> 
 <thead> 
  <tr> 
   <th><strong>数据类型</strong></th> 
   <th></th> 
   <th>使用Number() <strong>函数转换后</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>String</td> 
   <td>纯数字字符串”123”</td> 
   <td>直接转换</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>字符串中有非数字内容</td> 
   <td>转换为NaN</td> 
  </tr> 
  <tr> 
   <td><em>String</em></td> 
   <td><em>一个空的字符串</em></td> 
   <td><strong>0</strong></td> 
  </tr> 
  <tr> 
   <td>Boolean</td> 
   <td>ture</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><em>Boolean</em></td> 
   <td><em>false</em></td> 
   <td><strong>0</strong></td> 
  </tr> 
  <tr> 
   <td><em>Null（用来表示一个空对象）</em></td> 
   <td></td> 
   <td><strong>0</strong></td> 
  </tr> 
  <tr> 
   <td>Undefined（当声明一个变量但是未赋值时）</td> 
   <td></td> 
   <td>NaN</td> 
  </tr> 
 </tbody> 
</table>

转换为Boolean值  
对应上面的表,使用`Boolean()`函数转换时,非0的结果即为真

#### 最大最小值,转义,注释等 ####

最大最小值

> `Number.MAX_VALUE`，表示正无穷。(加个`-`就是负无穷)  
> `Number.MIN_VALUE`,表示最小的正值。  
> `NaN`表示Not a number。

转义:  
`str = "我说：\"今天天气真不错!\"";`使用转义,就可以打印出`"`了

> \\n表示换行  
> \\t表示制表符  
> \\\\表示\\

注释:

> 多行注释 `/*这里有多行内容被注释*/`  
> 单行注释`//这里有一行内容被注释`

### 显示到哪里:document.write(‘XXX’) ###

根据效果可知,document会写到body中

/*可以发出警告框*/
    alert("警告");
    /*可以向body中输出内容*/
    document.write("内容");
    /*可以向控制台输出内容 
    提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。
    */
    console.log("内容");

### 运算: `+`和`-*/%`,±号 ###

*  `+`  
    运算与c语言类似,但是`+`有扩展

result = 1 + 2 + "3";	// 结果:  33
    result = "1" + 2 +3;	// 结果:  123
    console.log("result = " + result);

`+`在字符串运算时,会被认为是拼接  
利用这一特性，**转换为String格式**的方法拓展了

var  a = 123;
    a = a + "";   # 结果: a="123"

*  `-*/%`  
    当对非Number类型的数据进行运算时，会先将数据转成Number类型再进行运算。可以利用这个性质将数据转换成Number类型。

> `100 - "1";`的结果是99  
> `2 * "8" ;`结果是16  
> `2 * null`结果是0

NaN的`+-*/`,还有%(取模),还有逻辑运算,都是特例

> 任何值和`NaN`进行运算，结果都是`NaN`,如`2 * undefined`结果是NaN  
>   
>   
> `NaN`和任何值比较都返回`false`  
> `NaN`不和任何值相等，包括它自己。可以通过`isNaN()`函数来判断一个值是不是NaN。

*  正负(`+-`)号  
    对于非Number类型的值，会将其先转换成Number，然后再使用符号。

var result = 1 + + "2" + 3;   // 结果: 6

这里,对一个其他的数据类型使用`正号 +`以实现数据类型的转换。

#### 自增(`++`) ####

var d = 20;
    var result = d++ + ++d + d;    // 64

代码中,`d++给出20`,后d变为21; `++d给出22`,d变为22,`+d给出22`,d不变,仍为22  
自减效果类似

#### 逻辑运算符,比较运算符 ####

*  与 `&&`,或 `||`,非 `！`  
    对非布尔值进行"`与或非`"运算时，会将其转换为布尔值，然后再运算
 *  `><=`  
    如果两侧的值都是字符串，是比较两个字符串的Unicode编码。一位一位进行比较，如果两位一样，则比较下一个，直到比出大小。

console.log("11" < "5");    // true

当比较运算符的两端**不全是数字**时，会先将该值转换成数字再进行比较。

`undefined`衍生自`null`，两者做相等判断返回true. 详细解释看后面的undefined和null

console.log(undefined == null);     //true
    
    <script>
        document.write(undefined == null)     //true
    </script>

*  全等 `===` ，不全等`!==`  
    [参考:js中的全等===概念][js]

var n = 2;
     var m = "2";
     var r1 = n==m;
     var r2 = n===m;
    
     console.log(r1);//输出true
     console.log(r2);//输出false

#### 三目运算符 ####

条件表达式?语句1:语句2;

var max = a > b ? a:b;

### 流程控制:for循环 ###

for(初始化表达式；条件表达式；更新表达式)
    {
        
    	语句;
    }

for循环可以嵌套.但是嵌套可以控制:  
`break`可以用来退出**一层循环**;如果想要跳出多层循环，可以给外层循环起一个名字（label），然后在break后面加上这个名字。  
`continue`,可以跳过当次循环,即continue执行时,它后面的代码被跳过一次。

> 一个编外函数: 在JS中，可以使用`Math.sqrt()`对一个数进行开平方。  
> 一个控制台方法:  
> 可以通过`console.time("name")`开启一个计时器，通过`console.timeEnd("name")`关闭计时器。这样就可以在控制台看到中间程序执行的时间。

#### while循环,do-while循环 ####

输出1到9

var n = 1;
    while(n > 10){
        
    	document.write(n++ + "<br/>"); 
    }

var n = 1;
    do{
        
    	document.write(n++ + "<br/>");
    	}while(n < 10)

do-while与while相比,会先做一次再判断.

#### if语句 ####

形式有:

> if(条件表达式) 语句;  
> if (a > 10)\{语句1;语句2;…\}  
> if (条件表达式)\{…\} else\{…\}  
> if (条件表达式)\{…\} else if\{…\} else if\{…\} else\{…\}

### 弹出输入框 ###

var score = prompt("请输入成绩：");

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
一个小应用: 求两个数字的较大值

var num1  = +prompt("请输入num1：");
    var num2  = +prompt("请输入num2：");
    var max = num1 > num2? num1 : num2;
    
    console.log(max);

注意: `+prompt("请输入num1：");`部分是对输入的数字,转换成了number.

## 其他 ##

### undefine和null ###

console.log( undefined == null )  //true

这个等式为true,是js规范规定的.null 和 undefined都代表着无效的值。参考[undefined == null的正确解释][undefined _ null]

*  `undefined`是如何定义的?

undefined 一般都来自于某个表达式最原始的状态值，不是人为操作的结果。  
即:**一个变量不赋值就是 undefined**。参考[null == undefined ?][null _ undefined]

// 1. 声明了一个变量，但没有赋值
    var foo;
    console.log(foo); //undefined
    
    // 2.访问对象上不存在的属性
    console.log(Object.foo); // undefined
    
    // 3.函数定义了形参，但没有传递实参
    function fn(a) {
        
        console.log(a); //undefined
    }
    fn(); //未传递实参
    
    /* 4. 使用 void 对表达式求值
    ES 规范 void 操作符 对任何表达式求值都返回 undefined ，这个和函数执行操作后没有返回值的作用是一样的，JavaScript中的函数都有返回值，当没有 return 操作时，就默认返回一个原始的状态值，这个值就是undefined，表明函数的返回值未被定义。
    */
    void 0 ; // undefined
    void false; //undefined
    void []; //undefined
    void null; //undefined
    void function fn(){
        } ; //undefined

*  `null`呢？  
    代码参考[JavaScript中的null和undefined][JavaScript_null_undefined]  
    null 的字面意思是 空值 ，这个值的语义是，希望表示 一个对象被人为的重置为空对象，而非一个变量最原始的状态 。 在内存里的表示就是，栈中的变量没有指向堆中的内存对象，即：  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_16_color_FFFFFF_t_70_g_se_x_16]

null表示空值，即该处的值现在为空。如果需要释放某个对象，就将变量设置为null，即表示该对象已经被清空，目前无效状态。

console.log( undefined === null )  //false
    
    typeof null        //object
    typeof undefined       //undefined

这个比较好解释,因为它俩类型不同。  
用一句话总结两者的区别就是：

> undefined 表示一个变量自然的、最原始的状态值，*而 null 则表示一个变量被人为的设置为空对象*，而不是原始状态。  
> 在实际使用过程中，为了保证变量所代表的语义，不要对一个变量显式的赋值 undefined，  
> 当需要释放一个对象时，直接赋值为 null 即可。

*  `null`的父类型: `Object`

document.write(typeof null)		// object

null 有属于自己的类型 `Null`，而不属于`Object`类型，typeof 之所以会判定为 Object 类型，是因为JavaScript 数据类型在底层都是以二进制的形式表示的，二进制的前三位为 0 会被 typeof 判断为对象类型，而 null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型。  
获取真实类型:

Object.prototype.toString.call(null) ; // [object Null]
    Object.prototype.toString.call(undefined) ; // [object Undefined]

[JavaScript_JS_]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript]: https://blog.csdn.net/han_python/category_10692377.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ade8256871e54bf69c723d41f22fd5aa.png
[js]: https://blog.csdn.net/eininotop/article/details/74093091
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/a49d1048e943411ab6adab0ab7e1806a.png
[undefined _ null]: https://blog.csdn.net/qq_35087256/article/details/82251348
[null _ undefined]: https://blog.csdn.net/u010297791/article/details/77374732
[JavaScript_null_undefined]: https://www.cnblogs.com/gongming/p/11609339.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/4266e0db443c4e7ba03fe2b6bb039e7e.png