JavaScript 基础知识总结

1、html 中引入 javascript

直接在 html 中编写：

<script type = "text/javascript">
     // your javascript code
 </script>

导入外部 .js 文件

<script type="text/javascript" src="demo.js"></script>

2、屏幕输出和键盘输入

document.write() 写出 HTML

<script type = "text/javascript">
    document.write("hello");
</script>

console.log 写入浏览器控制台

<script type = "text/javascript">
    console.log("hello");
</script>

对话框

<script type = "text/javascript">
    window.alert("warning!");       // 警告框
    window.confirm("请确认！");      // 确认框
    window.prompt("请输入：");       // 输入框
</script>

3、变量声明

由于 javascript 是一门弱类型语言，在 javascript 中，采用 var 即可声明不同类型的变量：
例如，声明数值型变量 i = 1

var i = 1;
var float = 3.5;	// 声明浮点型变量

注：javascript 中，和 java 一样，采用 “// ” 进行单行注释
声明字符串变量 str = “hello”

var str = "hello";

4、字符串操作

字符串连接：javascript 采用 “+” 进行字符串连接

var first = "今天", second, third;
second = first + "是个好日子";
third  = "${first}是个好日子"

字符串函数：和 java 的字符串函数基本上一致

var str = "hello", res;
res = str.lenght;           // 5
res = str.charAt(1);        // e
res = str.indexOf("l");     // 2
res = str.substring(1,4);   // ell
res = str.toUpperCase();    // HELLO

5、数据类型转换

数值转字符串：

 var num = 2015;
 var str = String(num);
 // 方式2：
 var str = num.toString();

字符串转数值：注意数值型是 Number

var str = "2015";
var num = Number(str);
var num2 = str - 0;			// 隐式转换
document.write(typeof(num));

注意：js 会将字符串类型的数字转为数值型 ！

var i = 6 * "5";
document.write(i);		// 输出结果为30

6、数组操作

javascript 数组与 java 不同的是：

1. 数组的元素类型可以不同
2. 支持自动增长
3. 数组可直接作为栈或队列使用

6.1、创建数组

var arr = new Array(1, "hello", true);
var arr_2 = [1, "hello", true];

6.2、遍历数组

方法1：直接遍历

var arr = new Array(1, "hello", true);
for (var i = 0; i < arr.length; i++) {
 	document.write(arr[i] + " ");
}

方法2：方法1的另一种版本

var arr = new Array(1, "hello", true);
for (var idx in arr) {
    document.write(arr[idx] + " ");
}

方法3：类似 java 的 for each

var arr = new Array(1, "hello", true);
for (var item of arr) {
    document.write(item);
}

方法4：for each 遍历

var arr = new Array(1, "hello", true);
arr.forEach(function(item){
    document.write(item + " ");
});

方法5：lambda 表达式遍历

var arr = new Array(1, "hello", true);
arr.forEach(item => document.write(item));

6.3、数组排序

javascript 中，调用 sort() 函数进行排序
sort() 函数默认升序排序，我们可以在该函数中传入自定义的比较器实现其他排序效果

字符串数组升序排序

var arr = ["hello", "pleasure", "wonderful"];
arr.sort();
for (var idx in arr) {
	document.write(arr[idx] + " ");           // hello pleasure wonderful
}

字符串数组降序排序

注意自定义比较器中不能直接将字符串相减，需采用下面的方式进行比较

var arr = ["hello", "pleasure", "wonderful"];
function my_compare(str1, str2) {
	return str2.localeCompare(str1);;
}
arr.sort(my_compare);
for (var idx in arr) {
	document.write(arr[idx] + " ");           // wonderful pleasure hello
}

6.4、数组的其他方法

join() ：对数组元素进行连接

var arr = ["hello", "pleasure", "wonderful"];
var str = arr.join(" ");
document.write(str);        // hello pleasure wonderful

slice()：取指定下标的元素

 var arr = ["hello", "pleasure", "wonderful"];
 var arr_2 = arr.slice(0,2);   // 取下标为0和下标为2的元素
 var arr_3 = arr.slice(1);     // 取下标为1到最大下标之间的元素
 document.write(arr_2);        // hello pleasure wonderful
 document.write(arr_3);        // pleasure,wonderful

7、javascript 函数

采用关键字 function 进行定义

function fun_name() {
    document.write("this is a function!");
}
fun_name();

定义带返回值的函数

function fun_name(str) {
    if (str == "yes") {
        return 1;
    } else {
        return 0;
    }
}
var str = "yes";
var res = fun_name(str);
document.write(res);        // 1

定义不定参数的函数：通过 arguments 加下标接受参数

function fun_name() {
    document.write(arguments[0] + arguments[1] + arguments[2] + "真聪明！");    // 你我他真聪明！
}
var res = fun_name("你","我","他");

函数对象：将函数赋值给一个变量

var fun = function fun_name() {
    document.write("this is a function!");
}
fun();      // this is a function!

匿名函数

var fun = function fun_name(num) {
    return function(num1, num2){
        if (num1 >= num2) {
            document.write(num);
        } else {
            document.write(-num);
        }
    };
}
var fun_obj = fun(20); 
fun_obj(30,60);         // -20    

8、对象的创建与调用

8.1、采用关键字 Object 进行声明

var date = new Object();
date.time = "2020";
date.month = "11";
date.day = "08";
document.write(date.time + "年" + date.month + "月" + date.day + "月"); // 2020年11月08月

对象中的属性也可是对象，嵌套建立对象如下：

var student = new Object();
student.name = "aaa";
student.score = new Object();
student.score.maths = 100;
student.score.english = 60;
document.write(student.name + "的数学分数为" + student.score.maths + ",英语分数为" + student.score.english);

也可以通过大括号进行声明：

var student = new Object();
student.name = "aaa";
student.score = new Object();
student.score = {maths:100, english:60};
document.write(student.name + "的数学分数为" + student.score.maths + ",英语分数为" + student.score.english);

对象还可动态添加属性.。

8.2、采用关键字 class 声明

class Student {
    constructor(sname, score) {
        this.sname = sname;
        this.score = score;
    }
    toString() {
        document.write(student.sname + "的分数为" + student.score); // aaa的分数为100
    }
    
}
var student = new Student("aaa","100");
student.toString();