阿慕路泽

Appearance

JavaScript ​

简介 ​

JavaScript 的组成

  • ECMAScript：JavaScript 的语法标准。
  • DOM：JavaScript 操作网页上的元素的 API。
  • BOM：JavaScript 操作浏览器的部分功能的 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 中的关键字做变量名
  • 变量名不能有空格
  • 严格区分大小写，比如：name 和 Name 就是两个完全不同的变量。

变量类型 ​

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。

因此，使用 == 和 === 我们可以知道：null 和 undefined 的值不等于 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');
})();

Copyright © 2024-present 阿慕 京ICP备2023024485号 京公网安备11011402053925号 免责声明