javascript知識回顧

時間  2019-12-06
標籤 javascript 知識 回顧 欄目 JavaScript 简体版
原文   原文鏈接
1.知識點
  • 原型、原型鏈、做用域、閉包
  • DOM操做、Ajax、事件綁定
  • 版本管理、模塊化、打包工具
  • 頁面渲染、性能優化
2.列如
3.變量類型和計算
1.變量類型
(1).值類型（null、undefined、boolean、number、string,symbol）
var a=100; 
var b=a;
 a=200;
console.log(b); //100
(2).引用類型(對象、數組、函數)
var a={age：20}；
var b=a;
b.age=21;
console.log(b); // 21
(3).typeof運算符詳解
typeof undefined //undefined
typeof 'abc' // string
typeof 123 //number
typeof true // boolean
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log // function
2.變量計算-強制類型轉換
(1).字符串拼接
var a=100+10; // 110
var b=100+'10'; // '10010'
(2).==運算符
100 == '100'  // true
0 == ''  // true
null == undefined // true
(3).if語句
1.var a=true;
if(a){
   //....
}
2.var b=100;
if(b){
    //...
}
3.var c= '';
if(c){
    //..
}
(4).邏輯運算
console.log(10 && 0); // 0
console.log('' || 'abc'); // 'abc'
console.log(!window.abc); // true
3.什麼時候使用===和==
if(obj.a == null){
      //這裏至關於obj.a === null || obj.a===undefined,簡寫形式
      //這是jQuery源碼中推薦的寫法
}
4.JS中的內置函數
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
5.如何理解JSON
JSON.stringify({a:10,b:20})
JSON.parse('{"a":10,"b":20}')
複製代碼
4.原型和原型鏈
  • 如何準確判斷一個變量是數組類型？
  • 寫一個原型鏈繼承的例子？
  • 描述new一個對象的過程？
  • zepto(或其它框架)源碼中如何使用原型鏈？
  • 構造函數
  • 構造函數-擴展
  • 原型規則和示例
  • 原型鏈
  • instanceof
1.構造函數
function Foo(name,age){
      this.name=name;
      this.age=age;
      this.class="class-1; //return this //默認有這一行 } var f = new Foo("小林"，20)；//建立多個對象 2.構造函數-擴展 (1).var a={}實際上是var a=new Object()的語法糖。 (2).var a=[]實際上是var a=new Array()的語法糖。 (3).function Foo(){....}實際上是var Foo=new Fuction(...) (4).使用instanceof判斷一個函數是不是一個變量的構造函數。 3.原型規則和示例 (1).全部的引用類型（數組、對象、函數 ），都具備對象特性，便可自由擴展屬性（除了"null"以外）。 var obj={};obj.a=100; var arr=[];arr.a=100; function fn(){} fn.a=100; (2).全部的引用類型（數組、對象、函數 ），都有一個__proto__屬性，屬性值是一個普通的對象。 console.log(obj.__proto__); console.log(arr.__proto__); console.log(fn.__proto__); (3).全部的函數，都有一個prototype屬性，屬性值也是一個普通的對象。 console.log(fn.prototype) (4).全部的引用類型（數組、對象、函數 ）,__proto__屬性值指向它的構造函數的"prototype"屬性值。 console.log(obj.__proto__===Object.prototype); (5).當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的prototype）中尋找。 //構造函數 function Foo(name, age){ this.name=name; } Foo.prototype.alertName = function(){ alert(this.name); } //建立示例 var f=new F('小林'); f.printName=function(){ console.log(this.name); } //測試 f.printName(); f.alertName(); f.toString();//要去f.__proto__.__proto__中查找。 複製代碼

6.png 

循環對象自身的屬性
for (var item in f) {
    if(f.hasOwnProperty(item)){
        console.log(item);
    }
}
複製代碼
5.instanceof
1.f instanceof Foo的判斷邏輯是：
2.f的__proto__一層一層往上，可否對應到Foo.prototype。
3.再試着判斷f instanceof Object。
複製代碼
如何正確判斷一個變量是數組類型
var arr = [];
arr instanceof Array // true
typeof arr // Object, typeof是沒法判斷是不是數組的
複製代碼
寫一個原型鏈繼承的例子
// 動物
function Aniaml () {
    this.eat = function () {
        console.log('animal eat')
    }
}

// 狗
function Dog () {
    this.bark = function () {
        console.log('dog bark')
    }
}

Dog.prototype = new Animal()

var hashiqi = new Dog()
複製代碼
描述new一個對象的過程
  • 新生成了一個對象
  • 連接到原型
  • 綁定 this
  • 返回新對象
function create() {
    // 建立一個空的對象
    let obj = new Object()
    // 得到構造函數
    let Con = [].shift.call(arguments)
    // 連接到原型
    obj.__proto__ = Con.prototype
    // 綁定 this，執行構造函數
    let result = Con.apply(obj, arguments)
    // 確保 new 出來的是個對象
    return typeof result === 'object' ? result : obj
}
複製代碼
6.原型繼承實例
1.function Elem(id) {
          	this.elem = document.getElementById(id);
          }
          Elem.prototype.html = function (val){
          	var elem = this.elem;
          	if(val){
          		elem.innerHTML = val;
          		return this; //鏈式操做
          	}else {
          		return elem.innerHTML;
          	}
          }
          Elem.prototype.on = function (type, fn){
          	var elem = this.elem;
          	elem.addEventListener(type, fn);
          }
          var div1 = new Elem('box');
//        console.log(div1.html());
//         div1.html('<p>2222</p>');
//         div1.on("click", function(){
//         	   alert("111");
//         })
            div1.html('<p>2222</p>').on("click", function(){
           	   alert("this.text()");
           })
複製代碼

######7.做用域和閉包javascript

 
1.執行上下文
(1).範圍:一段<script>或者一個函數。
(2).全局：變量定義、函數聲明。一段<script>。
(3).函數：變量定義、函數聲明、this、argument、函數
(4).函數聲明和函數表達式的區別。
console.log(a);  //undefined
var a = 100;

fn('zhangsan')  // 'zhangsan'   20
function fn(name) {
      age=20;
      console.log(name,age);
      var age;
}
2.this指向
(1).this要執行時才能確認值，定義時沒法確認
(2).場景
1.做爲構造函數執行
function Foo(name){
    this.name=name;
}
var f=new Foo("小林")

2.做爲對象屬性執行
var obj = {
      name:"A",
      printName: function(){
            console.log(this.name);
     }
}
obj.printName()

3.做爲普通函數執行
function fn(){
      console.log(this)//window
}
fn()

4.call、Apple、bind
function fn1(name, age){
      alert(name);
      console.log(this)//window
}
fn1.call({x:100}, "zhangsan", 20);//{x:100}this指向
fn1.apple({x:100}, ["zhangsan", 20]);//{x:100}this指向
var fn2 = function(name, age){
      alert(name);
      console.log(this);
}.bind({y:200})
fn2('zhangsan', 20)


var a={
    name: "A",
    fn: function(){
          console.log(this.name);
    }
}
a.fn() // this===a
a.fn.call({name:'B'}) // this ==={name: 'B'}
var fn1 = a.fn;
fn1 // this===window
3.做用域
(1).沒有塊級做用域。
if(true){
     var name="zhangsan";
}
console.log(name);
(2).只有函數和全局做用域。
var a=100;
function fn(){
      var a=200;
      console.log('fn', a);
}
console.log('global', a);
fn();
(3).做用域鏈
var a=100;
function fn(){
    var b=200;
    console.log(a)//當前做用域沒有定義的變量，即「自由變量」
    console.log(b)
}
4.閉包
(1).閉包的使用場景
1.函數做爲返回值。
function f1(){
    var a=10;
    return function (){
         console.log(a)//自由變量，父做用域尋找
   }
}
var f =f1();
var a=2000;
f();// 10

2.函數做爲函數傳遞。
function f1(){
    var a=10;
    return function (){
         console.log(a)//自由變量，父做用域尋找
   }
}
var f =f1();
function f2(fn){
    var a=200;
    fn();
}
f2(f1);
複製代碼
建立10個標籤點擊的時候彈出來對應的序號
var i;
for (i = 0; i<10; i++) {
    (function (i){
        var a = document.createElement('a');
        a.innerHTML = i + '<br>';
        a.addEventListener('click', function(e){
            e.preventDefault();
            alert(i);
        })
        document.body.appendChild(a)
    })(i)
}
複製代碼
實際開發中閉包的應用
// 閉包實際應用中主要用於封裝變量，收檢權限
 function isFirstLoad () {
     var list = [];
     return function (id) {
         if (list.indexOf(id) >= 0) {
             return false;
         } else {
             list.push(id);
             return true;
         }
     }
 }
 
 // 使用
 var firstLoad = isFirstLoad();
 firstLoad(10) // true
 firstLoad(10) // false
 firstLoad(20) // true 
複製代碼
8.異步和單線程
  • 同步和異步的區別是什麼？分別舉一個同步和異步的例子？
  • 一個關於setTimeout的筆試題
  • 前端使用異步的場景有哪些？
  • 什麼是異步（對比同步）？
  • 異步和單線程？
1.什麼時候須要異步
(1).在可能發生等待的狀況。
(2).等待過程當中不能像alert同樣阻塞程序運行。
(3).所以，因此的'等待的狀況'都須要異步。
2.異步的場景
(1).定時任務：setTimeout,setInverval。
(2).網絡請求：ajax請求，動態<img>加載。
(3).事件綁定
3.同步和異步的區別是什麼
(1).同步會阻塞代碼執行，而異步不會。
(2).alert是同步，setTimeout是異步。
4.異步和單線程
(1).執行第一行，打印100；
(2).執行setTimeout後，傳入setTimeout的函數會被暫存起來，不會當即執行（單線程的特色，不能同時幹兩件事）
(3).執行最後一行，打印300
(4).待全部程序執行完，處於空閒狀態時，會立馬看有沒有暫存起來的要執行。
(2).發現暫存起來的setTimeout中的函數無需等待時間，就當即過來執行。

複製代碼
9.日期、Math、數組api、對象api
題目
  • 獲取2017-06-10格式的日期
  • 獲取隨機數，要求是長度一直的字符串格式
  • 寫一個能遍歷對象和數組的通用forEach函數
獲取2017-06-10格式的日期:
function formatDate(dt) {
    if(!dt) {
        dt = new Date();
    }
    let year = dt.getFullYear();
    let month = dt.getMonth()-1;
    let data = dt.getDate();
    month = month < 10 ? ('0' + month) : '';
    data = data < 10 ? ('0' + data) : '';
    return year + '-' + month + '-' + data; //強制類型轉換
}
let dt = new Date();
let formtDate = formatDate(dt);
console.log(formatDate())
複製代碼
  • 獲取隨機數，要求是長度一直的字符串格式
let rand = Math.random();
let rand1 = rand + '0000000000';
let rand2 = rand1.slice(0, 10);
console.log(rand2);
複製代碼

23.png

1.日期css

18.png
2.Math (1).獲取隨機數Math.random()。 3.數組api

19.png 

1.forEach
var arr=[1,2,3];
arr.forEach(function(item, index){
        //遍歷數組的全部元素
         console.log(index, item);
})
2.every
var arr=[1,2,3];
var result=arr.every(function (item, index){
      //用來判斷全部的數組元素，都知足一個條件
      if(item < 4){
                 return ture;
        }
})
console.log(result);
3.some
var arr=[1,2,3];
var result = arr.some(function (item, index){
     //用來判斷全部的數組元素，只要有一個知足條件便可
     if(item < 2){
             return ture
      }
})
console.log(result);
4.sort
var arr=[1,4,2,3,5];
var arr2 = arr.sort(function(a, b){
        //從小到大排序
       return a-b;
       //從大到小排序
       // return b-a
})
console.log(arr2);
5.map
var arr=[1,2,3,4];
var arr2 = arr.map(function(item, index){
       //將元素從新組裝，並返回
       return '<b>'+item+'</b>';
})
console.log(arr2);
6.filter
var arr=[1,2,3];
var arr2=arr.filter(function(item, index){
       //經過某一個條件過濾數組
       if(item >= 2){
              return true;
       }
})
console.log(arr2);
複製代碼

4.對象apihtml

20.png
總結：

24.png

######8.JS-WEB-API 前端

25.png

26.png 

1.DOM操做
(1).獲取DOM節點。
(2). ()()()

複製代碼

27.png

28.png

29.png

30.png

31.png

32.png

33.png

34.png
######9.BOM

35.png

36.png

37.png

38.png
######10.事件

39.png

40.png

######10.Ajax交互java

41.png

42.png

43.png
1.狀態碼

44.png

45.png

46.png

47.png

48.png

49.png

50.png

51.png

52.png

53.png

54.png

######11.存儲ajax

55.png

56.png

57.png

58.png
######12.開發工具

59.png

60.png
######13.模塊化

61.png

62.png

63.png

64.png

65.png

66.png

67.png

68.png

69.png

14.前端運行環境
加載資源的形式
加載一個資源的過程
  • 瀏覽器根據DNS服務器獲得域名的IP地址
  • 向這個IP的機器發送http請求
  • 服務器收到、處理並返回http請求
  • 瀏覽器獲得返回內容
瀏覽器渲染頁面的過程
  • 根據HTML結果生成DOM Tree
  • 根據CSS生成CSSDOM
  • 將DOM和CSSDOM整合造成RenderTree
  • 根據RenderTree開始渲染和展現
  • 遇到時javascript，會執行並阻塞渲染
window.onload 和 DOMContentLoader區別
window.onload ： 頁面的所有資源加載完纔會執行，包括圖片、視頻等
DOMContentLoader ： DOM渲染完便可執行，此時圖片、視頻尚未加載完
複製代碼
15.性能優化

1.加載資源優化後端

  • 靜態資源的壓縮合並
  • 靜態資源緩存
  • 使用CDN讓資源加載更快
  • 使用SSR後端渲染，數據直接輸入到HTML中

2.渲染優化api

  • css放前面，js放後面
  • 爛加載（圖片懶加載、下拉加載更多）
  • 減小DOM查詢，對DOM查詢作緩存
  • 減小DOM操做，多個操做盡可能合併在一塊兒執行
  • 事件節流
  • 儘早執行操做（如DOMContentLoaded）
16.安全性

1.XSS跨站請求攻擊數組

2.XSRF跨站點請求僞造瀏覽器

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