JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

1、数据类型:JavaScript定义的数据类型有字符串、数字、布尔、数组、对象、Null、Undefined,但typeof有区分可判别的数据分类是number、string、boolean、object(null / array)、function和undefined。undefined 这个值表示变量不含有值,null 可以用来清空变量

let a = 100;
typeof a;//number
a = undefined;
typeof a;//undefined
a = null;
typeof a;//null

2、默认类型转换:这里列举一部分

5 == true;//false。true会先转换为1,false转换为0
'12' + 1;//'123'。数字先转换成字串
'12' - 1;//11。字串先转换成数字
[] == false;//true。数组转换为其他类型时,取决于另一个比较者的类型
[] == 0;//true
[2] == '2';//true
[2] == 2;//true
[] - 2;//-2
12 + {a:1};//"12[object Object]"。这里对象先被转换成了字串
null == false;//false
null == 0;//false
null - 1;//-1

3、JS对象与JSON互转换:如果要复制对象属性,可通过JSON.stringify()转换成字符串类型,赋值给复制变量后再通过JSON.parse()转换成对象类型,但这种转换会导致原对象方法丢失,只有属性可以保留下来;如果要复制完整对象,需要遍历key:value来复制对象的方法和属性;如果在发生对象赋值后再对其中一个赋新值,其将指向新的地址内容。关于JSON与JavaScript之间的关系:JSON基于 JavaScript 语法,但不是JavaScript 的子集

4、大小写切换:

let str = '23abGdH4d4Kd';
str = str.replace(/([a-z]*)([A-Z]*)/g, function(match, $1 , $2){return $1.toUpperCase() + $2.toLowerCase()});//"23ABgDh4D4kD"

str = 'web-application-development';
str = str.replace(/-([a-z])/g, (replace)=>replace[1].toUpperCase());//"webApplicationDevelopment"(驼峰转换)

5、生成随机数:

str = Math.random().toString(36).substring(2) 

6、|0、~~取整数:如3.2 / 1.7 | 0 = 1、~~(3.2 / 1.7) = 1。~运算(按位取反)等价于符号取反然后减一,if (!~str.indexOf(substr)) {//do some thing}

7、无第三变量交换值:下边的做法未必在空间和时间上都比声明第三变量来的更好,写在这里仅仅为了拓展一下思维

//方法一:通过中间数组完成交换
let a = 1,
 b = 2;
a = [b, b = a][0];
//方法二:通过加减运算完成交换
let a = 1,
 b = 2;
a = a + b;
b = a - b;
a = a - b;
//方法三:通过加减运算完成交换
let a = 1,
 b = 2;
a = a - b;
b = a + b;
a = b - a;
//方法四:通过两次异或还原完成交换。另外,这里不会产生溢出
let a = 1,
 b = 2;
a = a ^ b;
b = a ^ b;
a = a ^ b;
//方法五:通过乘法运算完成交换
let a = 1,
 b = 2;
a = b + (b = a) * 0;

8、/和%运算符:

. 4.53 / 2 = 2.265
. 4.53 % 2 = 0.5300000000000002
. 5 % 3 = 2

9、原型链(Prototype Chaining)与继承: 原型链是ECMAScript 中实现继承的方式。JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的,所有的继承细节并非完全由解释程序处理,你有权决定最适用的继承方式,比如使用对象冒充(构造函数定义基类属性和方法)、混合方式(用构造函数定义基类属性,用原型定义基类方法)

function ClassA(sColor) {
 this.color = sColor;
}

ClassA.prototype.sayColor = function () {
 alert(this.color);
};

function ClassB(sColor, sName) {
 ClassA.call(this, sColor);
 this.name = sName;
}

ClassB.prototype = new ClassA();

ClassB.prototype.sayName = function () {
 alert(this.name);
};

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //输出 "blue"
objB.sayColor(); //输出 "red"
objB.sayName(); //输出 "John"

10、call、apply和bind:call和apply的用途都是用来调用当前函数,且用法相似,它们的第一个参数都用作 this 对象,但其他参数call要分开列举,而apply要以一个数组形式传递;bind给当前函数定义预设参数后返回这个新的函数(初始化参数改造后的原函数拷贝),其中预设参数的第一个参数是this指定(当使用new 操作符调用新函数时,该this指定无效),新函数调用时传递的参数将位于预设参数之后与预设参数一起构成其全部参数,bind最简单的用法是让一个函数不论怎么调用都有同样的 this 值。下边的list()也称偏函数(Partial Functions):

function list() {
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

11、Memoization技术: 替代函数中太多的递归调用,是一种可以缓存之前运算结果的技术,这样我们就不需要重新计算那些已经计算过的结果。In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Although related to caching, memoization refers to a specific case of this optimization, distinguishing it from forms of caching such as buffering or page replacement. In the context of some logic programming languages, memoization is also known as tabling.

function memoizer(fundamental, cache) {
 let cache = cache || {},
 shell = function(arg) {
 if (! (arg in cache)) {
 cache[arg] = fundamental(shell, arg);
 }
 return cache[arg];
 };
 return shell;
}
 

12、闭包(Closure):词法表示包括不被计算的变量(上下文环境中变量,非函数参数)的函数,函数可以使用函数之外定义的变量。下面以单例模式为例来讲述如何创建闭包

let singleton = function(){
 let obj;
 return function(){
 return obj || (obj = new Object());
 }
}();

13、New Function():用一个字串来新建一个函数,函数参数可以this.key形式来调用:

let variables = {
 key1: 'value1',
 key2: 'value2'
},
 fnBody = 'return this.key1 + ":" + this.key2',
 fn = new Function(fnBody);
console.log(fn.apply(variables));

14、DocumentFragment: Roughly speaking, a DocumentFragment is a lightweight container that can hold DOM nodes. 在维护页面DOM树时,使用文档片段document fragments 通常会起到优化性能的作用

let ul = document.getElementsByTagName("ul")[0],
 docfrag = document.createDocumentFragment();

const browserList = [
 "Internet Explorer",
 "Mozilla Firefox",
 "Safari",
 "Chrome",
 "Opera"
];

browserList.forEach((e) => {
 let li = document.createElement("li");
 li.textContent = e;
 docfrag.appendChild(li);
});

ul.appendChild(docfrag);

15、forEach()遍历:另外,适当时候也可以考虑使用for 或 for ... in 或 for ... of 语句结构

1. 数组实例遍历: arr.forEach(function(item, key){
        //do some things
    })
2. 非数组实例遍历: Array.prototype.forEach.call(obj, function(item, key){
        //do some things
    })
3. 非数组实例遍历: Array.from(document.body.childNodes[0].attributes).forEach(function(item, key){
        //do some things. Array.from()是ES6新增加的
    })

16、DOM事件流:Graphical representation of an event dispatched in a DOM tree using the DOM event flow.If the bubbles attribute is set to false, the bubble phase will be skipped, and if stopPropagation() has been called prior to the dispatch, all phases will be skipped.

(1) 事件捕捉(Capturing Phase):event通过target的祖先从window传播到目标的父节点。IE不支持Capturing
(2) 目标阶段(Target Phase):event到达event的target。如果事件类型指示事件不冒泡,则event在该阶段完成后将停止
(3) 事件冒泡(Bubbling Phase):event以相反的顺序在目标祖先中传播,从target的父节点开始,到window结束

事件绑定:

1. Tag事件属性绑定:<button onclick="do some things"></button>
2. 元素Node方法属性绑定:btnNode.onclick = function(){//do some things}
3. 注册EventListener:btnNode.addEventListener('click', eventHandler, bubble);另外,IE下实现与W3C有点不同,btnNode.attachEvent(‘onclick', eventHandler)

17、递归与栈溢出(Stack Overflow) :递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误;而尾递归优化后,函数的调用栈会改写,只保留一个调用记录,但这两个变量(func.arguments、func.caller,严格模式“use strict”会禁用这两个变量,所以尾调用模式仅在严格模式下生效)就会失真。在正常模式下或者那些不支持该功能的环境中,采用“循环”替换“递归”,减少调用栈,就不会溢出

function Fibonacci (n) {
 if ( n <= 1 ) {return 1};
 return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10); // 89
Fibonacci(50);// 20365011074,耗时10分钟左右才能出结果
Fibonacci(100);// 这里就一直出不了结果,也没有错误提示

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
 if( n <= 1 ) {return ac2};
 return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}
Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity. "Uncaught RangeError:Maximum call stack size exceeded"

可见,经尾递归优化之后,性能明显提升。如果不能使用尾递归优化,可使用蹦床函数(trampoline)将递归转换为循环:蹦床函数中循环的作用是申请第三者函数来继续执行未完成的任务,而保证自己函数可以顺利退出。另外,这里的第三者和自己可能是同一函数定义

function trampoline(f) {
 while (f && f instanceof Function) {
 f = f();
 }
 return f;
}

//改造Fibonacci2()的定义
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
 if( n <= 1 ) {return ac2};
 return Fibonacci2.bind(undefined, n - 1, ac2, ac1 + ac2);
}
trampoline(Fibonacci2(100));//573147844013817200000

好了以上就是本文对js开发应用中的JS对象与JSON互转换、New Function()、 forEach()遍历、DOM事件流。递归等一些基础知识点的总结啦,希望能够对大家在学习js的过程中有所帮助~

时间: 2017-08-08

浅谈js数据类型判断与数组判断

写在开篇: 昨天面试发现一个十分非常简单的问题竟然没有回答上来,可能也确实是因为太紧张了,感觉被自己蠢哭了.后来想想还是应该认真记录一下,这样才能印象深刻.革命尚未成功,壮实仍需努力! 1. js六大数据类型 number:数字,整数.浮点数等等, string:单引号或者双引号来说明, Boolean:返回true和false,这两个值不一定对应1和0 object:对象,可以执行new操作符后跟要创建的对象类型的名称来创建. null:只有一个值得数据类型,逻辑上讲,null值表示一个空对象

Javascript Memoization 缓存函数使用说明

举个例子 复制代码 代码如下: var flower= function(){ var t=0,i=0; for(;i<5000000;i++){ t++; } return t; } flower 返回t的值 假设这个函数需要花费 2-3秒 . 通过 Memoization 函数,再次查找相同的值时,直接获取事先缓存好的 value,立刻返回; Memoization 函数 复制代码 代码如下: var Memoize = function(fn, cache, refetch, obj){

老生常谈js数据类型

js数据类型主要分为基本数据类型和引用数据类型 基本数据类型和引用数据类型的区别: 基本数据类型是对值得引用,引用数据类型是对地址的引用: 基本数据类型存放在栈内存,栈内存提供了供JS代码执行的环境,引用数据类型存放在对内存 基本数据类型包括: Array 数组 string 字符串 number 数字 beloon 布尔值 null undefined 引用数据类型包括: 对象数据类型 函数数据类型 对象数据类型又分为:数组[], 对象{}, 正则RegExp, 日期对象 对象数据类型存放在对

详解JS数据类型的值拷贝函数(深拷贝)

废话不多说了,直接给大家贴代码了,具体代码如下所示: function mottoClone (obj) { if (obj === null || typeof obj !== 'object') return obj; if (obj instanceof Boolean) return new Boolean(obj.valueOf()); if (obj instanceof Number) return new Number(obj.valueOf()); if (obj instan

javascript开发技术大全-第3章 js数据类型

3.1 基本数据类型 1.字符串类型(string) :由unicode字符.数字.标点符号组成,在javascript中没有char字符类型 ,即使只表示一个字符,也必须用到字符串 2数字型(number):不区分整型和浮点型 3.布尔型(boolean) 3.2复合数据类型 1.数组(array):数组元素:放在数组中的数据称为数组元素. 数组下标:从0开始编号 读:arr[0]; 赋值:arr[1]=120; 2.对象: 对象名.属性名 对象名.方法名() 3.3其它有数据类型 函数: 1

浅析JS中常用类型转换及运算符表达式

JS中的常用类型转换(一般用强制转换): 1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); 3.检测类型:x = parseInt(x);       alert(typeof(true)); JS中常用的运算符表达式: 1.逻辑运算符(布尔型):&& 并 :|| 或 :! 非 : 2.比较运算符:==(等于) :!=(不等于) : > :< :>=(大于等于)

JavaScript Memoization 让函数也有记忆功能

比如说,我们想要一个递归函数来计算 Fibonacci 数列.一个 Fibonacci 数字是之前两个 Fibonacci 数字之和.最前面的两个数字是 0 和 1. 复制代码 代码如下: var fibonacci = function (n) { return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); }; for (var i = 0; i <= 10; i += 1) { document.writeln('// ' + i +

JavaScript常用验证函数实例汇总

本文实例汇总了JavaScript常用验证函数.分享给大家供大家参考.具体汇总如下: 一.字符串类验证 1. 长度限制 复制代码 代码如下: <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符!"); document.a.b.focus(); return false; } } </script> <form name=a onsubmit=&

JavaScript中使用参数个数实现重载功能

利用参数的个数实现重载,马上想到的方法就是 function overload(){ switch(arguments.length){ case 0: console.log("一个朋友都没有"); break; case 1: console.log("有一个朋友"); break; case 2: console.log("有两个朋友"); break; case 3: console.log("有三个朋友"); bre

javascript中eval函数用法分析

本文实例分析了javascript中eval函数用法.分享给大家供大家参考.具体分析如下: eval()只有一个参数,如果传入的参数不是字符串,则直接返回这个参数.否则会将字符串当成js代码进行编译,如果编译失败则抛出语法错误(SyntaxError)异常.如果编译成功则开始执行这段代码,并返回字符串中的最后一个表达式或语句的值:如果最后一个表达式或语句没有值,则最终返回undefined.如果字符串抛出异常,则该异常将把该调用传递给eval(); eval()最为重要的是,它使用了调用它的变量

浅谈Javascript中的函数、this以及原型

关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

JavaScript装饰器函数(Decorator)实例详解

本文实例讲述了JavaScript装饰器函数(Decorator).分享给大家供大家参考,具体如下: 装饰器函数(Decorator)用于给对象在运行期间动态的增加某个功能,职责等.相较通过继承的方式来扩充对象的功能,装饰器显得更加灵活,首先,我们可以动态给对象选定某个装饰器,而不用hardcore继承对象来实现某个功能点.其次:继承的方式可能会导致子类繁多,仅仅为了增加某一个单一的功能点,显得有些多余了. 下面给出几个常用的装饰器函数示例,相关代码请查看github. 1 动态添加onload

利用Javascript仿Excel的数据透视分析功能

什么是数据透视分析? 数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图.用来发现数据的变化趋势和不同因素导致的差异. 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用. 接下来使用Excel介绍了什么是数据透视分析和数据透视表. 下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势. 申明:所有数据都是自己编造的,无任何参考价值. Excel 数据透视表和数据透

简单分析javascript中的函数

在脚本语言JavaScript中,函数的定义是由事件驱动或者当它被调用时可重复使用的代码块.在JavaScript的标准ECMAscript中,把函数表述为可以随时随地运行的语句.我个人是不认同ECMA的说法的,因为函数只有在发生调用的时候才会执行,否则就是一段毫无生气的代码. 我们来具体认识认识函数. (一)首先是函数的定义: 在ECMAscript函数的定义是 关键字function 函数名( 参数){主体:return(返回值)};这四部分组成的,但是在脚本语言中函数的定义却分为三种方式定

在PHP中实现Javascript的escape()函数代码

这里,一般都需要预先将正常的字符串编码成 JavaScript unescape() 函数能够解译的格式,以 PHP 为例,可以使用以下函数实现 Javascript 中 escape() 函数相同的功能: 复制代码 代码如下: <?php function escapeToHex($string, $encoding = UTF-8) { $return = ; for ($x = 0; $x < mb_strlen($string, $encoding); $x ++) { $str =