本文所有教程及源碼、軟件僅為技術研究。不涉及計算機信息系統功能的刪除、修改、增加、干擾，更不會影響計算機信息系統的正常運行。不得將代碼用于非法用途，如侵立刪！

JavaScript 權威指南-學習筆記

• JavaScript是一門高級、動態、解釋型變成語言，非常適合面向對象和函數式編程風格。
• JavaScript的變量是無類型的。
• JavaScript和Java除了表面語法大致相似，它與Java是完全不同的兩門變成語言。

Hello World

Node：交互式模式輸出Hello World

node console.log("Hello World")

Node：非交互式環境輸出Hello World

1.新建hello.js文件

2.文件寫入：console.log(“Hello World”)

3.使用node 執行hello.js文件

瀏覽器JavaScript控制臺輸出

1.新建hello.js文件并寫入：console.log(“Hello World”)

2.新建hello.html并寫入：

3.在瀏覽器打開hello.html：file:///F:/javascript/%E7%BB%83%E4%B9%A0DEMO/hello.html

F12打開開發者工具窗口，就可以在控制臺看到輸出信息。

聲明-關鍵詞

• const：聲明常量（不可被修改，重新賦值會拋出TypeError）
• let：聲明變量（在同一作用域中重新聲明相同變量會導致語法錯誤）推薦使用此方法聲明變量
• var：聲明變量（使用var聲明的變量作用域為包含函數，而非包含塊，這可能會導致隱含的錯誤，推薦使用let）
• funtion：定義函數
• class：定義類

對象

創建對象

• 直接創建對象

  let empty = {}; //沒有屬性的對象 let point = {x:0, y:0}; //包含兩個屬性的對象

• 使用new創建對象

  let a = new Object(); //創建一個空對象，與{}相同 let b = new Array(); //創建一個空數組，與[]相同 let c = new Date(); //創建一個表示當前時間的日期對象 let d = new Map(); //創建一個映射對象，用于存儲鍵值對

• 使用Object.create(）創建對象

  Object.create(）用于創建一個新對象，使用其第一個參數作為新對象的原型：

  let a = object.create({x: 1, y: 2}); // a繼承屬性x和y a.x + a.y // =>3

讀取對象屬性

要獲取一個對象的值，可以使用（.）或（[]）操作符

let point = {x:0, y:0}; //包含兩個屬性的對象 let a = point.x // 獲取point的x屬性值 let b = point["y"] // 獲取point的y屬性值

寫入對象屬性

要創建或設置屬性，與查詢屬性一樣，可以使用（.）或（[]），只是要把他們放到賦值表達式的左邊

let point = {x:0, y:0}; //包含兩個屬性的對象 point.a = 0; point["b"] = 0;

刪除對象屬性

• delete操作符用于從對象中移除屬性
• delete并不操作屬性的值，而是操作屬性本身
• delete操作符只刪除自身屬性，不刪除繼承屬性

檢查對象屬性

• in

  let o = {x: 1}; "x" in o // =>true: o有自身屬性"x" "y" in o // =>false: o沒有屬性"y" "toString" in o // =>true: o繼承了toString的屬性

• hasOwnProperty().

  對象hasOwnProperty()方法用于測試對象是否有給定名字的屬性，對繼承的屬性返回false

  let o = {x: 1}; o.hasOwnProperty("x"); // =>true: o有自身屬性"x" o.hasOwnProperty("y") // =>false: o沒有屬性"y" o.hasOwnProperty("toString") // =>false: toString是繼承屬性

• object.assign()：從一個對象向另一個對象復制屬性

數組

創建數組

• 直接創建

  let empty = []; // 沒有元素的數組 let primes = [1, 2, 3, 4, 5]; // 有5個數值元素的數組 let misc = [1.1, true, "a",]; // 3種不同類型的元素，最后還有一個逗號

• Array（）創建數組

  • 不傳參調用

    let a = new Array(); // 創建一個空數組

  • 創建一個數組，并指定長度

    let a = new Array(10); // 創建一個指定長度的數組

  • 創建兩個或更多個數組元素，或傳入一個非數值元素

    let a = new Array(5, 4， 3， 2，1, "testing, testing"); // 創建一個指定長度的數組

• Array.of（）創建一個帶元素的數組

  Array.of() // =>[]; 返回沒有參數的空數組 Array.of(10) // =>[10]; 創建只有一個數值元素的數組 Array.of(1,2,3) // =>[1,2,3];

• Array.from（）通過字符串創建一個數組

  var myArr = Array.from("RUNOOB"); // =>[ 'R', 'U', 'N', 'O', 'O', 'B' ]

讀寫數組

• 使用 [] 操作符訪問數組元素

  let a = ["world"]; // 先創建包含一個元素的數組 let value = a[0]; // 讀取元素0 a[1] = 3.14; // 寫入元素1

  超出索引會返回undefined，不會報錯

添加和刪除數組元素

• 數組添加元素

  let a = []; //創建一個空數組 a[0] = "zero"; //添加一個元素 a.push("one"); //在末尾添加一個值

flat()和flatMap()打平數組

• flat()打平一級嵌套

  [1, [2, 3]].flat() //=>[1, 2, 3] [1, [2, [3]]]].flat() //=>[1, 2, [3]]

• flat() 傳參打平多層級嵌套

  let a = [1,[2,[3,4]]]; a.flat(1) //=> [1,2,[3,4]] a.flat(2) //=> [1,2,3,4]

數組轉換為字符串

• join()

  let a = [1, 2, 3]; a.join() //=>"1,2,3" a.join(" ") //=>"1 2 3" a.join("") //=>"123" let b = new Array(10); //長度為10但沒有元素的數組 b.join("-") //=>"---------":包含9個連字符的字符串

• toString()

  [1,2,3].toString() //=>"1,2,3" ["a", "b", "c"].toString() //=>"a,b,c" [1, [2, "c"]].toString() //=>"1,2,c"

如果想把數組的文本內容保存起來以備后用，可以使用JSON.stringify()

數組迭代

1.數組循環var officers = [s{ id: 20, name: 'Captain' },{ id: 24, name: 'General' },{ id: 56, name: 'Admiral' },{ id: 88, name: 'Commander' }];2.for循環，使用率最高，也是最基本的一種遍歷方式var officersIds = [];for(var i=0,len=officers.length;i<len; i++){officersIds.push(officers[i].id);}console.log(officersIds); // [20,24,56,88]3.forEach循環forEach中傳入要執行的回調函數，函數有三個參數。第一個參數為數組元素(必選)，第二個參數為數組元素索引值(可選)，第三個參數為數組本身(可選)var officersIds = [];officers.forEach(function (officer,index,array) {console.log(index); //0,1,2,3,console.log(officer); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(officer.id);});console.log(officersIds); //[20,24,56,88]4.for in循環for...in循環可用于循環對象和數組,推薦用于循環對象,可以用來遍歷JSONvar officersIds = [];for(var key in officers){console.log(key); // 0 1 2 3 返回數組索引console.log(officers[key]); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(officers[key].id);}console.log(officersIds); //[20,24,56,88]5.for of循環可循環數組和對象，推薦用于遍歷數組。for...of提供了三個新方法：key()是對鍵名的遍歷；value()是對鍵值的遍歷；entries()是對鍵值對的遍歷；let arr = ['科大訊飛', '政法BG', '前端開發'];for (let item of arr) { console.log(item); // 科大訊飛 政法BG 前端開發}// 輸出數組索引for (let item of arr.keys()) { console.log(item); // 0 1 2}// 輸出內容和索引for (let [item, val] of arr.entries()) { console.log(item + ':' + val); // 0:科大訊飛 1：政法BG 2：前端開發}var officersIds = [];for (var item of officers) {console.log(item); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(item.id);}console.log(officersIds); // [20,24,56,88]// 輸出數組索引for(var item of officers.keys()){console.log(item); // 0 1 2 3}// 輸出內容和索引for (let [item, val] of officers.entries()) {console.log(item) // 0 1 2 3 輸出數組索引console.log(val);//{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}console.log(item + ':' + val);}6.map循環map() 會返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。map() 方法按照原始數組元素順序依次處理元素。map 不修改調用它的原數組本身。map()中傳入要執行的回調函數，函數有三個參數。第一個參數為數組元素(必選)，第二個參數為數組元素索引值(可選)，第三個參數為數組本身(可選)var arr = [{name:'a',age:'18'},{name:'b',age:'19'},{name:'c',age:'20'}];arr.map(function(item,index) {if(item.name == 'b') {console.log(index) // 1}})7.filterfilter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。array.filter(function(currentValue,index,arr){}, thisValue)var designer = peoples.filter(function (people) {return people.job === "designer";});組合使用var totalScore = peoples.filter(function (person) {return person.isForceUser;}).map(function (choose) {return choose.mathScore + choose.englishScore;}).reduce(function (total, score) {return total + score;}, 0);Array.from()var divs = document.querySelectorAll('div.pane'); var text = Array.from(divs, (d) => d.textContent); console.log("div text:", text);// Old, ES5 way to get array from argumentsfunction() { var args = [].slice.call(arguments);//...}// Using ES6 Array.fromfunction() { var args = Array.from(arguments);//..}var filled = Array.from([1,,2,,3], (n) => n || 0); console.log("filled:", filled); // => [1,0,2,0,3]

本文僅供學習交流使用，如侵立刪！

總結

以上是生活随笔為你收集整理的JavaScript 权威指南-学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。