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() 重復某個字符或字符串 參數指重復的次數
?
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>


<!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>


<!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>


<!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>
?