[JavaScript你真的以为这么简单吗]JavaScript高级

最新推荐文章于 2022-09-29 23:20:49 发布

Philosophy7

最新推荐文章于 2022-09-29 23:20:49 发布

阅读量2.7k

点赞数 90

分类专栏： JavaScript从入门到精通文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ChengXuTeng/article/details/124676392

版权

JavaScript从入门到精通专栏收录该内容

2 篇文章 1 订阅

订阅专栏

✅作者简介：大家好,我是Philosophy7？让我们一起共同进步吧！🏆 📃个人主页：Philosophy7的csdn博客
🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门
💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博>主哦🤞

⭐学习目标:
 -掌握script标签的具体用法
 -理解行内脚本与外部脚本的区别
 -理解文档模式对JavaScript的影响
 -ECMAScript的语法

在这里插入图片描述

一、JavaScript初体验

1、script元素

在HTML中插入JavaScript，我们使用的是script标签。这个元素是被网景公司创造出来的，并最早在Netscape Navigator 2 中实现的。后来，这个元素被正式加入到 HTML 规范。script元素有下列八个属性，分别为:

async : 可选。表示立即下载脚本，但不阻止其他页面的效果。只对外部脚本有效
charset : 可选。使用src属性指定的代码字符集。不常用，因为大多数浏览器不在乎。
crossorigin : 配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。
language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2” 或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
src：可选。表示包含要执行的代码的外部文件。
type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript" 都已经废弃了。

使用JavaScript方式有两种:

HTML中直接使用

外部引入

使用 src 属性。这个属性的值是一个 URL，指向包含 JavaScript 代码的文件，比如：下面的例子

这个例子在页面中加载了demo.js

注意:

使用了 src 属性的标签中再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

<body>
<script>
    //内部使用script
    alert("Hello World")
</script>

<!--2.外部引入Js文件-->
<script src="demo.js"/>
</body>

Js文件

document.write("Hello Alert")

浏览器的执行流程:

在有多个script标签时，浏览器会依照从上到下的顺序去解释并执行它们，前提是没有defer和async属性。

1.1 标签位置

我们可以看到有的script标签被放在head标签内，如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JS初体验</title>
    <script src="demo.js"></script>
    <script src="demo.js"></script>
</head>
<body>
<script>
    //内部使用script
    alert("Hello World")
</script>

<!--2.外部引入Js文件-->
<script src="demo.js"/>
</body>
</html>

为什么这样做呢：

主要目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。

不过，把所有 JavaScript 文件都放在里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到的起始标签时开始渲染）。

对于需要很多 JavaScript 的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。

为了解决这个问题，我们将script引用到了body标签内，这就表示浏览器在解释JS代码之前就完全渲染了整个页面。

1.2 废弃的语法

自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言。

type 属性使用一个 MIME 类型字符串来标识script的内容但 MIME 类型并没有跨浏览器标准化。

即使浏览器默认使用 JavaScript，在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过（不执行）相关代码。

在最初采用 script 元素时，它标志着开始走向与传统 HTML 解析不同的流程。对这个元素需要应用特殊的解析规则，而这在不支持 JavaScript 的浏览器（特别是 Mosaic）中会导致问题。不支持的浏览器会把script元素的内容输出到页面中

Netscape 联合 Mosaic 拿出了一个解决方案，对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代码。最终方案是把脚本代码包含在一个 HTML 注释中

<script>
<!--
	function sayHi(){
		document.write("Hi");
	}
-->
</script>

2.行内代码与外部文件

可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中

使用外部文件的好处:

可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快
适应未来。通过把 JavaScript 放到外部文件中，包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。

在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中，预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。

3.文档模式

IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。

最初的文档模式有两种：混杂模式（quirks mode）和标准模式（standards mode）。

前者让 IE 像 IE5 一样（支持一些非标准的特性），后者让 IE 具有兼容标准的行为。

虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对 JavaScript 也有一些关联影响，或称为副作用。

4.小结

要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域
所有script元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在script元素中的代码必须严格按次序解释
对不推迟执行的脚本，浏览器必须解释完位于script元素中的代码,才能继续渲染页面

在这里插入图片描述

二、ECMAScript语法

1、语法

ECMAScript很大程度上借鉴了Java中的语法，熟悉Java的小伙伴应该学习起来会非常的容易，并且熟悉，

而且JavaScript是一门弱类型语言，也就意味着语法的约束倒没有那么严格，可以轻松的掌握。

1.1、区分大小写

ECMAScript 中一切都区分大小写。无论是变量、函数名还是操作符，都区分大小写。

换句话说，变量 test 和变量 Test 是两个不同的变量。类似地，typeof 不能作为函数名，因
为它是一个关键字（后面会介绍）。但 Typeof 是一个完全有效的函数名。

<script>
    //这是两个不同的变量名
    var test = 1;
    var Test = 2;
</script>

1.2、标识符

所谓标识符，就是变量、函数、属性或函数参数的名称。标识符的规则:

第一个字符必须是字母、下划线_ 或者美元符号($)
剩下的字母可以是数字、字母、美元符号下划线

按照我们熟悉的方式，ECMAScript标识符也使用了驼峰命名的规则，即第一个单词首字母小写，后面的每个单词首字母大写。

例如:

firstName
selectStudent
myMoney

虽然这些不做强制要求，但是为了增加我们代码的可读性，还是建议如此的去命名。

关键字、保留字、布尔类型、null不能作为标识符

1.3、注释

ECMAScript和Java中的注释一致

<script>
	//这是单行注释 双斜杠
	/*
		这是多行注释
	*/
</script>

1.4、严格模式

ECMAScript 5 增加了严格模式（strict mode）的概念。严格模式是一种不同的 JavaScript 解析和执
行模型，ECMAScript 3 的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。

<script>
  	//在开头就采用严格模式
    "use strict"
    //这是两个不同的变量名
    var test = 1;
    var Test = 2;
</script>

1.5、语句

ECMAScript 中的语句以分号结尾。

加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。

加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

<script>
    var a = 10 //没有分号 不报错 但不推荐
    var b = 5; //推荐加上分号
</script>

1.6、关键字与保留字

这些关键字，有着独特的作用，因此，按照规定关键字和保留字不能作为标识符或属性名。

有关键字如下:

break	do	in	typeof
case	else	instanceof	var
catch	export	new	void
class	extends	return	whild
const	finally	super	with
continue	for	switch	yield
debugger	function	this	throw

2、变量

ECMAScript 变量是松散类型的，意思是变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。

有 3 个关键字可以声明变量：var、const 和 let。

其中，var 在ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在 ECMAScript 6 及更晚的版本中使用。

<script>
    //1.定义变量的语法: var 变量名 = 初始化值;
    var name = "张三";

    //注意:在我们不初始化的时候，值会显示undefined 
    var age;
    alert(age)
</script>

2.1、var关键字作用域

定义变量格式: var 变量名 = 初始化值

<script>
    //1.定义一个函数
    function test(){
    	//在函数内部使用var修饰变量，意味着该变量会在函数退出时被销毁。
        var a  = 10; //局部变量
    }
    test();
    consolo.log(a) //打印到控制台 报错:Uncaught ReferenceError: consolo is not defined
</script>

当我们省略var关键字在函数内部定义变量，这个变量就是全局变量

去掉之前的var关键字定义变量，然后调用一次test()方法我们就可以访问到变量a中的值了；

注意: 虽然通过省略var操作符定义全局变量，但不推荐这么操作。

因为在严格模式下，像这样没有初始化值，就会抛出异常 ReferenceError: a is not defined
<script>
 //严格模式
"use strict"
 //1.变量a
 a;
console.log(a)
</script>

2.2、let关键字

let 跟 var 的作用差不多，但有着非常重要的区别。最明显的区别是，let 声明的范围是块作用域，而 var 声明的范围是函数作用域。

下面演示区别:

使用let修饰的变量age不能被if块外部访问，因为它的作用域仅限于内部。块作用域属于函数作用域的子集，因此适用于var的作用域限制同样也适用于let。

简单来说就是:

自上向下，可兼容，自下向上不可能。

<script>
    if (true){
        var name = "张三";
        document.write(name) //张三
    }
    document.write(name) //张三

    if (true){
        //let修饰
        let age = 20;
        document.write(age) //20
    }
    document.write(age) //没有访问到age
</script>

2.3、const关键字

const 的行为与 let 基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const 声明的变量会导致运行时

错误。

<script>
    const age = 26;
    age = 36;  //TypeError

    //不允许重复声明
    const name = "s";
    const name = "zhangsan"; // Identifier 'name' has already been declared

    //const作用域也是块
    if (true){
        const a = 10;
    }
    console.log(a) //无法访问到变量a并抛出异常

</script>

3、数据类型

ECMA中的数据类型有6种,分别为:

undefined : 值未定义的
Null : 表示空
Boolean : 布尔值，true false
Number : 数值
String : 字符串
Symbol : 值是符号

注意:

undefined

即使未初始化的变量会被自动赋予 undefined 值，但我们仍然建议在声明变量的同时进行初始化。这样，当 typeof 返回"undefined"时，你就会知道那是因为给定的变量尚未声明，而不是声明了但未初始化。

数值转换:

3 个函数可以将非数值转换为数值：Number()、parseInt()和 parseFloat()。

后两个函数主要用于将字符串转换为数值。

Number()函数基于如下规则转换:
布尔值 ture == 1 false == 2
null 返回 0
undifined 返回 NaN
字符串的规则较多:
如果字符串包含数值字符包括数组前面带－号的情况，则转换为十进制数字
如果是空字符串则返回 0
如果字符串包含浮点数值则会转换为响应的浮点数
如果字符串是一个十六进制的格式就会转换为十进制整数值
如果上述情况都不存在则返回NaN
<script>
    var flag = true //true == 1  false == 2
    document.write(Number(flag))

    var num = 10; //数值直接返回
    document.write(Number(num) +  "</br>")

    var age; //undefined 返回 NaN
    document.write(Number(age)) //返回NaN


</script>

<script>
    //1.使用typeof 检查数据类型
    var a = "张三";
    document.write(typeof(a)) //string
    document.write(typeof 30) //number

    //2.演示undefined
    let b;
    document.write(b + "</br>")

    //未声明变量的时候也会检测出undefined
    document.write(typeof num1)

    //3.Null 表示空对象指针
    var car = null;
    document.write(typeof car) //返回的是一个对象object

    //4.Boolean
    var flag = true

    //5.Number -- 有趣的数据类型
    var num1 = 10; //整数
    var num2 = 0xA; //十六进制10
    /*
        存储浮点值使用的内存空间是存储整数值的两倍，
        所以 ECMAScript 总是想方设法把值转换为整数。
     */
    var num3 = 1.1; //浮点值
    var num4 = .1; //有效 但不推荐

    /*
        值的范围:
            内存是有限制的，ECMAScript 可以表示的最小数值保存在 Number.MIN_VALUE
            最大数值 Number.MAX_VALUE
     */
    var result  = Number.MIN_VALUE + Number.MAX_VALUE
    document.write(result) //1.7976931348623157e+308

    //NaN not a number 不是一个数字
    document.write(0/0) //如果分子或分母为0 就会返回NAN

    //String 字符串
    var name2 = "法外狂徒张三";

</script>

3.1、深入字符串

字符串的特点:

不可变的，一旦创建，它们的值就无法改变。要修改的话，必须销毁原来的字符串。

字符出的转换:

有两种方式把一个值转换为字符串。首先是使用几乎所有值都有的 toString()方法。这个方法唯一的用途就是返回当前值的字符串等价物。比如：

<script>
	var age = 20;
	var newString = age.toString(); //字符串20
	document.write(typeof(newString))
	//除了null 和 undefined没有tostring方法其他数据类型都有
</script>

字符串的字面量

字面量	含义
\n	换行
\t	制表符
\b	退格
\r	回车
\f	换页
\\	\ 反斜杠
’	单引号

3.2、Symbol 类型(了解即可)

Symbol（符号）是 ECMAScript 6 新增的数据类型。符号是原始值，且符号实例是唯一、不可变的。

符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。

尽管听起来跟私有属性有点类似，但符号并不是为了提供私有属性的行为才增加的（尤其是因为 Object API 提供了方法，可以更方便地发现符号属性）。

相反，符号就是用来创建唯一记号，进而用作非字符串形式的对象属性。

3.3、Object类型

在后续的对象会有更深的讲解，在这里介绍对象的基本用法，以及定义格式

<script>
    //创建一个对象
    var student = Object();

    //如果没有参数的话 可以胜率括号
    var student = Object;
    
</script>

每个Object实例都有如下属性和方法:

constructor：用于创建当前对象的函数。在前面的例子中，这个属性的值就是 Object() 函数
hasOwnProperty(propertyName)：用于判断当前对象实例（不是原型）上是否存在给定的属性。要检查的属性名必须是字符串（如 o.hasOwnProperty(“name”)）或符号。
isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型。（后续将详细介绍原型。）
propertyIsEnumerable(propertyName)：用于判断给定的属性是否可以使用（本章稍后讨论的）for-in 语句枚举。与 hasOwnProperty()一样，属性名必须是字符串。
toLocaleString()：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。
toString()：返回对象的字符串表示。
valueOf()：返回对象对应的字符串、数值或布尔值表示。通常与 toString()的返回值相同。因为在 ECMAScript 中 Object 是所有对象的基类，所以任何对象都有这些属性和方法。在接下来我们将介绍对象间的继承机制。

4.运算符

1.算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
–	递减

<script>
    //加法运算
    var a = 10;
    var b = 5;
    var result = a + b; //相加 -- 15
    alert(result)
</script>

减法

<script>
    //减法操作
    var a = 10;
    var b = 5;
    var result = a - b; //相减 -- 5
</script>

乘法

<script>
    //乘法操作
    var a = 10;
    var b = 5;
    var result = a * b; //相乘 -- 50
</script>

除法

<script>
    //除法操作
    var a = 10;
    var b = 5;
    var result = a / b; //2
</script>

取余

<script>
    //取余操作
    var a = 10;
    var b = 5;
    var result = a % b; // 10 除以 5 == 商为2 余数为0 所以输出0
    alert(result)
</script>

介绍完了算术运算的常用操作，在这介绍一下优先级。

在小学我们就知道加减乘除的优先级关系了 : 先乘除，后加减

括号括起来的优先级是最高的

2.赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
\|=	x \|= y	x = x \| y
**=	x **= y	x = x ** y

这里就不一一演示了，大家可以亲自去测试。

5.语句

ECMA-262 描述了一些语句（也称为流控制语句），而 ECMAScript 中的大部分语法都体现在语句中。

我们首先来看 ECMA 是什么。ECMA，读音类似“埃科妈”，是欧洲计算机制造商协会（European Computer Manufacturers Association）的简称，是一家国际性会员制度的信息和电信标准组织。

后面的-xxx数字代表的就是ECMAScript采用的标准

1.if语句

条件判断语句，在我们的代码中会多次频繁的出现，现在就来介绍它们的语法以及基本使用。

定义格式:if (条件){

返回true 执行的代码块

}else{

返回false 执行的代码块

}

<script>
    var a = 10;
    var b = 20;
    if (a > b){
        document.write("确实大于B")
    }else{
        document.write("a 怎么能大于 B ?")
    }
</script>

2.do-while

这是一种后测试语句，也就是说循环体中的代码执行完之后才会进行判断求值。

下述这个例子只要a < 10 就会一直循环。 a从0开始每次递增2

<script>
    var a = 0
    do {
        a += 2
    }while (a < 10);
</script>

3.while

有后测试语句，就有先测试语句，while就是先测试语句

<script>
    var a = 0;
    while (a < 10){
        a += 2;
    }
    //每次循环递增2 只要a不小于10了 循环就结束了
</script>

4.for

for 语句也是先测试语句，只不过增加了进入循环之前的初始化代码，以及循环执行后要执行的表达式。

与Java中的for循环写法几乎保持一致。

<script>
    for (var i = 0; i < 10; i++){
        document.write(i + "</br>")
    }
</script>

5.for-in

这是一种严格迭代语句，用于枚举对象中。

//循环显示了BOM对象window里面的所有属性 每次都会给propName变量赋值 直到window对象所有属性遍历完之后 循环就结束了
for (const propName in window) {
    document.write(propName);
}

6.break-continue语句

break语句用于立即退出循环，而continue语句也一样。

但是continue会跳过本次循环执行下一次的循环

<script>
    for (var i = 0; i < 10; i++){
        if (i == 5){
            break;
        }
        document.write(i + "</br>") //当 i = 5的时候 这个循环就终止了 被break语句所终止。
    }
</script>
<script>
    for (var i = 0; i < 10; i++){
        if (i == 5){
            continue;
        }
        document.write(i + "</br>") //当 i = 5的时候 跳过本次循环，继续判断下一次是否满足条件
    }
</script>

7.switch

switch语句跟if语句紧密相连。

基本语句如下:

<script>
    var a = 10;
    switch (a){
        case 5:
            console.log("5");
            break;
        case 10:
            console.log("10");
            break;
    }
</script>

Philosophy7

关注

90
点赞
踩
86

收藏

觉得还不错? 一键收藏
打赏
122
评论
[JavaScript你真的以为这么简单吗]JavaScript高级

✅作者简介：大家好,我是Philosophy7？让我们一起共同进步吧！🏆 📃个人主页：Philosophy7的csdn博客🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博>主哦🤞⭐学习目标: -掌握script标签的具体用法 -理解行内脚本与外部脚本的区别 -理解文档模式对JavaScript的影响 -ECMAScript的语法文章目录一、JavaScript初体验1、script元素1.1 标签位.
复制链接

扫一扫