JavaScript学习笔记(1-3章)

最新推荐文章于 2021-06-15 11:52:49 发布

AI_eye

最新推荐文章于 2021-06-15 11:52:49 发布

阅读量203

点赞数

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

本文链接：https://blog.csdn.net/AI_eye/article/details/114643525

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一章什么是JavaScript

1.1历史回顾

1995年JavaScript问世，最初只是为了代替服务端进行数据验证，减少浏览器和服务端频繁的数据交互，以及长时间的等待响应，现在已经涉及到浏览器窗口和内容的方方面面。
1995网景公司JavaScript->微软开发JScript->1997ECMAScript（ES）标准脚本语言（ECMA-262）出现

1.2实现

完整的JavaScript包含核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM） 三部分组成。

1.2.1ECMAScript

ES作为一门语言，不局限于Web浏览器，描述了语法、类型、语句、关键字、保留字、操作符、全局对象，之后随着版本升级还有一系列新功能类、模块、迭代器等。ES是对实现了这个规范的语言的称呼，JS是其中一种实现。

Web浏览器是ES实现可能存在的一种宿主环境 ，扩展（如DOM）使用ES核心类型和语法，提供特定于环境的额外功能。

ECMA欧洲计算机制造商协会

1.2.2DOM

文档对象模型（DOM，Document Object Model）是一个应用编程接口（API），用于在html中使用扩展的xml，DOM将整个页面抽象为一组分层节点。
基于各自DOM标准的语言：DOM Core，DOM HTML，SVG等

1.2.3BOM

浏览器对象模型（BOM），用于支持访问和操作浏览器的窗口。

1.3 小结

ECMAScript：由ECMA-262定义并提供核心功能
DOM：提供与网页内容交互的方法和接口
BOM：提供与浏览器交互的方法和接口

第二章 HTML中的JavaScript

2.1 元素< script >

两种方式：直接嵌入代码和使用src属性包含外部js文件

直接嵌入的方式，在标签内的代码会从上到下执行，在代码执行完成之前页面的其他内容给不会加载。
外部引用的方式，在解释js文件时，页面会阻塞。
使用scr属性的话不应在标签内再包含其他代码，如果同时使用则只会加载外部文件的代码。
浏览器不会检查js文件的扩展名，为使用服务端脚本动态生成js代码和使用ts等扩展语言提供可能。
可以加载外部域的js文件，也就是访问其他网页的js文件代码并执行，这也带来一些隐患。

2.1.1 标签位置

以往都放在head中，主要是为了和css文件放在一起，结构比较整齐。但这会导致所有js文件加载完成后页面才会开始渲染，页面在浏览器解析到< body >的起始标签时才开始渲染，会导致延迟。所以现在大多放在body内容的最后。

2.1.2 推迟执行脚本

defer属性，脚本在执行的时候不会改变页面结构，带上这个属性的代码会在浏览器解析到< /html >的时候才会执行。立即下载，延迟执行。

<script defer scr="example.js"></script>

2.1.3 异步执行脚本

async属性，使用方式和defer一样，表示该标签代码和页面加载以及其他的脚本执行顺序没有关系，异步脚本保证会在页面的load事件前执行。

2.1.4 动态加载脚本

通过DOM API，动态添加script元素，

let script = document.createElement('script');
script.src = 'example.js';
document.head.appendChild(script);

这种方式加载的资源在浏览器预加载时是不可见的，影响执行的优先性，可能会影响性能。可以通过下面的代码让预加载器知道这些动态请求文件的存在

<link ref="preload" href="example.js">

2.2 行内代码与外部文件

推荐使用外部文件引入

可维护性强
缓存特性，不同页面用到同一个文件只需下载一次
适应未来，写在Html中的话可能会和XHTML或一些特殊语法产生冲突。

2.3文档模式

使用doctype切换文档模式，文档模式有三种：混杂模式、标准模式、准标准模式，区别主要体现在通过CSS渲染的内容方面。

2.4 < noscript>

使用< noscript>指定在浏览器不支持脚本时显示的内容，如果支持脚本则标签内的内容不会被渲染。

第三章语言基础

ECMA-262以名为ECMAScript的伪语言的形式，定义了JavaScript的语法、操作符、数据类型以及内置功能等核心。2017年底大多数主流浏览器支持了ES6标准。

3.1 语法

3.1.1 区分大小写

3.1.2 标识符

第一个字符可以是字符，下划线，或$
剩下的字符可以是字符，下划线，$，数字
推荐使用驼峰命名，首字母小写，其他单词首字符大写

3.1.3 注释

单行注释：//
块注释：/* */

3.1.4 严格模式

脚本或函数开头加上use strict，对一些不规范的写法抛出错误。

3.1.5 语句

推荐语句结尾加分号结束，避免问题，提高性能。
多条语句可以合并在用{}包裹的代码块中，在if等控制语句即使只有一句，也推荐加大括号。

3.2 保留字与关键字

参见菜鸟教程https://www.runoob.com/js/js-reserved.html

3.3 变量

ES变量是松散型的，变量可以用来保存任何类型的数据，每个变量只是保留任意值的命名占位符。
三个关键字var、const、let
var在ES任何版本中都能使用，const和let在ES6之后能用。

3.3.1 var关键字

可以赋初始值也可以不赋值
赋值不定义类型，赋值之后可以再赋其他类型的值
var定义的变量只在自己的作用域内有效，但在函数内不用var直接定义一个变量“test=100；”，那么这个test变量就变成了全局变量。（不推荐这种做法，严格模式下不行，报ReferenceError）.
可以在一个语句中定义多个变量，用逗号隔开
变量提升变量的声明可以放在使用他的代码之后，会自动将他提到作用域的顶部。

3.3.2 let声明

var定义的变量是函数作用域，let是块作用域。
let不允许再一个作用域内冗余声明
let声明的变量不会被提升
var在全局声明的变量会成为window对象的属性，如“window.name”，let则不行
在for循环中使用let声明迭代变量，在块之外该变量也会失效

3.3.3 const声明

const行为与let基本一致，不同在于声明的同时必须初始化变量
const初始化的值，再给他赋值的话会报错

3.3.4 最佳实践

不使用var
const优先，let次之
提升代码质量，对变量值更容易推断

3.4 数据类型

Undefined、Null、Boolean、Number、String、Symbol（符号）、Object，七种数据类型，一种数据类型可以当做多种数据类型使用。

3.4.1 typeof操作符

为了获取松散数据类型的变量的类型，返回类型名称字符串。
typeof是操作符而不是函数，可以直接跟变量，如：typeof 100;
typeof null返回的是“object”，特殊值null被认为是空对象的引用

3.4.2 Undefined类型

Undefined类型只有一个特殊值undefined
使用var 和 let定义的变量未初始化的话，就相当于给他赋了undefined的值。
未声明的变量直接获取它的值的话会报错，但是使用typeof获取其类型的话也会返回undefined，这就容易和未初始化变量产生迷惑。所以建议声明变量的同时初始化。
undefined类型的变量在逻辑上数据false，用在if（undefined）｛｝语句的话块内不会执行。

3.4.3 Null类型

Null类型同样只有一个值，即null，null值表示空对象指针
建议给对象声明的变量初始化null值
null==undefined返回的是true

3.4.4 Boolean类型

true不等于1，false不等于0
区分大小写，True和False不是布尔值
Boolean()函数可以将其他数据类型的值转换为布尔值，可转为false的值有：空字符串、0、NaN、null、undefined。

3.4.5 Number类型

浮点值

浮点值占的空间是整数的两倍，所以浮点数的小数点后面是0或空的话，都会把这个值转成整数存储。
浮点值精度高达17位小数，但在计算中远不如整数精确，如0.1+0.2得到不是0.3，是0.300000000000000004。所以不要讲浮点数计算结果用作逻辑判断。

值的范围

支持最小值保存在Number.MIN_VALUE中，5e-324;最大值保存在Number.MAX_VALUE中，1.797e+308；超出此范围用±Infinity表示，且此值不可用作计算。

表示本来要返回数值的操作失败了，如0/0.但如果分子是非0值的话，则会返回±Infinity的值。
NaN不等于包括NaN在内的任何数值的值，“NaN == NaN”返回false
isNaN（）函数，填入任何数值以及可以转换为数值的（如true）参数返回false，其他像字符串返回true。

数值转换

三个函数Number()、parseInt()、parseFloat()
Number()转换null返回0，转换undefined返回NaN,转换字符串若为一串数字则转换成对应类型的数值，若无法转换为数值的返回NaN.
parseInt()从第一个非空格字符开始转换，直到末尾或碰到非数值字符，也包括小数点。另外空字符串会转换为NaN，儿Number()会转换为0

3.4.6 String类型

表示零或多个16位Unicode字符序列，可以用" "、’ '和反引号表示，但必须首尾一致。
字符串定义后不可以直接改变，会创建一块新的地址存储新的字符串把原来的字符串销毁。
使用toString()方法转换成字符串，null和undefined不可以使用此方法-
模板字面量，使用反引号定义字符串，可以跨行定义，并保留换行字符。在反引号中可以使用字符串插值，也就是${value}引用变量的形式。

3.4.7 Symbol类型

Symbol是ES6新增的数据类型，符号实例是唯一的不可变的，用途是确保对象属性使用唯一标识符。

基本用法

使用Symbol()函数初始化,可以传入一个字符串参数作为符号的描述
不可以通过new关键字实例化，如果要包装符号对象，需要用Object()函数

let mySymbol = Symbol()；
let myWrappedSymbol = Object(mySymbol);

全局符号注册表

Symbol.for()方法，使用一个字符串作为键，在全局符号注册表中创建并重用符号

let fooGlobalSymbol = Symbol.for('foo');

Symbol.keyFor()方法，查找键值

Symbol.keyFor(fooGlobalSymbol);

符号作为属性

let s1 = Symbol('foo');
let o = {[s1]:'foo value'};
console.log(o);//{Symbol('foo'):'foo value'

Object.getOwnPropertySymbols(o)可以用来获取对象的符号属性名，
Object.getOwnPropertyName(o)可以用来获取属性值。

3.4.8 Object类型

一组数据和功能的集合。派生其他对象的基类。
定义方法：

let o = new Object();

3.5 操作符

一元加减操作符在加减时会先尝试将变量转换成可以计算的数值类型
相等操作符，有两种，相等不相等（== 、!= ）和全等不全等（ === 、!==）,第一种在判断之前会先进行强制类型转换，若转换后相等则相等。第二种不会进行转换，直接进行判断。
如"55"==55返回true,“55”===55则返回false。

3.6 语句

for-in 严格的迭代语句，枚举对象中的非符号键属性。

for(const propName in window){
	document.write(propName);
	}

上面的例子循环显示了BOM对象window的所有属性，const不是必须的，但为了确保这个迭代值不被修改，推荐使用const。

for-of按照顺序遍历可迭代对象的元素
标签语句，label: statement,label是后面语句的标签，可在通过break或continue语句引用。
with语句，with (expression) statement .将代码作用于设置为特定的对象，作用域内的变量引用可以直接使用with所包含的对象的属性，此语句不推荐使用，影响性能且难以调试

3.7 函数

格式：

function functionName(arg0,arg1,...,argN){
	statements
	}

ES中的函数不需要指定是否有返回值，直接可以用return返回函数的值。
不指定返回值的函数，实际上会返回特殊值undefined.

AI_eye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记(1-3章)

第一章什么是JavaScript1.1历史回顾1995年JavaScript问世，最初只是为了代替服务端进行数据验证，减少浏览器和服务端频繁的数据交互，以及长时间的等待响应，现在已经涉及到浏览器窗口和内容的方方面面。1995网景公司JavaScript->微软开发JScript->1997ECMAScript（ES）标准脚本语言（ECMA-262）出现1.2实现完整的JavaScript包含核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）三部分组成。
复制链接

扫一扫