语言JavaScript学习笔记

Posted 黑黑白白君

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了语言JavaScript学习笔记相关的知识，希望对你有一定的参考价值。

文章目录

前情：
《【语言】JavaScript学习笔记（首）》


1）快速入门

  • 廖雪峰javascript教程：https://www.liaoxuefeng.com/wiki/1022910821149312/1023020895584256

1.1 JavaScript与网页（html文档）

HTML 文档也被称为网页，HTML 文档 = 网页。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

  • 例如：
<html>  
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>  
</html>

1）由<script>...</script>包含的代码就是JavaScript代码，它将直接被浏览器执行。

  • JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中，例如：
<html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
  ...
</body>
</html>

2）也把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件：

<html>
<head>
  <script src="/static/js/abc.js"></script>
</head>
<body>
  ...
</body>
</html>

这样，/static/js/abc.js就会被浏览器执行。


1.2 怎么在浏览器中调试JavaScript代码？

随便打开浏览器的一个网页，然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(Developer Tools)”，

  • 先点击“控制台(Console)“，在这个面板里可以直接输入JavaScript代码，按回车后执行。
  • 要查看一个变量的内容，在Console中输入console.log(a);，回车后显示的值就是变量的内容。

请熟练掌握Console的使用方法，在编写JavaScript代码时，经常需要在Console运行测试代码。

  • 还可以研究开发者工具的“源码(Sources)”，掌握断点、单步执行等高级调试技巧。

2）基本语法相关

  • JavaScript的语法和Java语言类似，每个语句以;结束，语句块用...。
    • 但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。
  • 注意，JavaScript严格区分大小写，如果弄错了大小写，程序将报错或者运行不正常。

3）数据类型和变量相关

相等运算符：

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

  • 第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
  • 第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。


NaN：

NaN这个特殊的Number与所有其他值都不相等，包括它自己。唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

浮点数的相等比较：

浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefined：

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。


对象：

JavaScript的对象是一组由键-值组成的无序集合，例如：

var person = 
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
;
//JavaScript对象的键都是字符串类型，值可以是任意数据类型。
//上述person对象一共定义了6个键值对，其中每个键又称为对象的属性，例如，person的name属性为'Bob'，zipcode属性为null。
	
//要获取一个对象的属性，我们用对象变量.属性名的方式：
person.name; // 'Bob'
person.zipcode; // null

strict模式：

JavaScript在设计之初如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量。

  • 在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。
  • 使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内，同名变量在不同的函数体内互不冲突。

为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。

启用strict模式的方法是在JavaScript代码的第一行写上：'use strict';

  • 这是一个字符串，不支持strict模式的浏览器会把它当做一个字符串语句执行，支持strict模式的浏览器将开启strict模式运行JavaScript。

注意：为什么把这段代码直接粘贴到Chrome的控制台中执行，正常情况下应该报错，但是并没有报错：

'use strict'
name = "reeoo";
console.log(name)

是因为在console中的js代码是通过eval()来执行的，这是js中一个顶层函数（全局函数），或可以理解为js自带的系统函数。

  • eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。
  • 关于eval()更多可移步：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval

要想在Chrome浏览器中对严格模式正常报错，需要在代码外层套一个立即执行函数，或者其它类似的措施：

(function()
    'use strict'
    abcd = "reeoo";
    console.log(name) 
)()

4）字符串相关

多行字符串：

由于多行字符串用\\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号`表示：

`这是一个
多行
字符串`;

模版字符串：

如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：

var name = '小明';
var age = 20;
var message = `你好, $name, 你今年$age岁了!`;
alert(message);

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性，还能调用函数。


操作字符串：

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果。

JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

  • toUpperCase()把一个字符串全部变为大写
  • toLowerCase()把一个字符串全部变为小写
  • indexOf()会搜索指定字符串出现的位置
  • substring()返回指定索引区间的子串

5）数组

数组的length与实际大小：

直接给Array的length赋一个新的值会导致Array大小的变化：

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]

如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

indexOf：

与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

注意了，数字30和字符串’30’是不同的元素。


slice：

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array。

  • 如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array。

push和pop：

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉。

  • 空数组继续pop不会报错，而是返回undefined。


【部分内容参考自】

  • JavaScript教程：https://www.liaoxuefeng.com/wiki/1022910821149312

以上是关于语言JavaScript学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

javascript学习笔记

JAVAWEB学习笔记01

Head First JavaScript学习笔记

语言JavaScript学习笔记

thymeleaf学习笔记

JavaScript权威指南（第6版）学习笔记四