【前端学习|DAY2】JAVA程序员必会的前端知识-JavaScript与TypeScritp-上

马猴烧酒375

549人浏览 · 2026-04-07 20:16:59

马猴烧酒375 · 2026-04-07 20:16:59 发布

前置认知

JavaScript（简称 JS）：是跨平台、解释型的弱类型动态脚本语言，是 Web 前端开发的基石，可运行在浏览器 / Node.js 环境中，负责页面交互、逻辑处理、服务端开发等核心能力。
TypeScript（简称 TS）：是微软开发的JavaScript 的强类型超集，在 JS 的完整语法基础上，新增了静态类型系统、面向对象增强等企业级特性，最终会编译为纯 JS 运行，兼容所有 JS 环境。它的核心价值是解决 JS 弱类型带来的维护、调试、团队协作痛点。

Javascript

引入方式

第一种方式：内部脚本，将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script></script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS 引入方式</title> </head> <body> <script> alert('Hello JS') </script> </body> </html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 引入方式</title>
</head>
<body>
  
  <script>
    alert('Hello JS')
  </script>
</body>
</html>

第二种方式：外部脚本，将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- 引入外部js的<script>标签，必须是双标签

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

JS的基础语法

输出语句

在JS中有3种输出语句，分别是：

api	描述
window.alert(...)	警告框
document.write(...)	在HTML 输出内容
console.log(...)	写入浏览器控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法</title>
</head>
<body>
        
    <script>
        //方式一: 写入浏览器的body区域
        document.write("Hello JS (document.write)");

        //方式二: 弹出框
        window.alert("Hello JS (window.alert)");

        //方式三: 控制台
        console.log("Hello JS (console.log)")
    </script>
</body>
</html>

变量与数据类型

声明变量

1.let let 声明的变量可以被多次赋值

2.const const 修饰的叫常量，只能赋值一次。const 并不意味着它引用的内容不可修改。

3.var var 声明的变量可以被多次赋值

var和let定义的变量对于函数而言的作用域不同，后面讲。更推荐使用let。

let 变量名 = 值;

let a = 100;  // 初始值是 100
a = 200;	  // ok, 被重新赋值为 200

const b = 300; // 初始值是 300
b = 400;	   // error, 不能再次赋值

const c = [1,2,3];
c[2] = 4; 	        // ok, 数组内容被修改成 [1,2,4]
c = [5,6];			// error, 不能再次赋值

var f = 100;
f = 200;

基本数据类型

undefined 和 null

执行表达式或函数，没有返回结果，出现 undefined
访问数组不存在的元素，访问对象不存在的属性，出现 undefined
定义变量，没有初始化，出现 undefined

二者共同点

都没有属性、方法
二者合称 Nullish

二者区别

undefined 由 js 产生
null 由程序员提供

console.log(1);  	// 函数没有返回值, 结果是  undefined
let a = 10;		 	// 表达式没有返回值, 结果是 undefined
let b = [1,2,3];
console.log(b[10]); // 数组未定义元素是 undefined
let c = {"name":"张三"};
console.log(c.age); // 对象未定义属性是 undefined
let d;
console.log(d);		// 变量未初始化是 undefined

string

js 字符串三种写法

let a = "hello";  // 双引号
let b = "world";  // 单引号
let c = `hello`;  // 反引号

也因此js中写字符串比较灵活，不需要频繁的转义字符。

模板字符串（Template strings）

需求：拼接 URI 的请求参数，如

/test?name=zhang&age=18
/test?name=li&age=20

传统方法拼接
let name = ; // zhang li ...
let age = ; // 18 20 ...

let uri = "/test?name=" + name + "&age=" + age;
模板字符串方式
let name = ; // zhang li ...
let age = ; // 18 20 ...

let uri = `/test?name=${name}&age=${age}`;

number 和 bigint

number 类型标识的是双精度浮动小数，可以除0。要表示真正的整数，需要用 bigint，数字的结尾用 n 表示它是一个 bigint 类型。

字符串转数字
parseInt("10"); 	// 结果是数字 10 
parseInt("10.5");	// 结果是数字 10, 去除了小数部分
parseInt("10") / 3; // 结果仍视为 number 浮点数, 因此结果为 3.3333333333333335

parseInt("abc");	// 转换失败，结果是特殊值 NaN (Not a Number)


10n / 3n;  // 结果 3n, 按整数除法处理

boolean

boolean有两种值，分别是Truthy和Falsy。

在 js 中，并不是 boolean 才能用于条件判断，你可以在 if 语句中使用【数字】、【字符串】... 作为判断条件

这时就有一个规则，当需要条件判断时，这个值被当作 true 还是 false，当作 true 的值归类为 truthy，当作 false 的值归类为 falsy

下面值都是 falsy

false
Nullish (null, undefined)
0, 0n, NaN
"" '' `` 即长度为零的字符串

剩余的值绝大部分都是 truthy

有几个容易被当作 falsy 实际是 truthy 的

"false", "0" 即字符串的 false 和字符串的零
[] 空数组
{} 空对象

let b = 1;

if(b) { // true
    console.log("进入了");
}

对象类型

1.Function

在javascript中Function是被当作对象来使用的。

js 中的函数调用特点：对参数的类型和个数都没有限制。

//函数定义
function 函数名(参数) {
    // 函数体
    return 结果;
}

//函数调用
函数名(实参);

//默认参数
function pagination(page = 1, size = 10) {
    console.log(page, size);
}

//匿名函数
(function (参数) {
    // 函数体
    return 结果;
})

匿名函数有两种使用方式

//第一种场景：定义完毕后立刻调用

(function(a,b){
    return a + b;
})(1,2)

//第二种场景：作为其它对象的方法
某元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是 null，需要赋值后才能使用
document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

箭头函数的简化


//箭头函数
(参数) => {
    // 函数体
    return 结果;
}

如果没有参数，() 还是要保留
如果只有一个参数，() 可以省略
如果函数体内只有一行代码，{} 可以省略
如果这一行代码就是结果，return 可以省略

函数是对象

1.函数可参与赋值

function abc() {
    console.log("bb");
}

document.getElementById("p1").onclick = abc;

2.函数有方法有属性

ƒ abc()
    arguments: null
    caller: null
    length: 0
    name: "abc"
    ➡prototype: {constructor: ƒ}
    [[FunctionLocation]]: VM1962:1
    ➡[[Prototype]]: ƒ ()
    ➡[[Scopes]]: Scopes[1]

其中带有 f 标记的是方法，不带的是属性
带有 ➡ 符号的可以继续展开，限于篇幅省略了
带有 [[ ]] 的是内置属性，不能访问，只能查看
相对重要的是 [[Prototype]] 和 [[Scopes]] 会在后面继承和作用域时讲到

3.函数可作为方法参数

function a() {
    console.log('a')
}

function b(fn) {          // fn 将来可以是一个函数对象
    console.log('b')
    fn();                 // 调用函数对象
}

b(a)

4.函数可作为方法返回值

function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()

函数作用域

function c() {
    var z = 30;
}

var x = 10;
function a() {
    var y = 20;
    function b() {
        // 看这里
        console.log(x, y);
    }
    b();
}
a();

以函数为分界线划定作用域，所有函数之外是全局作用域
查找变量时，由内向外查找
- 在内层作用域找到变量，就会停止查找，不会再找外层
- 所有作用域都找不到变量，报错
作用域本质上是函数对象的属性，可以通过 console.dir 来查看调试

闭包

var x = 10;
function a() {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    return b;
}
a()();  // 在外面执行了 b

函数定义时，它的作用域已经确定好了，因此无论函数将来去了哪，都能从它的作用域中找到当时那些变量
别被概念忽悠了，闭包就是指函数能够访问自己的作用域中变量

let与var在作用域的区别

如果函数外层引用的是 let 变量，那么外层普通的 {} 也会作为作用域边界，最外层的 let 也占一个 script 作用域。如果函数外层引用的是 var 变量，外层普通的 {} 不会视为边界。

let x = 10; 
if(true) {
    let y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}

var x = 10; 
if(true) {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}

如果 var 变量出现了重名，则他俩会被视为同一作用域中的同一个变量。如果是 let，则视为两个作用域中的两个变量。要想里面的 e 和外面的 e 能区分开来，最简单的办法是改成 let，或者用函数来界定作用域范围。

var e = 10; 
if(true) {
    var e = 20;
    console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量，还是打印 20

let e = 10; 
if(true) {
    let e = 20;	
    console.log(e);	// 打印 20
}
console.log(e);		// 打印 10

var e = 10; 
if(true) {
    function b() {
        var e = 20;
    	console.log(e);
    }
    b();
}
console.log(e);

Array

语法

// 创建数组
let arr = [1,2,3]; 

// 获取数组元素
console.log(arr[0]); // 输出 1

// 修改数组元素
array[0] = 5;		 // 数组元素变成了 [5,2,3]

// 遍历数组元素，其中 length 是数组属性，代表数组长度
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

api

push、shift、splice，join

let arr = [1,2,3]; 

arr.push(4);    	// 向数组尾部(右侧)添加元素, 结果 [1,2,3,4]
arr.shift();		// 从数组头部(左侧)移除元素, 结果 [2,3,4]
arr.splice(1,1);	// 删除【参数1】索引位置的【参数2】个元素，结果 [2,4]


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

arr.join(); 		// 默认使用【,】作为连接符，结果 'a,b,c'
arr.join('');		// 结果 'abc'
arr.join('-');		// 结果 'a-b-c'

map、filter、forEach

let arr = [1,2,3,6];

function a(i) {   // 代表的新旧元素之间的变换规则
    return i * 10
}

// arr.map(a) // 具名函数，结果 [10,20,30,60]

// arr.map( (i) => {return i * 10} ); // 箭头函数
arr.map( i => i * 10 ); // 箭头函数
//filter 例子

let arr = [1,2,3,6];
arr.filter( (i)=> i % 2 == 1 ); // 结果 [1,3]

//forEach 例子
let arr = [1,2,3,6];

/*for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}*/

arr.forEach( (i) => console.log(i) );

map：传给 map 的函数，参数代表旧元素，返回值代表新元素。底层实现就是过滤。

filter：传给 filter 的函数，参数代表旧元素，返回 true 表示要留下的元素

高阶函数，map，filter，forEach
回调函数，例如作为参数传入的函数

Object

let obj = {
    属性名: 值,
    方法名: 函数,
    get 属性名() {},
    set 属性名(新值) {}
}

两种定义方式

let stu1 = {
    name: "小明",
    age: 18,
    study: function(){
        console.log(this.name + "爱学习");
    }    
}

let name = "小黑";
let age = 20;
let study = function(){
    console.log(this.name + "爱学习");
}

let stu2 = { name, age, study }

对象方法改写

let stu3 = {
    name: "小白",
    age: 18,
    study(){
        console.log(this.name + "爱学习");
    }    
}

get与set方法

let stu4 = {
    _name: null, /*类似于java中私有成员变量*/
    get name() {
        console.log("进入了get");
        return this._name;
    },
    set name(name) {
        console.log("进入了set");
        this._name = name;
    }
}

stu4.name = "小白"

console.log(stu4.name)

js中的属性增删

对比一下 Java 中的 Object

Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的
js 的对象，不需要什么模板，它的属性和方法可以随时加减

let stu = {name:'张三'};
stu.age = 18;					// 添加属性
delete stu.age;					// 删除属性

stu.study = function() {		// 添加方法
    console.log(this.name + "在学习");
}

添加get和set方法需要借助Object.definePropery

let stu = {_name:null};

Object.defineProperty(stu, "name", {
    get(){
        return this._name;
    },
    set(name){
        this._name = name;
    }
});

参数1：目标对象
参数2：属性名
参数3：get，set 的定义

js中的this

1.落单函数的this是全局对象window

function study(subject) {
    console.log(this.name + "在学习 " + subject)
}

study("js");  // 输出 在学习 js

2.对象的方法this是自己本身

let stu = {
    name:"小白",
    study
}

stu.study('js'); 	// 输出 小白在学习 js

//还可以动态改变 this
let stu = {name:"小黑"};
study.call(stu, "js");	// 输出 小黑在学习 js

3.箭头函数内的this以外层this来理解

//匿名函数
let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(function(e){
            console.log(this.name + "与" + e + "在玩耍");
        });
    }
}
stu.play()

//箭头函数
let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(e => {
            console.log(this.name + "与" + e + "在玩耍");
        })
    }    
}

对于匿名函数

this.name 所在的函数是【落单】的函数，因此 this 代表 window

对于箭头函数

this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象

原型继承

let father = {
    f1: '父属性',
    m1: function() {
        console.log("父方法");
    }
}

let son = Object.create(father);

console.log(son.f1);  // 打印 父属性
son.m1();			  // 打印 父方法

father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
son 自己可以添加自己的属性和方法
son 里有特殊属性 __proto__ 代表它的父对象，js 术语： son 的原型对象
不同浏览器对打印 son 的 __proto__ 属性时显示不同
- Edge 打印 console.dir(son) 显示 [[Prototype]]
- Firefox 打印 console.dir(son) 显示 <prototype>

基于函数的原型继承

函数职责

负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法
函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象

注意！名字有差异，这个属性的作用就是为新对象提供原型

function cons(f2) {
    // 创建子对象(this), 给子对象提供属性和方法
    this.f2 = f2;
    this.m2 = function () {
        console.log("子方法");
    }
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {
    console.log("父方法");
}

let son = new cons("子属性")

子对象的 __proto__ 就是函数的 prototype 属性

json

json和js对象的不同

{
    "name":"张三",
    "age":18
}

{
    "name":"张三",
    "age":18
}

本质不同
- json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货
- js 对象是切切实实的对象，可以有属性方法
语法细节不同
- json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
- json 中不能有除以上的其它 js 对象的特性，如方法等
- json 中的属性必须用双引号引起来

json 字符串与 js 对象的转换

JSON.parse(json字符串);  // 返回js对象
JSON.stringify(js对象);  // 返回json字符串

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

所有评论(0)

查看更多评论

马猴烧酒375

@2303_80850235

已为社区贡献2条内容

【前端学习|DAY2】JAVA程序员必会的前端知识-JavaScript与TypeScritp-上

马猴烧酒375

前置认知

Javascript

引入方式

JS的基础语法

输出语句

变量与数据类型

所有评论(0)

温馨提示：您尚未绑定手机号

马猴烧酒375