JavaScript 学习总结

JavaScript 学习总结

一.概念

JavaScript是世界上最早流行的语言之一，是一种运行在客户端的脚本语言，但现在JavaScript再也不是简单的脚本语言了，无论前端还是后台，JavaScript都有良好的表现。

二.基本用法

1.位置

HTML 中的 Javascript 脚本代码必须位于 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。

2.字面量

在编程语言中，一般固定值称为字面量，如 3.14。
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

3.变量

在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

4.操作符

一元操作符 ++ –
布尔操作符 && || ！
（除下列值为假外其余皆为真**： false、null、undefined、‘’、0、NaN**）
算术操作符 + - * / %
（JavaScript使用 算术运算符 来计算值）
关系操作符 <> <=>= == === != !==
条件（问号）操作符 ? :
赋值操作符 *= += -+ = /= %=
用赋值运算符给变量赋值

5.语句

JavaScript 语句向浏览器发出的命令。
通常我们在每条可执行的语句结尾添加分号。

6.注释

单行注释：双斜杠 // 后的内容将会被浏览器忽略
多行注释：以 /* 开始，以 */ 结尾。

7.数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

8.函数

函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。

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

9.字母大小写

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

10.数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

三.对象

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。
创建对象有如下两种方式：
（我们常用第二种）
方式一：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();

四.数组

在JS中，数组的每一项可以保存任何类型的数据，数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

（1）创建数组有以下两种方法：

（我们常用第二种）
方式一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);

（2）常用的数组方法如下：

1.元素联合

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

2.堆栈方法：
栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。
ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。
3.队列方法
队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。
由于 push() 是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 shift() ，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。
（由上可知， push、pop操作在数组末，而 unshift、shift操作在数组头；push、unshift压入而pop、shift弹出。）
4.反转数组项
5.链接方法
6.分片方法
slice() ，它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。
在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
7.splice方法
splice() 方法它可对数组如下3种操：
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。 例如， splice(0,2) 会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数） 和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如， splice(2,0,‘red’,‘green’) 会从当前数组的位置 2 开始插入字符串 ‘red’ 和 ‘green’ 。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起 始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如， splice (2,1,‘red’,‘green’) 会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串 ‘red’ 和 ‘green’ 。

五.链式语法

链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 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();

六.闭包

闭包是什么?闭包是Closure，这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是：

函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配

当在一个函数内定义另外一个函数就会产生闭包。

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