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

JavaScript 權(quán)威指南-學(xué)習(xí)筆記

• JavaScript是一門高級、動態(tài)、解釋型變成語言，非常適合面向?qū)ο蠛秃瘮?shù)式編程風(fēng)格。
• JavaScript的變量是無類型的。
• JavaScript和Java除了表面語法大致相似，它與Java是完全不同的兩門變成語言。

Hello World

Node：交互式模式輸出Hello World

node console.log("Hello World")

Node：非交互式環(huán)境輸出Hello World

1.新建hello.js文件

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

3.使用node 執(zhí)行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打開開發(fā)者工具窗口，就可以在控制臺看到輸出信息。

聲明-關(guān)鍵詞

• const：聲明常量（不可被修改，重新賦值會拋出TypeError）
• let：聲明變量（在同一作用域中重新聲明相同變量會導(dǎo)致語法錯誤）推薦使用此方法聲明變量
• var：聲明變量（使用var聲明的變量作用域?yàn)榘瘮?shù)，而非包含塊，這可能會導(dǎo)致隱含的錯誤，推薦使用let）
• funtion：定義函數(shù)
• class：定義類

對象

創(chuàng)建對象

• 直接創(chuàng)建對象

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

• 使用new創(chuàng)建對象

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

• 使用Object.create(）創(chuàng)建對象

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

  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屬性值

寫入對象屬性

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

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()：從一個對象向另一個對象復(fù)制屬性

數(shù)組

創(chuàng)建數(shù)組

• 直接創(chuàng)建

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

• Array（）創(chuàng)建數(shù)組

  • 不傳參調(diào)用

    let a = new Array(); // 創(chuàng)建一個空數(shù)組

  • 創(chuàng)建一個數(shù)組，并指定長度

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

  • 創(chuàng)建兩個或更多個數(shù)組元素，或傳入一個非數(shù)值元素

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

• Array.of（）創(chuàng)建一個帶元素的數(shù)組

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

• Array.from（）通過字符串創(chuàng)建一個數(shù)組

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

讀寫數(shù)組

• 使用 [] 操作符訪問數(shù)組元素

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

  超出索引會返回undefined，不會報(bào)錯

添加和刪除數(shù)組元素

• 數(shù)組添加元素

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

flat()和flatMap()打平數(shù)組

• 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]

數(shù)組轉(zhuǎn)換為字符串

• 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但沒有元素的數(shù)組 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"

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

數(shù)組迭代

1.數(shù)組循環(huán)var officers = [s{ id: 20, name: 'Captain' },{ id: 24, name: 'General' },{ id: 56, name: 'Admiral' },{ id: 88, name: 'Commander' }];2.for循環(huán)，使用率最高，也是最基本的一種遍歷方式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循環(huán)forEach中傳入要執(zhí)行的回調(diào)函數(shù)，函數(shù)有三個參數(shù)。第一個參數(shù)為數(shù)組元素(必選)，第二個參數(shù)為數(shù)組元素索引值(可選)，第三個參數(shù)為數(shù)組本身(可選)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循環(huán)for...in循環(huán)可用于循環(huán)對象和數(shù)組,推薦用于循環(huán)對象,可以用來遍歷JSONvar officersIds = [];for(var key in officers){console.log(key); // 0 1 2 3 返回?cái)?shù)組索引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循環(huán)可循環(huán)數(shù)組和對象，推薦用于遍歷數(shù)組。for...of提供了三個新方法：key()是對鍵名的遍歷；value()是對鍵值的遍歷；entries()是對鍵值對的遍歷；let arr = ['科大訊飛', '政法BG', '前端開發(fā)'];for (let item of arr) { console.log(item); // 科大訊飛 政法BG 前端開發(fā)}// 輸出數(shù)組索引for (let item of arr.keys()) { console.log(item); // 0 1 2}// 輸出內(nèi)容和索引for (let [item, val] of arr.entries()) { console.log(item + ':' + val); // 0:科大訊飛 1：政法BG 2：前端開發(fā)}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]// 輸出數(shù)組索引for(var item of officers.keys()){console.log(item); // 0 1 2 3}// 輸出內(nèi)容和索引for (let [item, val] of officers.entries()) {console.log(item) // 0 1 2 3 輸出數(shù)組索引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循環(huán)map() 會返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。map() 方法按照原始數(shù)組元素順序依次處理元素。map 不修改調(diào)用它的原數(shù)組本身。map()中傳入要執(zhí)行的回調(diào)函數(shù)，函數(shù)有三個參數(shù)。第一個參數(shù)為數(shù)組元素(必選)，第二個參數(shù)為數(shù)組元素索引值(可選)，第三個參數(shù)為數(shù)組本身(可選)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() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。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]

本文僅供學(xué)習(xí)交流使用，如侵立刪！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。