javaScript複習

時間  2019-11-13
標籤 javascript 複習 欄目 JavaScript 简体版
原文   原文鏈接

ES6字符串方法：css

 //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"));//true
    console.log(str.endsWith("abf"));//true
    console.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)html

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

### boolean
將其餘數據類型轉換成布爾類型 
Boolean() 0,null,NaN,undefined,""->false 其餘所有爲true
!"a"->!後面的轉換成布爾類型，而後再取反
!!"a"->爲了轉換成布爾類型es6

### null undefined
null 如今沒有值但之後會有值 本來應該有值，但沒有值
undefined 歷來沒有存在過ajax

### 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 從右每每求數組的累計的值app

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

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);//6
    fn();//16
    obj.fn();//64
    console.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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程