Skip to content

JavaScript

简介

JavaScript 的组成

  • ECMAScriptJavaScript 的语法标准。
  • DOMJavaScript 操作网页上的元素的 API
  • BOMJavaScript 操作浏览器的部分功能的 API

JavaScript 的特点

  • 可以使用任何文本编辑工具编写,然后使用浏览器就可以执行程序。
  • 是一种解释型脚本语言:代码不进行预编译,从上往下逐行执行,不需要进行严格的变量声明。
  • 主要用来向 HTML 页面添加交互行为。

使用

JavaScript 代码是放在 <script> ……</script> 标签里,而包含 JavaScript 代码的 script 标签,我们可以放在 <body> ……</body> 标签里,也可以放在 <head> ……</head> 标签里。

html
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <script>
           console.log("hello world");
       </script>
   </body>
</html>

此外,和 CSS 引入相类似,JavaScript 也可以通过外部引入。

html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="test.js">

        </script>
    </body>
</html>

注意**test.js 文件要和你的 html 文件在同一目录下**才能用上面的方式引用,否则的话需要使用相对路径还是绝对路径来引入 js 文件。

变量

声明变量

js
var name = 'robot'

变量的命名规则如下:

  • 变量名必须以字符或下划线“_”开头,不能以数字开头
  • 变量可以包含数字、从 A 至 Z 的大小字母
  • 不能使用 JavaScript 中的关键字做变量名
  • 变量名不能有空格
  • 严格区分大小写,比如:nameName 就是两个完全不同的变量。

变量类型

js
// Number
var x = 100
var y = 89.12

// String(使用单引号或双引号)
var name = 'robot'
var name = "wendy"

// Boolean
var isNum = true
var isString = false

// Array
var myNumberArray = [10,15,20];

// Object(对象)
var student = { name : 'Tom', age : 18 };

注释

单行注释

js
// 这个一个单行注释

多行注释

js
/**
这里是多行注释

*/

运算符

算数运算符:加/减/乘/除/取余/自增/自减

js
+ - * / % ++ --

赋值运算符:加等/减等/乘等/除等

js
+= -= *= /=

比较运算符:严格等于/严格不等于/小于/小于等于/大于/大于等于

js
===  !==  < <= > >=

逻辑运算符

js
&& 逻辑与
|| 逻辑或
?: 三元表达式c?x:y c为真,返回x,否则返回y
&  按位与
|  按位或
^  按位异或
== 相等
!= 不等

运算符的优先级

js
()  >  一元运算符  >  算数运算符  >  关系运算符  >  相等运算符  >   逻辑运算符

数组

一位数组

js
var myarray = new Array(1,2,3,4,5); // 创建数组同时赋值

//or

var myarray = [1,2,3,4,5]; //直接输入一个数组(称 “字面量数组”)

多维数组

js
var student = [["张三","男","18"],["李四","女","20"]];
student[0][2]; // returns "18"

修改数组

js
var color = ["red","green","blue","yellow"];
color[0] = "black";
color; // returns  ["black", "green", "blue", "yellow"]

获取数组长度

js
ar color = ["red","green","blue","yellow"];
color.length; // returns 4

数组和字符串之间的切换

js
# 字符串转数组,使用split()方法
"1:2:3:4".split(":")    // returns ["1", "2", "3", "4"]
"|a|b|c".split("|")    // returns ["", "a", "b", "c"]

# 数组转换为字符串,使用join()方法
["1", "2", "3", "4"].join(":"); // returns "1:2:3:4"
["", "a", "b", "c"].join("|"); // returns "|a|b|c"

添加和删除数组项

js
# 在数组尾部添加一个或多个元素,使用push()方法
var arr = ["1", "2", "3", "4"];
arr.push("5","6");
arr; // returns ["1", "2", "3", "4", "5", "6"]

# 从数组尾部删除一个元素并返回,使用pop()方法
arr.pop()

unshift()shift() 从功能上与 push()pop() 完全相同,只是它们分别作用于数组的开始,而不是结尾。

注意

  • == 是相等操作符,比较是否相等,如果相等输出为 true,否则为 false。
  • === 是全等操作符,比较值和类型是否都相等,如果都相等输出为 true,否则为 false。

因此,使用 ===== 我们可以知道:nullundefined 的值不等于 0,它们的值相等,但是类型不相等。

字符串

字符串连接

js
// 使用 + 连接字符串
var one = "Hello,jack.";
var two = "I'm rose";
result = one + two;

// 当字符串与数字使用 + 连接时,浏览器会自动将数字转换为字符串
result = one + 12

字符串转换

js
// 数字转换为字符串
var myNum = 123;
var myString = myNum.toString();
typeof myString; # typeof  用户打印变量类型

// 纯数字字符串转换为数字
var myString = '123';
var myNum = Number(myString);
typeof myNum;

// 获取字符串长度
var myString = "hello world ";
myString.length;

// 使用索引获取字符串内容
myString[0];

// 转换大小写
var string = "I like study";
string.toLowerCase(); // returns "i like study"
string.toUpperCase(); // returns "I LIKE STUDY"

// 替换字符串的某部分
var string = "I like study";
string.replace("study","sleep"); // returns "I like sleep"

条件/循环

条件

  • if ... else
js
if(3>2) {
    console.log("我真帅");
} else {
    console.log("不可能");
}
  • if ... else if ... else
js
var d = new Date().getDay();
if( d==0) {
    console.log("今天星期天");
} else if(d==1) {
    console.log("今天星期一");
} else if(d==2) {
    console.log("今天星期二");
} else {
    console.log("好多啊,我不想写了");
}
  • switch ... case
js
ar d = new Date().getDay();
switch(d) {
    case 0:
        console.log("今天星期天");
        break;
    case 1:
        console.log("今天星期一");
        break;
    case 2:
        console.log("今天星期二");
        break;
    case 3:
        console.log("今天星期三");
        break;
    case 4:
        console.log("今天星期四");
        break;
    case 5:
        console.log("今天星期五");
        break;
    default:
        console.log("今天星期六");
        break;
}
  • 三元运算符
js
3>2?console.log("3比2大"):console.log("3比2小");

循环

  • for 循环
js
for(var i=1;i<=100;i++){
    console.log(i);
}
  • while 循环
js
var i = 1;
while(i<=100){
    console.log(i);
    i++;
}
  • do ... while 循环
js
var i = 1;
do{
    console.log(i);
    i++;
}
while(i<=100)
  • break 语句和 continue 语句
    • break 语句用于跳出循环
    • continue 语句用于跳过迭代

函数

函数声明创建函数

语法:

js
function functionName(parameters) {
  //执行的代码
}

示例:

js
function f(a,b){
    console.log(a+b);
} //创建一个名为f的函数,它有两个形参a,b
f(2,3); //调用函数f,传入实参2和3,最终运行结果为在控制台上打印出5

函数表达式创建函数

语法:

js
var functionName = function (parameters){
    //执行的代码
}

示例:

js
var f = function(a,b){
    console.log(a+b);
}
f(2,3);

两者的区别

js
//此处的代码执行没有问题,JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。
f(2,3);
function f(a,b) {
    console.log(a+b);
}

//报错:f is not a function
//这是因为函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析
f(2,3);
var f = function(a,b){
console.log(a+b);
}

注:在 JavaScript 中,实参个数和形参个数可以不相等。

JavaScript 中没有重载

js
function f(a,b) {
       return a + b;
}
function f(a,b,c) {
       return a + b + c;
}
var result = f(5,6);
result;// returns NaN

上述代码中三个参数的 f 把两个参数的 f 覆盖,调用的是三个参数的 f,最后执行结果为 NaN。而不是其他语言中的 5。

返回值

  • 如果函数中没有 return 语句,那么函数默认的返回值是:undefined
  • 如果函数中有 return 语句,那么跟着 return 后面的值就是函数的返回值。
  • 如果函数中有 return 语句,但是 return 后面没有任何值,那么函数的返回值也是:undefined
  • 函数在执行 return 语句后会停止并立即退出,也就是说 return 语句执行之后,剩下的代码都不会再执行了。
  • 当函数外部需要使用函数内部的值的时候,我们不能直接给予,需要通过 return 返回。比如:
js
var f = function(a,b){
    a+b;
}
console.log(f(2,3)); // 结果为undefined

var f = function(a,b){
    return a+b;
}
console.log(f(2,3)); // 结果为5。

匿名函数

匿名函数就是没有命名的函数,一般用在绑定事件的时候。

js
function(){

}

4、自调用函数

匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行。比如:

js
(function () {
  alert('hello');
})();