js学习笔记02

最新推荐文章于 2024-10-06 06:13:14 发布

WA终结者

最新推荐文章于 2024-10-06 06:13:14 发布

阅读量438

点赞数

分类专栏： web前端文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qq_53107845/article/details/121367932

版权

web前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

全局变量

JavaScript 最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写。这对代码的模块化和重复使用，非常不利。因此，建议避免使用全局变量。如果不得不使用，可以考虑用大写字母表示变量名，这样更容易看出这是全局变量，比如UPPER_CASE。

变量声明

JavaScript 会自动将变量声明“提升”（hoist）到代码块（block）的头部。

if (!x) {
  var x = {};
}

// 等同于
var x;
if (!x) {
  x = {};
}
/*这意味着，变量`x`是`if`代码块之前就存在了。为了避免可能出现的问题，最好把变量声明都放在代码块的头部。*/
for (var i = 0; i < 10; i++) {
  // ...
}

// 写成
var i;
for (i = 0; i < 10; i++) {
  // ...
}

//上面这样的写法，就容易看出存在一个全局的循环变量i。

//另外，所有函数都应该在使用之前定义。函数内部的变量声明，都应该放在函数的头部。

第三方变量法

var num1 = 10;
var num2 = 20;
// 第三方变量
var temp;
// 把num1变量存储在temp中
temp = num1;// 10
// 把num2变量存储在num1中
num1 = num2;// 20
// 把temp变量存储在num2中
num2 = temp;// 10

计算法

var num1 = 10;
var num2 = 20;
// 把num1和num2相加等于30，重新赋值给num1
num1 = num1 + num2;// 30
num2 = num1 - num2;// 10
num1 = num1 - num2;// 20

缩进

行首的空格和 Tab 键，都可以产生代码缩进效果（indent）。

Tab 键可以节省击键次数，但不同的文本编辑器对 Tab 的显示不尽相同，有的显示四个空格，有的显示两个空格，所以有人觉得，空格键可以使得显示效果更统一。

无论你选择哪一种方法，都是可以接受的，要做的就是始终坚持这一种选择。不要一会使用 Tab 键，一会使用空格键。

区块

if (a)
  b();
  c();

//上面代码的原意可能是下面这样。

if (a) {
  b();
  c();
}

//但是，实际效果却是下面这样。
if (a) {
  b();
}
  c();

因此，建议总是使用大括号表示区块。

另外，区块起首的大括号的位置，有许多不同的写法。最流行的有两种，一种是起首的大括号另起一行。另一种是起首的大括号跟在关键字的后面。

//方法一
block
{
  // ...
}

//方法2

block {
  // ...
}

/*一般来说，这两种写法都可以接受。但是，JavaScript 要使用后一种，因为 JavaScript 会自动添加句末的分号，导致一些难以察觉的错误。
*/

return
{
  key: value
};

// 相当于
return;
{
  key: value
};
/*上面的代码的原意，是要返回一个对象，但实际上返回的是`undefined`，因为 JavaScript 自动在`return`语句后面添加了分号。为了避免这一类错误，需要写成下面这样。*/
return {
  key : value
};

圆括号

圆括号（parentheses）在 JavaScript 中有两种作用，一种表示函数的调用，另一种表示表达式的组合（grouping）。

// 圆括号表示函数的调用
console.log('abc');

// 圆括号表示表达式的组合
(1 + 2) * 3

数据类型

数值（number）：整数和小数（比如1和3.14）
字符串（string）：文本（比如Hello World）
布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
null：表示空值，即此处的值为空
对象（object）：各种值组成的集合

(undefined和null，一般将它们看成两个特殊值)

对象是最复杂的数据类型，又可以分成三个子类型。

狭义的对象（object）
数组（array）
函数（function）
typeof 运算符

JavaScript 有三种方法，可以确定一个值到底是什么类型。

typeof运算符
instanceof运算符
Object.prototype.toString方法

数值、字符串、布尔值分别返回number、string、boolean。
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
函数返回function。
function f() {}
typeof f
// "function"
undefined返回undefined。
typeof undefined
// "undefined"
利用这一点，typeof可以用来检查一个没有声明的变量，而不报错。
v
// ReferenceError: v is not defined

typeof v
// "undefined"
上面代码中，变量v没有用var命令声明，直接使用就会报错。但是，放在typeof后面，就不报错了，而是返回undefined。

实际编程中，这个特点通常用在判断语句。
// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}
对象返回object。
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
空数组（[]）的类型也是object

null返回object。
typeof null // "object"
null的类型是object，这是由于历史原因造成的。1995年的 JavaScript 语言第一版，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑null，只把它当作object的一种特殊值。后来null独立出来，作为一种单独的数据类型，为了兼容以前的代码，typeof null返回object就没法改变了。

null、undefined 和布尔值

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。
var a = undefined;
// 或者
var a = null;
上面代码中，变量a分别被赋值为undefined和null，这两种写法的效果几乎等价。

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。
if (!undefined) {
  console.log('undefined is false');
}
// undefined is false

if (!null) {
  console.log('null is false');
}
// null is false

undefined == null
// true

//从上面代码可见，两者的行为是何等相似！谷歌公司开发的 JavaScript 语言的替代品 Dart 语言，就明确规定只有`null`，没有`undefined`！
根据 C 语言的传统，null可以自动转为0。
Number(null) // 0
5 + null // 5
区别是这样的：null是一个表示“空”的对象，转为数值时为0；undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。
Number(undefined) // NaN
5 + undefined // NaN
null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

undefined表示“未定义”，下面是返回undefined的典型场景。
// 变量声明了，但没有赋值
var i;
i // undefined

// 调用函数时，应该提供的参数没有提供，该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时，默认返回 undefined
function f() {}
f() // undefined

布尔值

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。

下列运算符会返回布尔值：

前置逻辑运算符： ! (Not)

相等运算符：===，!==，==，!=

比较运算符：>，>=，<，<=

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

undefined

null

false

0

NaN

""或''（空字符串）

空数组（[]）和空对象（{}）对应的布尔值，都是true。

布尔值往往用于程序流程的控制，请看一个例子。
if ([]) {
  console.log('true');
}
// true

if ({}) {
  console.log('true');
}
// true