前端三剑客：一文入门JavaScript

最新推荐文章于 2024-05-21 14:15:14 发布

2401_84159911

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量585

点赞数 18

分类专栏：程序员文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/2401_84159911/article/details/138360692

版权

程序员专栏收录该内容

188 篇文章 0 订阅

订阅专栏

初始JavaScript（JS）

JavaScript是什么？

JavaScript是世界上最流行的编程语言之一。主要在浏览器上运行。js可以用来：

网页开发（更复杂的特效和网页交互）
网页游戏开发
服务器开发
桌面程序开发
手机app开发

JS运行过程

编写的代码存储在硬盘上（外存）
双击html文件，浏览器会读取文件，将文件内容加载到内存中
浏览器会解析用户编写的代码，将代码翻译成二进制的、可以让计算机识别的指令（解释器的工作）
得到的二进制指令会被CPU加载并执行

JS的组成

ECMAScript（ES）：JavaScript语法
DOM：页面文档对象模型，对页面中的元素进行操作
BOM：浏览器对象模型，对浏览器窗口进行操作

引入方式

行内式：直接嵌入到html元素的内部
内嵌式：写到Script标签中
写到单独的JS文件中
这种情况下，script标签中间不能写代码，必须空着
<script src="hello.js"></script>

输入输出

prompt：弹出一个输入框
alert：弹出一个警示对话框，输出结果
console.log：在控制台上打印日志

JS基础语法

与Java语法进行比对，主要罗列出其中与Java语法不同的地方。

【1】变量

（1）创建变量

创建变量时没有类型的区分，统一使用关键字"var"。JavaScript还支持使用let定义变量。

“+”字符串拼接，“\n”换行

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

（2）动态类型

JS的变量类型是在程序运行过程中才确定的；
随着程序的运行，变量的类型可能发生改变。

C、C++、Java等静态类型语言，变量在创建的时候类型就已经确定，不能在运行时发生改变，如果尝试改变，会编译错误。

【2】基本数据类型

JS中内置的几种数据类型：

number：数字。不区分整数和小数
boolean
string
undifined：表示未定义的值
null：表示空值

（1）number数字类型

JS中不区分整数和浮点数。

var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头

特殊的值：

Infinity：无穷大；
-Infinity：负无穷大；
NaN：表示当前结果不是一个数字。

【注】

字符串+数字，不是NaN；而是一个拼接的字符串，会将数字隐式转换为字符串。
使用isNaN函数判断是不是一个非数字。

（2）string

字符串需要使用引号引起来，单引号/双引号都可。当字符串中本身含有引号时，推荐单双引号搭配使用，也可以使用转义字符。

var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号

使用string的length属性来求长度。

字符串拼接（使用+号）：

可以字符串与字符串拼接，也可以字符串与数字拼接；
但是两个数字进行加运算是数字间的运算。

（3）boolean

参与运算时当作1和0来看待。

（4）undefined和null

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

如果一个变量没有进行初始化，结果就是undefined，是undefined类型。undefined和字符串进行相加，进行字符串的拼接；和数字相加，结果为NaN。（表示变量未初始化）
null表示当前的变量是一个“空值”（表示变量值为空）

【3】运算符

运算符、条件语句、循环语句和Java的语法基本相等，这里略过，主要描述它们的不同之处。

比较运算符：

==（比较想等）会进行隐式的类型转换
===不会进行隐式的类型转换
!=进行隐式的类型转换
!==不进行隐式的类型转换

【4】数组

（1）创建数组

JS数组不要求元素是同一个类型。

// 使用new关键字创建
var arr = new Array();
//使用字面量方式创建
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

（2）获取数组元素

通过下标进行访问：

如果下标超过数组范围，结果为undefined；
不要给数组名直接赋值，此时数组就变成一个普通元素。

（3）新增数组元素

通过修改length新增：此时末尾新增的元素都为undefined；
通过下标新增：下标超过数组范围时，会在指定位置插入新元素，此时超出部分的其他元素为undefined；
使用push函数追加元素；

（4）删除数组元素

使用splic函数删除元素。

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

（5）遍历数组

for(var i of arr){
    console.log(i);
}

【5】函数

（1）函数定义

可以通过function来定义函数

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}

函数需要在调用后才会执行
函数的定义和调用的先后顺序没有要求（但是变量必须先定义后使用）
函数的实参和形参个数可以不相等（如果实参比形参多，多出来的参数不参与运算；如果实参比形参少，此时少的形参值为undefined。）

也可以通过函数表达式来定义函数

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

形如使用function（）{}定义了一个匿名函数，然后将这个匿名函数用一个变量来表示。就可以通过这个变量来调用函数。

（2）变量作用域

分为全局变量和局部变量，作用域和java中变量类似。但需要注意的是，函数体中，不加var的变量是全局变量。

function test() {
    num = 100;
}
test();
console.log(num);
// 执行结果
100

【6】对象

（1）创建对象

使用字面量创建对象

var a={

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

局变量。**

function test() {
    num = 100;
}
test();
console.log(num);
// 执行结果
100

【6】对象

（1）创建对象

使用字面量创建对象

var a={

[外链图片转存中…(img-nw7HSeVY-1714495862409)]
[外链图片转存中…(img-iWUbzVN4-1714495862410)]
[外链图片转存中…(img-q8D2l20e-1714495862411)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2401_84159911

关注

18
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前端三剑客：一文入门JavaScript

可以通过function来定义函数// 创建函数/函数声明/函数定义function 函数名(形参列表) {函数体return 返回值;函数需要在调用后才会执行函数的定义和调用的先后顺序没有要求（但是变量必须先定义后使用）函数的实参和形参个数可以不相等（如果实参比形参多，多出来的参数不参与运算；如果实参比形参少，此时少的形参值为undefined。也可以通过函数表达式来定义函数i++) {return sum;
复制链接

扫一扫