數組：
var arr = [10, 20, '30', 'xyz'];
arr.length;//num
arr.indexOf(10); //返回引索位置
arr.match(RegEx); //匹配正則返回匹配成功的字符，或者查找某一個指定的值并返回找到的值
PS: 匹配正則時若匹配多個字符時，返回值為一個數組，數組的[0]為匹配文本，后面的是子文本。
arr.slice(0, 3); //截取部分元素組成一個新的數組
[10,20,'30']
arr.push('a','b'); //在末尾加上相應元素
arr.find(); //在數組中查找第一個滿足指定測試的值
arr.pop(); //返回最后一個元素并刪除
arr.unshift('a', 'b');//在頭部加上一些元素
arr.shift(); //刪掉第一個元素
arr.sort(); //排序，按ascii值小到大，并非數字大小
arr.sort(function (a,b) { return a>b?-1:1; });
// 對數字排序
arr.reverse(); //反轉
arr.splice(1, 2); //從指定位置開始刪除或添加元素
arr=arr.concat(arr2); //連接兩個數組
arr.join(','); //用指定字符連接元素
字符串：
var message = '你好, ' + name + ', 你今年' + age + '歲了!';
//或者var message = `你好, ${name}, 你今年${age}歲了!`;
s.toLowerCase(); //轉換為小寫
s.toUpperCase(); //轉換為大寫
s.substring(0,5); //返回指定區間子串
'\' 為轉換符-----'I\'m \"OK\"!';
類型轉換：
var number='a';
number.charCodeAt(); //97 字符轉換為ascii
String.fromCharCode(96); //'a' ascii轉換為字符
String(12); //'12' 轉換為字符串
Number('12'); // 12 轉換為數字
Number('ab');//NaN
var str=[1,2,3];
str.toString(); //"1,2,3" 轉換為字符串對象,等價于String(str)
Number((0.8-0.6).toFixed(1)); //0.2
//在js中對于浮點的運算默認精度為循環小數0.8-0.6=0.2000000001；
//要進行轉換，toFixed(1)，保留一位小數
對象：
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
xiaoming.hasOwnProperty('name');//對象中是否有某一屬性
xiaoming['屬性名為變量']=1; //給對象添加一個屬性及鍵值
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯
'name' in xiaoming;//------------對象中是否存在某個屬性
循環
for...in------------------------循環一個對象所有屬性
eg:
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
alert(key); // 'name', 'age', 'city'
}
Map
Map是一組鍵值對的結構，具有極快的查找速度。
結構為：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循環遍歷集合
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: 指向當前元素的值
// index: 指向當前索引
// array: 指向Array對象本身
alert(element);
});//依次輸出'A', 'B', 'C'
注意
- 名字是不固定，但是位置是固定的，如果只關心element，那么給forEach一個參數就可以，如果需要index，那么就要給兩個參數，如果需要array，就要給三個，也就是這三個參數的含義是定好的。
函數
arguments——關鍵字，指向當前函數傳入的所有參數，類似Array。
常被用來：
獲取參數長度：arguments.length;
獲取具體參數：arguments[ i ];
rest參數——接受所有傳入參數但在function中沒有寫出來的參數，類似array。
eg：計算很多參數的和
function sum(...rest){
if( arguments.length===0){
return 0;
}
var sum=0;
for(var i of rest){
sum = sum+i;
}
return sum;
}
高階函數
map
對數組中每一個元素（字符串、數字、對象）操作
實例
對數組的處理
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]
重新格式化數組中的對象
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
這個函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算，其效果就是：
arr = [x1, x2, x3, x4];
arr.reduce(f) = f(f(f(x1, x2), x3), x4)
實例 (求和）
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
reduce的完整句法是 arr.reduce( callback, [ initiaValue])
- 其中callback可接受四個參數（括起來），分別是：
accumulator當前累積值
currentValue是正在處理的當前元素
currentIndex是當前元素的索引
array是被處理的數組。參數的位置是固定的，名稱隨便取。 - 其中[initiaValue]用做第一個參數的值。如果要reduce之后的返回是一個數組，則要寫成‘[]’否則會報錯。
filter
與map和reduce結構類似，根據返回值的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來排序。也可以寫出高階的形式，定義它的排序方法。
實例（降序）
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是一個被廣泛應用的庫，將所有功能封裝在jQuery這個全局變量中。
$ ===jQuery;
基本選擇器
1、id選擇器
// 查找<div id="abc">:
var div = $('#abc');
2、按標簽查找
var ps = $('p'); // 返回所有<p>節點
ps.length; // 數一數頁面有多少個<p>節點
3、類選擇器
var a = $('.red'); // 所有節點包含`class="red"`都將返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
當一個結點有多個class時
var a = $('.red.green'); // 注意沒有空格！
// 符合條件的節點：
// <div class="red green">...</div>
// <div class="blue green red">...</div>
4、按屬性查找：
id和class都可以稱作屬性，除此之外還有其他如name/p等
^——開頭
$——結尾
var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name屬性值以with結尾的DOM
// 例如: name="startswith", name="endswith"
5、組合查找
var emailInput = $('input[name=email]');
// 不會找出<div name="email">，只會選擇input中的元素
6、多項選擇器
用“，”組合起來
$('p.red,p.green'); // 把<p class="red">和<p class="green">都選出來
層級選擇器
如果兩個元素之間具有層級關系，可以用空格隔開來表示（從上到下）。
子選擇器：如果層級關系是父子關系，則用‘>’來連接
$('ul.lang li');
$('ul.lang>li.lang-javascript'); // 可以選出[<li class="lang-javascript">JavaScript</li>]
函數
find() //查找某結點的指定子節點
parent() //查找其上層結點
next() //下一個
prev() //上一個
filter() //過濾符合條件的結點
map() //對若干結點進行操作，參見map的用法
first() ;//獲取第一個結點
last(); //獲取最后一個結點
slice(); //參見js的一些基本用法
可以看看JSON的相關內容，經常會用的
學習網站JSON--W3school
等等等
應用
用jQuery獲取結點之后呢？就可以對結點進行操作，如：修改結點內容、更改結點的CSS樣式、獲取結點信息、操作表單、添加/刪除結點等等。
詳情可參考廖雪峰的教程
事件
一般用于與用戶的交互，事件一般是鼠標或鍵盤的響應。
鼠標事件
click: 鼠標單擊時觸發；
dblclick：鼠標雙擊時觸發；
mouseenter：鼠標進入時觸發；
mouseleave：鼠標移出時觸發；
mousemove：鼠標在DOM內部移動時觸發；
hover：鼠標進入和退出時觸發兩個函數，相當于mouseenter加上mouseleave。
例如：
a.on('click', function () {
alert('Hello!');
});
//或者
a.click(function(){
……
});
//on方法用來綁定一個事件，我們需要傳入事件名稱和對應的處理函數。
鍵盤事件
鍵盤事件僅作用在當前焦點的DOM上，通常是<input>和<textarea>。
keydown：鍵盤按下時觸發；
keyup：鍵盤松開時觸發；
keypress：按一次鍵后觸發。
其他常用事件
submit：當<form>提交時觸發
ready：當頁面被載入并且DOM樹完成初始化后觸發，可用來寫其他的初始化。
PS: ready事件可直接寫
$(function () {
// init...
});
change：當<input> ,<select>, <textarea>的內容改變是觸發
focus：當DOM獲得焦點時觸發；
blur：當DOM失去焦點時觸發；
動畫
原理非常簡單：我們只需要以固定的時間間隔（例如，0.1秒），每次把DOM元素的CSS樣式修改一點（例如，高寬各增加10％），看起來就像動畫了。
var div = $('#test');
div.hide(3000);//在3秒內消失
div.show('slow'); //在0.6內顯示
div.toggle();//根據當前狀態決定的英文show()還是hide()。
div.slideUp(3000); // 在3秒鐘內逐漸向上消失
div.slideDown(3000); // 在3秒鐘內逐漸向上出現
div.fadeOut('slow'); // 在0.6秒內淡出
其他
var a = prompt("......"); //輸出“......”，并用a獲取需要輸入的值
typeof(a); //獲取數值類型
apply與call的用法
兩者都是為了動態改變this而出現的，區別在于接受參數的方式不同，call需要把參數按順序傳遞進去，而apply則是把參數放在數組里傳遞。
var func = function(arg1, arg2) {
};
func.call(this, arg1, arg2);//
func.apply(this, [arg1, arg2]);
