javaScript復習

ES6字符串方法:

 //console.log(String.prototype);var str = "abcdefabc";//console.log(str.includes("a"));//結果true//console.log(str.includes("abf"));//結果false//console.log(str.startsWith("d"));//false//console.log(str.startsWith("abc"));//true//console.log(str.startsWith("d",3));//true
console.log(str.endsWith("c"));//trueconsole.log(str.endsWith("abf"));//trueconsole.log(str.endsWith("d", 4));//true
console.log("a".repeat(3));//將字符重復n次console.log("abc".repeat(3));//將字符重復n次//includes 查看是否包含某個字符或字符串//startsWith  查看是否以某個字符或字符串開頭 默認是索引0開始查找 第二個參數表示設置查找的位置,//endsWith 查看是否以某個字符或字符串結尾 默認查找到最后 第二個參數表示設置的是查找結果的索引(不包含索引這一項)//repeat()  重復某個字符或字符串  參數指重復的次數
ES6字符串方法

?

JS數據類型:(編程時的原材料,得用的非常熟)
JS是弱類型的語言,它的數據類型是由值決定的。
var 變量名 = 值
- 基本數據類型:number,string,boolean,null,undefined
- 引用數據類型:對象(object,array,regExp,Date,Math)和函數(function)

### number類型的數據
- 定義:小數,整數(正整數,負整數,0),NaN(not a number)
- 四則運算(+-*/%)失敗時
- 將其他數據類型強制轉換number類型失敗時 Number() parseInt() parseFloat()
Number()?
true->1 false->0
null ->0;
undefined->NaN
""->0
其他字符串,只要有一個字符(不包括小數點)不是數字,則轉換結果是NaN
Number("10.5")->10.5 Number("10.5a")->10.5

parseInt() 將字符串中整數部分提取出來,若第一個字符不是數字,則結果是NaN
parseFloat 將字符串中整數和小數部分都提取出來,若第一個字符不是數字,則結果是NaN

運算符優先級:
算術運算符(+-*/%)>比較運算符(>= <= == !=)>邏輯運算符(邏輯與&& 邏輯或||)>賦值運算符(=)

### 字符串類型
字符串常用方法
charAt() 參數:索引 通過索引找到對應的字符
charCodeAt() 參數:索引 通過索引找到對應字符的ASCII碼值
indexOf() 參數:字符 1.查找字符中是否有這個字符,若找不到則返回-1
2.找到,則返回對應字符的索引?
lastIndexOf()?

substr(n,m) 從索引n截取m個
substring(n,m) 從索引n截取到索引m(包前不包后)
slice(n,m)從索引n截取到索引m (包前不包后) 可以設置負數索引 = 負數索引+length 倒數第幾個
toUpperCase() 轉換成大寫
toLowerCase() 轉換成小寫
split(":") 按照指定的字符,將數組拆分成數組的每一項
split("") var str = "abc" str.split("") ->["a","b","c"]
split() 將字符串完整的放入數組中 str.split()->["abc"];
split() 參數也可以是正則
replace() 匹配和替換字符
match() 參數:字符串或正則 將匹配的字符串在數組中輸出
search() 參數:字符串或正則
trim() 去掉字符串的收尾空格 若想所有瀏覽器都支持 寫個正則匹配收尾空格

es6的字符串方法
includes 查看是否包含某個字符或字符串
startsWith 查看是否以某個字符或字符串開頭 默認是索引0開始查找 第二個參數表示設置查找的位置,
endsWith 查看是否以某個字符或字符串結尾 默認查找到最后 第二個參數表示設置的是查找結果的索引(不包含索引這一項)
repeat() 重復某個字符或字符串 參數指重復的次數

### boolean
將其他數據類型轉換成布爾類型?
Boolean() 0,null,NaN,undefined,""->false 其他全部為true
!"a"->!后面的轉換成布爾類型,然后再取反
!!"a"->為了轉換成布爾類型

### null undefined
null 現在沒有值但以后會有值 原本應該有值,但沒有值
undefined 從來沒有存在過

### object類型
- 需要從多方面描述事物,對象是多種數據類型的復合載體
- 增刪改查 遍歷?
- 操作時都能以[]或.方式操作
- 若屬性名數字只能以[]方式操作
es6提供的方法
Object.is() 查看對象是否相等(檢測是否是指向的同一個引用地址)
Object.is({},{}) false

Object.assign() 合并對象
var obj1 = {name:"lily"};
var obj2 = {age:10};
Object.assign(obj1,obj2);
Object.assign({},obj1,obj2);
Object.assign({},obj1);//拷貝對象
Object.assign(obj1) //還是表示obj1,沒有意義
{...obj1,...obj2} 合并對象

### 數組
es5方法(包含迭代方法)
原有數組改變
push() 往數組的末尾添加內容 返回值: 添加內容后的長度
pop() 刪除數組的最后一項 返回值:刪除的內容
shift() 刪除數組的第一項 返回值:添加內容后的長度
unshift() 往數組的開始位置添加內容 返回值: 添加內容后的長度
splice(n,m,x) 從索引n開始刪除m個,用x的內容替換刪除的內容 返回值:把刪除的內容放在新數組中返回,若沒有刪除的內容返回值是空數組
reverse() 反向排列
sort(function(a,b){ 排序,不傳參表示按ASCII碼值進行排序,若傳參則按照自定義規則排序
return a-b/b-a
return a.localCompare(b)/b.localCompare(a);
))
原有數組沒有改變
join("&") 按照指定的字符將數組拼接成字符串
toSting() 將數組轉換成字符?
concat() 合并數組
indexOf() 查找數組中是否有這一項 若沒有則返回-1,若有則返回數組這一項的索引
lastIndexOf()
slice(n,m) 截取數組 從索引n截取到索引m(包前不包后)

迭代方法
forEach() 遍歷數組沒有返回值
map() 遍歷數組并能修改數組的內容有返回值
some() 數組中只要有一個成立,則結果true,只有都不成立才為false
[1,2,3].some(function(item){
return item>1
})
every 都成立才返回true,只要有一個不成立則返回false
[1,2,3].every(function(item){
return item>1
})
reduce() 從左往右求數組的累計的值
reduceRight 從右往往求數組的累計的值

es6方法
find() 返回滿足條件這一項,找到了則方法中止運行
[1,2,3].find(function(item){
return item>1
})
findIndex() 返回滿足條件這一項的索引,找到了則方法中止運行
[1,2,3].findIndex(function(item){
return item>1
})

Array.from() 將類數組轉換成數組
Array.of() 將參數(一個數或一組數)轉換成數組?
copyWithin(target,start,end) 拷貝數組的部分內容覆蓋到指定的位置(會覆蓋原來的內容)
target:指拷貝內容放置的起始索引
start :獲取內容的起始位置索引
end:獲取內容的結束位置索引

遍歷數組
for(let value of ary){}
for(let key of ary.keys()){}
for(let ele of ary.entries()){}

### 函數
函數定義:
1.開辟一個堆內存,假設引用地址是FFF000;
2.將函數體的內容以字符串的形式存在堆內存里
3.將引用地址賦值給函數名,函數名就代表了整個函數
函數執行:
1. 開辟一個私有的作用域
2. 形參賦值
3. 變量提升(對var關鍵字和function關鍵字進行聲明和定義 es6沒有變量提升)
4. 代碼從上往下執行

return(返回值):
1.函數遇到return無條件中止運行
2.return可寫可不寫,根據需求來
3.若沒寫return 或return后沒有值,則函數的返回值是undefined?
4.return 后面的不預解釋,但是return下面的還是要預解釋

### 私有作用域 - 變量的查找
私有變量:形參,帶var關鍵字
函數內部不帶var關鍵字查找變量的順序:
var num = 10;
function fn(){
console.log(num);
}
fn();
- 先看是否是私有的,若是私有的則與外界無關
- 若不是私有的,則往上級作用域查找,若沒找到繼續往上級查找,直到找到window,若還沒找到則報錯
上級作用域跟函數定義有關,跟函數執行無關

### this
1. 看函數運行時,前面有沒有點,點前面是誰,this就是誰,若沒有則this是window
2. 自執行函數中的this是window
3. 事件綁定函數中的this是綁定的元素
4. 定時器中this是window
5. 構造函數中的this是實例
6. 箭頭函數中沒有this,this需要往上級作用域中查找

### 原型?
- 所有的函數都有個屬性叫prototype,指向于原型對象
- 默認的原型上有個屬性叫constructor,指向所屬的類
- 所有的對象上都有個屬性叫__proto__,它指向于所屬類的原型
繼承:
call繼承:父類的私有屬性
原型繼承:父類的公有的屬性 父類私有屬性會污染子類的原型
寄生式組合繼承:解決了原型繼承的問題

### 回調函數
定義:將一個函數的定義作為參數傳給另一個函數時,這個函數就稱為回調函數
- 回調函數的執行次數
- 回調函數的參數
- 回調函數有沒有返回值
- 回調函數里的this關鍵字?
封裝map,bind方法封裝 敲熟
### 回流和重繪

### DOM映射

###js盒子模型
- 13個js盒子模型相關屬性
其中11個只能取讀,只有scrollLeft和scrollTop既可以獲取可以設置
- 獲取任意的css屬性(不管是行內,內嵌,外鏈)
window.getComputedStyle(ele,null)[attr]
ele.currentStyle[attr]
掌握封裝getCss,setCss,setGroup,css 敲熟
- 瀏覽器兼容性處理方案
- 1.try...catch... 捕獲瀏覽器異常
- 2.屬性判斷的方式?
window.getComputedStyle
"getComputedStyle" in window
- 3.檢測數據類型的方式?
typeof "getComputedStyle" == "function"
ary instanceOf Array
Object.prototype.toString.call([])=="[object Array]"
- 4.constructor?
> 原型對象若被重寫,則constructor有可能不準
- 5.檢測瀏覽器的方式
navigator.userAgent.indexOf("MSIE 8.0")?
/MSIE [6-8]\.0/.test(navigator.userAgent)

### 正則
- 掌握常用的元字符
\d \w \s \b \n .?
\D \W \S \B
^ $
(a|z) a或z
[a-z]
[^a-z]
[az]
+ 1到多次
* 0到多次
? 0次或1次
{n} 匹配n次
{n,}至少匹配n次
{n,m} 至少匹配n次,最多匹配m次
g 全文查找
m 換行查找
i 忽視大小寫

正則 test/exec
字符串 split/replace/match

regExecAll()->把匹配的內容放入數組的返回
1.求出現次數最多的字母和次數(2種)
2.格式化url的queryString部分,把參數放在對象中返回?name=zf&age=9 {name:"zf",age:9}
3.格式化時間,按照模板返回指定格式的時間

### jquery中常用的方法
1.核心
2.ajax
3.效果
4.屬性
5.文檔處理
6.篩選
7.CSS
8.事件 on off

?

?

?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>var num = 3;var obj = {num:5,fn : (function(){this.num*=2;var num = 4;return function(){this.num *=2;num *= 4;alert(num);}})()};var fn = obj.fn;alert(num);//6fn();//16obj.fn();//64console.log(window.num,obj.num);//12,10
</script>
2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>function Father(x,y){this.x = x;this.y = y;}Father.prototype.fn = function(){console.log("fn")};function Son(x,y,z){this.z = z;Father.call(this,x,y);//把父類的私有屬性拷貝到子類的實例上
    }//Son.prototype.__proto__ = Father.prototype; 最優的方案 忽視IE//Son.prototype  = new Father(); //Son.prototype作為Father類的實例,這樣Son.prototype原型對象上的__proto__就指向Father類型的原型Son.prototype = Object.create(Father.prototype);//寄生式組合繼承 最優的var s = new Son(10,20,30);//console.log(s.fn());
    console.log(s);//var f = new Father(10,20);//console.log(f.x);//先在實例上,找到則往所屬類的原型查找,再不到再往父類的原型上查找....一直找到Object類的原型,若還沒找到則返回undefined
</script>
3
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>class Father{constructor(x,y){this.x = x;this.y = y;}fn(){console.log("fn");}static fn2(){ /*靜態方法,是定義在Father類上的方法*/console.log("fn2")}}class Son extends Father {constructor(x,y,z){super(x,y);//Father.call(x,y); 子類調用父類私有的屬性 只要寫extends了,super()必須寫this.z = z;}writeCss(){console.log("writeCss");}}//es6繼承 父類的公有屬性,私有屬性,靜態屬性var s = new Son(10,20,30);//必須要加new運行不能當成普通函數,只能是類
     s.fn();console.log(s.x);
</script>
4
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>//柯里化函數的思想 (預處理的思想機制)//bind 改變方法中的this關鍵字,返回一個函數的定義function fn(a,b,c){console.log(this);return a+b+c}var res =  fn.bind({},10,20); //返回值是一個小函數console.log(res(30));//返回的小函數運行時才會讓方法fn運行//bind方法運行:1.bind的第一個參數保存下來  2.把從第二個參數開始的實參保存下來  3.返回值是一個函數定義//bind返回值運行 :1.改變fn的this關鍵字  2.把所有的參數傳給fn 3.讓fn執行
Function.prototype.myBind = function(context){var context = context ||window;var arg1 = [].slice.call(arguments,1);var that = this;return function(){var arg2 = [].slice.call(arguments);var arg = [].concat(arg1,arg2);  //參數合并后的數組return  that.apply(context,arg);}}var res2 = fn.myBind({},10,20);console.log(res2(30));</script>
bind

?

轉載于:https://www.cnblogs.com/Lia-633/p/9873102.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/450345.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/450345.shtml
英文地址,請注明出處:http://en.pswp.cn/news/450345.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

STS的安裝教程-鵬鵬

STS全稱Spring Tools Suite。 簡介&#xff1a;Spring Tools Suite (STS)其實就是一個被包裝過的Eclipse&#xff0c;主要用于快速的開發Spring項目&#xff0c;我們不用再去編輯繁瑣的xml配置文件&#xff0c;而是由工具自動生成。STS有兩種安裝方式&#xff0c;一種是直接在E…

final的用法

final 根據程序上下文環境&#xff0c;Java關鍵字final有“這是無法改變的”或者“終態的”含義&#xff0c;它可以修飾非抽象類、非抽象類成員方法和變量。你可能出于兩種理解而需要阻止改變&#xff1a;設計或效率。 final類不能被繼承&#xff0c;沒有子類&#xff0c;f…

愛恨交織的編程語言 是什么吸引了你

摘要&#xff1a;每門編程語言都有自身獨特的地方&#xff0c;那么為什么有些語言會一直存活在我們周圍&#xff0c;而有些語言卻逐漸被人淡忘&#xff0c;是什么吸引你&#xff1f; 每名程序員至少知道兩門以上的編程語言&#xff0c;有些甚至不是所謂的編程語言&#xff08;比…

Unable to parse the date: 2017-12-30 日期格式轉化失敗

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 報錯如題&#xff0c; 日期格式轉化失敗。 原因&#xff1a;參數是2017-09-23 這種格式&#xff0c;代碼卻是寫的轉為&#xff1a; &qu…

linux邏輯卷管理

2019獨角獸企業重金招聘Python工程師標準>>> 摘要&#xff1a; Linux用戶安裝Linux操作系統時遇到的一個最常見的難以決定的問題就是如何正確地給評估各分區大小&#xff0c;以分配合適的硬盤空間。而遇到出現某個分區空間耗盡時&#xff0c;解決的方法通常是使用符…

[LeedCode]921. 使括號有效的最少添加

題目描述&#xff1a; 給定一個由 ( 和 ) 括號組成的字符串 S&#xff0c;我們需要添加最少的括號&#xff08; ( 或是 )&#xff0c;可以在任何位置&#xff09;&#xff0c;以使得到的括號字符串有效。從形式上講&#xff0c;只有滿足下面幾點之一&#xff0c;括號字符串才是…

abstract的一些用法

&#xfeff;&#xfeff;abstract&#xff08;抽象&#xff09;修飾符&#xff0c;可以修飾類和方法 1&#xff0c;abstract修飾類&#xff0c;會使這個類成為一個抽象類&#xff0c;這個類將不能生成對象實例&#xff0c;但可以做為對象變量聲明的類型&#xff0c;也就是編譯…

github 如何設置項目的語言顯示

github 會根據一個項目文件最多的那個種類的文件顯示為對應的語言項目 如果想讓整個項目顯示為 HTML 項目, 需要進行以下步驟的設置 1.在根目錄下創建一個文件 .gitattributescreate .gitattributes2.在 .gitattributes 內編輯以下內容&#xff1a; *.js linguist-languageHTML…

C++提高進階,你知道多少?

C從零開始 ——何謂編程 引言 曾經有些人問我問題&#xff0c;問得都是一些很基礎的問題&#xff0c;但這些人卻已經能使用VC編一個對話框界面來進行必要的操作或者是文檔/視界面來實時接收端口數據并動態顯示曲線&#xff08;還使用了多線程技術&#xff09;&#xff0c;卻連…

POJ 3352 Road Construction ; POJ 3177 Redundant Paths (雙聯通)

這兩題好像是一樣的&#xff0c;就是3177要去掉重邊。 但是為什么要去重邊呢&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;我認為如果有重邊的話&#xff0c;應該也要考慮在內才是。 這兩題我用了求割邊&#xff0c;在去掉割邊&#xff0c;用DFS縮…

postman界面變成了左右結構怎么辦

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 在左上角 file -- settongs中設置一下&#xff1a;

面向對象階段個人總結

&#xfeff;&#xfeff;面向對象階段的個人總結 我個人對面相對向的總結。我想到了我認為比較好的方法&#xff0c;就是對照每次學習一個大模塊的前的章節目錄進行回顧總結&#xff0c;比如我們這階段學習是面向對象的課程&#xff0c;下面我就來按照章節 目錄進行一個系統…

1.springboot:入門程序

一、Spring Boot 簡介 官網英文&#xff1a; Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can “just run”. We take an opinionated view of the Spring platform and third-party libraries so you can get st…

2018.12.18運算符,分支結構(循環),異常處理,函數

1復習 <!DOCTYPE html><html><head> <meta charset"UTF-8"> <title>復習預習</title> <style> .b { /* 作用域: {}產生的, {作用域開始的標識, }作用域結束的標識 */ /*出現在作用域中的所有內…

javax.ws.rs.NotSupportedException: Cannot consume content type

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 報錯如題&#xff1a;javax.ws.rs.NotSupportedException: Cannot consume content type 解決&#xff1a;使用postman發送 post 請求訪…

java異常預習

java中的異常捕獲結構有try&#xff0c;catch&#xff0c;finally三部分組成。其中&#xff0c;try語句塊存放的是可能發生異常的java語句&#xff1b;catch程序塊在try語句塊之后&#xff0c;用來激發被捕獲的異常&#xff1b;finally語句塊是異常處理結構的最后執行部分&…

【親測有效】Kali Linux無法安裝網易云音樂的解決方案

問題描述 由于 Kali Linux 的內核是基于 Debian 的&#xff0c;我們在安裝網易云音樂的時候更偏向于選擇安裝網易云音樂 v1.1.0 deepin15&#xff08;64位&#xff09; 的包&#xff0c;可是我發現在安裝過程中&#xff0c;無法定位 libqcef1 軟件包&#xff0c;對于很多鐘愛網…

C/C++函數名修飾約定

函數名字修飾&#xff08;Decorated Name&#xff09;方式 函數的名字修飾&#xff08;Decorated Name&#xff09;就是編譯器在編譯期間創建的一個字符串&#xff0c;用來指明函數的定義或原型。 正在裝載數據…… LINK程序或其他工具有時需要指定函數的名字修飾來定位函數的…

設計模式中類之間的關系

設計模式 個人感覺設計模式是程序員的核心技能 &#xff0c;然后看了一些設計模式的書&#xff0c;都是講設計模式的一些理論&#xff0c;放在實現上都有點模糊&#xff0c;后來圖書館看到一本《設計模式的藝術》&#xff0c;感覺很不錯&#xff0c;有一些比較具體且容易理解的…

如何查看jar包的版本號?

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 jar包根目錄里的META-INF目錄下的MANIFEST.MF文件里一般有會記錄版本信息&#xff0c;可以到這個文件里查看 打開Java的JAR文件我們經…