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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類