JavaScript基础语法

JavaScript基础语法

1 JavaScript是什么

JavaScript-百度百科

JavaScript (简称 JS)

• 是世界上最流行的编程语言之一

• 是一个脚本语言, 通过解释器运行

• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行

一般认为，当时 Netscape 之所以将 LiveScript 命名为 JavaScript，是因为 Java 是当时最流行的
编程语言，带有 “Java” 的名字有助于这门新生语言的传播。
其实 Java 和 JavaScript 之间的语法风格相去甚远

这张图就非常生动的反映了Java和JavaScript的关系

2 JavaScript和CSS、HTML的关系

• HTML: 网页的结构(骨)
• CSS: 网页的表现(皮)
• JavaScript: 网页的行为(魂)

这张图片也很好的反映了这个关系

3 JavaScript的组成

JS是运行在浏览器上的

• ECMAScript(简称 ES): JavaScript 语法
• DOM: 浏览器给JS提供的用来操作页面的API（页面文档对象模型, 对页面中的元素进行操作）
• BOM: 浏览器给JS提供的用来操作浏览器的API（浏览器对象模型, 对浏览器窗口进行操作）

文档：网页（HTML就可以视为文档）

对象：浏览器把页面中的每个标签/元素都抽象成了一个对象，使用JS就可以直接拿到这些对象，也就可以基于JS来操作页面内容了

咱们这篇主要谈的是 DOM 和 JavaScript基本语法

4 第一个程序

<script>
   // script 标签里的内容 就是JS代码
   alert("你好!");
script>

JavaScript 代码可以嵌入到 HTML 的 script 标签中

从这个代码 我们可以获得下面的信息

• JS中的注释 是 // 和 /* */
• alert 是浏览器提供的函数，相当于BOM中的一个部分，效果是弹出一个对话框
• JS中的字符串，可以使用 ' ' 也可以使用" "

5 JavaScript的引入方式

1. 内嵌式

直接写到 script标签中

就是刚刚我们上面使用的

2. 外部式

写到单独的文件中

这是实际开发中最主要的方式

• HTML文件

<script src="hello.js">script>

• JS文件

alert("hehe");

注意：这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).
适合代码多的情况

3. 行内式

把JS代码直接嵌入到 html 标签里

<div onclick= "alert('就点你咋了')"> 点我就是小狗div>

注意：这个 onclick= "alert('就点你咋了')" 是 div标签的属性（绝大部分的HTML标签都有这个属性）

属性的值就是一段 JS 代码，里面不能放HTML，并且这段　JS　要使用＂＂引起来

因此，如果JS里要使用字符串，建议使用 ' ' ,否则需要用转义字符

6 输入输出

1. 输入

输入: prompt
弹出一个输入框

// 弹出一个输入框
prompt("请输入您的姓名:");

2. 输出

• 输出：alert

弹出一个对话框, 输出结果

// 弹出一个输出框
alert("hello");

• 输出：console.log

在控制台打印一个日志(供程序员看)

// 向控制台输出日志
console.log("这是一条日志");

注意：注意: 在 VSCode 中直接输入 “log” 再按 tab 键, 就可以快速输入 console.log

重要概念: 日志

日志是程序员调试程序的重要手段

解释：

console 是浏览器给JS提供的对象
. 表示取对象中的某个属性或者方法. 可以直观理解成 “的”
console.log 就可以理解成: 使用 “控制台” 对象 “的” log 方法

7 重点语法

7.1 变量的使用

• 创建变量

1. var

var name = 'zhangsan';
var age = 20;

var单纯的表示，这是一个变量

这是支持类型自动推导的

2. let

JS变量的定义，还有另一种写法

var是老式写法，let是新式写法

let name = 'zhangsan';
let age = 20;

7.2 动态类型

我们先介绍一下什么是动态类型

一个变量在运行过程中，类型可以发生改变，我们就称之为动态类型 （JS，Python，PHP）

如果不能发生改变，就称之为静态类型（C，C++，Java）

我们顺便也介绍一下强类型和弱类型

• 如果一个编程语言，不太支持隐式类型准换——强类型
• 如果一个编程语言，非常支持隐式类型准换 ——弱类型

网上很多人，把Java和 JS的语法差异归结为”强弱类型“，其实是不对的

其实语法差异大部分是”动态类型“带来的

反而弱类型强类型这个区别的语法差异不大

1. JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)

let a = 10; // 数字
let b = "hehe"; // 字符串

2. 随着程序运行, 变量的类型可能会发生改变.

let a = 10; // 数字
a = "hehe"; // 字符串

7.3 基本数据类型

• number: 数字. 不区分整数和小数.
• boolean: true 真, false 假.
• string: 字符串类型.
• undefined: 只有唯一的值 undefined. 表示未定义的值.
• null: 只有唯一的值 null. 表示空值

7.3.1 number

数字number包含了整数和小数

• 如果变量n当前保存的是一个整数，n的内存相当于是保存了64位的整数
• 如果变量n当前保存的是一个小数，n的内存相当于是保存了双精度浮点数，也是遵循IEEE 754标准的

特殊的数字值

• Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
• -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
• NaN: 表示当前的结果不是一个数字.

7.3.2 String

字符串字面值需要使用引号引起来, 单引号双引号均可

JS里的字符串和Java很相似，也支持 ‘+’ 功能，即字符串的拼接功能

7.3.3 boolean

表示 “真” 和 “假”

Boolean 参与运算时当做 1 和 0 来看待

7.3.4 undefined

JS中特殊的类型

如果某个东西没有去定义或者初始化，直接去访问，那么一般不会报错，而是得到一个 undefined

undefined的值是undefined，类型也是undefined

示例：

• undefined 和字符串进行相加, 结果进行字符串拼接

console.log(a + "10"); // undefined10

• undefined 和数字进行相加, 结果为 NaN

console.log(a + 10);

7.3.5 null

null类型表示当前变量是一个空值

var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10

注意:
null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义. (相当于连盒子都没有)

7.4 运算符

比较运算符

注意这个===

7.5 数组

使用 new 关键字创建

7.5.1 创建数组

// Array 的 A 要大写
let arr = new Array();

一般写代码不会用上面的方式创建数组,还有更简单的做法:

let arr = [1,2,3];
let arr2 = [1, 2, 'haha', false]; //JS中允许数组内容是不同类型

7.5.2 读取数组元素

使用下标的方式访问数组元素(从 0 开始)

let arr = ['a', 'b', 'c'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = 'd';
console.log(arr);

如果下标超出范围读取元素, 则结果为 undefined

console.log(arr[3]); // undefined
console.log(arr[-1]); // undefined

注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了

相当于本来是一个数组, 重新赋值后变成字符串了

let arr = ['a', 'b', 'c'];
arr = 'd';

7.5.3 修改数据

let arr = ['a', 'b', 'c'];
arr[-1] = 56;
arr[100] = 'hello';
arr['world'] = 5;
console.log(arr);

从这个示例中我们可以看出：

1. 在JS中如果数组下标越界，不会报错
2. JS中允许数组内容是不同类型
3. 如给 arr[100]赋值，则会多出中间97个undefined类型的元素
4. 如果下标是 负数 或者 字符串，好像出现了 键值对，此时不光是一个数组，还是一个map

从以上我们可以看出，JS中的数组颠覆了我们对数组的认识

数组里存储的数据是两部分：

• 正经数组存储的元素
• 键值对存储的元素（类似于map）

7.5.4 新增元素

1. 直接通过下标新增
2. 若想往末尾新增，可以用push

let arr = [9, 5, 2, 7, 3, 6, 8];
let newArr = [];
for (var i = 0; i < arr.length; i++) {
      if (arr[i] % 2 != 0) {
         newArr.push(arr[i]);
       }
}
console.log(newArr);

7.5.5 删除元素

• 使用 splice 方法删除元素

var arr = [9, 5, 2, 7];
arr.splice(2, 1);// 第一个参数表示从下标为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
console.log(arr);
// 结果
[9, 5, 7]

• 我们还可以用splice 方法替换元素

var arr = [9, 5, 2, 7];
arr.splice(2, 1, 6);// 第一个参数表示从下标为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
console.log(arr);
// 结果
[9,  5 , 6, 7]

• 如果想替换多个

var arr = [9, 5, 2, 7];
arr.splice(2, 1, 6, 6, 6, 6, 6);// 第一个参数表示从下标为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
console.log(arr);
// 结果
[9, 5, 6, 6, 6, 6, 6, 7]

• 如果第二行个参数写作0，就不是删除，而是插入元素了

var arr = [9, 5, 2, 7];
arr.splice(2, 0, 6);// 第一个参数表示从下标为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
console.log(arr);
// 结果
[9,  5 , 6,  2,  7]

7.6 函数

7.6.1 语法格式和特点

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
   函数体
   return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

• Java里面一个方法,只能返回一种类型的数据。约定了返回一个int,此时所有的return语句返回的结果都得是int类型！

• JS里面则不要求.一个函数中,有多个return语句,这些return返回的类型可以不相同。包括函数形参,每个参数是啥类型,也是可以随意指定的

像这样也都是可以的

• 别的语言中，一般是要求，函数的形参个数要和实参个数匹配，而 JS 则不要求，实参是多是少，都无所谓，如果实参多了，多出来的实参就忽略了，如果实参少了，多出来的形参就是undefined，也不会报错

例如，想写一个函数，能够支持计算N个值相加

这里是6个参数，万一参数更多，或者想要任意个参数，咋办

JS函数的内部，有一个内置的变量 arguments 相当于一个数组，这个数组里放了所有的实参

function add(){
    let sum = 0;
    for(let i = 0; i< arguments.length; i++){
        let n = arguments[i]||0;
        sum += n;
    }
    return sum;
}

7.6.2 函数表达式

• 刚刚我们使用的

定义了一个匿名函数

• JS的另外一种函数定义的方式

创建了变量add，对add初始化，用一个函数对它初始化，add这个变量的类型，就是函数类型——function

7.6.3 函数是一等公民

• 可以把函数保存到一个变量中
• 可以把函数作为另一个函数的参数
• 可以把函数作为另一个函数的返回值

这个设定就称为”函数是一等公民“

7.7 作用域

使用 let 定义的变量是 ”块级作用域“

是在当前 { } 里生效的

在使用某个变量的时候，就会先在当前{ }去找，如果找不到，就往外层{ }去找，一直找到最顶层还找不到，就认为变量未定义

从代码块里一级一级往外找变量的这个过程，称为”作用域链“

7.8 对象

JS中的对象比Java中的要简单一些

JS中所有的对象都是Object类型，无论这个对象叫啥名字，有啥属性，都是相同类型。（此观点是站在传统的JS的语法的角度去考虑的，ES6开始也做出了一些区分）

7.8.1 使用 字面量 创建对象 [常用]

• 在JS中创建一个对象，不依赖”类“
• JS中是直接使用{ } 就可以表示对象

我们写一个

• 对象里面的数据，就非常类似于”键值对结构“

• 每个键值对都是使用 , 来分割

• 键和值使用 : 来分割

• 值也可以是函数

定义好对象之后，就可以使用里面的属性和方法了

从这儿看，好像和 Java 没有啥区别，也是通过 . 来完成成员访问

7.8.2 使用 new object创建对象

7.8.3 使用 构造函数创建对象

上面这俩都比较旧，用的也不多，此处就不再赘述