JavaScript语言精粹经典实例(整理篇)

最新推荐文章于 2022-12-28 19:52:59 发布

24号桩

最新推荐文章于 2022-12-28 19:52:59 发布

阅读量219

点赞数

分类专栏： J2EEweb

J2EEweb 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

数据类型

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)

1 2	`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());

典型错误

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

24号桩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语言精粹经典实例(整理篇)

数据类型JavaScript 是弱类型语言，但并不是没有类型，JavaScript可以识别下面 7 种不同类型的值：基本数据类型1.Boolean2.Number3.String4.null5.undefined6.SymbolObject1.Array2.RegExp3.Date4.Math5....可以使用 typeof 判断数据...
复制链接

扫一扫