JavaScript

First Post:

Last Update:

本来是想着看视频学的，发现都是大概学过的东西，只是换一种表达方式，看视频学速度太慢，所以就跟着csdn上的教程学了，只记录了自己认为比较重要的东西，还有一些原本就学过的也没有记录，并不是完整的笔记，参考文章：(30条消息) 学习JavaScript这一篇就够了_轻松的小希的博客-CSDN博客

JavaScript简介

组成

特点

解释型语言

JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。

动态语言

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JavaScript可能是运行速度最快的动态语言了。

类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。所以有过C和Java基础的同学学习起来会轻松很多。不过JavaScript和与Java的关系也仅仅是看起来像而已。

引用方式

有三种引用方式，最常用的还是单独写一个js文件，再引过来

1
<script src="main.js"></script>

输出

页面输出

1
2
3
<script>
    document.write("Hello,World!");
</script>

控制台输出

按F12弹出控制台

1
2
3
4
5
6
7
<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

弹出窗口输出

1
alert("Hello,World!");

注释

//和/* */

JavaScrpit基础语法

变量的声明

1
2
3
var a;//声明
a=123;//赋值
var a = 123;//同时进行

数据类型

JavaScript中一共有5种基本数据类型：

  • 字符串型（String）
  • 数值型（Number）
  • 布尔型（Boolean）
  • undefined型（Undefined）
  • null型（Null）

这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

Undefined

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

注意：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

其他类型不再赘诉

强制类型转换

转换成string类型

将其它数值转换为字符串有三种方式：toString()、String()、 拼串。

方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

1
2
3
4
5
var a = 123;
a = a.toString();
console.log(a);//123
console.log(typeof a);//string

方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a = 123;
a = String(a);
console.log(a);//123
console.log(typeof a);//string 

var b = undefined;
b = String(b);
console.log(b);//undefine
console.log(typeof b);//string

var c = null;
c = String(c);
console.log(c);//null
console.log(typeof c);//string

方式三：为任意的数据类型 +""

1
2
3
4
var a = 123;
a = a + "";
console.log(a);//123
console.log(typeof a);//string

转换为number类型

方式一：使用Number()函数

字符串 –> 数字

纯数字的字符串可直接转换为数字，空串或全是空格的字符串转换为0

如果有非数字内容，转化为NaN（not a number)

布尔 –> 数字
true 转成 1
false 转成 0
null –> 数字
null 转成 0
undefined –> 数字
undefined 转成 NaN

方式二：这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数

1
2
3
4
var a = "123";
a = parseInt(a);
console.log(a);//123
console.log(typeof a);//number

方式三：这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数

1
2
3
4
var a = "123.456";
a = parseInt(a);
console.log(a);//123
console.log(typeof a);//number

转换为Boolean类型

  • 使用Boolean()函数
    • 数字 —> 布尔
      • 除了0和NaN，其余的都是true
    • 字符串 —> 布尔
      • 除了空串，其余的都是true
    • null和undefined都会转换为false
    • 对象也会转换为true

运算符

== ： 如果两个变量的类型不同，会自动进行类型转换，类型相同再比较

===：如果两个变量的类型不同，不会自动进行类型转换，类型不同直接返回false

同理：！= 和 ！==

数组

创建

1
var arr = [12,'haha'];

遍历

1
2
3
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

push()方法演示：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

1
2
3
4
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr);//["孙悟空", "猪八戒", "沙和尚"，"唐僧", "蜘蛛精", "白骨精", "玉兔精"]
console.log(result);//7

pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

1
2
3
4
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.pop();
console.log(arr);// ["孙悟空", "猪八戒"]
console.log(result);//沙和尚

还有好多方法，不再列举

函数

1
2
3
4
5
6
7
function 函数名(形参1，形参2，...)
{
	//函数体
}
//调用：
函数名(实参1,实参2,...)

匿名函数：没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

1
2
3
4
var fun = function () {
    alert("我是一个匿名函数");
}
fun();

函数方法也有好多，这里先不写了

预解析

js引擎运行js分为两步：预解析 代码执行

预解析：js引擎会把js里的所有var 和function声明提升到当前作用域的最前面。

分为：变量预解析（变量提升）和函数预解析（函数提升）

变量提升：把所有变量声明提升到当前作用域最前面，不提升赋值操作

函数提升：把所有函数声明提升到当前作用域最前面，不调用函数

代码执行：按照代码顺序从上到下执行。

eg：

1
2
3
4
5
6
7
console.log(num);
var num=10;
//结果是undefine
//相当于执行了以下代码
var num;
console.log(num);
num=10;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var num=10;
fun();

function fun()
{
    console.log(num);
    var num=20;
}
//执行结果是：undefine
//相当于执行以下代码
var num;
function fun()
{
    var num;
    console.log(num);//根据作用域链，这个undefine指的是函数里的这个num
    num=20;
}
fun();

对象

Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。

创建对象

1
2
3
4
5
6
7
8
9
10
11
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
//或：
var person = {
    name: "孙悟空",
    age: 18
};
console.log(person);

访问方式

1
2
3
对象.属性名

对象[‘属性名’]

删除属性

1
delete 对象.属性名

遍历对象

枚举遍历对象中的属性，可以使用for … in语句循环，对象中有几个属性，循环体就会执行几次

1
2
3
4
5
6
7
8
9
10
var person = {
    name: "zhangsan",
    age: 18
}

for (var personKey in person) {
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}

DOM