JavaScript基础语法

最新推荐文章于 2024-10-02 05:39:15 发布

置顶 Living_Amethyst

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量1.1k

点赞数 10

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Living_Amethyst/article/details/126961001

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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的引入方式

内嵌式

直接写到 script标签中

就是刚刚我们上面使用的

外部式

写到单独的文件中

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

HTML文件

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

JS文件

alert("hehe");

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

行内式

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

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

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

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

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

6 输入输出

输入

输入: prompt
弹出一个输入框

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

输出

输出：alert

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

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

输出：console.log

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

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

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

重要概念: 日志

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

解释：

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

7 重点语法

7.1 变量的使用

创建变量

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

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

这是支持类型自动推导的

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

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

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

7.2 动态类型

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

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

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

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

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

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

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

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

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

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

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

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);

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

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

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

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

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

7.5.4 新增元素

直接通过下标新增
若想往末尾新增，可以用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;
}