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

1.数据类型：JavaScript定义的数据类型包括字符串、数字、布尔、数组、对象、Null和undefined，但typeof的数据分类是数字、字符串、布尔、对象(null/array)、函数和Undefined。未定义该值意味着变量不包含值，可以使用null来清空变量

设a=100a型；//numbera=未定义；a型；//undefineda=null；a型；//null2，默认类型转换：下面是一些例子

5==真；//false .True首先转换为1；false被转换为0'12' 1。//'123'。数字首先被转换成字符串' 12 '-1；//11。该字符串首先转换为数字[]==false；//真的.当数组转换为其他类型时，取决于另一个比较器的类型[]==0；//true[2]==' 2 '；//true[2]==2；//true[]-2；//-212 { a :1 }；//' 12[对象对象]' .这里，对象首先被转换成字符串null==false//false null==0；//false null-1；//-13.JS对象和JSON是相互转换的：如果要复制对象属性，可以通过JSON.stringify()转换成字符串类型，赋给复制的变量，再通过JSON.parse()转换成对象类型，但这种转换会导致原来的对象方法丢失，只能保留属性；如果要复制一个完整的对象，需要遍历key:value来复制对象的方法和属性；如果在对象分配发生后给其中一个对象分配了新值，它将指向新的地址内容。关于JSON和JavaScript的关系：JSON基于JavaScript语法，但不是JavaScript的子集

4.案例切换：

let str=' 23abGdH4d4Kdstr=str . replace(/([A-Z]*)([A-Z]*)/g，函数(match，$1，$ 2){ return $ 1 . touppercase()$ 2 . tolowercase()})；//' 23abgdh4d 4kd ' str=' web-应用-开发'；str=str.replace(/-([a-z])/g，(replace)=replace[1]。toUpperCase())；//‘web application development’(驼峰改造)5。生成随机数：

Str=数学。随机()。tostring (36)。子串(2) 6、|0、~ ~都是整数，比如3.2/1.7 | 0=1、~~(3.2/1.7)=1。~运算(按位求反)相当于先符号求反再减一，如果(！~ str . indexof(substr)){//做点什么}

7.没有第三个变量交换值：下面的做法可能并不比在空间和时间上声明第三个变量好。写在这里只是为了拓展思路

//方法1:通过中间数组交换let a=1，b=2；a=[b，b=a][0]；//方法二：通过加减交换让a=1，b=2；a=a b；b=a-b；a=a-b；//方法三：通过加减交换让a=1，b=2；a=a-b；b=a ba=B- a；//方法四：两次异或约简完成交换。另外，这里不会有溢出，让a=1，b=2；a=a ^ b；b=a ^ b；a=a ^ b；//方法五：用乘法交换字母a=1，b=2；a=b(b=a)* 0；8、/和%运算符：

. 4.53/2=2 . 265 . 4 . 53% 2=0.5300000000000002.5 % 3=29、原型链接与继承：原型链接是ECMAScript中实现继承的方式。JavaScript中的继承机制没有明确定义，而是通过模仿实现的。所有继承细节并不完全由解释器处理。您有权决定最合适的继承方法，例如使用对象模拟(构造函数定义基类属性和方法)和混合方法(构造函数定义基类属性，原型定义基类方法)

函数CLaSS a(Scor){ this。color=Scorr} a级。原型。SayColor=function(){ alert(this。颜色)；};函数ClassB(sColor，sName) { ClassA.call(this，sColor)；this.name=sName} CLaSS。prototype=new CLaSS a()；b级原型。SayName=function(){ alert(this。姓名)；};var objA=new ClassA('蓝色');var objB=new ClassB('red '，' John ')；奥布佳。sayColor()；//输出蓝色objb。sayColor()；//输出红色objb。SayName()；//输出打电话、申请和绑定：调用和应用的用途都是用来调用当前函数，且用法相似，它们的第一个参数都用作这对象，但其他参数呼叫要分开列举，而应用要以一个数组形式传递；约束给当前函数定义预设参数后返回这个新的函数（初始化参数改造后的原函数拷贝),其中预设参数的第一个参数是这指定（当使用新的操作符调用新函数时，该这指定无效),新函数调用时传递的参数将位于预设参数之后与预设参数一起构成其全部参数，绑定最简单的用法是让一个函数不论怎么调用都有同样的这值。下边的列表()也称偏函数（部分功能):

函数list(){返回数组。原型。切片。呼叫(参数);}var list1=list(1，2，3)；//[1,2,3]//创建一个带有预置前导argument var leading 37 venlist=list。约束的函数（未定义，37);var list 2=领先的37 venlist()；//[37]var list 3=领先37 venlist(1，2，3)；//[37,1,2,3]11、记忆技术：替代函数中太多的递归调用，是一种可以缓存之前运算结果的技术，这样我们就不需要重新计算那些已经计算过的结果在计算中，记忆化或记忆化是一种优化技术，主要用于存储昂贵的函数调用结果，并在相同的输入再次出现时返回缓存的结果，从而加快计算机程序的速度。虽然与缓存相关，但记忆化指的是这种优化的一个特定情况，它与缓存的形式（如缓冲或页面替换)有所区别。在一些逻辑编程语言的上下文中，记忆也称为制表。

函数memoizer(basic，cache) { let cache=cache || {}，shell=function(arg) { if(！（缓存中的arg)){ 0缓存[arg]=基本面(shell，arg)；}返回缓存[arg]；};返回外壳；} 12、闭包（结束):词法表示包括不被计算的变量（上下文环境中变量，非函数参数)的函数，函数可以使用函数之外定义的变量。下面以单例模式为例来讲述如何创建闭包

let singleton=function(){ let obj；return function(){ return obj | |(obj=new Object())；}}();13、新功能():用一个字串来新建一个函数，函数参数可以这把钥匙形式来调用：

让变量={ key1: 'value1 '，key2: 'value2'}，fnBody=' return this。钥匙1 ' : '这个。键2’，fn=新功能(fnBody)；console.log(fn.apply(变量));14、文档片段：粗略地说，DocumentFragment是一个可以容纳数字正射影像图节点的轻量级容器。在维护页面数字正射影像图树时，使用文档片段文档片段通常会起到优化性能的作用

让ul=文档。getelementsbytagname(' ul ')[0]，docfrag=document。createdocumentfragment()；const浏览器列表=[' Internet Explorer '，' Mozilla Firefox '，' Safari '，' Chrome '，' Opera ']；浏览器列表。foreach((e)={让李=文档。创建元素(“李”)；李。text content=e；多弗拉格。阑尾(李)；});ul。append child(docfrag)；15、forEach()遍历：另外，适当时候也可以考虑使用为或为.在或为.关于语句结构

1.数组实例遍历：arr.forEach(函数(项目，键){//做一些事情})2。非数组实例遍历：数组。原型。foreach。调用(obj，function(item，key){//做一些事情})3。非数组实例遍历：数组。来自(文档。尸体。子节点[0]).属性)。forEach(函数（项，键){//做一些事情数组。从()是ES6新增加的})

16.DOM事件流：使用DOM事件流在DOM树中调度事件的图形表示。如果bubbles属性设置为false，将跳过bubble阶段，如果在分派之前已经调用了stopPropagation()，则将跳过所有阶段。

(1)捕获阶段：事件通过目标的祖先从窗口传播到目标的父节点。IE不支持捕获(2)目标阶段：事件到达事件的目标。如果事件类型指示事件不冒泡，则事件将在此阶段完成后停止(3)事件冒泡阶段：事件在目标祖先中以相反的顺序传播，从目标的父节点开始，在窗口中结束。

事件绑定：

1.标记事件属性绑定：button onclick='做一些事情'/button 2。element Node方法属性绑定：BTN Node . onclick=function(){//做一些事情} 3。register event listener:btnnode . addevent listener(' click '、eventhandler、bubble)；另外IE下的实现和W3C，btnnode有点不一样。attachevent ('onclick '，eventhandler)

17.递归和堆栈溢出：递归非常消耗内存，因为需要同时保存数千个调用帧，容易出现“堆栈溢出”错误；尾部递归优化后，函数的调用栈会被重写，只留下一条调用记录，但这两个变量(被严格模式禁用的func.arguments和func.caller“使用严格”，所以尾部调用模式只在严格模式下生效)会被扭曲。在正常模式或那些不支持这个函数的环境中，用“循环”代替“递归”，减少调用栈，它不会溢出

函数Fibonacci(n){ if(n=1){ return 1 }；返回斐波那契(n - 1)斐波那契(n-2)；}斐波那契(10)；//89 Fibonacci(50)；//20365011074，产生斐波那契(100)需要10分钟左右；//这里没有结果，也没有错误提示函数斐波那契2 (n，ac1=1，ac2=1){ if(n=1){ return ac2 }；返回斐波那契2 (n - 1，ac2，ac1 ac2)；}斐波那契2 (100)//57314784401381720000斐波那契2 (1000)//7.033036771142765e208斐波那契2(10000)//无穷大。未知范围错误：“超出最大调用栈大小”如果不能使用尾部递归优化，可以使用蹦床函数将递归转换为循环：蹦床函数中循环的作用是申请第三方函数继续执行未完成的任务，并保证自身函数能够顺利退出。另外，这里的第三方和自己可能是同一个功能定义

函数蹦床(f){ while(f f instance of Function){ f=f()；}返回f；}//修改Fibonacci2()函数的定义Fibonacci 2 (n，ac1=1，ac2=1){ if(n=1){ return ac2 }；返回Fibonacci2.bind(未定义，n - 1，ac2，ac1 ac2)；}蹦床(斐波那契2(100))；//57314784401381720000好了，以上就是js开发应用中JS对象与JSON、New Function()、forEach()遍历、DOM事件流之间的相互转换。递归等基础知识点进行了总结，希望对大家在学习js的过程中有所帮助~