目錄
- JavaScript 組成部分
- Js的資料型別
- 請指出 JavaScript 宿主物件 (host objects) 和原生物件 (native objects) 的區別?
- JavaScript常見內置物件:
- 創建物件的方法
- 物件的操作
- 常見內置物件及其方法
- 1. array陣列物件
- 2. String字串物件
- 3.Date日期物件
- 4. Math數學物件
- 原型
- prototype,proto,construct,scope的關系與區別
- .call 和 .apply 的區別是什么?
- 作用域
- 作用域鏈
- 閉包
- JavaScript 中 this 是如何作業的
- 什么是 “use strict”; ? 使用它的好處和壞處分別是什么?
- JavaScript的同源策略
- 請你談談Cookie的弊端
- 哪些操作會造成記憶體泄漏?
- 創建函式的方法
- JS中的三種特殊函式
- 事件處理的三種方法=> [事件](https://blog.csdn.net/weixin_51077152/article/details/120366150)
- 事件流,事件冒泡,事件捕獲
- DOM
- BOM
JavaScript 組成部分
1)ECMAScript 核心js js的基礎語法、變數、資料型別、運算子、分支結構、回圈結構、函式、物件、陣列等
2)DOM 檔案物件模型
3)BOM 瀏覽器物件模型
Js的資料型別
- 基本資料型別(5個):number,string,boolean,undefined,null
- 參考資料型別:object物件資料型別,array陣列資料型別,正則運算式,function函式資料型別
- 兩種資料型別的區別:
1) 基本資料型別存盤在堆疊中,占據空間小,大小固定,被頻繁使用,傳送的資料無法改變
2)參考資料型別存盤在堆中,占據空間大,大小不固定,在堆疊中存盤了指標,指標指向堆中的起始地址,值是可變的- 檢測資料型別的方法
1)檢測資料型別的運算子:typeof()
2)instanceof:檢測某個實體是否屬于這個類
3) constructor 獲取當前實體的構造器
4) Object.prototype.toString.call:獲取當前實體的所屬類資訊- null和undefined的區別:兩者并不恒等
- Null:只包含一個值,就是null,表示變數中還沒有被存盤參考型別的資料
2)undefined:宣告變數沒有被初始化或賦值,或根本就沒有定義該變數,默認為undefined
請指出 JavaScript 宿主物件 (host objects) 和原生物件 (native objects) 的區別?
原生(Naitve)物件:除了內置物件,還包括了一些在運行程序中動態創建的物件(Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等物件)
宿主(host)物件:宿主物件不是引擎的原生物件,而是由宿主框架通過某種機制注冊到JavaScript引擎中的物件(DOM和BOM)
JavaScript常見內置物件:
String物件:字串物件,提供了對字串進行操作的屬性和方法,
Array物件:陣列物件,提供了陣列操作方面的屬性和方法,
Date物件:日期時間物件,可以獲取系統的日期時間資訊,
Boolean物件:布爾物件,一個布爾變數就是一個布爾物件,(沒有可用的屬性和方法)
Number物件:數值物件,一個數值變數就是一個數值物件,
Math物件:數學物件,提供了數學運算方面的屬性和方法,
Object物件、RegExp物件正則運算式、 Global物件、Function物件,
創建物件的方法
- 字變數形式
var obj = {
name: 'Tom',
age: 10,
gender: '男'
};
- 構造方法
// 構造方法定義物件
function Student(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
this.play= function () {
console.log("羽毛球");
}
}
var obj=new Student('張三',12,'男');
console.log(obj);
物件的操作
- 增:為物件添加新的屬性和功能
1)點語法:物件.屬性名稱 = 值
2)中括號:物件[‘屬性名稱’] = 值- 刪:洗掉物件中的某個屬性
1)delete 物件名稱.屬性名
2)delete 物件名稱[‘屬性名’];
3)如果洗掉成功,則回傳true、否則回傳false- 改:修改某個屬性的值
1)點語法:物件名稱.屬性名稱 = 新的值
2)中括號:物件名稱[‘屬性名稱’] = 新的值- 查:獲取物件中某個屬性的值,或者呼叫物件中某個方法
1)點語法:物件名稱.屬性名稱、物件名稱.方法名稱();
2)中括號的方式:物件名稱[‘屬性名稱’]、物件名稱’方法名稱’;
3)區別:點語法后面不可以加變數,但是中括號后面可以加變數
注意:如果物件的鍵包含特殊符號,那么只能用中括號
常見內置物件及其方法
1. array陣列物件
- 增
arr.unshift(陣列元素1,陣列元素2,..);陣列頭部增加;回傳增加后陣列的長度
arr.push(陣列元素1,陣列元素2,..);陣列末尾增加;回傳增加后陣列的長度
splice(index, 0 ,item1, item2...)從索引 index 開始增加,增加的內容插入到索引 index 前面;回傳被洗掉的陣列- 刪
arr.shift();一次只能洗掉一個陣列元素,洗掉頭部元素;回傳洗掉的陣列元素
arr.pop();一次只能洗掉一個陣列元素,洗掉尾部元素;回傳洗掉的陣列元素
splice(index, n);從索引 index 開始洗掉n個
splice(index)從索引 index 開始后面的內容全部洗掉- 改
替換
splice(index, n,item1,item2...);從索引 index開始替換 n 個,替換的內容為item1, item2…- 查
- map() 方法:
陣列.map(function(currentValue,index,arr) {});
作用:回傳一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理后的值,- filter方法:
陣列名稱.filter(function(currentValue,index,arr){})
作用:回傳一個新陣列,陣列中的元素是通過檢查指定陣列中符合條件的所有元素,- find方法:
陣列名稱.find(function(currentValue,index,arr){})
作用:回傳通過測驗(函式內判斷)的陣列的第一個元素的值- findIndex方法:
陣列名稱.findIndex(function(currentValue,index,arr))
作用:回傳通過測驗(函式內判斷)的陣列的第一個元素的下標,- some方法:
陣列名稱.some(function(currentValue,index,arr)
作用:用于檢測陣列中的元素是否滿足指定條件(函式提供);回傳false或true- every方法:
陣列名稱.every(function(currentValue,index,arr) {})
作用:用于檢測陣列所有元素是否都符合指定條件(通過函式提供),- includes方法:
陣列.includes(searchElement, fromIndex)
作用用來判斷一個陣列是否包含一個指定的值,回傳false或true- 查找陣列元素
①arr.indexOf(查找的陣列元素,index)
從前往后查找,回傳第一個符合條件的下標;如果查找不到,回傳-1
②arr.lastIndexOf(查找的陣列元素,index)
從后往前查找,回傳后面第一個符合條件的下標;如果查找不到,回傳-1
- 陣列拼接
arr.concat(陣列1,陣列2,..)
使用concat可以實作陣列的克隆,concat()中不傳引數- 陣列的截取
slice(n,m);從索引 n 截取到索引 m 但不包括 m ,原陣列不發生改變- 陣列轉換成字串
arr.join('分隔符'):分隔陣列,將陣列轉換為字串
toString( )把陣列轉成以逗號分隔的字串- 陣列翻轉
arr.reverse();改變原陣列- 陣列排序
arr.sort(function(a, b) {
return a - b;//升序
});
arr.sort(function(a, b) {
return b - a; //降序
});
2. String字串物件
- 增
①字串.padStart(長度,'用來補位的字符');左側補位,將字串擴展到指定的長度
②字串.padEnd(長度,'指定字符'):右側補位,將字串擴展到指定的長度- 刪
string.trim();去掉字串兩端多余的空格- 改
string.replace('舊字串','新字串');替換字串- 查
- 查找字串
indexOf()從前往后找,找到回傳內容的索引,找不到回傳-1;
lastIndexOf()從后往前找,找到回傳內容的索引,找不到回傳-1;
search()配合正則,從前往后查找,回傳第一個符合條件的下標;如果查找不到,回傳-1;
match()配合正則;從前往后查找,回傳符合條件的具體內容;如果查找不到,回傳null- 判斷字串
Includes():判斷字串中是否包含指定的字符
startsWith():判斷字串是否以某個字符開頭
endsWith():判斷字串是否以某個字符結尾- 通過索引查找字符
charAt(index):回傳指定位置的字符
charCodeAt(index):回傳指定位置的字符的Unicode編碼
- 英文字母大小寫的轉換
①toUpperCase():轉換為大寫
②toLowerCase():轉換為小寫- 字串的截取
slice(n,m)從索引n 查找到索引m 但不包括m,slice可以取負值
substring(n,m)從索引n 查找到索引m ,但不包括m, 不可以取負值
substr(n,m)從索引n開始截取m 個- 字串轉換成陣列
split(‘分隔符’)把一個字串分割成字串陣列- 拼接字串
string.concat(str1,str2,...)
3.Date日期物件
- 年月日周
var year = date.getFullYear(); //獲取年份
var year = date.getYear();//回傳距離1900年的年份
var month = date.getMonth();//回傳的月份,
注意,回傳值是0-11,0表示1月,11表示12月
var day = date.getDate(); //回傳天
var week = date.getDay(); //回傳星期,回傳值為0-6,0表示星期日- 時分秒
var hour = date.getHours(); // 回傳小時
var minute = date.getMinutes(); //回傳分鐘
var second = date.getSeconds(); //回傳秒
var time = date.getTime();//距離1970年1月1日0時0分0秒的毫秒值- 回傳日期
var res = date.toLocaleString(); //包含日期和時間
var res = date.toLocaleDateString(); //只包含日期
var res = date.toLocaleTimeString(); //只包含時間
4. Math數學物件
Math.floor() 向下取整
Math.ceil() 向上取整
Math.random() 取0-1之間的隨機小數
注:parseInt(Math.random() * (最大值+1-最小值) + 最小值)取任意數字之間的隨機整數
Math.round() 四舍五入
Math.abs() 取絕對值
Math.pow(x,y) x的y次冪
Math.sqrt() 開平方
Math.max() 取最大值
Math.min() 取最小值
原型
- 解決構造方法中,當屬性值相同時造成的記憶體資源浪費;將屬性值相同的內容放到公共空間中,即‘原型’
- 每個函式中都會有一個屬性——prototype屬性,這個屬性指向了一個物件,這個物件就被稱為原型物件,簡稱原型,
- 如果私有屬性和原型中的屬性的名稱相同,那么私有屬性會將原型中的屬性屏蔽掉
- 原型繼承 的原理:原型鏈查找
1)每個物件的內容會有一個__proto__屬性,這個屬性指向了創建該物件時的原型物件,
2)當利用物件去查找某個屬性的時候,屬性的查找順序是:先從自身的私有屬性中查找,如果私有屬性中有要查找的屬性,則回傳其對應的值,如果私有屬性中沒有要查找的屬性,則沿著__proto__的指向,到原型物件中查找,如果有則回傳其對應的值,
prototype,proto,construct,scope的關系與區別
1)每個物件的內容會有一個__proto__和constructor屬性
2)prototype屬性是函式獨有的屬性,而函式也是物件的一種,所以函式中有_proto_,prototype與constructor三個屬性
3)實體化的物件中不含prototype屬性,物件中的__proto__屬性指向原型物件,找到對應的公有屬性和公有方法
4)constructor屬性指向該物件的建構式
.call 和 .apply 的區別是什么?
- 區別: 引數的傳遞方式不同
1)call的格式:函式.call(借用者,引數1,引數2,引數3...);
2)apply的格式:函式.apply(借用者,[引數1,引數2,引數3...]);- 相同點:
改變函式體內this的指向,函式的第一個引數代表函式體內的this的指向,即擴展函式的作用域范圍
作用域
作用域是在運行時代碼中的某些特定部分中變數,函式和物件的可訪問性,換句話說,作用域決定了代碼區塊中變數和其他資源的可見性
作用域鏈
在每個函式內部都有一個屬性,這個屬性是[[Scope]]屬性,這個屬性是不可以操作的, 該屬性指向了一個集合,這個集合中保存了當前作用域下面變數物件的地址,以及上級作用域下面的變數物件的地址,這個集合就是作用域鏈
閉包
- 定義: 被定義在函式內部的函式,能夠訪問另一個函式作用域中的變數
- 不足:
1)記憶體泄漏:由于閉包會將上級作用域下面的變數物件保存在記憶體中,那么如果程式中有大量的閉包,勢必造成記憶體的資源浪費,即記憶體泄漏(記憶體泄漏指任何物件在不再擁有或需要它之后仍然存在);要手動清理閉包,釋放記憶體
2)this的指向問題:閉包函式是在window作用域下執行的,this指向windows
JavaScript 中 this 是如何作業的
this 永遠指向函式運行時所在的物件,而不是函式被創建時所在的物件,
匿名函式或不處于任何物件中的函式指向 window
什么是 “use strict”; ? 使用它的好處和壞處分別是什么?
“use strict”: "嚴格模式"是一種在JavaScript代碼運行時自動實行更嚴格決議和錯誤處理的方法,
- 優點
● 消除Javascript語法的一些不嚴謹之處,減少一些怪異行為;
● 消除代碼運行的一些不安全之處,保證代碼運行的安全;
● 提高編譯器效率,增加運行速度;
● 為未來新版本的Javascript做好鋪墊- 缺點
嚴格模式改變了語意,依賴這些改變可能會導致沒有實作嚴格模式的瀏覽器中出現問題或者錯誤
JavaScript的同源策略
一段腳本只能讀取來自于同一來源的視窗和檔案的屬性,這里的同一來源指的是主機名、協議和埠號的組合
http,ftp:協議
主機名;localhost
埠名:80:http協議的默認埠
https:默認埠是8083
同源策略帶來的麻煩:ajax在不同域名下的請求無法實作
如果說想要請求其他來源的js檔案,或者json資料,那么可以通過jsonp來解決
請你談談Cookie的弊端
Cookie數量和長度的限制,每個domain最多只能有20條cookie,每個cookie長度不能超過4KB,否則會被截掉,- 安全性問題,如果cookie被人攔截了,那人就可以取得所有的session資訊,即使加密也與事無補,因為攔截者并不需要知道cookie的意義,他只
要原樣轉發cookie就可以達到目的了,- 有些狀態不可能保存在客戶端,例如,為了防止重復提交表單,我們需要在服務器端保存一個計數器,如果我們把這個計數器保存在客戶端,那么 它起不到任何作用,
哪些操作會造成記憶體泄漏?
記憶體泄漏指任何物件在您不再擁有或需要它之后仍然存在,
- setTimeout 的第一個引數使用字串而非函式的話,會引發記憶體泄漏,
- 閉包
- 控制臺日志
- 回圈(在兩個物件彼此參考且彼此保留時,就會產生一個回圈)
創建函式的方法
1. 函式宣告方式
function 函式名稱() {
函式體;
}
2. 函式運算式方式
var 變數名稱 = function() {
函式體;
};
1) 函式運算式方式創建的函式是沒有名稱的函式
2) 變數中存盤的是對函式的參考
3) 函式宣告方式和函式運算式方式的區別,函式宣告方式定義的函式可以在定義之前呼叫該函式,但是函式運算式方式定義的函式,不可以在定義之前呼叫,因為函式宣告方式定義的函式有函式宣告提升操作,而函式運算式方式定義的操作沒有函式宣告提升操作,只有變數宣告提升操作
3. 利用Function構造方法創建函式
var 變數名稱 = new Function(‘引數1’, ‘引數2’, ‘引數3’…);
構造方法Function中的引數可以有多個,那么前面的引數表示函式的形參,最后一個引數表示函式體
呼叫方式為:變數名稱(實參1,實參2,實參3…);
注意:這種方式定義的函式也不可以在定義之前呼叫,因為它也只有變數宣告提升操作
JS中的三種特殊函式
匿名函式,回呼函式,匿名自執行函式
具體內容=>JS的三種特殊函式
事件處理的三種方法=> 事件
- html事件處理程式:以屬性的形式添加在標簽內
- DOM0級事件處理程式:
元素節點.on事件名稱=function(){}- DOM2級事件處理程式(兼容性問題):
元素節點.addEventListener('事件名稱',function(){ })
事件流,事件冒泡,事件捕獲
事件流:所謂事件流,簡單說就是頁面中事件的執行順序, 可以分為兩個部分:事件冒泡、事件捕獲
事件冒泡:從當前元素開始逐步向外擴展(即向根節點),簡單說,事件的執行順序是從小到大,或從內向外
事件捕獲:從根節點開始逐步向當前元素擴展,節點說,事件的執行順序是從大到小,或從外向內
DOM
BOM
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/352706.html
標籤:其他
上一篇:C#WPF資料觸發器


