[Book]学习JavaScript数据结构与算法:第1章“JavaScript简介”

第1章“JavaScript简介”
第2章“数组”
第3章“栈”
第4章“队列”
第5章“链表”
第6章“集合”
第7章“字典和散列表”
第8章“树”
第9章“图”
第10章“排序和搜索算法”
第11章“算法补充知识”

第1章 JavaScript简介

一.JavaScript 基础

1.在HTML中编写JavaScript的两种方式
第一种方式

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
 <script>
 alert('Hello, World!');
 </script>
</body>
</html>

第二种方式

创建一个JavaScript文件（比如01-HelloWorld.js），
在里面写入如下代码：
alert('Hello, World!');
然后，我们的HTML文件看起来如下：
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
 <script src="01-HelloWorld.js">
 </script>
</body>
</html>

这两个例子，无论执行哪个输出都是一样的。但第二个例子是最佳实践。
作为最佳实践，我们会在关闭body标签前引入
JavaScript代码。
这样浏览器就会在加载脚本之前解析和显示HTML，有利于提升
页面的性能

2.变量
变量保存的数据可以在需要时设置、更新或提取。赋给变量的值都有对应的类型。
JavaScript的类型有数字、字符串、布尔值、函数和对象。还undefined和null，以及数组、日期和正则表达式

var可以声明一个js变量。但是js不是强类型语言，后面在声明相同名称变量的话，会把之前的覆盖也就是更新；

	var num=1;
    var num=222;
    console.log(num);//222

	var n;
    console.log(n);//undefined
    undefined表示变量已被声明，但尚未赋值

3.输出JavaScript值的三种方式：

第一种是
	alert（'Mytext here'），将输出到浏览器的警示窗口；
第二种是
	console.log（'My texthere'），将把文本输出到调试工具的Console标签
第三种方式是直接输出到HTML页面里并被浏览器，
	通过document.write（'My text here'）。

console.log("num: " + num)
写法相同
console.log("num: ", num)

4.变量作用域
本地变量和全局变量两种

 var myVaribale = 'global';
    myOtherVariable = 'global_name';
    function myFunction() {
        var myVaribale = 'local';
        return myVaribale;
    }
    function myOtherFunction() {
        myOtherVariable = 'local_name';
        return myOtherVariable;
    }
    
    console.log(myVaribale); //global 全局变量
    
    console.log(myFunction()); //local 局部变量
    
    console.log(myOtherVariable); //global_name 全局变量
    
    console.log(myOtherFunction()); //local_name{在myOtherFunction函数里，因为没有使用var关键字修饰，所以这里引用的是全局变量
    
    console.log(myOtherVariable); //{local_name 因为在函数myOtherFunction里修改了myOtherVariable的值

在这里插入图片描述
过在JavaScript里应该尽量少用全局变量，这是对的。通常，代码质量可以用全局变量和函数的数量来考量（数量越多越糟）。因此，尽可能避免使用全局变量

5.操作符
在JavaScript里有:

算数操作符、
赋值操作符、
比较操作符、
逻辑操作符、
位操作符、
一元操作符
其他操作符

算数操作符
在这里插入图片描述
赋值操作符

比较操作符

逻辑操作符

位操作符

console.log('5 & 1:', (5 & 1));//5 & 1: 1二进制与运算
    console.log('5 | 1:', (5 | 1));//5 | 1: 5二进制或运算
    console.log('~ 5:', (~5));//~ 5: -6二进制非运算
    console.log('5 ^ 1:', (5 ^ 1));//5 ^ 1: 4二进制异或运算
    console.log('5 << 1:', (5 << 1));//5 << 1: 10左移
    console.log('5 >> 1:', (5 >> 1));//5 >> 1: 2右移
    console.log('~ 2:', (~2));
    
    （~）非运算：先把数字转化为二进制（8位），取反（补码）
    转化规则：第一位不动是符号位
    把补码-1得到的8位除了第一位符号位不动；其他都取反，得到的就是反码

在这里插入图片描述

typeof操作符可以返回变量或表达式的类型

JavaScript还支持delete操作符，可以删除对象里的属性：

var myObj = {name: 'John', age: 21};
delete myObj.age;
console.log(myObj); // 输出对象{name: "John"}

6.真值和假值
在这里插入图片描述
7.相等操作符（==和===）

使用==时，不同类型的值也可以被看作相等
在这里插入图片描述

如果x和y是相同类型，JavaScript会比较它们的值或对象值。其他没有列在这个表格中的情况都会返回false。
toNumber和toPrimitive方法是内部的，并根据以下表格对其进行估值。

console.log(undefined==null);//true
console.log(null==0);//false

在这里插入图片描述
===操作符：简单多了。
如果比较的两个值类型不同，比较的结果就是false

	console.log('packt' === true); //false
    console.log('packt' === 'packt'); //true
    var person1 = {name:'John'};
    var person2 = {name:'John'};
    console.log(person1 === person2); //false，不同的对象

### 二.控制结构

1.条件语句

if...else条件语句

 	var num = 0;
    if (num === 1) {
        console.log("num is equal to 1");
    } else {
        console.log("num is not equal to 1, the value of num is " +num);
        //num is not equal to 1, the value of num is 0
    }

	条件判断中使用三元运算
	var num=1;
    if((num === 1)?num--:num++){
        console.log(num);//0
    }

多脚本
var month = 5;
if (month === 1) {
 console.log("January");
} else if (month === 2){
 console.log("February");
} else if (month === 3){
 console.log("March");
} else {
 console.log("Month is not January, February or March");
}

switch（要和不同的值进行比较的时候使用更好）

var month = 5;
switch(month) {
 case 1:
 console.log("January");
 break; 
 case 2:
 console.log("February");
 break;
 case 3:
 console.log("March");
 break;
 default:
 console.log("Month is not January, February or March");
} 
对于switch语句来说，case和break关键字的用法很重要。
default关键字，在表达式不匹配前面任何一种情形的时候，就执行default中的代码（如果有对应的，就不会执行）

循环（在处理数组元素时会经常用到循环）

var i = 0;
while(i<10)
{
 console.log(i);
 i++;
}

在这里插入图片描述

do…while循环和while循环很相似。区别是在while循环里，先进行条件判断再执行循环体中的代码，而在do…while循环里，是先执行循环体中的代码再判断循环条件。

do…while循环至少会让循环体中的代码执行一次

输出0-9同上的结果
var i = 0;
do { 
console.log(i);
 i++;
} while (i<10)

三.函数

写法：

第一种：没有用到参数或return语句
	function sayHello() {
        console.log('Hello!alice88');//Hello!alice88
    }
    //要执行这个函数，只需要这样调用一下：
    sayHello();

第二种：传递参数给函数。参数是会被函数使用的变量
function output(text) {
       console.log(text);
}
// 我们可以通过以下代码使用该函数：
output('Hello!alice88');//Hello!alice88

第三种：传递任意数量的参数
求和
	function sum(num1, num2) {
        return num1 + num2;
    }
    // 这个函数计算了给定两个数字之和，并返回结果。我们可以这样使用：
    var result = sum(1,2);
    output(result);//3

四.面向对象编程

JavaScript里的对象就是普通名值对的集合。创建一个普通对象有两种方式。
第一种方式是：var obj = new Object();
第二种方式是：var obj = {};
也可以这样创建一个完整的对象：

obj = {
 name: {
 first: 'Gandalf',
 last: 'the Grey'
 },
 address: 'Middle Earth'
};

在面向对象编程（OOP）中，对象是类的实例。一个类定义了对象的特征。我们会创建很多类来表示算法和数据结构。

例如 声明了一个类来表示书：
function Book(title, pages, isbn){
 this.title = title;
 this.pages = pages;
 this.isbn = isbn;
} 

用下面的代码实例化这个类：
var book = new Book('title', 'pag', 'isbn');

然后，我们可以访问和修改对象的属性：
console.log(book.title); //输出书名
book.title = 'new title'; //修改书名
console.log(book.title); //输出新的书名

类可以包含函数。可以声明和使用函数，如下所示：
Book.prototype.printTitle = function(){
 console.log(this.title);
};
book.printTitle(); 

也可以直接在类的定义里声明函数：
function Book(title, pages, isbn){
 this.title = title;
 this.pages = pages;
 this.isbn = isbn;
 this.printIsbn = function(){
 console.log(this.isbn);
 }
}
book.printIsbn();

五.调试工具

Firefox和Chrome都支持调试。这里有一个了解谷歌开发者工具的好教程，地址是
推荐：谷歌开发者工具教程

这里推荐其他几个工具，可以提升编写JavaScript的效率。

 Aptana：这是一个开源的免费IDE，支持JavaScript、CSS3和HTML5以及其他语言
（http://www.aptana.com）。
 WebStorm：这是一个很强大的IDE，支持最新的Web技术和框架。它不是免费的，但你
可以下载一个30天试用版本体验一下（http://www.jetbrain.com/webstorm）。
 Sublime Text：这是一个轻量级的文本编辑器，可以自定义插件。可以买它的许可证来支
持这个工具的开发，也可以免费使用（试用版不过期），http://www.sublimetext.com/。