发表于: 2019-10-14 21:15:44
1 916
今天完成的事:任务4的深度思考;
明天要完成的事:对之前的一些知识继续研究:比如高内聚低耦合;有限机;es6;参数的传递;用js写任务2;
难题:提交任务2时一直在报错?在浏览器上引入js库一直不成功;所以反复试最后改成在git上的地址了;打包没看明白要怎么搞,
对js任务4后面的深度思考发现前面的东西很多都没理解透;至少理解了也不知道怎么去运用;之前对js的运用完全是对方法对函数的运用;
今天对js做一个知识的体系建立;
收获:
之后应该会在写一遍对之前没搞懂东在梳理一下;毕竟有限机都没用;基本都是用jq写的,js都快忘了
if循环是不用结尾的也就是一个判断语句用就好了有没有else影响不大;
break在时跳出循环体;不是单纯跳出循环
业务逻辑是指一个实体单元为了向另一个实体单元提供服务,应该具备的规则与流程。
表示层:负责界面和交互;
业务逻辑层:负责定义业务逻辑(规则、工作流、数据完整性等),接收来自表示层的数据请求,逻辑判断后,向数据访问层提交请求,并传递数据访问结果,业务逻辑层实际上是一个中间件,起着承上启下的重要作用;
数据访问层:负责数据读取。
分层是为了实现“高内聚,低耦合”。采用“分而治之”的思想,把问题划分开来各个解决,易于控制,延展和分配资源。
(这里的意思翻译一下:要进行一个操作首先需要干嘛即进行一个操作的前提条件这就是业务逻辑
3层开发这个简单;我们负责表示层和业务逻辑层,这个高内聚低耦合就有点虚了他的含义和作用我都懂但是怎么实现没搞清楚;就像有限机一样作用用途我懂但是怎么用???)
TypeScript
使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。然而在ECMAscript5已经为
数组定义了5个迭代的方法,分别是:filter、some、map、foreach、every,下面我们讲讲它们的具体作用。
这五种方法,都会执行一个函数,以及一个可选的该函数作用域的对象this:
array.every(function(currentValue,index,arr){
return;
}, thisValue
函数有三个参数:
currentValue :当前元素的值,必选
index:当前元素的索引值,可选
arr:当前元素属于的数组对象,可选
注意:他们都不会对空数组执行,也不会改变原数组(除forEach
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
(每一个都满足函数指定的条件 则返回true 一个不满足就返回false)
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
(有一个满足就返回true,全都不满足的就返回false)
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
自己创建一个数组,把之前数组里通过条件的复制过来
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
返回一个被处理过的值的数组
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数,有可能改变原数组。
while语句。
迭代(iterate),指的是按照某种顺序逐个访问列表中的每一项。比如,for语句。
遍历(traversal),指的是按照一定的规则访问树形结构中的每个节点,而且每个节点都只访问一次。
递归(recursion),指的是一个函数不断调用自身的行为。比如,以编程方式输出著名的斐波纳契数列。
拷贝引用和拷贝实例也就是实现数组深拷贝和浅拷贝?
(自我感觉这玩意就是个调用值和调用地址指针)
基本类型:
5种基本数据类型Undefined、Null、Boolean、Number 和 String, 变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。
引用类型:
存放在堆内存中的对象,变量保存的是一个指针,这个指针指向堆内存的相对应的位置。 当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针, 然后再从堆内存中取得所需的数据。
深拷贝的特征:创建一个新的对象,新的对象是旧对象的复制。新的对象和旧的对象没有关联。
浅拷贝的特征:创建一个新的对象,新的对象是旧的对象。更改其中任意一个对象,另一个都会更改。
浅拷贝的常用方法:
1.赋值 :简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。
2.Object.assign()
定义:用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象.
深度拷贝常用方法:
1.转成JSON再转回来
2.concat方法
JS数组的深拷贝
slice(): 语法:arrayObject.slice(start,end)
slice() 方法可从已有的数组中返回选定的元素(请注意,该方法并不会修改数组,而是返回一个子数组)。
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素(如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素)。
slice() 方法创建新数组。它不会从源数组中删除任何元素。
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
【语法】arrayObject.concat(arrayX,arrayy,......,arrayN)
【参数】arrayX--必需:该参数可以是具体的值,也可以是数组对象。可以是空值,可以是任意多个。
【说明】 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat()操作的参数是数组,那么添加的是数组中的元素,而不是数组。
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数:
https://mp.weixin.qq.com/s/Z0jnNJlfOrXHdNDb8CM-ng
一、JavaScript数据类型
ECMAScript标准规定了7
种数据类型,其把这7
种数据类型又分为两种:原始类型和对象类型。
原始类型
Null:只包含一个值:null :不存在或者0
Undefined:只包含一个值:undefined :无意义
Boolean:包含两个值:true和false :布尔值
Number:整数或浮点数,还有一些特殊值(-Infinity、+Infinity、NaN) 数字
String:一串表示文本值的字符序列 :字符串
Symbol:一种实例是唯一且不可改变的数据类型
(在es10中加入了第七种原始类型BigInt,现已被最新Chrome支持 symbol了解的不多)
对象类型
Object:自己分一类丝毫不过分,除了常用的Object,Array、Function等都属于特殊的对象
二、为什么区分原始类型和对象类型
上面所提到的原始类型,在ECMAScript
标准中,它们被定义为primitive values
,即原始值,代表值本身是不可被改变的。
栈内存:
存储的值大小固定
空间较小
可以直接操作其保存的变量,运行效率高
由系统自动分配存储空间
JavaScript
中的原始类型的值被直接存储在栈中,在变量定义时,栈就为其分配好了内存空间。
引用类型
堆内存:
存储的值大小不定,可动态调整
空间较大,运行效率低
无法直接操作其内部存储,使用引用地址读取
通过代码进行分配空间
以数组为例,它的很多方法都可以改变它自身。
pop()
删除数组最后一个元素,如果数组为空,则不改变数组,返回undefined,改变原数组,返回被删除的元素push()
向数组末尾添加一个或多个元素,改变原数组,返回新数组的长度shift()
把数组的第一个元素删除,若空数组,不进行任何操作,返回undefined,改变原数组,返回第一个元素的值unshift()
向数组的开头添加一个或多个元素,改变原数组,返回新数组的长度reverse()
颠倒数组中元素的顺序,改变原数组,返回该数组sort()
对数组元素进行排序,改变原数组,返回该数组splice()
从数组中添加/删除项目,改变原数组,返回被删除的元素
对于原始类型,比较时会直接比较它们的值,如果值相等,即返回true
。
对于引用类型,比较时会比较它们的引用地址,虽然两个变量在堆中存储的对象具有的属性值都是相等的,但是它们被存储在了不同的存储空间,因此比较值为false
。
let name = 'ConardLi';
function changeValue(name){
name = 'code秘密花园';
}
changeValue(name);
console.log(name);
执行上面的代码,如果最终打印出来的name
是'ConardLi'
,没有改变,说明函数参数传递的是变量的值,即值传递。也就是我们说的深拷贝
如果最终打印的是'code秘密花园'
,函数内部的操作可以改变传入的变量,那么说明函数参数传递的是引用,即引用传递。也就是我们说的浅拷贝
很明显,上面的执行结果是'ConardLi'
,即函数参数仅仅是被传入变量复制给了的一个局部变量,改变这个局部变量不会对外部变量产生影响。
可见,函数参数传递的并不是变量的引用
,而是变量拷贝的副本,当变量是原始类型时,这个副本就是值本身,当变量是引用类型时,这个副本是指向堆内存的地址。所以,再次记住:
ECMAScript
中所有的函数的参数都是按值传递的。
这一段没看懂;所有函数的参数都输按值传递的那当变量是原始类型时,这个副本就是值本身,这个很好理解把值复制一下传递进去,当变量是引用类型时,这个副本是指向堆内存的地址。这个地址和之前说的值并不相同啊???(这块师兄解释这个地址就是一个值;指向某个地址,或者这个值在地址中)
三、分不清的null和undefined
在原始类型中,有两个类型Null
和Undefined
,他们都有且仅有一个值,null
和undefined
,并且他们都代表无和空,我一般这样区分它们:
null
表示被赋值过的对象,刻意把一个对象赋值为null
,故意表示其为空,不应有值。
所以对象的某个属性值为null
是正常的,null
转换为数值时值为0
。
undefined
表示“缺少值”,即此处应有一个值,但还没有定义,
如果一个对象的某个属性值为undefined
,这是不正常的,如obj.name=undefined
,我们不应该这样写,应该直接delete obj.name
。
undefined
转为数值时为NaN
(非数字值的特殊值)
JavaScript
是一门动态类型语言,成员除了表示存在的空值外,还有可能根本就不存在(因为存不存在只在运行期才知道),这就是undefined
的意义所在。对于JAVA
这种强类型语言,如果有"undefined"
这种情况,就会直接编译失败,所以在它不需要一个这样的类型。
四、Symbol类型
1.独一无二
我们用两个相同的字符串创建两个Symbol
变量,它们是不相等的,可见每个Symbol
变量都是独一无二的。就像
undefined不等于undefined 一样
但两者是不一样的一个是因为自身特性一个是因为没有定义,无法比较;
如果我们想创造两个相等的Symbol
变量,可以使用Symbol.for(key)
。
2.原始类型
这个之前上面原始类型有写
注意是使用Symbol()
函数创建symbol
变量,并非使用构造函数,使用new
操作符会直接报错。
我们可以使用typeof
运算符判断一个Symbol
类型:
这个东西现在感觉还太早了之后有时间可以多看看
五、不老实的Number类型
由于js语言的一些特性导致在计算小数时精度丢失,导致0.1+0.2!=0.3
六、其他引用类型
在
ECMAScript
中,引用类型是一种数据结构,用于将数据和功能组织在一起。
我们通常所说的对象,就是某个特定引用类型的实例。
在ECMAScript
关于类型的定义中,只给出了Object
类型,实际上,我们平时使用的很多引用类型的变量,并不是由Object
构造的,但是它们原型链的终点都是Object
,这些类型都属于引用类型。
Array
数组Date
日期RegExp
正则Function
函数
JavaScript由三部分组成:
1. ECMAScript(核心)
作为核心,它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象
2. DOM(文档对象模型)
DOM把整个页面映射为一个多层节点结果,开发人员可借助DOM提供的API,轻松地删除、添加、替换或修改任何节点。
PS:DOM也有级别,分为DOM1、DOM2、DOM3,拓展不少规范和新接口。
3. BOM (浏览器对象模型)
支持可以访问和操作浏览器窗口的浏览器对象模型,开发人员可以控制浏览器显示的页面以外的部分。
PS:BOM未形成规范
js的对象有:
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
Dom主要指html Dom ;这个后面写
通过对象又引出了方法和属性
在 JavaScript 中,对象是数据(变量),拥有属性和方法。
创建一个对象可以是js里数据类型中的任意一种;也可以是别的东西这个理解看个人
属性就是js里的对象有的一种条件(长得帅,或者胖啊);
方法就是js里的对象有的一种能力(计算啊遍历都是);
常用的属性:length
常用的方法:push typeof
操作符
你可以使用 typeof 操作符来检测变量的数据类型。
数组的length属性,返回数组的成员数量。
只要是数组,就一定有length属性。该属性是一个动态的值,等于键名中的最大整数加上1。
length属性是可写的。如果人为设置一个小于当前成员个数的值,该数组的成员会自动减少到length设置的值。所以 将数组清空的一个有效方法,就是将length属性设为0。
如果人为设置length大于当前元素个数,则数组的成员数量会增加到这个值,新增的位置都是空位。
值得注意的是,由于数组本质上是对象的一种,所以我们可以为数组添加属性,但是这不影响length属性的值。
关于方法和对象我了解的不深每个对象的类型不同方法也不一样;还有一些公共的方法;
然后就是事件: 事件就是发生一些操作时:比如点击或者双击;这个点击就是操作;
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
常用事件:https://www.cnblogs.com/theblogs/p/9972319.html
事件后面可以添加你想要的操作:这也是我们俗称的让页面动起来;
然后就是之前学过的函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
{
// 执行代码
}
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
当您声明函数时,请把参数作为变量来声明:
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
这里不得不讲一下变量:
变量是用于存储信息的"容器"。
对象,数据类型都能存入变量;变量分为局部变量和全局变量;这个之前日报里有详细得介绍和解释;
重复申明赋值取后面那个为变量的值;
通过变量的赋值又联系到拷贝:也就是拷贝
这个上面解释了;
关于DOm的理解文档对象模型;这个比较难说概念什么的自己百度;理解起来的话:他并不是js里独有的东西;只是js可以用而且用的很多;他更多的是一个对象:是的对象;通过一些方法访问这个对象(dom)的一些东西;这个很抽象我也没理解的的特别深刻
具体来说就是一棵树上有绳子绳子就是方法;树就是dom 你通过绳子到树上的某个地方
BOM (浏览器对象模型)
支持可以访问和操作浏览器窗口的浏览器对象模型,开发人员可以控制浏览器显示的页面以外的部分。
PS:BOM未形成规范
这个我也没看懂这个之前日报里有相关的解释;
这些看完还有js的一些特性方法 :比如循环;正则表达式,以上就是我对js的大体了解还有些细节没想到;
然后是jq就是js的库;不知道算不算框架;里面统合了一些js的方法和操作在js的环境上进行操作;使得运用js的操作更加方便;在一定程度上弥补js的一些不足;
es5和 6 则是一种标准
下面是es6的一些知识 :
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
代码块内有效
let 是在代码块内有效,var 是在全局范围内有效:
不能重复声明
let 只能声明一次 var 可以声明多次:
不存在变量提升
let 不存在变量提升,var 会变量提升:
这个实在没看懂全局变量都不能用?
也就是说在函数中创建局部变量多使用let
评论