关于后端开发为了毕设学前端的这件事——JavaScript

在这里插入图片描述

  各位小伙伴们大家好,欢迎来到这个小扎扎的多学一招专栏,本篇博客由B战黑马的java程序员学前端视频总结而来,鉴于 看到就是学到、学到就是赚到 精神,这波依然是血赚 ┗|`O′|┛
  PS:本人前端零基础小白,如果博客中出现错误内容还请私信或者评论区指出。

内容速览

  • 1. js修改页面内容
  • 2. 变量与数据类型
    • 2.1 变量的声明
    • 2.2 数据类型
      • 2.2.1 基本数据类型
      • 2.2.2 对象数据类型
        • Function 函数
        • Array 数组
        • Object 对象
        • 对象间的 原型继承
        • JSON
        • 动态类型
  • 3. 运算符与表达式
    • 3.1 简单运算符
    • 3.2 三等号 `===`
    • 3.3 逻辑运算符`&& ||`
    • 3.4 `?? ?.`
    • 3.5 展开运算符`...`
    • 3.6 解构赋值`[] {}`
  • 4. 控制语句
    • 4.1 简单控制语句
    • 4.2 `for ... in`
    • 4.3 `for ... of`
    • 4.4 `try ... catch`
  • 5. 常见API
    • 5.1 查找元素
    • 5.2 修改元素内容
    • 5.3 使用template模板遍历数组回显
    • 5.4 调用服务器数据
    • 5.5 前端解决跨域
    • 5.6 导入导出

1. js修改页面内容

  js代码多在body标签里最下面的script标签中编写,但是也有时会像css文件一样使用外链式引入,具体做法是在项目中创建一个js文件,并对其使用script标签的src属性进行引用

<body>
    <p id="p1">1111p>
    
    <script src="first_js_demo.js" />
body>

  下面这段js代码的作用就是先获取id为p1的元素里的值,然后修改,借此实现修改内容的目的。

// js文件名为first_js_demo.js
let a = document.getElementById("p1");
a.innerText = '34256';

2. 变量与数据类型

2.1 变量的声明

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

let 变量名 =;

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

const 声明的叫常量,只能赋值一次,但是可以修改它所引用的内容

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

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

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

var f = 100;
f = 200;

2.2 数据类型

2.2.1 基本数据类型

1)undefined

  • 执行表达式或函数,没有返回结果,出现 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

2)null与undefined类似
二者共同点:都没有属性、方法;二者合称 Nullish
二者区别:undefined 由 js 产生;null 由程序员提供

3)string字符串三种写法

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

用 java 和 js 中该如何表示后面这个字符串 超链接;java需要使用转义字符或者三引号来定义带有双引号的字符串,显得比较繁琐;而js只需要使用单引号或者反引号即可

String s1 = "超链接";

String s2 = """
    超链接""";
let s1 = '超链接';

let s2 = `超链接`;

4)模板字符串 ${变量名} 区别于传统字符串使用‘+’的拼接方式更加简洁明了,用于在定义字符串时拼接变量值,使用模板字符串的方式拼接时必须使用反引号

// 传统方法拼接
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}`;

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

6)bigint表示真正的整数,数字的结尾用 n 表示它是一个 bigint 类型

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

7)boolean js中的boolean值并不是专指true和false,而是有一个Truthy和Falsy的概念,其中false Nullish: null, undefined表示0的数字:0, 0n, NaN长度为零的字符串:"" '' `` ,除此之外的绝大部分都是 truthy

let b = 1;

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

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

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

2.2.2 对象数据类型

Function 函数

函数的定义与调用
1)普通函数
定义

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

默认参数 :js 可以在函数定义的时候实现默认参数的效果

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

2)匿名函数 定义的时候用圆括号括起来

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

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

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

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

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

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

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

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

3)箭头函数

如果没有参数,() 还是要保留
如果只有一个参数,() 可以省略
如果函数体内只有一行代码,{} 可以省略
如果这一行代码就是结果,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()
  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)	// 调用函数b且以函数a作为参数  结果就是先输出b再输出a

4.可以作为方法返回值

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

c()()	// 两步调用  c()是调用函数c,输出c且返回函数d,然后再()即是调用函数d输出d

函数的作用域 函数可以嵌套(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'

---------------------map集合处理---------------------

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

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

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

map,filter,forEach函数并不会改变原有数组旳值,而是将返回结果放到一个新数组中,符合这种特征的函数被称为是高阶函数
而像上面的map集合处理一样作为参数传入的函数,又被称为是回调函数

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(重点)方法不带关键字function就声明,仅限于对象内部
let stu3 = {
    name: "小白",
    age: 18,
    study(){
        console.log(this.name + "爱学习");
    }    
}

// 例4  get、set方法的声明与调用
let stu4 = {
    _name: null,		 /*下划线  类似于java中私有成员变量*/
    get name() {
        console.log("进入了get");
        return this._name;
    },
    set name(name) {
        console.log("进入了set");
        this._name = name;
    }
}

// 调用 get,set
stu4.name = "小白"
console.log(stu4.name)

对象属性可增删

对比一下 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
Object.defineProperty(stu, "name", {
    get(){
        return this._name;
    },
    set(name){
        this._name = name;
    }
});

this
先来对 Java 中的 this 有个理解

public class TestMethod {

	public static void main(String[] args) {
        Student stu = new Student("小明");
        
        // 下面的代码,本质上是执行 study(stu, "java"),因此this就是方法的调用方stu
        stu.study("java"); 
    }

    static class Student {
        private String name;

        public Student(String name) {
            this.name = name;
        }

		// 实际上java中所有的非静态方法都有一个隐式参数,即该方法所在的类
		// public void study(Student this, String subject)
        public void study(String subject) {
            System.out.println(this.name + "在学习 " + subject);
        }
    } 
}

Java 中的 this 是个隐式参数,经过上面的注释就知道了为什么我们会说 java中的this 代表的就是调用方法的那个对象

js 中的 this 也是隐式参数,但它与函数运行时上下文相关

1)使用this的函数在定义后直接使用(落单的函数)此时this指的是全局window对象

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

// 调用执行结果
study("js");  // 输出 在学习 js  这是因为此时函数执行,全局对象 window 被当作了 this,window 对象的 name 属性是空串

2)使用this的函数作为object对象的方法 此时this指的是当前对象

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

// 等同于下面的object定义
let stu = {
    name:"小白",
    function study(subject) {
    console.log(this.name + "在学习 " + subject)
	}
}

// 调用执行结果
stu.study('js'); 	// 输出 小白在学习 js

3)动态改变 this指向

let stu = {name:"小黑"};
study.call(stu, "js");	// 输出 小黑在学习 js

这回 study 执行时,就把 call 的第一个参数 stu 作为 this

4)forEach中的this

1、forEach用匿名函数

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


/*此时this.name 所在的函数是【落单】的函数function(e)
因此 this 代表 window,this.name=""
	
输出结果为:
与小白在玩耍
与小黑在玩耍
与小明在玩耍*/

2、forEach用箭头函数

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

/* this.name 所在的函数是箭头函数,在箭头函数内出现的this以外层 this 理解
因此 this 要看它外层的 play 函数,play 又是属于 stu 的方法
因此 this 代表 stu 对象,this.name=小花

输出结果为:
小花与小白在玩耍
小花与小黑在玩耍
小花与小明在玩耍*/

3、 在1的情况下不用箭头函数可以取到 小花 的写法

let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        let me = this;
        this.friends.forEach(function(e){
            console.log(me.name + "与" + e + "在玩耍");
        });
    }
}
对象间的 原型继承

1)调用方法进行继承

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) 显示 ``

2)基于函数的原型继承

函数职责

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

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

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

配合 new 关键字,创建子对象

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

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

JSON

之前我们讲 http 请求格式时,讲过 json 这种数据格式,它的语法看起来与 js 对象非常相似,例如:

// 一个 json 对象可以长这样:
{
    "name":"张三",
    "age":18
}

// 一个 js 对象长这样:
{
    name:"张三",
    age:18
}

那么他们的区别在于:

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

json 字符串与 js 对象的转换

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

静态类型语言,如 Java,值有类型,变量也有类型、赋值给变量时,类型要相符;而 js 属于动态类型语言,值有类型,但变量没有类型,赋值给变量时,没要求

// java
int a = 10;
String b = "abc"; 
int c = "abc";  // 错误
// java script
let a = 200;
let b = 100;
b = 'abc';
b = true;

动态类型看起来比较灵活,但变量没有类型,会给后期维护带来困难,例如

function test(obj) {
    // obj 的类型未知,必须根据不同类型做出相应的容错处理
}

3. 运算符与表达式

3.1 简单运算符

  • + - * / % ** 最后一个是乘方运算符
  • += -= *= /= %= **=
  • ++ --
  • 位运算、移位运算
  • == != > >= < <=

3.2 三等号 ===

严格相等运算符,用作逻辑判等,!==就是严格不行等运算符

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

typeof 查看某个值的类型

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

3.3 逻辑运算符&& ||

逻辑或的语法:

1 ||2
/* 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。
   只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。 */1 &&2
/* 只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;
   只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值; */

3.4 ?? ?.

1 ??2
/* 值1 是 nullish,返回值2
   值1 不是 nullish,返回值1
   null和undefined并称为nullish */

// 例
function test(n) {
    n = n ?? '男';
    console.log(n);
}
test()			// 男
test(null)		// 男
test('哈哈')		// 哈哈
对象 ?. 属性
/* 属性 是 nullish,返回属性
   属性 不是 nullish,返回undefined */
   
let stu1 = {
    name:"张三",
    address: {
        city: '北京'
    }
};

let stu2 = {
    name:"李四"
}

let stu3 = {
    name:"李四",
    address: null
}

function test(stu) {
    console.log(stu.address?.city)
}

test(stu1)	// 北京
test(stu2)	// undefined
test(stu3)	// undefined

3.5 展开运算符...

打散可以理解为【去掉了】数组外侧的中括号,只剩下数组元素
1)把元素传递给多个参数

let arr = [1,2,3];

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

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

2)复制数组或对象

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

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

注意:展开运算符复制属于浅拷贝,即被拷贝对象属性的子属性发生改变,拷贝后的该属性的子属性也会改变,例如

let o1 = {name:'张三', address: {city: '北京'} }
let o2 = {...o1};
o1.address.city = '河北';
o2.address.city		// 输出 河北而不是拷贝时的北京

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 = {...o1, ...o2, ...o3}; // 结果{name:'李四',age:18}

3.6 解构赋值[] {}

//  []用在声明变量时
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)

4. 控制语句

4.1 简单控制语句

  • if ... else
  • switch
  • while
  • do ... while
  • for

4.2 for ... in

主要用来遍历对象,相当于java中的增强for循环

let father = {name:'张三', age:18, study:function(){}};

for(const n in father) {
    console.log(n);		// name  age  study
}

其中 const n 代表遍历出来的属性名
注意1:方法名也能被遍历出来(它其实也算一种特殊属性)
注意2:遍历子对象时,父对象的属性会跟着遍历出来

let son = Object.create(father);
son.sex = "男";

for(const n in son) {
    console.log(n);		// sex name  age  study
}

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

for(const n in son) {
    console.log(n, son[n]);  // sex 男   name 张三   age 18   study f(){}
}

4.3 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 try ... catch

let stu1 = {name:'张三', age:18, address: {city:'北京'}};
let stu2 = {name:'张三', age:18};

function test(stu) {
    try {
        console.log(stu.address.city)   
    } catch(e) {
        console.log('出现了异常', e.message)
    } finally {
        console.log('finally');
    }
}

5. 常见API

5.1 查找元素

document.getElementById - 根据 id 值查找一个元素
[document|元素].querySelector - 根据选择器查找第一个匹配元素
[document|元素].querySelectorAll - 根据选择器查找所有匹配元素

例如,有下面的 html 代码

<div>
    <div class="title">学生列表div>
    <div class="thead">
        <div class="row bold">
            <div class="col">编号div>
            <div class="col">姓名div>
            <div class="col">性别div>
            <div class="col">年龄div>
        div>
    div>
    <div class="tbody">
        <div class="row">
            <div class="col">1div>
            <div class="col">张三div>
            <div class="col">div>
            <div class="col">18div>
        div>
    div>
div>


document.querySelector('.title'); 
// 找到 <div class="title">学生列表div>


document.querySelector('.col'); 
// 找到 <div class="col">编号div>


document.querySelectorAll('.col');
/* 找到的是一个集合
  <div class="col">编号div>
  <div class="col">姓名div>
  <div class="col">性别div>
  <div class="col">年龄div>
  <div class="col">1div>
  <div class="col">张三div>
  <div class="col">div>
  <div class="col">18div>
*/


const thead = document.querySelector('.thead');
thead.querySelectorAll('.col');
/*
  找到的是一个集合
  <div class="col">编号div>
  <div class="col">姓名div>
  <div class="col">性别div>
  <div class="col">年龄div>
*/


document.getElementById("id值")
等于
document.querySelector("#id值")

5.2 修改元素内容

元素.innerHTML
元素.textContent

document.querySelector('.title').innerHTML = '侠客列表'
document.querySelector('.title').textContent = '侠客列表'

innerHTML 会解析内容中的标签,textContext 不会解析内容中的标签,也就是说使用innerHTML这个api会将被赋的值进行样式解析后显示,而textContext 将会直接把样式代码也当做是被赋的值直接展示

给 innerHTML 或 textContent 赋值空串,可以实现清空标签内容的效果

5.3 使用template模板遍历数组回显

<div>
    <div class="title">学生列表div>
    <div class="thead">
        <div class="row bold">
            <div class="col">编号div>
            <div class="col">姓名div>
            <div class="col">性别div>
            <div class="col">年龄div>
        div>
    div>
    <div class="tbody">
    div>
div>

<template id="tp">
    <div class="row">
        <div class="col">xxdiv>
        <div class="col">xxdiv>
        <div class="col">xxdiv>
        <div class="col">xxdiv>
    div>
template>

<script>
    // 将来这些数据从 java 端返回
    let array = [
        { id: 1, name: '张三', sex: '男', age: 18 },
        { id: 2, name: '李四', sex: '女', age: 17 }
    ];

    const tp = document.getElementById("tp");
    const row = tp.content;
    const [c1,c2,c3,c4] = row.querySelectorAll(".col");
    const tbody = document.querySelector('.tbody');
    for(const {id,name,sex,age} of array) {
        c1.textContent = id;
        c2.textContent = name;
        c3.textContent = sex;
        c4.textContent = age;
        // 复制元素
        const newRow = document.importNode(row, true);
        // 建立父子关系,左边父,右边子
        tbody.appendChild(newRow);
    }
script>

5.4 调用服务器数据

Fetch API 可以用来获取远程数据,它有两种方式接收结果,同步方式与异步方式

fetch(url, options) // 返回 Promise

// 同步方式    后续代码不会在结果返回前执行
const 结果 = await Promise
后续代码

// 异步方式    后续代码不必等待结果返回就可以执行
Promise
	.then(结果 => { ... })
后续代码                 

await 关键字必须在一个标记了 async 的 function 内来使用
例:在服务器上有 students.json 文件,数据都是JSON字符串

[
    { "id": 1, "name": "张三", "sex": "男", "age": 18 },
    { "id": 2, "name": "李四", "sex": "女", "age": 17 }
]

现在用 fetch api 获取这些数据,并展示

// 同步方式
<script>
    async function findStudents() {
        try {
            // 获取响应对象
            const resp = await fetch('students.json')

            // 获取响应体, 按json格式转换为js数组
            const array = await resp.json();

            // 显示数据
            const tp = document.getElementById("tp");
            const row = tp.content;
            const [c1,c2,c3,c4] = row.querySelectorAll(".col");
            const tbody = document.querySelector('.tbody');
            for(const {id,name,sex,age} of array) {
                c1.textContent = id;
                c2.textContent = name;
                c3.textContent = sex;
                c4.textContent = age;
                // 复制元素
                const newRow = document.importNode(row, true);
                // 建立父子关系
                tbody.appendChild(newRow);
            }
        } catch (e) {
            console.log(e);
        }
    }
    findStudents()
script>

1、 fetch(‘students.json’) 内部会发送请求,但响应结果不能立刻返回,因此 await 就是等待响应结果返回
2、 其中 resp.json() 也不是立刻能返回结果,它返回的也是 Promise 对象,也要配合 await 取结果
3、 await 关键字必须在一个标记了 async 的 function 内来使用,所以将获取数据显示数据的代码放在自定义的使用 async 标记了的 function 内,最后再调用该函数

// 异步方式
<script>
    fetch('students.json')
        .then( resp => resp.json() )
        .then( array => {
        	// 显示数据
            const tp = document.getElementById("tp");
            const row = tp.content;
            const [c1,c2,c3,c4] = row.querySelectorAll(".col");
            const tbody = document.querySelector('.tbody');
            for(const {id,name,sex,age} of array) {
                c1.textContent = id;
                c2.textContent = name;
                c3.textContent = sex;
                c4.textContent = age;
                // 复制元素
                const newRow = document.importNode(row, true);
                // 建立父子关系
                tbody.appendChild(newRow);
            }
        })
        .catch( e => console.log(e) )


script>

1、 第一个 then 是在响应返回后,才会调用它里面的箭头函数,箭头函数参数即 resp 响应对象
2、 第二个 then 是在 json 解析完成后,才会调用它里面的箭头函数,箭头函数参数即解析结果(本例是 array 数组)
3、 上一个 then 返回的是 Promise 对象时,才能链式调用下一个 then

5.5 前端解决跨域

第一步:安装代理插件

npm install http-proxy-middleware --save-dev

第二步:配置代理 在服务器启动代码中加入

import {createProxyMiddleware} from 'http-proxy-middleware'

// 配置代理属性

app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));

由于前面配置了可以将对于8080的请求代理给7070,所以说fetch 代码可以更改为直接向7070发送请求

const resp = await fetch('http://localhost:7070/api/students')

// 默认向配置的7070发送请求  所以前面的可以省略
const resp = await fetch('/api/students')

5.6 导入导出

导入导出都必须在

你可能感兴趣的:(毕业设计,javascript,前端)