聊聊原生JS的那些事兒（常用JavaScript基礎簡單總結）

前言

       首先，什么是原生JS？之前聽過很多入門新手都亂不清這個說法。所謂的“原生JS”，只是國人對JavaScript基礎（ 遵循ECMAscript標准）的一種叫法，原生態JavaScript，不依賴任何類庫，不適用任何框架，純粹是原原本本的JavaScript代碼。從本質上講，JavaScript本身就存在一些自己的類庫，並且非常強大！
       我們常用的“jqurey”就是原生JavaScript的集成框架或插件之一，它對原生js支持比較友好。使用框架編寫的JavaScript代碼，其實並不是你寫的，你只是用了別人集成的工具函數進行總結整理出來的，哈哈！

       原生JS由三部分組成：ECMAscript標准（核心）、文檔對象模型(DOM)、瀏覽器對象模型(BOM)，本文就JavaScript常用基礎做了簡單總結：

Document 文檔對象模型(DOM)

1、獲取DOM元素

  // 通過Id屬性獲取
  console.log(document.getElementById('id'));
  // 通過ClassName（類名）屬性獲取
  console.log(document.getElementsByClassName('class'));
  // 通過TagName（標簽）屬性獲取
  console.log(document.getElementsByTagName('div'));
  // 通過Name屬性獲取
  console.log(document.getElementsByName('name'));

2、類名操作（Class）

className屬性操作
document.getElementById('id').className，該屬性內容會直接改變dom元素上class的值;

  console.log(document.getElementById('id').className);
  // 設置類名
  document.getElementById('id').className='myclass';
  // 設置多個類名，中間用空格隔開
  document.getElementById('id').className='myclass1 myclass2';
  // 清空類名，設置為空
  document.getElementById('id').className='';

classList屬性操作
document.getElementById('id').classList，使用classList會優於使用className，但是classList中的add()和remove()均只能進行單一操作，也就是說不能同時新增或者刪除多個類名；

  // 獲取類名返回一個數組
  console.log(document.getElementById('id').classList); 
  // 獲取類名數組長度（類名的個數）
  console.log(document.getElementById('id').classList.length);
  // 判斷是否存在該class 
  document.getElementById('id').classList.contains('oldClass');
  // 添加class，在class屬性新增，並不是直接替換
  document.getElementById('id').classList.add('newClass');
  // 移除class
  document.getElementById('id').classList.remove('oldClass');
  // 切換class，有則移除，沒有則添加
  document.getElementById('id').classList.toggle('newClass');

3、節點操作（Node）

  // (1)、獲取節點列表（查找）querySelectorAll
  var myNodeList = document.querySelectorAll("div");
  console.log(myNodeList); // 返回一個節點數組（body下面所有的div元素）
  // (2)、修改樣式：所有的div元素背景顏色設置為紅色
  var myNodelist = document.querySelectorAll("div");
  for (var i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
  }
  // (3)、修改節點文本 innerHTML
  document.getElementById('id').innerHTML = 'Hello world!';
  // (4)、修改節點元素樣式 style
  document.getElementById('id').style.display = 'none';
  // (5)、在body中創建節點並在其中添加文本 appendChild 尾部添加
  var newdiv = document.createElement('div'); // 創建元素節點
  var newtext = document.createTextNode('Hello world!'); // 創建文本節點
  newdiv.appendChild(newtext);
  document.body.appendChild(newdiv);
  // (6)、插入節點：將新元素添加到開始位置 insertBefore 起始位置添加
  var node = document.getElementById("id");
  var child = document.getElementById("p1");
  node.insertBefore(child);
  // (7)、獲取子節點列表 childNodes
  var element = document.getElementById('id');
  var childNodes = element.childNodes;
  // (8)、刪除子節點（只能是父級刪子級）removeChild
  element.removeChild(childNodes[0]);
  // (9)、替換子節點 replaceChild
  var para = document.createElement("p");
  var text = document.createTextNode("新建文本");
  para.appendChild(text);
  var parent = document.getElementById("id");
  var child = document.getElementById("p1");
  parent.replaceChild(para,child);

提示： 對於本章節想具體深入詳情了解、學習可參考菜鳥教程[DOM 教程]

ECMAscript 語法基礎

1、JavaScript 數據類型

基本類型（值類型）

字符串（String）；
數字(Number)；
布爾(Boolean)；
為空（Null）；
未定義（Undefined）

  // 字符串
  var str = "string";
  console.log(str); // string
  // 數字
  var num = 123;
  console.log(num); // 123
  console.log(Number(str)); // NaN
  console.log(String(str)); // 123
  // 布爾值
  var x = true;
  var y = false;
  console.log(x); // true 真值
  console.log(y); // false 假值
  // 空值：null 是js中的關鍵字，表示空值
  var data = null;
  console.log(data);
  // 未定義：undefined不是js中的關鍵字，它是一個全局變量，undefined是從null中派生出來的，它類似於NaN、Infinity一樣，一般定為只讀（es5修正），在初始賦值是不推薦此類型賦值。
  var data = undefined;
  var obj = {};
  console.log(data); // undefined
  console.log(obj.item); // undefined

注： ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值。

引用數據類型

對象(Object)；

  var obj = new Object();

數組(Array)；

  var obj = new Array();

函數(Function)；

  var obj = function(){};

2、實例對象

Object對象

  // Object實例對象
  var obj = new Object();
  console.log(typeof(obj)); // object
  console.log(Object.prototype); // 返回 Object 原型對象
  obj.x='123';
  obj['y']='123';
  console.log(obj.valueOf()); // {x: '123', y: '123'} 返回對象本身
  console.log(obj.toString()); // [object Object] 字符串形式
  console.log(obj.hasOwnProperty('x')); // true 判斷當前對象是否存在某個屬性
  console.log(obj.propertyIsEnumerable('x')); // true 判斷當前對象的某個屬性是否可枚舉

Array對象

  // Array實例對象（數組）
  var arr = new Array();
  console.log(typeof(arr)); // object
  console.log(Array.isArray(arr)); // true 判斷實例對象是否為數組
  console.log(arr.length); // 0 判斷數組長度
  arr.push('123'); // 在數組末端添加一個元素
  arr.push('aa','abc'); // 在數組末端添加多個元素
  arr.unshift('567'); // 在數組首位添加一個元素
  arr.unshift('890','efg'); // 在數組首位添加多個元素
  console.log(arr.valueOf()); //  ['890', 'efg', '567', '123', 'aa', 'abc'] 返回數組本身
  arr.shift(); // 從刪除數組的第一個一個元素，並返回該元素
  console.log(arr.valueOf()); // ['efg', '567', '123', 'aa', 'abc']
  arr.pop(); // 從數組末尾刪除一個元素，並返回該元素
  console.log(arr.valueOf()); // ['efg', '567', '123', 'aa']
  console.log(arr.join()); // efg,567,123,aa 將所有數組成員組成一個字符串返回。如果不提供參數，默認用逗號分隔
  console.log(arr.join('-')); // efg-567-123-aa
  var arr1 = ['a','b','c'];
  console.log(arr.concat(arr1)); //  ['efg', '567', '123', 'aa', 'a', 'b', 'c'] 數組合並：在原數組的末尾添加新數組，然后返回一個新的數組
  console.log(arr.reverse()); // ['aa', '123', '567', 'efg'] 反轉排序：顛倒數組中元素的順序，然后返回一個新的數組
  console.log(arr.slice(1,3)); // ['123', '567']
  arr = ['abc','efg','cbd','ppg']
  console.log(arr.sort()); // ['abc', 'cbd', 'efg', 'ppg']
  arr= ['1','4','5','2','6','3'];
  console.log(arr.sort()); // ['1', '2', '3', '4', '5', '6']
  console.log(arr.sort(function(a,b){return b-a})); // ['6', '5', '4', '3', '2', '1']
  arr.map(function); // 數組遍歷（依次執行每個元素 fun）
  arr.forEach(function); // 數組遍歷（依次執行每個元素 fun）
  arr.filter(function);  // 數組遍歷（依次執行每個元素 fun）
  console.log(arr.some()); // 依次執行每個元素，判斷數組成員是否符合某種條件
  console.log(arr.every()); // 依次執行每個元素，判斷數組成員是否符合某種條件
  console.log(arr.reduce()); // 依次處理數組的每個成員，最終累計為一個值，左->右
  console.log(arr.reduceRight()); // 依次處理數組的每個成員，最終累計為一個值，右->左
  console.log(arr.indexOf()); // 元素首次出現的位置，可用來查找數組元素是否存在，存在則返回當前的位置下標，不存在則返回-1
  console.log(arr.lastIndexOf()); // 元素最后出現的位置，，可用來查找數組元素是否存在，存在則返回當前的位置下標，不存在則返回-1

Number對象

  var num = new Number(10);
  console.log(typeof(num)); // object
  // toString() 轉成字符串：如果帶一個數字參數，則轉成該參數的進制，再轉成字符串，不帶參數則默認轉成十進制
  console.log(num.toString()); // 10
  console.log(num.toString(2)); // 1010
  // toFixed() 保留指定位數的小數，例如參數為3則保留兩位小數，轉成字符串
  console.log(num.toFixed(3)); // 10.000
  // toExponential() 科學計數法：帶一個參數（0-20），表示小數的有效位數，超出范圍側報錯RangeError
  console.log(num.toExponential(3)); // 0e+1
  // toPrecision() 轉為指定位數的有效數字
  console.log(num.toPrecision(3)); // 10.0

String對象

  var str = new String('string');
  console.log(typeof(str)); // object
  // 字符串的長度
  console.log(str.length); // 6
  // charAt(index) 獲取指定位置的字符，index表示位置下標
  console.log(str.charAt(2));  // r
  // fromCharCode() 轉成Unicode碼對應的字符串
  var code = String.fromCharCode(65);
  console.log(code);  // A
  // charCodeAt(index) 轉成指定位置字符的Unicode碼
  console.log(str.charCodeAt(3)); // 105 'i'對應的Unicode碼是105
  console.log(str.charCodeAt(25)); // NaN str中不存在第25個字符，所以無法轉換
  // concat(new str) 連接兩個字符串，返回一個新的字符串
  var str1 = 'sasd';
  console.log(str.concat(str1)); // stringsasd
  str = str.concat(str1);
  // slice(start,end) 字符串截取
  console.log(str.slice(1,3)); // tr
  console.log(str.slice(str.length-3,str.length)); // asd 截取字符串最后三個字符
  // substring(start,end) 字符串截取
  console.log(str.substring(1,3)); // tr
  // substr(start,length) 字符串截取
  console.log(str.substr(1,3)); // tri
  // indexOf(s) 查找字符串位置 不存在則返回-1
  console.log(str.indexOf('r')); // 2
  // lastIndexOf(s) 查找字符串位置 不存在則返回-1
  console.log(str.indexOf('r')); // 2
  // trim() 去除字符串兩端的空格
  var newStr = ' newStr  ';
  console.log(newStr.trim()); // newStr
  // toLowerCase() 字符串全部轉為小寫，不改變源字符串，返回新的字符串
  console.log(newStr.toLowerCase()); // newstr
  // toUpperCase() 字符串全部轉為大寫，不改變源字符串，返回新的字符串
  console.log(newStr.toUpperCase()); // NEWSTR
  // localeCompare(str2) 比較兩個字符串：返回一個整數，如果小於0，表示第一個字符串小於第二個字符串；如果等於0，表示兩者相等；如果大於0，表示第一個字符串大於第二個字符串
  var str2 = 'str2';
  console.log(newStr.localeCompare(str2)); // -1
  newStr=newStr.trim();
  console.log(newStr.localeCompare('newStr')); // 0
  console.log(newStr.localeCompare('newSt')); // 1
  // match(regexp) 字符串匹配（查找） regexp可以為正則表達式，將匹配處理的字符組成一個數組，然后返回來
  console.log(newStr.match(/e/g)); // ['e']
  str = 'lonely agin exit lege';
  console.log(str.match(/e/g)); //  ['e', 'e', 'e', 'e']
  // search(str) 字符串查找 返回字符串出現的第一次位置，沒有則返回-1
  console.log(str.search('e')); // 3
  // replace(oldValue,newValue) 字符串替換
  console.log(str.replace('e','ab')); // lonably agin exit lege 默認只會替換第一個
  console.log(str.replace(/e/g,'ab')); // lonably agin abxit labgab 全部替換
  // split() 字符串分割 返回分割后的數組
  console.log(str.split('e')); // ['lon', 'ly agin ', 'xit l', 'g', '']

Math對象

     Math對象?沒印象？哈哈
     Math對象常用於數學計算（數學方法、三角函數）；它並不是一個對象的類，它也沒有構造函數。

三角函數

  // Math.sin()：返回參數的正弦
  console.log(Math.sin(60)); // -0.3048106211022167
  // Math.cos()：返回參數的余弦
  console.log(Math.cos(60)); // -0.9524129804151563
  // Math.tan()：返回參數的正切
  console.log(Math.tan(60)); // 0.320040389379563
  // Math.asin()：返回參數的反正弦（弧度值）
  console.log(Math.asin(60)); // NaN
  // Math.acos()：返回參數的反余弦（弧度值）
  console.log(Math.acos(60)); // NaN
  // Math.atan()：返回參數的反正切（弧度值）
  console.log(Math.atan(60)); // 1.554131203080956

數學任務方法

  var num = -123.456
  var num1 = 456.789
  // Math.abs()：返回參數的絕對值
  console.log(Math.abs(num)); // 123.456
  // Math.ceil()：向上取整，接受一個參數，返回大於該參數的最小整數。
  console.log(Math.ceil(num)); // -123
  // Math.floor()：向下取整
  console.log(Math.floor(num)); // -124
  // Math.max(n,n1,...)：取最大值，可接受多個參數，返回最大值
  console.log(Math.max(1,2,3,4,4,5,2,8,1));  // 8
  // Math.min(n,n1,..)：去最小值，可接受多個參數，返回最小值
  console.log(Math.min(1,2,3,4,4,5,2,8,1));  // 1
  // Math.pow(n,e)：指數運算, 返回以第一個參數為底數、第二個參數為冪的指數值
  console.log(Math.pow(2,3));  // 8 ——> 2^3=8
  // Math.sqrt()：開平方：返回參數值的平方根。如果參數是一個負值，則返回NaN。
  console.log(Math.sqrt(4)); // 2
  console.log(Math.sqrt(16)); // 4
  // Math.log()：返回以e為底的自然對數值。
  console.log(Math.log(13)); // 2.5649493574615367
  // Math.exp()：返回e的指數，也就是常數e的參數次方。
  // Math.round()：四舍五入
  console.log(Math.round(num)); // -123
  // Math.random()：返回0到1之間的一個偽隨機數，可能等於0，但是一定小於1。
  console.log(Math.random()); 0.46221618250258945

JSON對象

JSON.stringify(); 用於將一個值轉為字符串，該字符串應該符合JSON格式
JSON.parse(); 用於將JSON字符串轉化成對象

RegExp對象（正則表達式）

     什么是 RegExp？正則表達式描述了字符的模式對象，當您檢索某個文本時，可以使用一種模式來描述要檢索的內容。簡單的模式可以是一個單獨的字符，更復雜的模式包括了更多的字符，並可用於解析、格式檢查、替換等等，您可以規定字符串中的檢索位置，以及要檢索的字符類型；RegExp 就是這種模式。

  // reg和reg1的表示方法是等價的，都可以做出相同的匹配
  var reg = new RegExp("\\w+");
  var reg1 = /\w+/;
  // 漢字匹配
  /[^\u4E00-\u9FA5]/g
  // 數字匹配
  /\D/g 或者 /[0-9]/g
  // 字母匹配
  /[a-z]/g 或者 /[A-Z]/g

詳情請參考菜鳥教程[JavaScript RegExp對象]

瀏覽器對象模型(BOM)

瀏覽器對象模型：Window 對象、Navigator 對象、Screen 對象、History 對象、Location 對象
Window對象：表示瀏覽器中打開的窗口
Navigator對象：包含有關瀏覽器的信息
Screen對象：包含有關客戶端顯示屏幕的信息
History對象：包含用戶（在瀏覽器窗口中）訪問過的 URL， 它是window對象的一部分，可通過 window.history 屬性對其進行訪問
Location對象：包含有關當前 URL 的信息，它是window對象的一部分，可通過 window.location.xxx 格式的相關屬性對其進行訪問
存儲對象：Web 存儲 API 提供了 sessionStorage （會話存儲） 和 localStorage（本地存儲）兩個存儲對象來對網頁的數據進行添加、刪除、修改、查詢操作

提示：想要深入了解本章節詳情可參考菜鳥教程[Browser對象]