JavaScript学习笔记（一)

最新推荐文章于 2024-09-05 11:00:53 发布

Shavwv

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量147

点赞数

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

本文链接：https://blog.csdn.net/weixin_43894527/article/details/113730398

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript学习笔记（一)

仅为个人学习记录所用，学习内容为菜鸟联盟JavaScript

JavaScript 简介

JavaScript是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript：直接写入HTML输出流

只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档

  <script>
  document.write("<h1>这是一个标题</h1>");
  document.write("<p>这是一个段落。</p>");
  </script>

JavaScript：对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

  <p id="demo">
  JavaScript 能改变 HTML 元素的内容。
  </p>
  <script>
  function myFunction()
  {
  	x=document.getElementById("demo");  // 找到元素
  	x.innerHTML="Hello JavaScript!";    // 改变内容
  }
  </script>
  <button type="button" onclick="myFunction()">点击这里</button>

document.getElementById(“some id”)。
- 这个方法是 HTML DOM 中定义的。
- DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像

动态地改变 HTML 的来源（src）

  <script>
  function changeImage()
  {
  	element=document.getElementById('myimage')
  	if (element.src.match("bulbon"))
  	{
  		element.src="/images/pic_bulboff.gif";
  	}
  	else
  	{
  		element.src="/images/pic_bulbon.gif";
  	}
  }
  </script>
  <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
  <p>点击灯泡就可以打开或关闭这盏灯</p>
  
  /*
  以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif*/

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式

JavaScript：验证输入

  if isNaN(x) {
      alert("不是数字");
  }

如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断
- ```
  if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
      alert("不是数字");
  }
```

ECMAScript版本

JavaScript 已经由ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

JavaScript 用法

HTML 中的脚本必须位于标签之间。
脚本可被放置在 HTML 页面的和部分中。

之间的代码行包含了 JavaScript:

中的JavaScript

  <!DOCTYPE html>
  <html>
  <body>
  .
  .
  <script>
  document.write("<h1>这是一个标题</h1>");
  document.write("<p>这是一个段落</p>");
  </script>
  .
  .
  </body>
  </html>

JavaScript 函数和事件

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

在或者的JavaScript

可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的或部分中，或者同时存在于两个部分中。
通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的部分。

该函数会在点击按钮时被调用

  <!DOCTYPE html>
  <html>
  <head>
  <script>
  function myFunction()
  {
      document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
  }
  </script>
  </head>
  <body>
  <h1>我的 Web 页面</h1>
  <p id="demo">一个段落</p>
  <button type="button" onclick="myFunction()">尝试一下</button>
  </body>
  </html>

中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的部分。

该函数会在点击按钮时被调用：

  <!DOCTYPE html>
  <html>
  <body>
  <h1>我的 Web 页面</h1>
  <p id="demo">一个段落</p>
  <button type="button" onclick="myFunction()">尝试一下</button>
  <script>
  function myFunction()
  {
      document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
  }
  </script>
  </body>
  </html>

外部的JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在

JavaScript输出

JavaScript 没有任何打印或者输出的函数。

JavaScript显示数据

JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

  <!DOCTYPE html>
  <html>
  <body>
  
  <h1>我的第一个页面</h1>
  <p>弹出警告框来显示数据</p>
  
  <script>
  window.alert(5 + 6);
  </script>
  
  </body>
  </html>

操作HTML元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

  <p id="demo">我的第一个段落</p>
  
  <script>
  document.getElementById("demo").innerHTML = "段落已修改。";
  </script>
  
  /*
  
  document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
  
  innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
  
  
  */

写到 HTML 文档

出于测试目的，您可以将JavaScript直接写在HTML 文档中：
- ```
  <script>
  document.write(Date());
  </script>
```

写到控制台

如果浏览器支持调试，可使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

JavaScript语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量 可以使用单引号或双引号。’’ “”
表达式字面量 用于计算。
数组（Array）字面量 定义一个数组 []
对象（Object）字面量 定义一个对象{}
函数（Function）字面量 定义一个函数
- function myFunction(a, b) { return a * b;}

JavaScript 变量

在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：
- ```
  var x, length
  x = 5
  length = 6
```
- 变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
- 变量是一个名称。字面量是一个值。

JavaScript 操作符

类型实例描述
赋值，算术和位运算符 = + - * / 在 JS 运算符中描述
条件，比较及逻辑运算符 == != < > 在 JS 比较运算符中描述

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。JavaScript 保留了一些关键字为自己所用。

JavaScript 注释

双斜杠 // 后的内容将会被浏览器忽略

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

  var length = 16;                                  // Number 通过数字字面量赋值
  var points = x * 10;                              // Number 通过表达式字面量赋值
  var lastName = "Johnson";                         // String 通过字符串字面量赋值
  var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
  var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。

  function myFunction(a, b) {
      return a * b;                                // 返回 a 乘以 b 的结果
  }

JavaScript 字母大小写

JS大小写敏感

JavaScript 字符集

JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。
使用驼峰法命名规则。

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

分号

分号用于分隔 JavaScript 语句。
在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。

JavaScript 代码块

代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。

空格

JavaScript 会忽略多余的空格。可以向脚本添加空格，来提高其可读性。

对代码行进行折行

在文本字符串中使用反斜杠对代码行进行换行。
JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。

JavaScript 变量

变量命名规则

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建） JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

使用 var 关键词来声明变量：

var carname;

  var carname="Volvo";
  document.getElementById("demo").innerHTML=carname;

一条语句，多个变量

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
- var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:
```
  - `var x,y,z=1;`
  - x,y 为 undefined， z 为 1。
```

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname 的值将是 undefined：
- var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：
- var carname="Volvo";
- var carname;

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

  var x;               // x 为 undefined
  var x = 5;           // 现在 x 为数字
  var x = "John";      // 现在 x 为字符串

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：

Undefined 和 Null

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

声明变量类型

使用关键词 “new” 来声明其类型：

  var carname=new String;
  var x=      new Number;
  var y=      new Boolean;
  var cars=   new Array;
  var person= new Object;

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。
JavaScript 对象是变量的容器。

对象定义

使用字符来定义和创建 JavaScript 对象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的

  var person = {
      firstName:"John",
      lastName:"Doe",
      age:50,
      eyeColor:"blue"
  };

对象属性

JavaScript 对象是键值对的容器
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
对象键值对的写法类似于Python中的字典

访问对象属性

person.lastName;
person["lastName"];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
name = person.fullName();
- 该实例访问了 person 对象的 fullName() 方法
如果要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回
- name = person.fullName;

访问对象方法

  /* 创建对象方法的语法 */
  methodName : function() {
      // 代码 
  }
  
  /* 访问对象方法的语法 */
  objectName.methodName()
  
  /* 通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。
  
  如果使用 fullName 属性，不添加 (), 它会返回函数的定义 */
  objectName.methodName

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

  function functionname()
  {
      // 执行代码
  }

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
可发送任意多的参数，由逗号 (,) 分隔：
myFunction(*argument1,argument2*)
声明函数时，把参数作为变量来声明
- function myFunction(***var1***,***var2***){*代码*}
- 变量和参数必须以一致的顺序出现。

带有返回值的函数

使用 return 语句时，函数会停止执行，并返回指定的值。

  function myFunction()
  {
      var x=5;
      return x;
  }

var myVar=myFunction();
document.getElementById("demo").innerHTML=myFunction();
return;
- 结束函数

局部JavaScript变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，只能在函数内部访问它。
可在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
carname="Volvo";
将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

箭头函数

ES6 新增箭头函数，定义函数时更加简洁、易读。

  // 传统定义函数方式
  function Test () {
    //
  }
  
  const Test = function () {
    //
  }
  
  // 使用箭头函数定义函数时可以省略 function 关键字
  const Test = (...params) => {
    //
  }
  
  // 该函数只有一个参数时可以简写成：
  const Test = param => {
    return param;
  }
  
  console.log(Test('hello'));   // hello

JavaScript 作用域

作用域是可访问变量的集合。

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

函数参数

函数参数只在函数内起作用，是局部变量。

HTML中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。

JavaScript事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
单引号:<some-HTML-element some-event=‘JavaScript 代码’>
双引号:<some-HTML-element some-event=“JavaScript 代码”>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JavaScript可以做什么？

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 可以为 HTML 元素指定自己的事件处理程序
- 可以阻止事件的发生。

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。
字符串可以存储一系列字符，如 “John Doe”。
字符串可以是插入到引号中的任何字符。
使用单引号或双引号。
var character = carname[7];
字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

字符串长度

使用内置属性 length 来计算字符串的长度
var sln = txt.length;

特殊字符

在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析： “We are the so-called “Vikings” from the north.”
字符串 "We are the so-called " 被截断。
使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:“We are the so-called “Vikings” from the north.”
反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
- 代码输出
  ’ 单引号
  " 双引号
  \ 反斜杠
  \n 换行
  \r 回车
  \t tab(制表符)
  \b 退格符
  \f 换页符

代码	输出
’	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

字符串可以是对象

通常JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

  var x = "John";             
  var y = new String("John");
  (x === y) 
  // 结果为 false，因为 x 是字符串，y 是对象

=== 为绝对相等，即数据类型与值都必须相等。

字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串属性

属性描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

JavaScript 运算符

JavaScript 算术运算符

JavaScript 赋值运算符

JavaScript 比较和逻辑运算符

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法
- variablename=(condition)?value1:value2

JavaScript if…Else 语句

条件语句用于基于不同的条件来执行不同的动作。

条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

JavaScript 循环语句

JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
break 语句用于跳出循环。
- JavaScript 标签
  - 可以对 JavaScript 语句进行标记。
  - 如需标记 JavaScript 语句，在语句之前加上冒号：
    - label: statements
  - break 和 continue 语句仅仅是能够跳出代码块的语句。
  - 语法
    - break labelname;
    - continue labelname;
continue 用于跳过循环中的一个迭代。
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

JavaScript typeof, null, 和 undefined

typeof 操作符

使用 typeof 操作符来检测变量的数据类型。
- typeof "John"
数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object

null

在 JavaScript 中 null 表示 “什么都没有”。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
用途：清空对象

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空。类型为 undefined.

拓展笔记

1、定义
- （1）undefined：是所有没有赋值变量的默认值，自动赋值。
- （2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
2、何时使用null?
- 当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
3、null 与 undefined 的异同
- null 和 undefined 的值相等，但类型不等：
- 共同点：都是原始类型，保存在栈中变量本地。
- 不同点：
  - （1）undefined——表示变量声明过但并未赋过值。
  - 它是所有未赋值变量默认值，例如：
  - var a; // a 自动被赋值为 undefined
  - （2）null——表示一个变量将来可能指向一个对象。
    - 一般用于主动释放指向对象的引用，例如：
    - var emps = ['ss','nn'];
    - emps = null; // 释放指向数组的引用
4、延伸——垃圾回收站
- 它是专门释放对象内存的一个程序。
  - （1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
  - （2）总有一个对象不再被任何变量引用时，才释放。

JavaScript 类型转换

在 JavaScript 中有 6 种不同的数据类型：
- string
- number
- boolean
- object
- function
- symbol
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined

typeof 操作符

使用 typeof 操作符来查看 JavaScript 变量的数据类型。

  typeof "John"                 // 返回 string
  typeof 3.14                   // 返回 number
  typeof NaN                    // 返回 number
  typeof false                  // 返回 boolean
  typeof [1,2,3,4]              // 返回 object
  typeof {name:'John', age:34}  // 返回 object
  typeof new Date()             // 返回 object
  typeof function () {}         // 返回 function
  typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
  typeof null                   // 返回 object

需要注意的是：
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
- 如对象是 JavaScript Array 或 JavaScript Date ，则无法通过 typeof 来判断他们的类型，因为都是返回 object。

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

  "John".constructor                 // 返回函数 String()  { [native code] }
  (3.14).constructor                 // 返回函数 Number()  { [native code] }
  false.constructor                  // 返回函数 Boolean() { [native code] }
  [1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
  {name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
  new Date().constructor             // 返回函数 Date()    { [native code] }
  function () {}.constructor         // 返回函数 Function(){ [native code] }

可使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”):

  function isArray(myArray) {
      return myArray.constructor.toString().indexOf("Array") > -1;
  }

可使用 constructor 属性来查看对象是否为日期 (包含字符串 “Date”):

  function isDate(myDate) {
      return myDate.constructor.toString().indexOf("Date") > -1;
  }

类型转换

JavaScript 变量可以转换为新变量或其他数据类型：
- 通过使用 JavaScript 函数
- 通过 JavaScript 自身自动转换

将数字转换为字符串

全局方法String()

  String(x)         // 将变量 x 转换为字符串并返回
  String(123)       // 将数字 123 转换为字符串并返回
  String(100 + 23)  // 将数字表达式转换为字符串并返回

Number方法toString()

  x.toString()
  (123).toString()
  (100 + 23).toString()

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

将布尔值转换为字符串

全局方法String()

  String(false)        // 返回 "false"
  String(true)         // 返回 "true"

Boolean方法toString()

  false.toString()     // 返回 "false"
  true.toString()      // 返回 "true"

将日期转换为字符串
- Date() 返回字符串。
  - Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
- 全局方法 String()
  - String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
- Date 方法toString
  - ```
    obj = new Date()
    obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
```
将字符串转换为数字
- 全局方法Number()
一元运算符+
- Operator + 可用于将变量转换为数
- ```
  var y = "5";      // y 是一个字符串
  var x = + y;      // x 是一个数字
```
- 如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)
将布尔值转换为数字
- 全局方法Number()
将日期转换为数字
- 全局方法Number()
- 日期方法getTime()
自动转换类型
- 当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。

自动转换为字符串
lse"
String(true) // 返回 “true”
```

Boolean方法toString()

  false.toString()     // 返回 "false"
  true.toString()      // 返回 "true"

将日期转换为字符串
- Date() 返回字符串。
  - Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
- 全局方法 String()
  - String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
- Date 方法toString
  - ```
    obj = new Date()
    obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
```
将字符串转换为数字
- 全局方法Number()
一元运算符+
- Operator + 可用于将变量转换为数
- ```
  var y = "5";      // y 是一个字符串
  var x = + y;      // x 是一个数字
```
- 如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)
将布尔值转换为数字
- 全局方法Number()
将日期转换为数字
- 全局方法Number()
- 日期方法getTime()
自动转换类型
- 当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
自动转换为字符串
- 当尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

Shavwv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（一)

JavaScript学习笔记（一)JavaScript 简介JavaScript是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript：直接写入HTML输出流只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档 <script> document.write("
复制链接

扫一扫