【前端】零基础快速搞定JavaScript核心知识点

文章目录

      • 1.初识JavaScript
        • 1.1.JavaScript语言简介
        • 1.2.JavaScript引入方式和注释
        • 1.3.Javascript变量声明详解
        • 1.4.JavaScript变量提升详解
      • 2.JavaScript基础数据类型
        • 2.1.JavaScript基础数据类型简介
        • 2.2.基础类型数据-Number
        • 2.3.基础类型数据-String
        • 2.4.基础类型数据-Boolean
        • 2.5.基础类型数据-Undefined
        • 2.6.基础类型数据-Null
        • 2.7.基础类型数据-Symbol
      • 3.JavaScript对象数据类型
        • 1.Javascript对象的基本形式
        • 2.js对象中的常规操作
        • **3.js中this访问自身属性**
        • 4.js中创建对象的方式
      • 4.JavaScript数组数据结构
        • 1.js中数组的创建方式
        • 2.操作数组的基本⽅法
        • 3.数组的进阶操作⽅法
      • 5.JavaScript中的运算符和流程控制
        • 1.常见的运算符
        • 2.比较、逻辑运算符
        • 3.if、if/else、三元表达式
        • 4.js中的switch语句
        • 5.js中的循环详解
      • 6.JavaScript中的函数
        • 1.js中函数的简介
        • 2.js函数声明的⽅法
        • 3.js函数return知识点
        • 4.Js函数变量作⽤域
        • 5.js中类数组对象arguments
        • 6.js中⽴即执⾏函数
        • 7.js中闭包的理解
      • 7.JavaScript的原型和原型链
        • 1.什么是js原型
        • 2.什么是js原型链
        • 3.js中的类型检测
      • 8.JavaScript的局部刷新ajax
        • 1.理解什么是JSON数据
        • 2.ajax简介及其使⽤场景
        • 3.手写ajax案例实战
      • 9.JavaScript文档对象DOM
        • 1.js中DOM详解
        • 2.DOM节点的常⻅操作
        • 3.js事件对DOM的操作
        • 4.js中事件的⼀些机制
        • 5.js中的定时器
      • 10.JavaScript浏览器对象BOM
        • 1.BOM常用的内置函数
        • 2.JavaScript弹出框
        • 3.浏览器基本概念之Cookie

1.初识JavaScript

1.1.JavaScript语言简介

在这里插入图片描述

(1)简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种轻量级的编程语言,是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

(2)Javascript三大部分

  • ECMAScript语法标准:由ECMA制定的一种脚本语言的标准化规范。
  • DOM:通过⽂档对象模型(dom)操作网页。
  • BOM:通过浏览器对象模型(bom)操作浏览器。

(3)JavaScript版本以及ECMAScript版本
在这里插入图片描述

(4)为什么JavaScript是单线程引擎

JavaScript是单线程指的是同一时间只能干一件事情,只有前面的事情执行完,才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行。

由于js是单线程(一个Tab页内中无论什么时候都只有一个JS线程在运行JS程序),依靠任务队列来进行js代码的执行,所以js引擎会一直等待着任务队列中任务的到来,然后加以处理。

假如js是多线程那么现在有两个事件,同时操作dom,一个事件编辑dom,另一个事件删除dom,那么此时会产生矛盾指令。

1.2.JavaScript引入方式和注释

(1)引入方式

内部引入方式

htmlbody标签中或者head标签中引入script标签

注意:两个地方引入的执行顺序不一样。

  • 当在body中引入时:
<!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>Document</title>
</head>
<body>我是李祥<script>document.write("我是JS追加的内容")</script>
</body>
</html>

在这里插入图片描述

  • 当在head中引入时:
<!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>Document</title><script>document.write("我是JS追加的内容")</script>
</head>
<body>我是李祥
</body>
</html>

在这里插入图片描述

原因是html文件执行从上之下顺序执行,由于是单线程执行,所以在页面渲染时,尽量先渲染html标签,然后在通过js去拿数据。防止阻塞。

外部引入方式

  • index.js文件
document.write("我是JS外部追加的内容")
  • index.html文件
<!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>Document</title><script src="index.js"></script>
</head>
<body>我是李祥
</body>
</html>

在这里插入图片描述

注意:使用w3c的标准结构、样式、行为相分离推荐外部引入。

(2)注释方式

单行://
多行:/* */

这块没什么多说的,大家只要记住就可以啦。

在这里插入图片描述

1.3.Javascript变量声明详解

(1)变量声明

用var方式定义变量(es6语法:let、const),关于es6后面会有文章介绍,这里我们先知道var即可。

  • 声明和赋值的结合
var name = '李祥';
console.log(name);
  • 声明和赋值分开
var age;
age = 18;
console.log(age);
  • 同时声明多个变量
var city = "天津市", area = "宝坻区";
console.log(city,area);

测试代码:

<!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>Document</title><script>var name = "李祥";console.log(name);var age;age = 18;console.log(age);var city = "天津市",area = "宝坻区";console.log(city, area);</script></head><body></body>
</html>

运行效果:

在这里插入图片描述

(2)命名规则

JS中的变量是弱类型可以保存所有类型的数据,即变量没有类型而值有类型。

我们可以通过typeof来判断变量是什么类型。

var name = "李祥";
console.log(typeof name);

在这里插入图片描述

  • 变量命名必须以字母、下划线”_”或者”$” 为开头。其他字符可以是字母_美元符号数字
  • 变量名中不允许使用空格和其他标点符号,首个字不能为数字。
  • 变量名长度不能超过255个字符。
  • 变量名区分大小写。(javascript是区分大小写的语言)。
  • 变量名必须放在同一行中。
  • 不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。
1.4.JavaScript变量提升详解

(1)什么是变量提升

变量提升(Hoisting)被认为是, Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升(Hoisting)这个词。

从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

简单来说,变量提升处于js代码执行过程中,js引擎把变量的声明部分和函数的声明部分提升到代码开头的行为;变量提升后,会给变量默认赋值为undefined。

下面通过一个例子来演示一下变量提升。

console.log(name);
var name = "李祥";

按照我们所想的是应该报错,因为是先打印的name,之后才去声明的name变量。

但是运行结果却是出乎我们意料。控制台打印的undefined。
在这里插入图片描述

实际执行的代码是这样的:

var name;
console.log(name);
name = "李祥";

变量声明但未赋值,所以默认值为undefined,所以打印结果是undefined。

(2)为什么会有变量提升

变量提升存在于js代码运行阶段,那么js代码和其他的语言是一样的,都需要经历编译和执行阶段,在"编译"阶段,js会搜集所有的变量声明,并且提前让声明生效,剩下的语句要在执行阶段再进行解读。

(3)禁用变量提升

es6引入的let和const关键字,let和const关键字会形成块级作用域并且不存在变量提升,在js中被称为暂时性死区

关于let和const后面后有文章介绍,现在只需掌握let和const关键字用来解决变量提升问题。

2.JavaScript基础数据类型

2.1.JavaScript基础数据类型简介
基本数据类型说明默认值
Number数字型,包含整型值和浮点型值,如21、0.230
Boolean布尔类型,如true、false,等价于0或者1false
String字符串类型,如"张三"“”
Undefinedvar a,声明了变量a但是没有给a赋值,此时a=undefinedundefined
Nullvar a = null ,声明了变量a为空值null

基本数据类型的值存储在栈中 ,当申明了一个变量的时候,变量会去内存空间找对应的值,如果找到了对应的值,就直接把该值的内存地址存到变量里;如果没找到,就创建一个新的空间来存储对应的值,并且把新空间的内存地址存到变量里。js中,变量不存储任何值,而存储的是值的内存地址。基本数据类型一旦创建,就是不可变的,因为它占据的空间是固定的,修改变量的值相当于重新创建一个内存空间,变量指向内存空间的地址。
在这里插入图片描述

2.2.基础类型数据-Number

(1)声明定义

//字面量声明
var num = 1;
console.log(typeof num);  

在这里插入图片描述

//数字对象方式声明
var xd = new Number(2);
console.log(xd+3); //5

在这里插入图片描述

(2)判断是否为整数

console.log(Number.isInteger(1.3)); //false

在这里插入图片描述

(3)指定返回的小数位数,保留几位小数点

console.log((12.345).toFixed(2)); //12.35

在这里插入图片描述

(4)NaN-表示非数字值,用于判断是否时一个数字

isNaN() //用来判断一个值是不是数字
// 如果该值转换为number等于 NaN,则此函数返回 true,可以转化成数字的字符串也被认为是数字。注意:null, "" 两个值会被判断为数字,所以使用前应该屏蔽
console.log(isNaN('11'));

在这里插入图片描述

console.log(isNaN('11s'));

在这里插入图片描述

(5)浮点精度

js语言在浮点数计算时会有精度误差问题。

var num = 0.1 + 0.2;
console.log(num);

在这里插入图片描述

解决精度问题,可以采用小数点保留几位方式来解决。

var num = 0.1 + 0.2;
console.log(num.toFixed(1))

在这里插入图片描述

2.3.基础类型数据-String

(1)字符串声明定义

//字面量声明,可以使用单引号或者双引号
var name = '李祥';
console.log(name);//字符串对象方式声明
var name = new String('李祥');
console.log(name);

在这里插入图片描述

(2)字符串连接

//连接运算符
var name = "李祥",
info = "是一个软件工程师。";
console.log(name + info);

在这里插入图片描述

(3)获取字符串长度

var name = "李祥"
console.log(name.length);

在这里插入图片描述

(4)大小写转换

console.log('小写转大写:'+'lixiang'.toUpperCase());
console.log('大写转小写:'+'LIXIANG'.toLowerCase());

在这里插入图片描述

(5)移除字符串两端的空白,注意字符串中间的空格不能移除

var str = '   li xiang  ';
console.log(str.length);
console.log(str.trim().length);

在这里插入图片描述

(6)获取字符串中单个字符

//两种写法获取的值相同
console.log('lixiang'.charAt(3)) 
console.log('lixiang'[3])

在这里插入图片描述

(7)截取字符串,左闭右开

var n = 'lixiang'.slice(1,5);
console.log(n);

在这里插入图片描述

(8)查找字符串

console.log('lixiang'.indexOf('s')); //5
console.log('lixiang'.indexOf('s', 6)); //6 从第6个字符开始搜索(包含第6个)

在这里插入图片描述

(9)替换字符串

var name = "李祥";
var changeName = name.replace("祥", "二祥");
console.log(changeName); //李二祥

在这里插入图片描述

(10)字符串切割和拼接

var date = '2023-08-28';
console.log(date.split('-')); //['2023', '08', '28']var a = date.split('-');
console.log(a.join('/')); //2023/08/28

在这里插入图片描述

2.4.基础类型数据-Boolean

(1)定义布尔类型

//字面量声明
var flag =true;
console.log(flag);

在这里插入图片描述

(2)隐式转换

几乎所有的类型都可以隐式转换为 Boolean 类型 true						false
String		 非空字符串				空字符串
Number		 非0的数值				 0/NaN
Array	  	 数组不参与比较时		参与比较的空数组
Object		 ✅	
undefined	 								  ✅
null	                      ✅	
NaN													✅

当其他类型与Boolean类型对比时,会将其他类型先转换为数值类型再对比。

(3)显示转换

var str = '';
console.log(!!str); //falsevar num = 0;
console.log(!!num); //falsevar obj = null;
console.log(!!obj); //false

在这里插入图片描述

2.5.基础类型数据-Undefined

Undefined是已经存在的变量,但是没有赋值,Javascript会给这个已经存在的变量一个默认的undefined值。

// 变量被声明了,但没有赋值时,就等于undefined
var i;   // i undefined
console.log(i);// 对象没有赋值的属性,该属性的值为undefined
var  o = new Object();  // o.p undefined
console.log(o.p);// 函数没有返回值时,默认返回undefined
var x = f(); //x  undefined
console.log(x);
function f(){}

在这里插入图片描述

2.6.基础类型数据-Null
null表示"没有对象",即该处不应该有值。用法:
(1) 作为函数的参数,表示该函数的参数不是对象
(2) 作为对象原型链的终点
Object.getPrototypeOf(Object.prototype);
2.7.基础类型数据-Symbol

Symbol是ES6引入了一种新的原始数据类型,表示独一无二的值。

Symbol值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

<script>var x = {a:'1'}var a = Symbol('a');x[a] = '2'console.log(x);
</script>

在这里插入图片描述

3.JavaScript对象数据类型

1.Javascript对象的基本形式

创建一个对象

var car = {color: 'red', //键值对height: 1.8,start: function () {console.log('‘启动');},stop: function () {console.log('熄火');},suv: true,luntai:[1,2,3,4]
};

在这里插入图片描述

调用对象中的方法

car.start()

在这里插入图片描述

获取对象的属性

car.suv

在这里插入图片描述

2.js对象中的常规操作

(1)增加/修改对象中的属性

console.log(car);
car.pinpai='mg7';
console.log(car);

在这里插入图片描述

console.log(car);
car.pinpai='保时捷';
console.log(car);

在这里插入图片描述

(2)删除采用delete运算符

console.log(car);
delete car.pinpai;
console.log(car);

在这里插入图片描述

(3)查询对象中的属性

  • 通过"."运算符可以访问对象属性
  • "[]“操作符访问,”[]"⾥⾯写字符串
console.log(car.color);
console.log(car['height']);

在这里插入图片描述

3.js中this访问自身属性
  • 通过this我们能够访问对象自身属性和方法
var person = {name: 'lixiang',sayHello: function() {console.log('Hello, I am ' + this.name)}
}
person.sayHello();

在这里插入图片描述

4.js中创建对象的方式

(1)字面量的方式

  • 声明⼀个对象,赋值给⼀个变量
var person = {name: 'lixiang',age: 18,sex: 1
}

(2)自定义构造函数方式

  • 固定参数应用场景
function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}
var person = new Person('lixiang',18,1);
console.log(person);

在这里插入图片描述

  • 对象类型的参数
function Person(obj) {this.name = obj.name;this.age = obj.age;this.sex = obj.sex;
}
var person = new Person({name:'lixiang',age:18,sex:1});
console.log(person);

在这里插入图片描述

4.JavaScript数组数据结构

1.js中数组的创建方式

数组的定义:数组是⼀种列表对象,它的原型中提供了遍历和修改元素的相关操作,JavaScript 数组的⻓度和元素类型都是⾮固定的。

与Java不同的是js中的数组长度是动态控制的,包括元素类型也是不唯一的。

数组的声明方式

// 字面量形式
var arr1=[1,2,true,'lx']// 构造函数声明
var arr2=new Array(1,2,true,'lx')

在这里插入图片描述

2.操作数组的基本⽅法

(1)数组中增加一个元素

  • 下标方式增加
var arr = [1, 2, true, "lx"];
console.log(arr);
arr[4]=false;
console.log(arr);

在这里插入图片描述

  • 数组后⾯插⼊⼀条数据
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.push(0);
console.log(arr);

在这里插入图片描述

  • 数组的第⼀位插⼊⼀条数据
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.unshift(0);
console.log(arr);

在这里插入图片描述

(2)数组中删除一个元素

  • 删除了数组当中最后⼀个元素
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.pop();
console.log(arr);

在这里插入图片描述

  • 删除了数组当中第⼀个元素
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.shift();
console.log(arr);

在这里插入图片描述

(3)修改数组当中的元素

  • 下标方式修改
var arr = [1, 2, true, "lx"];
console.log(arr);
arr[1]=3;
console.log(arr);

在这里插入图片描述

(4)查询数组当中的元素

  • 下标方式查询
var arr = [1, 2, true, "lx"];
console.log(arr[1]);

在这里插入图片描述

3.数组的进阶操作⽅法

(1)splice方法

  • ⽤于删除或替换元素
  • 函数有返回值,返回的是被删除的元素
  • 这个⽅法还会改变原来的数组
list.splice(2, 2, 'hello','lx')
// 第⼀个参数是控制从第几位(包含)开始删除或者替换(得看第三个参数有没有值)
// 第⼆个参数控制删除的数量
// 第三个参数将删除了的元素替换掉,可⽤逗号隔开
  • 使用场景

    • 替换数组中的元素

    • 删除数组的⼀部分内容

    • 清空的数组的作⽤

var arr1=[1,2,3,4]
arr1.splice(2, 2, 'hello','lx')
console.log(arr1);

在这里插入图片描述

(2)join方法

  • 将数组类型的数据转换成字符串
  • 和toString的区别 可以⾃定义元素之间⽤自定义符号隔开
var list=[1,2,3,4]
console.log(list.join(','))

在这里插入图片描述

(3)concat方法

  • 用于连接两个或多个数组
  • 不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值
var arr1=[1,2,3,4]
var arr2=[5,6,7,8]
var arr3 = arr1.concat(arr2);
console.log(arr3);

在这里插入图片描述

5.JavaScript中的运算符和流程控制

1.常见的运算符

(1)赋值运算符 =

var name = '李祥';
console.log(name);

在这里插入图片描述

(2)算术运算符

  • * 剩法
var num = 2 * 4;
console.log(num);

在这里插入图片描述

  • / 除法
var num = 4 / 2;
console.log(num);

在这里插入图片描述

  • + 加法
var num = 4 + 2;
console.log(num);

在这里插入图片描述

var name = 'li' + 'xiang';
console.log(name);

在这里插入图片描述

var arr1 = [1,2,3,4];
console.log(1+arr1);

在这里插入图片描述

  • - 减法
var num = 6 - 4;
console.log(num);

在这里插入图片描述

  • % 余数
var num = 6 % 4;
console.log(num);

在这里插入图片描述

(3)自增和自减运算符

  • ++、-- 在前操作会在表达式最先执行
var x = 1;
++x;
console.log(x);
--x;
console.log(x);

在这里插入图片描述

var y = 2;
var f = 30 + ++y;
console.log(y);
console.log(f);

在这里插入图片描述

  • ++、-- 在后操作会在表达式最后执行
var y = 2;
var f = 30 + y++;
console.log(y);
console.log(f);

在这里插入图片描述

2.比较、逻辑运算符

(1)比较运算符

运算符说明
>大于
<小于
>=大于或等于
<=小于等于
==强制类型转换比较
===不强制类型转换比较

(2)逻辑运算符

  • 逻辑与&&:当运算符左边表达式为false,立马返回当前值;当左边表达式为true时,立马返回右边值。

  • 逻辑或||:当运算符两边有一个为true时,则返回为true的值,否则为false。

  • 优先级

//&& 的优先级高所以结果是 true
console.log(true || false && false);//用 () 来提高优先级 
console.log((true || false) && false);
3.if、if/else、三元表达式

(1)if当条件为真的时候执行代码块

//当条件为真时执行表达式代码块
if (){  //表达式或者变量=》布尔值//条件为 true 时执行
}//如果只有一条代码块,可以不用写 {}
if () console.log(xx)
var x = 2;
if(x===2){console.log('x为2')
}

在这里插入图片描述

(2)if/else当条件为真的时候执行if代码块,否则执行else代码块

if (){//条件为 true 时执行
}else{//条件为 false 时执行
}//if...else if...else语句
if (){//条件1为 true 时执行
}else if(){//条件2为 true 时执行
}else{//条件都不满足时执行
}
var x = 3;
if(x===2){console.log('x为2')
}else{console.log('x不为2')
}

在这里插入图片描述

var x = 3;
if(x===2){console.log('x为2')
}else if(x===3){console.log('x为3')
}else{console.log('x不为2或3')
}

在这里插入图片描述

(3)三元表达式

  • 语法
条件 ? 表达式1 : 表达式2
条件为true时,执⾏表达式1,否则执⾏表达式2
var x = 4;
x===3?console.log('x is 3'):console.log('x is not 3')

在这里插入图片描述

4.js中的switch语句

switch语句评估一个表达式,并执行与表达式结果相匹配的相应代码块。

switch(变量/表达式) {case1:  // case 1的代码块break;case2:  // case 2的代码块break;caseN:// case N的代码块break;default:// default的代码块
}
var musicType = '摇滚';
switch (musicType) {case '国风':console.log('开始播放国风目录音乐');break;case '舞曲':console.log('开始播放舞曲目录音乐');break;case '摇滚':console.log('开始播放摇滚目录音乐');break;default:console.log('未找到对应类型的音乐');break;
}

在这里插入图片描述

5.js中的循环详解

(1)for循环

for循环是编程语言中一种循环语句,而循环语句由循环体及循环的判定条件两部分组成,其表达式为:

for(单次表达式;条件表达式;末尾循环体){中间循环体;
}
//计算1-9累加
var num = 0;
for(var i = 1;i<10;i++){num+=i;
}
console.log('num='+num)

在这里插入图片描述

(2)while循环

while循环 只有当条件成立时 才会循环执行代码块,do-while循环表示无论条件成不成立都会执行一遍代码块。

while (条件表达式或者变量) {代码块
}do {代码块
} while (条件);
var a=0
while (a<10) {a++;
}
console.log('a='+a);

在这里插入图片描述

do {console.log('执行代码块');
}while (false) 

在这里插入图片描述

6.JavaScript中的函数

1.js中函数的简介

(1)语法

function name(参数 1, 参数 2, 参数 3) {//要执⾏的代码
}
function name(参数 1, 参数 2, 参数 3) {//要执⾏的代码return x;
}

有些函数是可以有返回值的,有些则可以没有,后面我们在具体说return的作用。

(2)什么是形参

  • 声明函数的时候定义的参数
// a、b是形参
function sum(a,b){  // 要执行的代码return a+b;
}

(3)什么是实参

  • 调⽤函数的时候传的⼀个参数
var num = sum(1,2)  // 1、2就是实参

特点总结:

  • 形参和实参是⼀⼀对应的

  • 数量可以不对应

  • 参数的类型不确定

  • 函数可以设置默认参数

  • 实参可以是字⾯量也可以是变量

2.js函数声明的⽅法

(1)函数声明

function sum(参数) {// 执⾏语句
}// 匿名函数表达式
var sum=function(参数){// 执⾏语句
}// 构造函数声明
var sum =new Function([arg1[, arg2[, ...argN]],] functionBody)
function sum1(a,b) {return a+b;
}var sum2 = function (a,b) {return a+b;
}var sum3 =new Function('a','b','return a+b;');console.log(sum1(1,2));
console.log(sum2(1,2));
console.log(sum3(1,2));

在这里插入图片描述

3.js函数return知识点

(1)作为返回值

function sum(a,b) {return a+b;
}
var num = sum(1,2);
console.log(num);

上面已经验证过了。

(2)中断函数

function sum(a,b) {console.log('sum='+a+b)return;console.log('end')
}
sum(1,3);

在这里插入图片描述

4.Js函数变量作⽤域

(1)全局变量

  • 全局作用域贯穿整个 JavaScript 文档,除函数内声明和大括号内用 let、const 声明的所有变量,都在全局作用域里,因此也被称为全局变量。
  • 全局变量一旦声明,不管在 JavaScript 文档中的任何地方都可以使用它,包括函数内部。

(2)局部变量

  • 当我们在函数中定义一个变量后,在函数中的任何地方都可以使用,这就是函数作用域。
  • 不过需要注意的是在函数之外就无法访问函数内定义的变量,因此函数内定义的变量也被称为局部变量。

在这里插入图片描述

5.js中类数组对象arguments
  • arguments,它是js中函数内置的一个对象,而执行函数方法的实参中值都存储在arguments中。
  • 要想获取到这些实参,就需要像数组一样,用下标/索引来定位到每个值上面,但是又不能说它是一个数组,因为它里面还有其他的属性,如callee。
  • 并且不能对它使用shift、push、join等方法。而没有传递值的命名参数将会被自动赋予undefined。
function sum(){var result = 0;for(var i = 0;i<arguments.length;i++){result+=arguments[i];}return result;
}
var num = sum(1,2,3,4,5,6);
console.log(num);

在这里插入图片描述

6.js中⽴即执⾏函数
  • 立即执行函数,顾名思义,声明一个函数并马上调用这个函数就叫做立即执行函数。
  • 也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行,立即执行函数又叫做自执行函数。
  • 立即执行函数它的内部可以访问全局变量。但是除了它自身内部,外部是无法访问它的。
  • 语法
( function ( “ 参数 ” ) { " 函数方法 " ; } ) ( “ 给参数传的值 ” )
//我们的函数并没有调用的地方
(function() {console.log('js⽴即执⾏函数');
})();

在这里插入图片描述

7.js中闭包的理解

闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

function sum () {var x = 1;return function () {x++;console.log(x);}
}
var num = sum();
num();
num();

上面这段代码就是在sum内部返回一个函数,将其内部的x变量进行++。

在这里插入图片描述

7.JavaScript的原型和原型链

1.什么是js原型
  • 所有的函数默认都有一个“prototype”这样公有且不可枚举的属性,它会指向另一个对象,这个对象就是原型。
  • 每当定义一个对象(函数也是对象)时,就会生成一个__proto__属性,被称为隐式原型。
  • 这个__proto__属性指向的是这个对象的构造函数的prototype,被称为显式原型。每一个对象都会从原型中“继承”属性。
function Person(name){this.name = name;this.eat = function (){console.log(this.name+'吃东西');}
}
var p = new Person('李祥');
console.log(p);

在这里插入图片描述

属性方法公共性,比如现在我要通过prototype去加一个属性,那么所有的实例化出来的对象都能访问。

Person.prototype.age=18;
Person.prototype.eat = function (name){console.log(name+'吃东西');}
function Person(name){this.name = name;
}
var p1 = new Person('李祥');
var p2 = new Person('张三');
console.log(p1.age);
p1.eat("李祥");
console.log(p2.age);
p2.eat("张三");

在这里插入图片描述

注意:只有构造函数才能对原型上的属性进⾏改动。

2.什么是js原型链

函数才有prototype属性,对象有__proto__ || [[prototype]]属性

原型链

  • js⾥万物皆对象,所以⼀直访问__proto__属性就会产⽣⼀条链条
  • 链条的尽头是null
  • 当js引擎查找对象的属性时,会先判断对象本身是否存在该属性
  • 不存在的属性就会沿着原型链往上找

在这里插入图片描述

function Car() {}
var car = new Car()

什么是原型链

原型链解决的主要是继承问题。
每个对象拥有一个原型对象,通过 proto 指针指向其原型对象,并从中继承方法和属性,同时原型对象也可能拥有原型,这样一层一层,最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain),通过原型链一个对象可以拥有定义在其他对象中的属性和方法
3.js中的类型检测

(1)typeof:用于判断基础数据的类型,无法区分对象与数组

var a = 1;
console.log('a:'+typeof a);
var b = "1";
console.log('b:'+typeof b); 
var s;
console.log('s:'+typeof s); 
function fun() {}
console.log('fun:'+typeof fun);
var c = [1, 2, 3];
console.log('c:'+typeof c); 
var o = { name: "lixiang" };
console.log('o:'+typeof d);

在这里插入图片描述

(2)instanceof:用于判断复杂数据的类型,可以区分对象与数组

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,可以理解为是否为某个对象的实例。

var arr = [];
console.log(arr instanceof Array); var obj = {};
console.log(obj instanceof Array); 
console.log(obj instanceof Object); var fun = new Fun();
console.log(fun instanceof Fun); 

在这里插入图片描述

8.JavaScript的局部刷新ajax

1.理解什么是JSON数据

(1)JSON是什么

  • JSON(JavaScript Object Notation)是⼀种轻量级的数据交换格式,它基于JavaScript的⼀个⼦集,易于⼈的编写和阅读,也易于机器解析。
  • JSON采⽤完全独⽴于语⾔的⽂本格式,但是也使⽤了类似于C语⾔家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等。
  • 这些特性使JSON成为理想的数据交换语⾔。
  • JSON⽤于网络间的传输数据

(2)JSON的语法格式

  • 属性名称必须是双引号括起来的字符串
  • 最后⼀个属性后不能有逗号

在这里插入图片描述

(3)序列化和反序列化

var obj = {name: "李祥",age: "18",
};
var a = JSON.stringify(obj); // 序列化、转换成JSON格式
var b = JSON.parse(a); // 反序列化 、转换成对象格式
console.log(a);
console.log(b);

在这里插入图片描述

2.ajax简介及其使⽤场景

(1)什么是ajax

Ajax全称“Asynchronous Javascript And XML”,中文意思为“异步JavaScript和XML”,是一种用于创建快速动态网页的技术,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

(2)原理

  • 通过XmlHttpRequest对象向服务器发异步请求,从服务器获取数据

  • 然后通过js来操作DOM⽽更新⻚⾯

  • 它是在 IE5 中⾸先引⼊的,是⼀种⽀持异步请求的技术

  • 简单的说,也就是 javascript 可以及时向服务器提出请求和处理响应,⽽不阻塞程序运行,达到⽆刷新的效果

  • 注意:JavaScript是单线程的,会阻塞代码运⾏,所以引⼊XmlHttpRequest请求处理异步数据

3.手写ajax案例实战

(1)ajax创建步骤

  • 创建ajax对象
var xhr;
if (window.XMLHttpRequest){xhr = new XMLHttpRequest();
} else {// code for IE6, IE5 兼容xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
  • 设置请求地址及⽅式
//第⼀个参数是⽤于指定请求的⽅式,⼀般⽤⼤写
//第二个参数代表请求的URL
//第三个参数是表示是否异步发送请求的布尔值,如果不填写,默认为true,表示异步发送,同步已经被弃用
xhr.open("GET","服务端接口url")
  • 发送请求(可选参数, null)
xhr.send()
  • (注册事件)等到浏览器返回结果接受响应
//注册事件。 onreadystatechange事件,状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
xhr.onreadystatechange = function () {// 为了保证数据完整返回,我们一般会判断两个值if (xhr.readyState === 4 && xhr.status === 200) {alert(xhr.responseText);} else {alert('出错了,Err:' + xhr.status);}
};

(2)案例实战

这里写了一个测试的服务端接口。

在这里插入图片描述

var xhr;
if (window.XMLHttpRequest){xhr = new XMLHttpRequest();
} else {// code for IE6, IE5 兼容xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","http://localhost:8088/spring-test/query")
xhr.send();
xhr.onreadystatechange = function () {// 为了保证数据完整返回,我们一般会判断两个值if (xhr.readyState === 4 && xhr.status === 200) {alert(xhr.responseText);} else {alert('出错了,Err:' + xhr.status);}
};

在这里插入图片描述

在这里插入图片描述

9.JavaScript文档对象DOM

1.js中DOM详解

(1)DOM(w3c提的⼀个标准)

  • DOM就是⽂档对象模型,是⼀个抽象的概念
  • 定义了访问和操作HTML⽂档的⽅法

(2)HTML和txt⽂本的区别

  • html是超级文本,里面可以包含各种格式,函数,链接,图像,视频等等。
  • TXT 是文本文件的扩展名,它表示这种类型的文件需要使用记事本打开查看或编辑。

(3)什么是DOM树

  • 浏览器将结构化的⽂档以"树"的结构存储在浏览器内存⾥ 。
  • 每个HTML元素被定义为节点 。
  • 这个节点有⾃⼰的属性(名称、类型、内容等) 。
  • 有⾃⼰的层级关系(parent, child, sibling)。

在这里插入图片描述

2.DOM节点的常⻅操作

(1)查找节点

⽅法描述
document.getElementById(id)通过元素 id 来查找元素
document.getElementsByTagName(name)通过标签名来查找元素
document.getElementsByClassName(name)通过类名来查找元素
document.querySelector(selector)通过css选择器或ID选择元素,⽆法选择伪类
    <h1 id="h1" class="h1">李祥</h1><script>//根据标签名var h1 = document.getElementsByTagName("h1")[0];console.log(h1.outerHTML);//根据idvar h2 = document.getElementById("h1");console.log(h2.outerHTML);//根据classNamevar h3 = document.getElementsByClassName("h1")[0];console.log(h3.outerHTML);//根据classNamevar h4 = document.querySelector(".h1");console.log(h4.outerHTML);//根据IDvar h5 = document.querySelector("#h1");console.log(h5.outerHTML);</script>

在这里插入图片描述

(2)改变元素内容

⽅法描述
element.innerHTML = new html content改变元素的 inner HTML
element.attribute = new value改变 HTML 元素的属性值
element.setAttribute(attribute, value)改变 HTML 元素的属性值
element.style.property = new style改变 HTML 元素的样式⽅法
<h1 id="h1" class="h1">李祥</h1>
<script>//根据标签名var h1 = document.getElementsByTagName("h1")[0];h1.innerHTML = 'lixiang';h1.id='h2'h1.style.backgroundColor='red'
</script>

在这里插入图片描述

注意:outerHTML会使样式丢失。

h1.outerHTML = 'lixiang';

在这里插入图片描述

(3)添加和删除元素

⽅法描述
document.createElement(element)创建 HTML 元素
document.removeChild(element)删除 HTML 元素
document.appendChild(element)添加 HTML 元素
document.replaceChild(element)替换 HTML 元素
document.write(text)可写⼊ HTML⽅法
var div = document.createElement('div');
div.innerHTML = '我是动态创建的HTML';
document.body.append(div);

在这里插入图片描述

3.js事件对DOM的操作

(1)什么是事件

  • 事件指的是在html元素上发⽣的事情 。
  • ⽐如图⽚元素被点击,触发的一系列操作。
  • 事件触发时,可设置执行⼀段js代码。

(2)常⻅的HTML事件

描述事件
html元素发生改变onchange
用户点击了元素onclick
鼠标移动到了元素上onmouseover
鼠标离开元素onmouseout
按下键盘onkeydown
页面已经完成加载onload
<div id="d1" onclick="test()">点击</div>
<script>function test(){console.log("点击事件");}
</script>

在这里插入图片描述

<div id="d1">点击</div>
<script>document.getElementById("d1").addEventListener('click',function(){console.log("点击事件");})
</script>

注意:采用addEventListener,可以多加几个事件。

<div id="d1">点击</div>
<script>document.getElementById("d1").addEventListener('click',function(){console.log("点击事件1");})document.getElementById("d1").addEventListener('click',function(){console.log("点击事件2");})document.getElementById("d1").addEventListener('click',function(){console.log("点击事件3");})
</script>

在这里插入图片描述

<div id="d1">鼠标移入移出事件</div>
<script>document.getElementById("d1").addEventListener('mouseover',function(){console.log("鼠标移入事件");})document.getElementById("d1").addEventListener('mouseout',function(){console.log("鼠标移出事件");})
</script>

在这里插入图片描述

4.js中事件的⼀些机制

(1)事件传播的两种机制

事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。在事件冒泡阶段只有标记为非捕获的监听器才会被调用。也就是那些调用addEventListener() 时第三个参数为 false 时注册的监听器。默认值即为false。

事件捕获:不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件。在这一阶段,只有那些设置为捕获阶段工作的监听器才被调用。要为捕获阶段设置监听器,可以在调用 addEventListener 时设置第三个参数为 true。

(2)图解事件捕获和事件冒泡

在这里插入图片描述

(3)什么是事件代理

  • 事件代理就是利⽤事件冒泡,只指定⼀个事件处理程序,就可以管理某⼀类型的所有事件。

(4)取消冒泡或者捕获

  • 点击子类显示子类,点击父类显示父类。
<ul id="father">父类
<li id="son">子类</li>
</ul>
<script>
document.getElementById("father").addEventListener("click", function (e) {console.log("父类");
});
document.getElementById("son").addEventListener("click", function (e) {console.log("子类");e.stopPropagation();
});

在这里插入图片描述

5.js中的定时器

(1)延迟执行

setTimeout(function(){}, 毫秒)clearTimeout(timer) // 停止,参数必须是由 setTimeout() 返回的timer
console.log('1');
console.log('2');
setTimeout(function(){console.log('5');
},5000)
console.log('3');
console.log('4');

在这里插入图片描述

(2)定时执⾏

setInterval(function(){}, 毫秒)clearInterval(timer) // 参数必须是由 setInterval() 返回的timer
console.log('1');
console.log('2');
setInterval(function(){console.log('5');
},2000)
console.log('3');
console.log('4');

在这里插入图片描述

10.JavaScript浏览器对象BOM

1.BOM常用的内置函数

(1)什么是BOM

BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。

(2)常用的BOM对象

  • window对象
    • window对象是BOM顶层对象。
    • window对象是JS访问浏览器窗口的一个接口
    • window对象是一个全局对象,声明的所有的全局变量,全局方法函数最终都是window对象的属性或者方法。
    • window.open() :打开一个新的浏览器窗口,接受四个参数(URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值)。
    • window.close() :关闭新打开的窗口(仅限open()打开的窗口)。
    • window.moveTo():移动当前窗口。
    • window.resizeTo():调整当前窗口的尺寸。
  • screen对象 :包含显示设备的信息
    • screen.height、screen.width:返回设备的分辨率。
    • screen.availWidth、screen.availHeight:返回屏幕可用宽高,值为屏幕的实际大小减去操作系统某些功能占据的空间,如系统任务栏。
  • location对象:保存当前文档信息,将URL解析为独立片段
    • location.href 返回当前页面完整的URL ,修改这个属性,即跳转新页面
    • location.hash 返回URL中的hash(#号后跟零或多个字符)
    • location.host 返回服务器名称和端口号
    • location.port 返回服务器端口号
    • location.pathname 返回URL中的目录和文件名
    • location.hostname 返回不带端口号的服务器名称
    • location.protocol 返回页面使用的协议(http://或https://)
    • location.search 返回URL的查询字符串,字符串以问号开头
  • navigator对象:提供一系列属性用于检测浏览器
    • window.navigator.userAgent:通过userAgent可以判断用户浏览器的类型
    • window.navigator.platform:通过platform可以判断浏览器所在的系统平台类型
    • window.navigator.online:判断是否联网
  • history 对象
    • history.back():与在浏览器点击后退按钮相同
    • history.forward():与在浏览器中点击按钮向前相同
    • history.go(参数):前进后退功能,参数如果是1前进一个页面,如果是-1后退一个页面,如果是N则前进或后退N个页面
    • history.length(): 保存历史记录的数量
  • localStorage
    • localStorage.setItem:设置值
    • localStorage.removeItem:删除值
2.JavaScript弹出框

(1)警告框

alert('hello')

在这里插入图片描述

(2)确认框

var isConfirm = confirm('请确认')
console.log('下⼀步', isConfirm)

在这里插入图片描述

在这里插入图片描述

(3)提示框

var isPrompt = prompt('请输⼊姓名')
console.log(isPrompt) // 是null 或者 ⽤户输⼊的值

在这里插入图片描述
在这里插入图片描述

3.浏览器基本概念之Cookie

(1)什么是Cookie

  • Cookie 是计算机上存储浏览器的数据⽤的 ,容量⼤⼩⼤概4KB 。
  • 基本语法:document.cookie

(2)Cookie作用

  • 浏览器关闭后,服务器会忘记⽤户的⼀切
  • 让浏览器记住⽤户信息:登录信息

(3)cookie操作

  • 如何创建和读取cookie
// 通过Document对象
document.cookie="username=Nick; expires=Thu, 18 Dec 2043 12:00:00 GMT";
  • 删除cookie
// 设置过期时间
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";  //  nul
  • 案例
window.onload = function(){checkCookie();
}
// 保存cookie
function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);var expires = 'expires=' + d.toGMTString();document.cookie = cname + '=' + cvalue + ';' + expires;
}// 获取cookie
function getCookie(cname) {var name = cname + '=';var ca = document.cookie.split(';'); // 将多个cookie字符串以;分割数组;for (var i = 0; i < ca.length; i++) {if (ca[i].indexOf(name)>= 0) {return ca[i].split('=')[1]}}return '';
}function checkCookie(){var user=getCookie("username");if (user){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");if (user){setCookie("username",user,30);}}
}

在这里插入图片描述在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/142206.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS 4.0 实况窗上线!支付宝实现医疗场景智能提醒

本文转载自支付宝体验科技&#xff0c;作者是蚂蚁集团客户端工程师博欢&#xff0c;介绍了支付宝如何基于 HarmonyOS 4.0 实况窗实现医疗场景履约智能提醒。 1.话题背景 8 月 4 日&#xff0c;华为在 HDC&#xff08;华为 2023 开发者大会&#xff09;上推出了新版本操作系统…

一文教你学会ArcGIS Pro地图设计与制图系列全流程(2)

ArcGIS Pro做的成果图及系列文章目录&#xff1a; 系列文章全集&#xff1a; 《一文教你学会ArcGIS Pro地图设计与制图系列全流程&#xff08;1&#xff09;》《一文教你学会ArcGIS Pro地图设计与制图系列全流程&#xff08;2&#xff09;》《一文教你学会ArcGIS Pro地图设计与…

jupyterlab开发环境最佳构建方式

文章目录 背景jupyterlab环境构建运行虚拟环境构建以及kernel映射验证总结 背景 从jupyter notebook切换到了jupyter lab. 这里记录一下本地环境的最佳构建方式. jupyter lab 安装在jupyterlab-local的anaconda 虚拟环境中.建立多个其他虚拟环境安装各种python包实现环境隔离,…

【实战详解】如何快速搭建接口自动化测试框架?Python + Requests

摘要&#xff1a; 本文主要介绍如何使用Python语言和Requests库进行接口自动化测试&#xff0c;并提供详细的代码示例和操作步骤。希望能对读者有所启发和帮助。 前言 随着移动互联网的快速发展&#xff0c;越来越多的应用程序采用Web API&#xff08;也称为RESTful API&…

python 探索分形世界|曼德布洛特|np.frompyfunc()

文章目录 分形的重要特征曼德布洛特集合曼德布洛特集合有一个以证明的结论&#xff1a;图像展示np.ogrid[]np.frompyfunc()集合转图像 julia集合 无边的奇迹源自简单规则的无限重复 ---- 分形之父Benoit B.Mandelbrot 分形的重要特征 自相似性无标度性非线性 曼德布洛特集合…

8+单基因+细胞凋亡+WGCNA+单细胞+实验验证

今天给同学们分享一篇单基因细胞凋亡WGCNA实验验证的生信文章“RASGRP2 is a potential immune-related biomarker and regulates mitochondrial-dependent apoptosis in lung adenocarcinoma”&#xff0c;这篇文章于2023年2月3日发表在Front Immunol期刊上&#xff0c;影响因…

订阅《复现SCI文章系列教程》

写在前面 《小杜生信笔记》准备开启新的订阅专栏**《复现期刊文章系列教程》&#xff0c;本专栏小杜会寻找一些自己感兴趣的文章进行复现&#xff08;不说百分之百的复现&#xff0c;但是也会百分之八十进行复现&#xff09;。本期刊的教程代码会全部进行公开&#xff08;通过订…

孙哥Spring源码第26集

第26集、AnnotationAwareAspectJAutoProxyCreator源码 【视频来源于&#xff1a;B站up主孙帅suns Spring源码视频】【微信号&#xff1a;suns45】 26.1、postProcessAfterInitialization分析 26.2、wrapIfNecessary分析 26.3、createProxy分析 26.4、getProxy 26.5、BeanPost…

Deep Span Representations for Named Entity Recognition

原文链接&#xff1a; https://aclanthology.org/2023.findings-acl.672.pdf ACL 2023 介绍 问题 作者认为&#xff0c;一个好的span表征对于NER任务是非常重要的&#xff0c;而之前的工作都是将第一个或最后一个的表征简单的进行组合后&#xff0c;没有进行充分的交互就送入到…

linux 查看CPU架构是AMD还是ARM

要查看 Linux 系统的 CPU 架构是 AMD 还是 ARM&#xff0c;可以使用以下命令&#xff1a; 使用 lscpu 命令并查找 Architecture 字段&#xff1a; lscpu | grep Architecture如果输出结果中包含 x86_64 或 i686&#xff0c;则表示系统的 CPU 架构是 AMD&#xff08;或者是 x86…

android去掉 原生锁屏

1. /frameworks/base/core/java/com/android/internal/widget/LockPatternUtils.java 直接 return true 2./packages/apps/Settings/src/com/android/settings/password/ScreenLockType.java 都改成 none 类型

软件定义网络-OpenvSwitch

软件定义网络&#xff08;SDN&#xff09;。它主要有以下三个特点&#xff1a; 控制与转发分离&#xff1a;转发平面就是一个个虚拟或者物理的网络设备&#xff0c;就像小区里面的一条条路。控制平面就是统一的控制中心&#xff0c;就像小区物业的监控室。它们原来是一起的&…

xxl-job分布式调度框架

课程目标 1、 掌握xxl-job部署以及开发的方式 2、 掌握xxl-job特性以及架构设计 3、 掌握xxl-job运行原理 内容定位 适合已经掌握了Quartz的同学 quartz这节课是本节课的基础&#xff0c;这个要求大家一定掌握&#xff0c;因为xxl-job早期就是使用quartz改造的&#xff0…

基于微信小程序的高校就业招聘系统设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

【OLSR路由协议】链路状态路由(OLSR)协议中选择多点中继节点算法研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Simulink 封装

快捷键&#xff1a; Edit Mask&#xff1a;CtrlM Look Under Mask&#xff1a;CtrlU 封装之后的模型&#xff1a; Edit Mask界面&#xff1a; 双击模块后的提示界面&#xff1a; 封装的模块内部&#xff1a;

软件测试-测试用例

软件测试-测试用例 1.什么是测试用例 为了实施测试而向被测系统提供的一组集合。这组集合包括测试环境、操作步骤、测试数据、预期结果等要素。 举例&#xff1a;对一个垃圾桶设计测试用例 2.设计测试用例的万能公式 设计测试用例的万能公式&#xff1a;功能测试性能测试界…

国产手机芯片4G方案_紫光展锐安卓核心板虎贲4G智能模块方案定制

元器件清单即BOM物料清单&#xff0c;不同行业领域的BOM表侧重点不一样。安卓主板的BOM表则侧重点在于元器件物料的清单&#xff0c;也就是安卓电路板的PCBA清单&#xff0c;精密的安卓板有上千个物料&#xff0c;可以帮助我们估算物料成本&#xff0c;建立生产计划&#xff0c…

单日 5000 亿行 / 900G 数据接入,TDengine 3.0 在中国地震台网中心的大型应用

小T导读&#xff1a;为满足地震预警数据存储、检索和处理的建设与集成需求&#xff0c;以及响应国家国产软件自主可控的号召&#xff0c;中国地震台网中心决定选用国产数据库 TDengine 来存储和处理地震波形数据。本文将针对 TDengine 3.0 在地震领域的应用展开详细讲解。 关于…

Tensorflow Federated Framework 谷歌联邦学习框架

目录 Tensorflow Federated Framework 谷歌联邦学习框架 1、TensorFlow Federated Framework 数据为主 整体训练 新的语言 Federated Learning (FL) API 安装TFF库&#xff08;conda&#xff09; 2、数据类型 3、完整代码 Tensorflow Federated Framework 谷歌联邦学习…