JavaScript 精粹

来源:http://www.cnblogs.com/lianzhibin/archive/2016/11/18/6079591.html
-Advertisement-
Play Games

數據類型 JavaScript 是 弱類型 語言，但並不是沒有類型，JavaScript可以識別下麵 7 種不同類型的值： 基本數據類型 Boolean Number String null undefined Symbol Object Array RegExp Date Math ... 可以使 ...


數據類型

JavaScript 是 弱類型 語言，但並不是沒有類型，JavaScript可以識別下麵 7 種不同類型的值：

基本數據類型

  1. Boolean
  2. Number
  3. String
  4. null
  5. undefined
  6. Symbol

Object

  1. Array
  2. RegExp
  3. Date
  4. Math
  5. ...

可以使用 typeof 判斷數據類型，操作符返回一個字元串，但並非返回的所有結果都符合預期

typeof false // "boolean"
typeof .2 // "number"
typeof NaN // "number"
typeof '' // "string"
typeof undefined // "undefined"
typeof Symbol() // "symbol"

typeof new Date() // "object"
typeof [] // "object"

typeof alert // "function"

typeof null // "object"
typeof not_defined_var // "undefined"

變數

在應用程式中，使用變數來來為值命名。變數的名稱稱為 identifiers

聲明

  1. 使用關鍵字 var ：函數作用域
  2. 使用關鍵字 let ：塊作用域 (block scope local variable)
  3. 直接使用：全局作用域
var global_var = 1;

function fn () {
  var fn_var = 2;
  
  if(fn_var > 10){
    let block_var = 3;
    global_var2 = 4;
  }
}

只聲明不賦值，變數的預設值是 undefined

const 關鍵字可以聲明不可變變數，同樣為塊作用域。對不可變的理解在對象上的理解需要註意

const num = 1;
const obj = {
  prop: 'value'
};

num = 2; // Uncaught TypeError: Assignment to constant variable.
obj['prop'] = 'value2';

obj = []; // Uncaught TypeError: Assignment to constant variable.

變數提升

JavaScript中可以引用稍後聲明的變數，而不會引發異，這一概念稱為變數聲明提升(hoisting)

console.log(a); // undefined

var a = 2;

等同於

var a;

console.log(a);

a = 2;

函數

一個函數就是一個可以被外部代碼調用(或者函數本身遞歸調用)的 子程式

定義函數

  1. 函數聲明
  2. 函數表達式
  3. Function 構造函數
  4. 箭頭函數
function fn(){}

var fn = function(){}

var fn = new Function(arg1, arg2, ... argN, funcBody)

var fn = (param) => {}

arguments

  1. arguments:  一個包含了傳遞給當前執行函數參數的類似於數組的對象
  2. arguments.length: 傳給函數的參數的數目
  3. arguments.caller: 調用當前執行函數的函數
  4. arguments.callee: 當前正在執行的函數
function foo() {
  return arguments;
}
foo(1, 2, 3); // Arguments[3] 
// { "0": 1, "1": 2, "2": 3 }

rest

function foo(...args) {
  return args;
}
foo(1, 2, 3); // Array[3]
// [1, 2, 3]

function fn(a, b, ...args){
  return args;
}

fn(1, 2, 3, 4, 5); // Array[3]  
// [3, 4, 5]

default

函數的參數可以在定義的時候約定預設值

function fn (a = 2, b = 3) {
  return a + b;
}


fn(2, 3); // 5

fn(2); // 5

fn(); // 5

對象

JavaScript 中對象是可變 鍵控集合 (keyed collections)

定義對象

  1. 字面量
  2. 構造函數
var obj = {
  prop: 'value',
  fn: function(){}
};

var date = new Date();

構造函數

構造函數和普通函數並沒有區別，使用 new 關鍵字調用就是構造函數，使用構造函數可以 實例化 一個對象

函數的返回值有兩種可能

  1. 顯式調用 return 返回 return 後表達式的求值
  2. 沒有調用 return 返回 undefined
function People(name, age) {
  this.name = name;
  this.age = age;
}

var people = new People('Byron', 26);

構造函數返回值

  1. 沒有返回值
  2. 簡單數據類型
  3. 對象類型

前兩種情況構造函數返回構造對象的實例，實例化對象正是利用的這個特性

第三種構造函數和普通函數表現一致，返回 return 後表達式的結果

prototype

  1. 每個函數都有一個 prototype 的對象屬性，對象內有一個 constructor 屬性，預設指向函數本身
  2. 每個對象都有一個 __proto__ 的屬性，屬相指向其父類型的 prototype
function Person(name) {
  this.name = name;
}

Person.prototype.print = function () {
  console.log(this.name);
};

var p1 = new Person('Byron');
var p2 = new Person('Casper');

p1.print();
p2.print();

this 和作用域

作用域可以通俗的理解

  1. 我是誰
  2. 我有哪些馬仔

其中我是誰的回答就是 this

馬仔就是我的局部變數

this 場景

普通函數

  1. 嚴格模式：undefined
  2. 非嚴格模式: 全局對象
  3. Node: global
  4. 瀏覽器: window

構造函數：對象的實例

對象方法：對象本身

call & apply

  1. fn.call(context, arg1, arg2, …, argn)
  2. fn.apply(context, args)
function isNumber(obj) {
  return Object.prototype.toString.call(obj) === '[object Number]';
}

Function.prototype.bind

bind 返回一個新函數，函數的作用域為 bind 參數

function fn() {
  this.i = 0;

  setInterval(function () {
    console.log(this.i++);
  }.bind(this), 500)
}

fn();

() => {}

箭頭函數是 ES6 提供的新特性，是簡寫的 函數表達式，擁有詞法作用域和 this 值

function fn() {
  this.i = 0;

  setInterval(() => {
    console.log(this.i++);
  }, 500)
}

fn();

繼承

在 JavaScript 的場景，繼承有兩個目標，子類需要得到父類的：

  1. 對象的屬性
  2. 對象的方法
function inherits(child, parent) {
  var _proptotype = Object.create(parent.prototype);
  _proptotype.constructor = child.prototype.constructor;
  child.prototype = _proptotype;
}

function People(name, age) {
  this.name = name;
  this.age = age;
}

People.prototype.getName = function () {
  return this.name;
}

function English(name, age, language) {
  People.call(this, name, age);
  this.language = language;
}

inherits(English, People);

English.prototype.introduce = function () {
  console.log('Hi, I am ' + this.getName());
  console.log('I speak ' + this.language);
}

function Chinese(name, age, language) {
  People.call(this, name, age);
  this.language = language;
}

inherits(Chinese, People);

Chinese.prototype.introduce = function () {
  console.log('你好，我是' + this.getName());
  console.log('我說' + this.language);
}

var en = new English('Byron', 26, 'English');
var cn = new Chinese('色拉油', 27, '漢語');

en.introduce();
cn.introduce();

ES6 class 與繼承

"use strict";

class People{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  getName(){
    return this.name;
  }
}

class English extends People{
  constructor(name, age, language){
    super(name, age);
    this.language = language;
  }

  introduce(){
    console.log('Hi, I am ' + this.getName());
    console.log('I speak ' + this.language);
  }
}

let en = new English('Byron', 26, 'English');

en.introduce();

語法

label statement

loop:
    for (var i = 0; i < 10; i++) {
      for (var j = 0; j < 5; j++) {
        console.log(j);
        if (j === 1) {
          break loop;
        }
      }
    }

console.log(i);

語句與表達式

var x = { a:1 };

{ a:1 }

{ a:1, b:2 }

立即執行函數

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

高階函數

高階函數是把函數當做參數或者返回值是函數的函數

回調函數

[1, 2, 3, 4].forEach(function(item){
  console.log(item);
});

閉包

閉包由兩部分組成

  1. 函數
  2. 環境：函數創建時作用域內的局部變數
function makeCounter(init) {
  var init = init || 0;

  return function(){
    return ++init;
  }
}

var counter = makeCounter(10);

console.log(counter());
console.log(counter());

典型錯誤

for (var i = 0; i < doms.length; i++) {
  doms.eq(i).on('click', function (ev) {
    console.log(i);
  });
}

​

for (var i = 0; i < doms.length; i++) {
  (function (i) {
    doms.eq(i).on('click', function (ev) {
      console.log(i);
    });
  })(i);
}

惰性函數

function eventBinderGenerator() {
  if (window.addEventListener) {
    return function (element, type, handler) {
      element.addEventListener(type, hanlder, false);
    }
  } else {
    return function (element, type, handler) {
      element.attachEvent('on' + type, handler.bind(element, window.event));
    }
  }
}

var addEvent = eventBinderGenerator();

柯里化

一種允許使用部分參數生成函數的方式

​

function isType(type) {
  return function(obj){
    return Object.prototype.toString.call(obj) === '[object '+ type +']';
  }
}

var isNumber = isType('Number');

console.log(isNumber(1));
console.log(isNumber('s'));

var isArray = isType('Array');

console.log(isArray(1));
console.log(isArray([1, 2, 3]));
function f(n) {
  return n * n;
}

function g(n) {
  return n * 2;
}

console.log(f(g(5)));

function pipe(f, g) {
  return function () {
    return f.call(null, g.apply(null, arguments));
  }
}

var fn = pipe(f, g);

console.log(fn(5));

尾遞歸

  1. 尾調用是指某個函數的最後一步是調用另一個函數
  2. 函數調用自身，稱為遞歸
  3. 如果尾調用自身，就稱為尾遞歸

遞歸很容易發生"棧溢出"錯誤（stack overflow）

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

但對於尾遞歸來說，由於只存在一個調用記錄，所以永遠不會發生"棧溢出"錯誤

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

柯里化減少參數

function currying(fn, n) {
  return function (m) {
    return fn.call(this, m, n);
  };
}

function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

const factorial = currying(tailFactorial, 1);

factorial(5) // 120

反柯里化

Function.prototype.uncurry = function () {
  return this.call.bind(this);
};

push 通用化

var push = Array.prototype.push.uncurry();

var arr = [];

push(arr, 1);
push(arr, 2);
push(arr, 3);

console.log(arr);

 轉載

     
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript---正則表達式
    在JavaScript中，RegExp對象表示正則表達式，用來對字元串進行匹配。 一、兩種定義方法： 1、直接量法： /pattern/attribute 2、對象法： new RegExp(pattern,attribute); 參數說明： pattern是一個字元串，指定了正則表達式的模式或其他 ...
  • NodeJs之child_process
    一:child_process child_process是NodeJs的重要模塊。幫助我們創建多進程任務，更好的利用了電腦的多核性能。 當然也支持線程間的通信。 二:child_process的幾個API 非同步： child_process.exec(command[, options][, c ...
  • JavaScript變數和作用域
    認識JavaScript中的變數 JavaScript中的變數有兩種類型，一種是基本類型、一種是引用類型。 + 基本數據類型：Defined，Null，Boolean，Number，String。註意String是屬於基本數據類型，這不同於其他高級語言。 + 引用類型即對象，包括內置對象和自定義對象 ...
  • 11月19號上午，css樣式表
    恢復內容開始 樣式表： 一。內聯：寫在body中 直接在內容的標簽中添加style屬性：例如<div style="...">1234</div> 二。內嵌：寫在head中 一般寫在標題標簽的後面，添加<style type="text/css"></style>標簽,p為需要改變的標簽 三。外部樣 ...
  • angularJS--ngSelect
    給select綁定ng-model時，經常會出現首選第一個option值是undefined。如圖， 源代碼 主要原因是：ng-model綁定的值“newSupplier.companytype”沒有初始值。瀏覽器自動解析為undefined。 瀏覽器解析代碼： 解決辦法： 只要在js文件中，初始化 ...
  • JS，數組小練習
    var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];要求將數組中的0項去掉，將不為0的值存入一個新的數組，生成新的數組 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <tit ...
  • JS無縫滾動
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li { margin: 0; padding: 0; list-style-type: none; } ...
  • 深入探析koa之非同步回調處理篇
    在上一篇中我們梳理了koa當中中間件的洋蔥模型執行原理，並實現了一個可以讓洋蔥模型自動跑起來的流程管理函數。這一篇，我們再來研究一下koa當中非同步回調同步化寫法的原理，同樣的，我們也會實現一個管理函數，是的我們能夠通過同步化的寫法來寫非同步回調函數。 1. 回調金字塔及理想中的解決方案 我們都知道ja ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類