JavaScript 学习笔记

1、JavaScript 简介

JavaScript 是一种脚本语言，轻量级的编程语言，可插入 HTML 页面的编程代码，可前端可后端，由所有的现代浏览器执行，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript的书写有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，（这两种方法由浏览器解释执行，是以前唯一的方式）。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行。

2、基本语句

发送指令，对象是浏览器，通常在每条可执行的语句结尾添加分号。
示例：

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

语句：if do-while while for for-in for-of break continue switch
语句块需要添加 {}，且for-of、forEach能简洁的遍历集合中的元素

var colors = ['red', 'green', 'blue', 'brown'];	//colors是一个数组
//传统遍历（基本不用了）
for(var i=0;i<colors.length;i++){
  console.log(colors[i]);
}
//for-in，专注下标
for(var c in colors){
  console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
  console.log(c);
}
//高级遍历
colors.forEach(c => console.log(c));
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);

JavaScript 语句标识符

通常以一个语句标识符（保留关键字，不能作变量名使用）为开始，并执行该语句。
下面是 JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环
catch	语句块，在 try 语句块执行出错时执行 catch 语句块
continue	跳过循环中的一个迭代
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块
for	在条件语句为 true 时，可以将代码块执行指定的次数
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作
return	退出函数
switch	用于基于不同的条件来执行不同的动作
throw	抛出（生成）错误
try	实现错误处理，与 catch 一同使用
var	声明一个变量
while	当条件语句为 true 时，执行语句块

3.操作符

我学到了以下字符：

• 一元操作符 ++ --
• 布尔操作符 && || ！

除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN
&&和||都属于 短路操作！

• 算术操作符 + - * / %

示例

var result = 5 + '5'; // 一个数值和一个字符串相加
console.log(result); // '55'
//============================================
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + num1 + num2;// (num1 + num2)，还可使用模板字符串``
console.log(message); // "The sum of 5 and 10 is 510"

• 关系操作符 <> <=>= == === != !==

var x = 5;
console.log(x == 5);
console.log(x == '5');
console.log(x === 5);
console.log(x === '5');

• 条件（问号）操作符 ? :

var max = (num1 > num2) ? num1 : num2;

• 赋值操作符 = += -+ *= /= %=

4.函数

JavaScript中函数可以封装任意多条语句，可在任何地方、任何时候调用执行。
函数结构：

示例：

function sayHi(name, message) {
    console.log('Hello ' + name + ',' + message);
}
sayHi('Gridwang', '你好。');

有参数的函数

带参数的函数与我们学的高级语言函数相似，可以将参数向函数传递，在函数中使用。
下面展示带两个参数的函数结构：

示例：

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

有返回值的函数

和之前所学的高级语言一样用 return 语句就可以返回所要的值。
在使用 return 语句时，函数会停止执行，并返回指定的值。
下面展示有返回值的函数结构：

示例：

function myFunction(a,b)
{
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

5、对象Object

类似于Python 语言中的字典，C 语言中的哈希表，Java语言中的哈希映射，对象能够封装我们需要的方法和数据。

对象定义

可以使用字符来定义和创建 JavaScript 对象

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

创建对象

有如下两种方式，常用第二种：

//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();

工厂模式（更好）：

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

6.数组

创建数组

//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！
console.log(hyBird[3].firstName);

常用的数组方法

元素联合

var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue

堆栈方法

push() 和 pop() 方法，出栈入栈。

var colors = []; // 创建一个数组
var count = colors.push('red', 'green'); // 末尾推入两项
console.log(count); //2
colors.push('black'); // 末尾推入另一项
console.log(colors); //3
var item = colors.pop(); // 末尾弹出最后一项
console.log(item); //'black'
console.log(colors); //2

队列方法（与栈方式不同）

使用 shift() 能够移除数组中的第一个项并返回该项，同时将数组长度减1。

var colors = new Array(); //创建一个数组
colors.push('red', 'green'); //推入两项
console.log(colors); //2
count = colors.push('black'); //推入另一项
console.log(colors); //3
var item = colors.shift(); // 前端弹出第一项
console.log(item); //'red'
console.log(colors);

unshift() 方法

var colors = new Array(); //创建一个数组
var count = colors.unshift('red', 'green'); // 推入两项
console.log(colors);
count = colors.unshift('black'); // 推入另一项
console.log(colors);
var item = colors.pop(); // 取得最后一项
console.log(item); //'green'
console.log(colors);

反转数组

var values = [1, 2, 3, 4, 5];
values.reverse();
console.log(values); //5,4,3,2,1

分片方法

slice() 基于当前数组中的一或多个项创建一个新数组，可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

var colors1 = ['red', 'green', 'blue', 'yellow', 'purple'];
var colors2 = colors1.slice(1);
var colors3 = colors1.slice(2, 4);
var colors4 = colors1.slice(2, 2);//结果是什么？
console.log(colors1);
console.log(colors2);
console.log(colors3);

7.链式语法

让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。

//链式语法
var bird = {//定义对象字面量
  catapult: function() {
    console.log( 'Yippeeeeee!' );
    return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
  }
};
bird.catapult().destroy();//destroy()后还可以再链接吗？

8.闭包

闭包是：函数的局部变量集合，只是这些局部变量在函数返回后会继续存在，是函数的“堆栈”在函数返回后并不释放，这些函数堆栈并不在栈上分配而是在堆上分配，当在一个函数内定义另外一个函数就会产生闭包。

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

var scope = 'global scope';	//全局变量
function checkScope(){
    var scope = 'local scope';	//局部变量
    function f(){
        return scope;
    }
    return f;
}
checkScope()();		//注意此处的使用方法。返回值为local scope而非global scope

9.总结

随着对web学习的不断深入，我对于网页的构建又有了更丰富的框架，是层层递进的，HTML是基础架构，CSS让其更丰富，JavaScript锦上添花。但是对web的学习不能止步于此，还学继续选修此课程，向王勇老师持续请教学习，最后感谢王老师对web教学的辛勤付出，您幸苦了！