语言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表示值未定义。事实证明,这并没有什么卵用,区分两者的意义不大。大多数情况下,我们都应该用nullundefined仅仅在判断函数参数是否传递的情况下有用。


对象:

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版)学习笔记四