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


Posted in Javascript onJune 07, 2016

数据类型

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);

以上内容是小编给大家介绍的JavaScript语言精粹经典实例(整理篇)的全部叙述,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 #Javascript
javascript基础知识
Jun 07 #Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 #Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 #Javascript
javascript如何定义对象数组
Jun 07 #Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 #Javascript
bootstrap输入框组代码分享
Jun 07 #Javascript
You might like
PHP错误提示的关闭方法详解
2013/06/23 PHP
php实现简单文件下载的方法
2015/01/30 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python字符串详细介绍
2015/05/09 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Django 重写用户模型的实现
2019/07/29 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
社团个人总结范文
2015/03/05 职场文书
欠条格式范本
2015/07/03 职场文书
中秋节随笔
2015/08/15 职场文书
运动会广播稿20字
2015/08/19 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android