Java程序员学习【Javascript】这一篇就够了

程序员iteng

已于 2024-01-16 21:26:56 修改

阅读量957

点赞数 13

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

于 2024-01-08 21:36:12 首次发布

本文链接：https://blog.csdn.net/weixin_44147535/article/details/135466201

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Javascript是一种脚本语言，可以用来更改页面内容，控制多媒体，制作图像、动画等等

js 代码位置

<script>
	// js 代码
</script>

引入 js 脚本

<script src="js脚本路径"></script>

1. 变量与数据类型

1-1. 声明变量

let ★

 let 变量名 = 值;

let 声明的变量可以被多次赋值，例如

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

const ★

const 修饰的叫常量，只能赋值一次

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

注意：const 并不意味着它引用的内容不可修改，例如

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

var

var 声明的变量可以被多次赋值，例如

var f = 100;
f = 200;

1-2. 基本类型

undefined 和 null

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

例如：

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

二者共同点

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

二者区别

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

string ★

js 字符串三种写法

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

模板字符串（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 类型标识的是双精度浮动小数，例如

10 / 3;   // 结果 3.3333333333333335

既然是浮点小数，那么可以除零

10 / 0;	  // 结果 Infinity 正无穷大
-10 / 0;  // 结果 -Infinity 负无穷大

浮点小数都有运算精度问题，例如

2.0 - 1.1; // 结果 0.8999999999999999

字符串转数字

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

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

要表示真正的整数，需要用 bigint，数字的结尾用 n 表示它是一个 bigint 类型

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

boolean ★

Truthy
Falsy

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

let b = 1;

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

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

下面值都是 falsy

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

剩余的值绝大部分都是 truthy

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

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

1-3. 对象类型

Function ★★

定义函数

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

例

function add(a, b) {
    return a + b;
}

调用函数

函数名(实参);
add(1, 2);     // 返回 3

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

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN

默认参数

function pagination(page = 1, size = 10) {
    console.log(page, size);
}

匿名函数

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

例
(function(a,b){
    return a + b;
})

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

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

第二种场景：作为其它对象的方法，例如

html

<p id="p1">点我啊</p>

此元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是 null，需要赋值后才能使用。
js

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

箭头函数

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

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

例如：

document.getElementById("p1").onclick = () =>  console.log("aa");

函数是对象

以下形式在 js 中非常常见！

1 可以参与赋值，具名函数也能参与赋值

function abc() {
    console.log("bb");
}
document.getElementById("p1").onclick = abc;

2 有属性、有方法，执行 console.dir(abc)，输出结果如下

ƒ 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()()

函数作用域

函数可以嵌套（js 代码中很常见，只是嵌套的形式更多是匿名函数，箭头函数）

function a() {
    function b() {        
    }
}

看下面的例子

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 作用域

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

如果函数外层引用的是 var 变量，外层普通的 {} 不会视为边界

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

如果 var 变量出现了重名，则他俩会被视为同一作用域中的同一个变量

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

如果是 let，则视为两个作用域中的两个变量

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

要想里面的 e 和外面的 e 能区分开来，最简单的办法是改成 let，或者用函数来界定作用域范围

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

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]

join

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

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

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 ); // 箭头函数

传给 map 的函数，参数代表旧元素，返回值代表新元素

filter

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

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

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，filter，forEach
回调函数，例如作为参数传入的函数

Object ★★

语法

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

例1

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

例2

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

let stu2 = { name, age, study }

例3（重点）

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

注意：对象方法这么写，仅限于对象内部

特色：属性增删

对比一下 Java 中的 Object

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

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

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

JSON

json格式：

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

js对象

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

他们的区别在哪儿呢？

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

json 字符串与 js 对象的转换

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

2. 运算符与表达式

2-1. ===

严格相等运算符，用作逻辑判等

1 == 1    	// 返回 true 
1 == '1'	// 返回 true，会先将右侧的字符串转为数字，再做比较
1 === '1'	// 返回 false，类型不等，直接返回 false

typeof 查看某个值的类型

typeof 1	// 返回 'number'
typeof '1'	// 返回 'string'

2-2. ||

如果值1 是 Truthy，返回值1，如果值1 是 Falsy 返回值 2

值1 || 值2

2-3. ??

值1 ?? 值2

值1 是 nullish，返回值2
值1 不是 nullish，返回值1

2-4. ?.

当某个属性（address）是 nullish 时，短路并返回 undefined，可以用 ?.

stu.address?.city

2-5. …

展开运算符

作用1：打散数组，把元素传递给多个参数

打散可以理解为【去掉了】数组外侧的中括号，只剩下数组元素

let arr = [1,2,3];

function test(a,b,c) {
    console.log(a,b,c);
}

test(...arr); // 输出 1,2,3

作用2：复制数组或对象

数组

let arr1 = [1,2,3];
let arr2 = [...arr1];		// 复制数组

对象

let obj1 = {name:'张三', age: 18};
let obj2 = {...obj1};		// 复制对象

注意：展开运算符复制属于浅拷贝

作用3：合并数组或对象

合并数组

let a1 = [1,2];
let a2 = [3,4];

let b1 = [...a1,...a2];		// 结果 [1,2,3,4]
let b2 = [...a2,5,...a1]	// 结果 [3,4,5,1,2]

合并对象

let o1 = {name:'张三'};
let o2 = {age:18};
let o3 = {name:'李四'};

let n1 = {...o1, ...o2};	// 结果 {name:'张三',age:18}

let n2 = {...o3, ...o2, ...o1}; // 结果{name:'李四',age:18}

复制对象时出现同名属性，后面的会覆盖前面的

2-5. []{}

解构赋值

[]

用在声明变量时

let arr = [1,2,3];
let [a, b, c] = arr;	// 结果 a=1, b=2, c=3

用在声明参数时

let arr = [1,2,3];
function test([a,b,c]) {
    console.log(a,b,c) 	// 结果 a=1, b=2, c=3
}
test(arr);

{}

用在声明变量时

let obj = {name:"张三", age:18};
let {name,age} = obj;	// 结果 name=张三, age=18

用在声明参数时

let obj = {name:"张三", age:18};
function test({name, age}) {
    console.log(name, age); // 结果 name=张三, age=18
}
test(obj)

3. 控制语句

3-1. for in

主要用来遍历对象的属性和值

let father = {name:'张三', age:18, study:function(){}};
for(const n in father) {
    console.log(n,father[n]);
}

其中 n 代表遍历出来的属性名，father[n] 代表值
注意1：方法名也能被遍历出来（它其实也算一种特殊属性）
注意2：遍历子对象时，父对象的属性会跟着遍历出来

注意：在 for in 内获取属性值，要使用 [] 语法，而不能用 . 语法

3-2. for of

用来遍历数组，也可以是其它可迭代对象，如 Map，Set 等

let a1 = [1,2,3];

for(const i of a1) {
    console.log(i);
}

let a2 = [
    {name:'张三', age:18},
    {name:'李四', age:20},
    {name:'王五', age:22}
];

for(const obj of a2) {
    console.log(obj.name, obj.age);
}

for(const {name,age} of a2) {
    console.log(name, age);
}

4. 其他

4-1. nvm安装

nvm 即 (node version manager)，好处是方便切换 node.js 版本

安装注意事项

要卸载掉现有的 nodejs
提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
选用【以管理员身份运行】cmd 程序来执行 nvm 命令
首次运行前设置好国内镜像地址

nvm node_mirror http://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

首先查看有哪些可用版本

nvm list available

输出

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    18.7.0    |   16.16.0    |   0.12.18    |   0.11.16    |
|    18.6.0    |   16.15.1    |   0.12.17    |   0.11.15    |
|    18.5.0    |   16.15.0    |   0.12.16    |   0.11.14    |
|    18.4.0    |   16.14.2    |   0.12.15    |   0.11.13    |
|    18.3.0    |   16.14.1    |   0.12.14    |   0.11.12    |
|    18.2.0    |   16.14.0    |   0.12.13    |   0.11.11    |
|    18.1.0    |   16.13.2    |   0.12.12    |   0.11.10    |
|    18.0.0    |   16.13.1    |   0.12.11    |    0.11.9    |
|    17.9.1    |   16.13.0    |   0.12.10    |    0.11.8    |
|    17.9.0    |   14.20.0    |    0.12.9    |    0.11.7    |
|    17.8.0    |   14.19.3    |    0.12.8    |    0.11.6    |
|    17.7.2    |   14.19.2    |    0.12.7    |    0.11.5    |
|    17.7.1    |   14.19.1    |    0.12.6    |    0.11.4    |
|    17.7.0    |   14.19.0    |    0.12.5    |    0.11.3    |
|    17.6.0    |   14.18.3    |    0.12.4    |    0.11.2    |
|    17.5.0    |   14.18.2    |    0.12.3    |    0.11.1    |
|    17.4.0    |   14.18.1    |    0.12.2    |    0.11.0    |
|    17.3.1    |   14.18.0    |    0.12.1    |    0.9.12    |
|    17.3.0    |   14.17.6    |    0.12.0    |    0.9.11    |
|    17.2.0    |   14.17.5    |   0.10.48    |    0.9.10    |

建议安装 LTS（长期支持版）

nvm install 16.16.0
nvm install 14.20.0

执行 nvm list 会列出已安装版本

切换到 16.16.0

nvm use 16.16.0

切换到 14.20.0

nvm use 14.20.0

注意： 安装后 nvm 自己的环境变量会自动添加，但可能需要手工添加 nodejs 的 PATH 环境变量

4-2. 检查npm

npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像

检查镜像

npm get registry

如果返回的不是 https://registry.npm.taobao.org/，需要做如下设置

npm config set registry https://registry.npm.taobao.org/

4-2. 模块化

export单个导出

单个导出 const、let、function

export const a = 10;
export let b = 20;
export function c() {
    console.log('c');
}

export全部导出

const a = 10;
let b = 20;
function c() {
    console.log('c')
}

export {a,b,c}

export导出默认

导出 default，只能有一个

export const a = 10;
export let b = 20;
export function c() {
    console.log('c')
}

export default b;

import单个导入

import {a,c} from '/1.js'
console.log(a)				// 输出10
c()							// 输出c

import全部导入

import * as module from '/1.js'
console.log(module.a)		// 输出10
console.log(module.b)		// 输出20
module.c()					// 输出c

import导入默认

import x from '/1.js'
console.log(x)				// 输出20

4-3. 跨域

跨域原因

浏览器要求只要协议、主机、端口之一不同，就不同源，例如
- http://localhost:7070/a 和 https://localhost:7070/b 就不同源
同源检查是浏览器的行为，而且只针对 fetch、xhr 请求
- 如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
- 通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
更多相关知识请参考
- 跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

跨域流程

在这里插入图片描述

Browser 浏览器访问前端服务器 Express: localhost: 7070/Student.html 时，会将 Student.html 复制一份放到浏览器中。
Student.html 有fetch请求json数据。
而Browser 浏览器会对fetch的响应做出同源检查。
同源检查：浏览器会检查fetch、xhr 响应的资源来源和请求的资源来源是不是同一个，如果不是同一个，响应被弃之不用。
假如浏览器中的Student.html中的fetch请求前端服务器 Express的students.json。请求的资源（Student.html） 来源：localhost: 7070，响应的资源（students.json） 来源：localhost: 7070。来源都是同一个，通过了浏览器的同源检查。浏览器会将响应返回到Student.html中
假如浏览器中的Student.html中的fetch请求Tomcat的localhost: 8080。请求的资源（Student.html） 来源：localhost: 7070，响应的资源（json） 来源：localhost: 8080。端口不一致，所以没有通过浏览器的同源检查。响应被弃之不用。

跨域解决

方法一、后端处理 - 请求响应头解决

在这里插入图片描述

当发送fetch、xhr请求时，如果资源不同源，会在请求头中包含一个Origin：即表示【发请求的资源源自何处】。
如果Tomcat允许Origin访问自己的资源，会在响应头中包含一个Access-Control-Allow-Origin，在这个头中指定允许哪些Origin访问自己的资源
*：表示谁都可以访问
如果不允许任何请求访问，不需要做任何处理。

方法二、前端处理 - 代理解决

在这里插入图片描述

Browser 浏览器中静态的资源（Student.html等）是通过请求localhost: 7070获得的。而动态数据是通过请求localhost: 8080获得的。
有proxy代理后，Browser 浏览器只发送localhost: 7070的请求。对于要请求其他源的数据，可以通过请求路径加api localhost: 7070/api来区分。
代理服务器会判断路径中是否有/api。如果存在则会去请求Tomcat中对应的路径。代理服务器是通过js发送的请求，不存在同源策略了。
代理服务器拿到响应的数据后，再发送给 Browser 浏览器。此时符合同源策略。浏览器会接收响应的数据。