數(shù)組：

var arr = [10, 20, '30', 'xyz'];
    arr.length;//num
    arr.indexOf(10);     //返回引索位置
    arr.match(RegEx);     //匹配正則返回匹配成功的字符，或者查找某一個(gè)指定的值并返回找到的值
      PS: 匹配正則時(shí)若匹配多個(gè)字符時(shí)，返回值為一個(gè)數(shù)組，數(shù)組的[0]為匹配文本，后面的是子文本。
    arr.slice(0, 3);     //截取部分元素組成一個(gè)新的數(shù)組
                            [10,20,'30']
    arr.push('a','b');   //在末尾加上相應(yīng)元素
    arr.find();          //在數(shù)組中查找第一個(gè)滿足指定測試的值
    arr.pop();           //返回最后一個(gè)元素并刪除
    arr.unshift('a', 'b');//在頭部加上一些元素
    arr.shift();          //刪掉第一個(gè)元素
    arr.sort();           //排序，按ascii值小到大，并非數(shù)字大小
    arr.sort(function (a,b) { return a>b?-1:1;  });
      //  對數(shù)字排序
    arr.reverse();        //反轉(zhuǎn)
    arr.splice(1, 2);     //從指定位置開始刪除或添加元素
    arr=arr.concat(arr2);     //連接兩個(gè)數(shù)組
    arr.join(',');        //用指定字符連接元素

字符串：

var message = '你好, ' + name + ', 你今年' + age + '歲了!';
     //或者var message = `你好, ${name}, 你今年${age}歲了!`;
     s.toLowerCase();     //轉(zhuǎn)換為小寫
     s.toUpperCase();     //轉(zhuǎn)換為大寫
     s.substring(0,5);    //返回指定區(qū)間子串
     '\'  為轉(zhuǎn)換符-----'I\'m \"OK\"!';

類型轉(zhuǎn)換：

var number='a';
number.charCodeAt();   //97  字符轉(zhuǎn)換為ascii
String.fromCharCode(96);  //'a'  ascii轉(zhuǎn)換為字符

String(12);  //'12'  轉(zhuǎn)換為字符串
Number('12'); // 12  轉(zhuǎn)換為數(shù)字
Number('ab');//NaN 

var str=[1,2,3];
str.toString();  //"1,2,3"  轉(zhuǎn)換為字符串對象,等價(jià)于String(str)
Number((0.8-0.6).toFixed(1)); //0.2
     //在js中對于浮點(diǎn)的運(yùn)算默認(rèn)精度為循環(huán)小數(shù)0.8-0.6=0.2000000001；
     //要進(jìn)行轉(zhuǎn)換，toFixed(1)，保留一位小數(shù)

對象：

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個(gè)age屬性
xiaoming.age; // 18
xiaoming.hasOwnProperty('name');//對象中是否有某一屬性
xiaoming['屬性名為變量']=1;   //給對象添加一個(gè)屬性及鍵值
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 刪除一個(gè)不存在的school屬性也不會報(bào)錯(cuò)

'name'  in xiaoming;//------------對象中是否存在某個(gè)屬性

循環(huán)

for...in------------------------循環(huán)一個(gè)對象所有屬性
eg:

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    alert(key); // 'name', 'age', 'city'
}

Map

Map是一組鍵值對的結(jié)構(gòu)，具有極快的查找速度。
結(jié)構(gòu)為：Map( [ [ key, value], [ key, value],...... [ key, value] ])

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

Map的方法有set---添加、has---存在？、get---獲得、delete---刪除

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

for...of循環(huán)遍歷集合

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
    alert(x);
}
for (var x of s) { // 遍歷Set
    alert(x);
}
for (var x of m) { // 遍歷Map
    alert(x[0] + '=' + x[1]);
}

forEach方法

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當(dāng)前元素的值
    // index: 指向當(dāng)前索引
    // array: 指向Array對象本身
    alert(element);
});//依次輸出'A', 'B', 'C'

注意

• 名字是不固定，但是位置是固定的，如果只關(guān)心element，那么給forEach一個(gè)參數(shù)就可以，如果需要index，那么就要給兩個(gè)參數(shù)，如果需要array，就要給三個(gè)，也就是這三個(gè)參數(shù)的含義是定好的。

函數(shù)

arguments——關(guān)鍵字，指向當(dāng)前函數(shù)傳入的所有參數(shù)，類似Array。
常被用來：
獲取參數(shù)長度：arguments.length;
獲取具體參數(shù)：arguments[ i ];

rest參數(shù)——接受所有傳入?yún)?shù)但在function中沒有寫出來的參數(shù)，類似array。
eg：計(jì)算很多參數(shù)的和

function sum(...rest){
    if( arguments.length===0){
        return 0;
    }
    var sum=0;
    for(var i of rest){
        sum = sum+i;
    }
    return sum;
}

高階函數(shù)

map

對數(shù)組中每一個(gè)元素（字符串、數(shù)字、對象）操作
實(shí)例
對數(shù)組的處理

function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

重新格式化數(shù)組中的對象

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], 

// kvArray is still: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

reduce

這個(gè)函數(shù)必須接收兩個(gè)參數(shù)，reduce()把結(jié)果繼續(xù)和序列的下一個(gè)元素做累積計(jì)算，其效果就是：

arr = [x1, x2, x3, x4];
arr.reduce(f) = f(f(f(x1, x2), x3), x4)

實(shí)例 (求和）

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

reduce的完整句法是 arr.reduce( callback, [ initiaValue])

• 其中callback可接受四個(gè)參數(shù)（括起來），分別是：
  accumulator當(dāng)前累積值
  currentValue是正在處理的當(dāng)前元素
  currentIndex是當(dāng)前元素的索引
  array是被處理的數(shù)組。參數(shù)的位置是固定的，名稱隨便取。
• 其中[initiaValue]用做第一個(gè)參數(shù)的值。如果要reduce之后的返回是一個(gè)數(shù)組，則要寫成‘[]’否則會報(bào)錯(cuò)。

filter

與map和reduce結(jié)構(gòu)類似，根據(jù)返回值的true/false過濾一些元素

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

sort

排序，簡單形式arr.sort();//按ASCII來排序。也可以寫出高階的形式，定義它的排序方法。
實(shí)例（降序）

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

jQuery

jQuery是一個(gè)被廣泛應(yīng)用的庫，將所有功能封裝在jQuery這個(gè)全局變量中。
$ ===jQuery;

基本選擇器
1、id選擇器

// 查找<div id="abc">:
var div = $('#abc');

2、按標(biāo)簽查找

var ps = $('p'); // 返回所有<p>節(jié)點(diǎn)
ps.length; // 數(shù)一數(shù)頁面有多少個(gè)<p>節(jié)點(diǎn)

3、類選擇器

var a = $('.red'); // 所有節(jié)點(diǎn)包含`class="red"`都將返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>

當(dāng)一個(gè)結(jié)點(diǎn)有多個(gè)class時(shí)

var a = $('.red.green'); // 注意沒有空格！
// 符合條件的節(jié)點(diǎn)：
// <div class="red green">...</div>
// <div class="blue green red">...</div>

4、按屬性查找：
id和class都可以稱作屬性，除此之外還有其他如name/p等
^——開頭
$——結(jié)尾

var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name屬性值以with結(jié)尾的DOM
// 例如: name="startswith", name="endswith"

5、組合查找

var emailInput = $('input[name=email]'); 
// 不會找出<div name="email">，只會選擇input中的元素

6、多項(xiàng)選擇器
用“，”組合起來

$('p.red,p.green'); // 把<p class="red">和<p class="green">都選出來

層級選擇器
如果兩個(gè)元素之間具有層級關(guān)系，可以用空格隔開來表示（從上到下）。

子選擇器：如果層級關(guān)系是父子關(guān)系，則用‘>’來連接

$('ul.lang li');
$('ul.lang>li.lang-javascript'); // 可以選出[<li class="lang-javascript">JavaScript</li>]

函數(shù)
find() //查找某結(jié)點(diǎn)的指定子節(jié)點(diǎn)
parent() //查找其上層結(jié)點(diǎn)
next() //下一個(gè)
prev() //上一個(gè)
filter() //過濾符合條件的結(jié)點(diǎn)
map() //對若干結(jié)點(diǎn)進(jìn)行操作，參見map的用法
first() ;//獲取第一個(gè)結(jié)點(diǎn)
last(); //獲取最后一個(gè)結(jié)點(diǎn)
slice(); //參見js的一些基本用法

可以看看JSON的相關(guān)內(nèi)容，經(jīng)常會用的
學(xué)習(xí)網(wǎng)站JSON--W3school
等等等

應(yīng)用
用jQuery獲取結(jié)點(diǎn)之后呢？就可以對結(jié)點(diǎn)進(jìn)行操作，如：修改結(jié)點(diǎn)內(nèi)容、更改結(jié)點(diǎn)的CSS樣式、獲取結(jié)點(diǎn)信息、操作表單、添加/刪除結(jié)點(diǎn)等等。
詳情可參考廖雪峰的教程

事件
一般用于與用戶的交互，事件一般是鼠標(biāo)或鍵盤的響應(yīng)。

鼠標(biāo)事件
click: 鼠標(biāo)單擊時(shí)觸發(fā)；
dblclick：鼠標(biāo)雙擊時(shí)觸發(fā)；
mouseenter：鼠標(biāo)進(jìn)入時(shí)觸發(fā)；
mouseleave：鼠標(biāo)移出時(shí)觸發(fā)；
mousemove：鼠標(biāo)在DOM內(nèi)部移動時(shí)觸發(fā)；
hover：鼠標(biāo)進(jìn)入和退出時(shí)觸發(fā)兩個(gè)函數(shù)，相當(dāng)于mouseenter加上mouseleave。
例如：

a.on('click', function () {
    alert('Hello!');
});
//或者
a.click(function(){
  ……
});
//on方法用來綁定一個(gè)事件，我們需要傳入事件名稱和對應(yīng)的處理函數(shù)。

鍵盤事件
鍵盤事件僅作用在當(dāng)前焦點(diǎn)的DOM上，通常是<input>和<textarea>。
keydown：鍵盤按下時(shí)觸發(fā)；
keyup：鍵盤松開時(shí)觸發(fā)；
keypress：按一次鍵后觸發(fā)。

其他常用事件
submit：當(dāng)<form>提交時(shí)觸發(fā)
ready：當(dāng)頁面被載入并且DOM樹完成初始化后觸發(fā)，可用來寫其他的初始化。

PS: ready事件可直接寫
$(function () {
    // init...
});

change：當(dāng)<input> ,<select>, <textarea>的內(nèi)容改變是觸發(fā)
focus：當(dāng)DOM獲得焦點(diǎn)時(shí)觸發(fā)；
blur：當(dāng)DOM失去焦點(diǎn)時(shí)觸發(fā)；

動畫
原理非常簡單：我們只需要以固定的時(shí)間間隔（例如，0.1秒），每次把DOM元素的CSS樣式修改一點(diǎn)（例如，高寬各增加10％），看起來就像動畫了。

var div = $('#test');
div.hide(3000);//在3秒內(nèi)消失
div.show('slow'); //在0.6內(nèi)顯示
div.toggle();//根據(jù)當(dāng)前狀態(tài)決定的英文show()還是hide()。
div.slideUp(3000); // 在3秒鐘內(nèi)逐漸向上消失
div.slideDown(3000); // 在3秒鐘內(nèi)逐漸向上出現(xiàn)
div.fadeOut('slow'); // 在0.6秒內(nèi)淡出

其他

var a = prompt("......"); //輸出“......”，并用a獲取需要輸入的值
typeof(a); //獲取數(shù)值類型

apply與call的用法

兩者都是為了動態(tài)改變this而出現(xiàn)的，區(qū)別在于接受參數(shù)的方式不同，call需要把參數(shù)按順序傳遞進(jìn)去，而apply則是把參數(shù)放在數(shù)組里傳遞。

var func = function(arg1, arg2) {
};

func.call(this, arg1, arg2);//
func.apply(this, [arg1, arg2]);