Javascript - 基础语法

灰太狼 2021-11-14 00:10 395阅读 0赞

JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。有很广的应用范围。

> PC 浏览器、PC 软件、手机浏览器、手机 app、微信小程序、微信公众号开发、硬件开发、服务器开发、AR、VR、深度学习、机器学习

## 1 在 html 中使用 JavaScript ##

在 html 中 script 标签内容的执行，是按顺序执行，但是加载是按照异步进行加载。script 标签里面如果有代码出错，仅仅只会影响到这个script标签代码的执行。

> 同步：一个事情完成之后，才能做下一件事情，有等待就是同步。  
> 异步：一个事情发起之后，下一个事情也可以立即发起，不需要等待前面一个事情完成之后才发起。

### script 标签 ###

### 引用 JavaScript 文件 ###

### 运行原理 ###

浏览器首先会解析 html，解析到 script 标签时候，会调用 JavaScript 引擎执行 script 标签里的代码。执行前会对代码预编译（一些语法纠正和变量提升处理），然后解释执行。

JavaScript 是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。例如：

但是这种共享只能发生在后面的 script 调用前面的 script 的成员，因为 script 是按 html 中的顺序预处理、执行的，所以下列代码会报 undefined 错误：

### 执行顺序总结 ###

1.  读入第一个代码
2.  做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
3.  对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
4.  执行代码段，有错则报错（比如变量未定义）。
5.  如果还有下一个代码段，则读入下一个代码段，重复step2。
6.  结束。

## 2 变量 ##

JavaScript 是弱类型语言，所以声明变量的时候，统一用 var 进行声明变量。如果赋值前没有申明，就会自动声明一个全局变量。声明后未赋值的变量会被设置为 undefined。

> 注意：js 在预编译的时候，变量的声明会被提升到最上面。

*  全局变量：在最外层声明的变量，以及在函数内部未用 var 声明变量，是全局变量，所有的全局变量都可以在控制中调用 window 查看
 *  局部变量：在函数内部声明的变量就是局部变量

### JavaScript 变量类型： ###

*  数值类型：整数、浮点数、infinite、-infinite、nan
 *  字符串类型："abc" ，'123'
 *  对象：\{\}，new object()
 *  布尔值：true和false
 *  undefined：有声明但是未赋值。
 *  null：这是赋值了就是空的内容。

## 3 运算 ##

JavaScript 支持算术运算、逻辑运算、关系运算、条件运算（三目运算符），用法上和 Java 类似，这里只提几个特殊的点。

### 3.1 除法 ###

由于 JavaScript 是弱类型，并没有对变量类型有定义，所以在做除法（）并不像 Java 一样是求余，而是准确结果（可以为小数）。

### 3.2 浮点数的运算 ###

和 Java 类似，浮点数的运算有精度问题，例如 0.1 + 0.2 答案是不正确的。

### 3.3 === 及 ！== ###

=== 和 !== 表示全等于和全不等于，它和 ==、!= 的区别在于：在 JavaScript 中，== 和 != 会对变量自动进行类型转换，产生一些奇怪的结果，而 === 和 !== 会对比较拥有更严格的限制，要求两边类型和值都相等在返回 true（不做类型转换）。

输出结果：

![结果][82bcafe1gy1g3ifvr5aixj208c08ct9g.jpg]

> 易混淆的比较，以下结果为 true：  
> 3 == "3"  
> 0 == false; 1 == true  
> null == undefined  
> 0 == ""; false == ""

## 4 流程控制 ##

JavaScript 的流程控制和 Java 类似，常用的有分支语句 if-else，switch-case，循环语句 while，for。

/*用 for 循环输出乘法口诀表*/
    <script type="text/javascript">
        for(let i = 1; i < 10; i++){
            let str = ""
            for(let j = 1; j <= i; j++){
                str +=  j + "*" + i + "=" + i*j + "\t";
            }
            console.log(str);
        }
    </script>

![口诀表][82bcafe1gy1g3ifwbueysj20ee072wg7.jpg]

## 5 函数 ##

## 5.1 函数的定义 ##

JavaScript 中定义一个函数有两种方式。

方法1：

`function count(a){ return x }`  
方法2：

`var count = function(a){ return x }`

> **区别**：  
> JavaScript 中函数同参数一样，会在预编译时被提到最前面，所以：  
> 1.采用第一种方法定义的函数，不管定义的位置在哪里，script 里任何地方都可以调用这个方法，因为实际上在执行前就已经初始化好了；  
> 2.采用第二种方法定义的函数，会被当作变量处理，所以预编译阶段只会声明这个变量，并没有将方法赋给它。

### 5.2 函数的参数 ###

与 Java 不同，JavaScript 对函数的参数没有严格的限制，在调用函数时，不对参数做任何的检测，不给、多给、少给都可以正常调用函数，在函数执行过程中没有值的参数的值为 undefined。

方法中传入的所有参数，会存放在关键字 arguments 中以类似数组的形式保存，但又不是数组，也可以对其进行遍历。

### 5.3 函数的返回值 ###

如果没有写返回值，那么函数默认会返回 undefined。

## 6 数组 ##

在 JavaScript 中，数组是可变长的，里面的内容也可以随意的替换且没有类型的限制。

### 6.1 创建数组 ###

创建数组有两种方式

### 6.2 数组的遍历 ###

方法一：数组带有 length 属性，用 for 循环遍历数组。

for(var i=0;i<arr1.length;i++){
        console.log(arr1[i])
    }

方法二：用数组的 forEach 方法遍历数组，同 Java 中的 forEach 方法需要传入一个函数式接口作为参数一样，这里的 forEach 也要提供一个函数作为参数，forEach 会按顺序将数组的元素赋给参数函数作为参数，实现遍历。

arr2.forEach(function(item){
        console.log(item)
    })

### 6.3 数组实现队列和栈 ###

当把数组当作队列（FIFO）时，可以使用数组的 push(), shift() 方法操作数组。

*  push()：在数组最后添加元素
 *  shift()：在数组的最前面取出元素

当把数组当作栈（FILO）时，可以使用数组的 push(), pop() 方法操作数组。

*  push()：在数组最后添加元素
 *  pop()：在数组的最后面取出元素

### 6.4数组的其他方法 ###

*  unshift()：在数组的第一元素前插入数据
 *  slice(beginIndex, endIndex)：返回数组从索引 beginIndex 到 endIndex 作为元素的子数组（原数组不被修改）
 *  splice(index, length, element...)：可以增加或者删除指定元素，从 Index 开始取出长度为 length 的元素以数组形式返回（原数组会被修改），并将 element（可以是多个参数）从 index 处插入
 *  concat(Array)：将此数组和参数数组合并，将参数加至末尾

转载于:https://www.cnblogs.com/carlosouyang/p/10952080.html

[82bcafe1gy1g3ifvr5aixj208c08ct9g.jpg]: /images/20211113/96a26c8e7c374c109eb42ec283a45ff9.png
[82bcafe1gy1g3ifwbueysj20ee072wg7.jpg]: /images/20211113/bdd4db149d0f4b3684723d4184895cfd.png