JavaScript课程设计结果分析 javascript课程设计报告

转载

柳随风 2024-01-03 13:42:24

文章标签 JavaScript课程设计结果分析 javascript 前端 es6 数组 文章分类 JavaScript 前端开发

第1章什么是 Javascript

.Javascipt是一门用来与网页交互的脚本语言，由三个部分组成：
①ECMAScript:由ECMA-262定义并提供核心功能（语法等）；
②DOM:文档对象模型，提供与网页内容相关接口和方法；
③BOM:测览器对象模型，提供与测览器交互的接口和方法。

第2章：html中的JS

1.Script标签特殊属性：
①async:表示应立即开始下载脚本，但不能阻止其他页面动作，如下载资源或等待其他脚本加载。只对外部脚本文件有效；
②defer:表示脚本可延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
注：script放在head星，会导致页面渲染有明显延迟，由于页面在浏览器解析到＜body>的起始标签时开始渲染。

2.文档模式：
①混杂模式：以省略文档开头的doctype声明作为开关；（向后兼容）
②标准模式：加了＜！DOCTYPE html>；
主要区别只体现在通过CSS渲染的内容方面。

3.元素：针对早期浏览器不支持js的问题；一个页面优雅降级的方案。
使因场景：
①浏览器不支持脚本；
②测览器对脚本的支持被关闭。
注：如果浏览器支持并启用脚本，则该元素中内容都不会被渲染。

第3章语言基础

1.标识符：是变量、函数、属性或函数参数的名称。可由一个或多个下列字符组成：
①首字符必须是一个字母、下划线（一）或美元符号（$);
②剩下的其他字符可以是字母、下划线、美元符号或数字。

2.var:①存在变量提升；
②函数作用域。③能同名；
④可以；
let ①x;②块作用域；③不能同名；④在铜声明
变量不会挂在window上，
const ①x;②块作用域；③不能同名；④不可以；
⑤写let不同点：声明变量时需初始化，且不能更改。不能用
来声明选代变量。

	是否存在变量提升	作用域	能否重复命名	在全局声明的变量会不会被挂到window上
var	是	函数作用域	能	会
let	否	块作用域	不能	不会
const	否	块作用域	不能	不会

注：let和const不同，const 声明变量需初始化，且不能修改，不能用来声明迭代变量。

3.数据类型：
①基本（6个）：Undefined,Null,Number,string,Boolean,Symbol（es6 符号)
②复杂：Object。

typeof:“undefind”字借串。
NUll， Object ->(typeof) "object"
function ->(typeof) "function"

注：

let message; 变量被声明，值为undefined ①
let message ,没有声明 ②

	①	②
console.log(xxx)	“undefined”	报错
console.log(typeof(xxx)	“undefined”	“undefined”

4.NaN: 不是数值（Not a Number),用来表示本来要返回的数值失败了。
NaN不写任何包含本身在内的任何值相等。NaN == NaN 错误

5.数据转换：
将非数值→数值，规则：
①Number():

Boolean,true→1,false→0;
数值：直接返回；
nulll→0; undefined→NaN;
字符串：
1）包含数字，转换为十进制数值；
2）浮点：转换为对应浮点值；
3）包含十六进制格式，转换为对应十进制；
4）空字符串，→ 0;
5）其他，→ NaN;
对象；调用valueof(),换上述规则，若结果为NaN,则调用tostring(),再按字符串规则；
②parseInt():得到整数；
参数2:指定底数：10,16进制。
③parsefloat():得浮点数，解析到第一个 “.” 为止；
→只解析10进制数，16进制为0。

注：Null,undefined 没有tostring)方法。
String() 始终会返回表示相应类型值的字符串。
null，undefined -> “xxx”

6.操作符

Infinity 属性用于存放表示正无穷大的数值
es7新增了指数操作符 Math.pow() -> **
Math.pow(3,2) 3x3 -> 3**2
指数赋值操作符，
let a =3 ;a ** = 2; // 9
== , != 等于和不等于，会先进行类型转换

null == undefined;  // true
NaN == 	NaN;     // false
null == 0;        // false
undefined == 0;     // false

7.for… in 和 for …of的区别

for…in 遍历的是对象的属性名称(key：键名)，一个Array对象也是一个对象，数组中的每个元素的索引被视为属性名称，即在遍历数组时，拿到的是索引；
for…of 遍历Array时，拿到的是每个元素的值

第4章变量、作用域与内存

1.instanceof

如果变量是给定引用类型（由其原型决定）的实例，则instanceof返回true
例：

var obj = new Object();
console.log(obj instanceof Object);    // true

proto: 任何对象都具备的属性，指向它的原型对象（原型链）
prototype：构造函数的属性，指向它的原型对象
constructor: 指向该对象的构造函数

function Foo(){}
var f1 = new function();
f1.__proto__  == Foo.prototype.
Foo.prototype.constructor = Foo

2.执行上下文

简称上下文，变量和函数的上下文决定他们可以访问哪些数据，以及他们的行为，每个上下文都有一个关联的变量对象，全局 --》 window；
上下文在其所有代码执行完毕后都会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如网页关闭或者退出浏览器）；
没有声明的变量，为全局window所有；
提升：var 声明被拿到函数或者全局作用域的顶部，位于作用域中所有代码之前；

3.垃圾回收

垃圾回收程序每隔一定时间（或者说在代码执行过程中某个预定的收集时间）就会自动运行；垃圾回收程序必须跟踪记录哪个变量还会使用，以及哪个变量不会使用，以便回收内存，如何标记未使用的变量主要的两种标记策略：
1）标记清理：垃圾回收程序运作的时候，会标记内存中储存的所有变量，然后将所有在上下文中的变量，以及被在上下文中引用的变量的标记去掉，再次之后再被加上标记的变量就是待删除的，因为任何在上下文中的变量都访问不到他们，随后垃圾回收程序做一次内存清理，销毁带标记的所有值并回收他们的内存；
2）引用计数：对每个值都记录它引用的次数，为0时
就会释放它的内存。

第5章基本引用类型

Date()

Date 类型将日期保存为自协调世界时（UTC, Universal Time Coordinated）
日期格式化方法（都会返回字符串）：
1）toDateString() 显示日期中的周，月，日，年；
2）toTimesString() 显示日期中的时，分，秒和时区；
3）toLocaleDateString() 显示日期中的周，月，日，年；
4）toLocaleTimeString() 显示日期中的时，分，秒；
5）toUTCString() 显示完整的UTC日期。

Math()

min() 和 max() 用于确定一组数据中的最大值和最小值；

let max = Math.max(1,2,3,4);   // 4

舍入方法
1）Math.ceil() 方法始终向上舍入为最接近的整数；
2）Math.floor() 方法始终向下舍入为最接近的整数；
3）Math.round() 方法执行四舍五入；
4）Math.fround() 方法返回数值最近的单精度（32位）浮点值表示；
random(): 返回一个0-1 范围内的随机数，其中包含0但不包含1

三种原始值包装类型：Boolean， Number，String，公共的特点：

每种包装类型都映射到同名的原始类型；
以读模式（就是要从内存中读取变量保存的值），后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相应的数据；
涉及原始值的语句执行完毕后，包装对象就会被销毁。
注：
(1)在以读模式访问字符串的时候，后台都会执行以下三步：
1）创建一个String 类型的对象；
2）调用实例上的特定方法；
3）销毁实例。

let str = new String('aaa');
let str2 = str.substring(2);
str = null

(2) 引用类型和原始值包装类型的主要区别是对象的生命周期

在通过new实例化引用类型后，得到的实例会在离开作用域时被销毁，
而主动创建的原始值包装类型对象只存在于访问它的那行代码执行期间。这意味着不能在运行时给原始值添加属性和方法。

let a1 = 'aadad';
a1.color = 'red';
console.log(a1.color); // undefined

第6章集合引用类型

Object
1）创建Object的两种方式：

使用new操作符和Object构造函数；
使用对象字面量；

let person = new Object();
  = 'Job';

let person = {
name = 'Job';
}

注意：在使用对象字面量表示法定义对象时，并不会实际调用 Object 构造函数。
2）存取对象属性方法;
① 点语法；
② 中括号语法。

let person = new Object();
 = 'Job';
person['age'] = 18;

主要区别：

使用中括号的主要优势是可以通过变量访问属性；
如果属性中包含可能会导致语法错误的字符，或者包含关键字/保留字时，也可以使用中括号语法。

Array
1）创建类似 Object；
2）Array 构造函数 es6 新增两个创建数组的静态方法；

① Array.from(类数组对象，可选的映射函数参数):

console.log(Array.from('Matt')); // ['M', 'a', 't', 't']
const a1 = [1, 2, 3];
const a2 = Array.from( a1, x => x**2 ); // [1, 4, 9]

② Array.of() 可以把一组参数转换为数组；

console.log(1,2,3); // [1, 2, 3]
console.log(undefined); // [undefined]

3）数组空位
1）使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole）；

Ecmascript 会将逗号之间相应索引位置的值当成空位；
es6 重新规范，将这些空位当成存在的元素，只是值为 undefined；

const options = [ 1, , , , 5];   // 遍历 1   undefined undefined undefined 5

2）注意：由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实要需要空位，则可以显式地用 undefined 值代替。

4） length：非只读，修改length的值，可以从数组末尾删除或添加元素

设置为大于数组长度的值，则新添加的元素都以 undefined 填充。

let arr = [1, 2, 3];
arr.length = 4;
console.log(arr[3]); // undefined

5）检测数组：Array.isArray(xx);
6）方法：
- 填充：fill(要填充的数字，开始索引，结束索引) 。 ----> es6

var zero = [0, 0, 0];
zero.fill(2);  // [2,2,2]，没索引全部填充
zero.fill(0); // 重置

zero.fill(1, 1); // [0, 1, 1]

复制：copWith(start, end) 按照范围浅复制数组中部分内容，然后将他们插入到指定索引开始的位置。 ----> es6
contact()：在现有元素基础上创建一个新数组；

let arr = [1,2];
let arr1 = arr.concat(3, [4]);
// arr1   [1, 2, 3, 4]

截取 slice(start, end); （不改变原数组）

let arr = [1, 2, 3, 4]
arr.slice(1); // [2, 3, 4]
arr.slice(1, 2); // [2, 3]

注：如果参数有负值，就用数组的长度加上这个负值即可。
eg：5个元素，slice(-2, -1) —> slice(3, 4) [0, 1, 2, 3, 4]

splice()：
1）删除：splice(第一个元素的位置, 元素量)
2）插入：splice(start, 0, 要插入元素)
3）替换：在删除的同时，可在该位置插入新元素
搜索：
1）indexOf()，从开头搜索，有就会返回索引，否则返回 -1
2）lastIndexOf()，从结尾开始，同上（但是索引 0为最后一项
3）includes() --> es7 ，true/false
7）断言函数：find(元素，索引，数组本身)，函数返回值决定相应的索引的元素是否匹配，返回第一个匹配的元素

const people = [
	{ name: 'Matt', age: 27 },
	{ name: 'Job', age: 29 },
]
alert( people.find(element, index, arr) =>{
	element.age < 28; // { name: 'Matt', age: 27 }
} ))