javaScript复习

ES6字符串方法：

 //console.log(String.prototype);var str = "abcdefabc";//console.log(str.includes("a"));//结果true//console.log(str.includes("abf"));//结果false//console.log(str.startsWith("d"));//false//console.log(str.startsWith("abc"));//true//console.log(str.startsWith("d",3));//true
console.log(str.endsWith("c"));//trueconsole.log(str.endsWith("abf"));//trueconsole.log(str.endsWith("d", 4));//true
console.log("a".repeat(3));//将字符重复n次console.log("abc".repeat(3));//将字符重复n次//includes 查看是否包含某个字符或字符串//startsWith  查看是否以某个字符或字符串开头 默认是索引0开始查找 第二个参数表示设置查找的位置，//endsWith 查看是否以某个字符或字符串结尾 默认查找到最后 第二个参数表示设置的是查找结果的索引（不包含索引这一项）//repeat()  重复某个字符或字符串  参数指重复的次数
ES6字符串方法

 

JS数据类型：（编程时的原材料，得用的非常熟）
JS是弱类型的语言，它的数据类型是由值决定的。
var 变量名 = 值
- 基本数据类型：number,string,boolean,null,undefined
- 引用数据类型：对象（object,array,regExp,Date,Math）和函数(function)

### number类型的数据
- 定义：小数，整数(正整数，负整数，0)，NaN(not a number)
- 四则运算（+-*/%）失败时
- 将其他数据类型强制转换number类型失败时 Number() parseInt() parseFloat()
Number() 
true->1 false->0
null ->0;
undefined->NaN
""->0
其他字符串，只要有一个字符(不包括小数点)不是数字，则转换结果是NaN
Number("10.5")->10.5 Number("10.5a")->10.5

parseInt() 将字符串中整数部分提取出来，若第一个字符不是数字，则结果是NaN
parseFloat 将字符串中整数和小数部分都提取出来，若第一个字符不是数字，则结果是NaN

运算符优先级:
算术运算符(+-*/%)>比较运算符(>= <= == !=)>逻辑运算符(逻辑与&& 逻辑或||)>赋值运算符(=)

### 字符串类型
字符串常用方法
charAt() 参数：索引 通过索引找到对应的字符
charCodeAt() 参数:索引 通过索引找到对应字符的ASCII码值
indexOf() 参数:字符 1.查找字符中是否有这个字符，若找不到则返回-1
2.找到，则返回对应字符的索引 
lastIndexOf() 

substr(n,m) 从索引n截取m个
substring(n,m) 从索引n截取到索引m(包前不包后)
slice(n,m)从索引n截取到索引m (包前不包后) 可以设置负数索引 = 负数索引+length 倒数第几个
toUpperCase() 转换成大写
toLowerCase() 转换成小写
split(":") 按照指定的字符，将数组拆分成数组的每一项
split("") var str = "abc" str.split("") ->["a","b","c"]
split() 将字符串完整的放入数组中 str.split()->["abc"];
split() 参数也可以是正则
replace() 匹配和替换字符
match() 参数：字符串或正则 将匹配的字符串在数组中输出
search() 参数：字符串或正则
trim() 去掉字符串的收尾空格 若想所有浏览器都支持 写个正则匹配收尾空格

es6的字符串方法
includes 查看是否包含某个字符或字符串
startsWith 查看是否以某个字符或字符串开头 默认是索引0开始查找 第二个参数表示设置查找的位置，
endsWith 查看是否以某个字符或字符串结尾 默认查找到最后 第二个参数表示设置的是查找结果的索引（不包含索引这一项）
repeat() 重复某个字符或字符串 参数指重复的次数

### boolean
将其他数据类型转换成布尔类型 
Boolean() 0,null,NaN,undefined,""->false 其他全部为true
!"a"->!后面的转换成布尔类型，然后再取反
!!"a"->为了转换成布尔类型

### null undefined
null 现在没有值但以后会有值 原本应该有值，但没有值
undefined 从来没有存在过

### object类型
- 需要从多方面描述事物,对象是多种数据类型的复合载体
- 增删改查 遍历 
- 操作时都能以[]或.方式操作
- 若属性名数字只能以[]方式操作
es6提供的方法
Object.is() 查看对象是否相等(检测是否是指向的同一个引用地址)
Object.is({},{}) false

Object.assign() 合并对象
var obj1 = {name:"lily"};
var obj2 = {age:10};
Object.assign(obj1,obj2);
Object.assign({},obj1,obj2);
Object.assign({},obj1);//拷贝对象
Object.assign(obj1) //还是表示obj1,没有意义
{...obj1,...obj2} 合并对象

### 数组
es5方法(包含迭代方法)
原有数组改变
push() 往数组的末尾添加内容 返回值: 添加内容后的长度
pop() 删除数组的最后一项 返回值：删除的内容
shift() 删除数组的第一项 返回值：添加内容后的长度
unshift() 往数组的开始位置添加内容 返回值: 添加内容后的长度
splice(n,m,x) 从索引n开始删除m个，用x的内容替换删除的内容 返回值:把删除的内容放在新数组中返回,若没有删除的内容返回值是空数组
reverse() 反向排列
sort(function(a,b){ 排序，不传参表示按ASCII码值进行排序，若传参则按照自定义规则排序
return a-b/b-a
return a.localCompare(b)/b.localCompare(a);
))
原有数组没有改变
join("&") 按照指定的字符将数组拼接成字符串
toSting() 将数组转换成字符 
concat() 合并数组
indexOf() 查找数组中是否有这一项 若没有则返回-1，若有则返回数组这一项的索引
lastIndexOf()
slice(n,m) 截取数组 从索引n截取到索引m(包前不包后)

迭代方法
forEach() 遍历数组没有返回值
map() 遍历数组并能修改数组的内容有返回值
some() 数组中只要有一个成立，则结果true,只有都不成立才为false
[1,2,3].some(function(item){
return item>1
})
every 都成立才返回true,只要有一个不成立则返回false
[1,2,3].every(function(item){
return item>1
})
reduce() 从左往右求数组的累计的值
reduceRight 从右往往求数组的累计的值

es6方法
find() 返回满足条件这一项,找到了则方法中止运行
[1,2,3].find(function(item){
return item>1
})
findIndex() 返回满足条件这一项的索引,找到了则方法中止运行
[1,2,3].findIndex(function(item){
return item>1
})

Array.from() 将类数组转换成数组
Array.of() 将参数（一个数或一组数）转换成数组 
copyWithin(target,start,end) 拷贝数组的部分内容覆盖到指定的位置（会覆盖原来的内容）
target：指拷贝内容放置的起始索引
start :获取内容的起始位置索引
end：获取内容的结束位置索引

遍历数组
for(let value of ary){}
for(let key of ary.keys()){}
for(let ele of ary.entries()){}

### 函数
函数定义:
1.开辟一个堆内存，假设引用地址是FFF000;
2.将函数体的内容以字符串的形式存在堆内存里
3.将引用地址赋值给函数名，函数名就代表了整个函数
函数执行：
1. 开辟一个私有的作用域
2. 形参赋值
3. 变量提升（对var关键字和function关键字进行声明和定义 es6没有变量提升）
4. 代码从上往下执行

return(返回值):
1.函数遇到return无条件中止运行
2.return可写可不写，根据需求来
3.若没写return 或return后没有值，则函数的返回值是undefined 
4.return 后面的不预解释，但是return下面的还是要预解释

### 私有作用域 - 变量的查找
私有变量:形参，带var关键字
函数内部不带var关键字查找变量的顺序：
var num = 10;
function fn(){
console.log(num);
}
fn();
- 先看是否是私有的，若是私有的则与外界无关
- 若不是私有的，则往上级作用域查找，若没找到继续往上级查找，直到找到window，若还没找到则报错
上级作用域跟函数定义有关，跟函数执行无关

### this
1. 看函数运行时，前面有没有点，点前面是谁，this就是谁，若没有则this是window
2. 自执行函数中的this是window
3. 事件绑定函数中的this是绑定的元素
4. 定时器中this是window
5. 构造函数中的this是实例
6. 箭头函数中没有this,this需要往上级作用域中查找

### 原型 
- 所有的函数都有个属性叫prototype，指向于原型对象
- 默认的原型上有个属性叫constructor,指向所属的类
- 所有的对象上都有个属性叫__proto__,它指向于所属类的原型
继承：
call继承：父类的私有属性
原型继承:父类的公有的属性 父类私有属性会污染子类的原型
寄生式组合继承：解决了原型继承的问题

### 回调函数
定义:将一个函数的定义作为参数传给另一个函数时，这个函数就称为回调函数
- 回调函数的执行次数
- 回调函数的参数
- 回调函数有没有返回值
- 回调函数里的this关键字 
封装map,bind方法封装 敲熟
### 回流和重绘

### DOM映射

###js盒子模型
- 13个js盒子模型相关属性
其中11个只能取读，只有scrollLeft和scrollTop既可以获取可以设置
- 获取任意的css属性(不管是行内，内嵌，外链)
window.getComputedStyle(ele,null)[attr]
ele.currentStyle[attr]
掌握封装getCss,setCss,setGroup,css 敲熟
- 浏览器兼容性处理方案
- 1.try...catch... 捕获浏览器异常
- 2.属性判断的方式 
window.getComputedStyle
"getComputedStyle" in window
- 3.检测数据类型的方式 
typeof "getComputedStyle" == "function"
ary instanceOf Array
Object.prototype.toString.call([])=="[object Array]"
- 4.constructor 
> 原型对象若被重写，则constructor有可能不准
- 5.检测浏览器的方式
navigator.userAgent.indexOf("MSIE 8.0") 
/MSIE [6-8]\.0/.test(navigator.userAgent)

### 正则
- 掌握常用的元字符
\d \w \s \b \n . 
\D \W \S \B
^ $
(a|z) a或z
[a-z]
[^a-z]
[az]
+ 1到多次
* 0到多次
？ 0次或1次
{n} 匹配n次
{n,}至少匹配n次
{n,m} 至少匹配n次，最多匹配m次
g 全文查找
m 换行查找
i 忽视大小写

正则 test/exec
字符串 split/replace/match

regExecAll()->把匹配的内容放入数组的返回
1.求出现次数最多的字母和次数（2种）
2.格式化url的queryString部分，把参数放在对象中返回?name=zf&age=9 {name:"zf",age:9}
3.格式化时间，按照模板返回指定格式的时间

### jquery中常用的方法
1.核心
2.ajax
3.效果
4.属性
5.文档处理
6.筛选
7.CSS
8.事件 on off

 

 

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>var num = 3;var obj = {num:5,fn : (function(){this.num*=2;var num = 4;return function(){this.num *=2;num *= 4;alert(num);}})()};var fn = obj.fn;alert(num);//6fn();//16obj.fn();//64console.log(window.num,obj.num);//12,10
</script>
2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>function Father(x,y){this.x = x;this.y = y;}Father.prototype.fn = function(){console.log("fn")};function Son(x,y,z){this.z = z;Father.call(this,x,y);//把父类的私有属性拷贝到子类的实例上
    }//Son.prototype.__proto__ = Father.prototype; 最优的方案 忽视IE//Son.prototype  = new Father(); //Son.prototype作为Father类的实例，这样Son.prototype原型对象上的__proto__就指向Father类型的原型Son.prototype = Object.create(Father.prototype);//寄生式组合继承 最优的var s = new Son(10,20,30);//console.log(s.fn());
    console.log(s);//var f = new Father(10,20);//console.log(f.x);//先在实例上，找到则往所属类的原型查找，再不到再往父类的原型上查找....一直找到Object类的原型，若还没找到则返回undefined
</script>
3
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>class Father{constructor(x,y){this.x = x;this.y = y;}fn(){console.log("fn");}static fn2(){ /*静态方法，是定义在Father类上的方法*/console.log("fn2")}}class Son extends Father {constructor(x,y,z){super(x,y);//Father.call(x,y); 子类调用父类私有的属性 只要写extends了，super()必须写this.z = z;}writeCss(){console.log("writeCss");}}//es6继承 父类的公有属性，私有属性，静态属性var s = new Son(10,20,30);//必须要加new运行不能当成普通函数，只能是类
     s.fn();console.log(s.x);
</script>
4
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
<script>//柯里化函数的思想 （预处理的思想机制）//bind 改变方法中的this关键字，返回一个函数的定义function fn(a,b,c){console.log(this);return a+b+c}var res =  fn.bind({},10,20); //返回值是一个小函数console.log(res(30));//返回的小函数运行时才会让方法fn运行//bind方法运行：1.bind的第一个参数保存下来  2.把从第二个参数开始的实参保存下来  3.返回值是一个函数定义//bind返回值运行 ：1.改变fn的this关键字  2.把所有的参数传给fn 3.让fn执行
Function.prototype.myBind = function(context){var context = context ||window;var arg1 = [].slice.call(arguments,1);var that = this;return function(){var arg2 = [].slice.call(arguments);var arg = [].concat(arg1,arg2);  //参数合并后的数组return  that.apply(context,arg);}}var res2 = fn.myBind({},10,20);console.log(res2(30));</script>
bind

 

转载于:https://www.cnblogs.com/Lia-633/p/9873102.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/450345.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STS的安装教程-鹏鹏

STS的安装教程-鹏鹏

STS全称Spring Tools Suite。 简介&#xff1a;Spring Tools Suite (STS)其实就是一个被包装过的Eclipse&#xff0c;主要用于快速的开发Spring项目&#xff0c;我们不用再去编辑繁琐的xml配置文件&#xff0c;而是由工具自动生成。STS有两种安装方式&#xff0c;一种是直接在E…
阅读更多...
linux逻辑卷管理

linux逻辑卷管理

2019独角兽企业重金招聘Python工程师标准>>> 摘要&#xff1a; Linux用户安装Linux操作系统时遇到的一个最常见的难以决定的问题就是如何正确地给评估各分区大小&#xff0c;以分配合适的硬盘空间。而遇到出现某个分区空间耗尽时&#xff0c;解决的方法通常是使用符…
阅读更多...
github 如何设置项目的语言显示

github 如何设置项目的语言显示

github 会根据一个项目文件最多的那个种类的文件显示为对应的语言项目 如果想让整个项目显示为 HTML 项目, 需要进行以下步骤的设置 1.在根目录下创建一个文件 .gitattributescreate .gitattributes2.在 .gitattributes 内编辑以下内容&#xff1a; *.js linguist-languageHTML…
阅读更多...
postman界面变成了左右结构怎么办

postman界面变成了左右结构怎么办

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 在左上角 file -- settongs中设置一下&#xff1a;
阅读更多...
1.springboot：入门程序

1.springboot：入门程序

一、Spring Boot 简介 官网英文&#xff1a; Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can “just run”. We take an opinionated view of the Spring platform and third-party libraries so you can get st…
阅读更多...
javax.ws.rs.NotSupportedException: Cannot consume content type

javax.ws.rs.NotSupportedException: Cannot consume content type

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 报错如题&#xff1a;javax.ws.rs.NotSupportedException: Cannot consume content type 解决&#xff1a;使用postman发送 post 请求访…
阅读更多...
kotlin使用spring data jpa（一）

kotlin使用spring data jpa（一）

2019独角兽企业重金招聘Python工程师标准>>> 简单查询 spring data jpa是spring全家桶成员之一&#xff0c;用于操作各种数据库&#xff0c;下面写一个查询订单的简单示例 引入sqlserver驱动包及jpa所需包implementation(org.springframework.boot:spring-boot-star…
阅读更多...
csvn(apache+svn)管理工具搭建

csvn(apache+svn)管理工具搭建

系统环境&#xff1a;centos7.4一、服务端下载这个文件并解压&#xff08;如果打不开&#xff0c;请下方留言&#xff09;https://pan.baidu.com/s/1miwdBc81、安装jdk,上传到服务器上&#xff0c;解压[rootslave2 opt]# tar -zxvf jdk-8u91-linux-x64.gz[rootslave2 opt]# vim…
阅读更多...
编程复杂性等级划分

编程复杂性等级划分

摘要&#xff1a;相信开发人员一定对初级、中级、高级软件工程师这类词汇很熟悉吧&#xff01;你们是否对编程进行过等级划分&#xff1f;这个又是如何划分的呢&#xff1f;本文作者把编程复杂性从简到难化成27个等级&#xff0c;你同意这样的划分吗&#xff1f;通常来说&#…
阅读更多...
东方程序员怎么看西方程序员

东方程序员怎么看西方程序员

摘要&#xff1a;东方程序员与西方程序员&#xff0c;彼此心中是什么样子呢&#xff1f;本文收集了东西方程序员对彼此的看法与各种印象&#xff0c;对于西方/东方程序员&#xff0c;你留有什么印象呢&#xff1f; 本文是作者根据StackExchange上的一个讨论贴&#xff1a;东方程…
阅读更多...
Android开发 - 掌握ConstraintLayout（一）传统布局的问题

Android开发 - 掌握ConstraintLayout（一）传统布局的问题

在传统的Android开发中&#xff0c;页面布局占用了我们很多的开发时间&#xff0c;而且面对复杂页面的时候&#xff0c;传统的一些布局会显得非常复杂&#xff0c;每种布局都有特定的应用场景&#xff0c;我们通常需要各种布局结合起来使用来实现复杂的页面。随着ConstraintLay…
阅读更多...
IDEA项目找不到浏览器报错的情况

IDEA项目找不到浏览器报错的情况

调tomcat的时候&#xff0c;它会调用浏览器&#xff0c;浏览器关联如果有问题&#xff0c;肯定是会报错的 要是测试的时候&#xff0c;就是浏览器的问题&#xff0c;重新把浏览器装一遍让他自己重新关联一下应该就行了转载于:https://www.cnblogs.com/Koma-vv/p/10156478.html
阅读更多...
CSS中的px与物理像素、逻辑像素、1px边框问题

CSS中的px与物理像素、逻辑像素、1px边框问题

一直不太清楚CSS中的1px与逻辑像素、物理像素是个什么关系&#xff08;作为一名前端感觉很惭愧 -_-&#xff01;&#xff09;&#xff0c;今天终于花时间彻底弄清楚了&#xff0c;其实弄清楚之后就觉得事情很简单&#xff0c;但也只有在弄清楚之后&#xff0c;才会觉得简单&…
阅读更多...
平滑数据迁移,不影响服务

平滑数据迁移,不影响服务

为什么80%的码农都做不了架构师&#xff1f;>>> 转自&#xff1a;http://www.10tiao.com/html/249/201703/2651959992/1.html 转载于:https://my.oschina.net/jzgycq/blog/2872104
阅读更多...
NET Core微服务之路：让我们对上一个Demo通讯进行修改，完成RPC通讯

NET Core微服务之路：让我们对上一个Demo通讯进行修改，完成RPC通讯

最近一段时间有些事情耽搁了更新&#xff0c;抱歉各位了。上一篇我们简单的介绍了DotNetty通信框架&#xff0c;并简单的介绍了基于DotNetty实现了回路&#xff08;Echo&#xff09;通信过程。我们来回忆一下上一个项目的整个流程&#xff1a;当服务端启动后&#xff0c;绑定并…
阅读更多...
Centos7防火墙设置

Centos7防火墙设置

查看防火墙状态 or rootlocalhost ~]# systemctl status firewalld / firewall-cmd --state 启动防火墙 [rootlocalhost ~]# systemctl start firewalld 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld 设置开机启动 [rootlocalhost ~]# systemctl enable fi…
阅读更多...
java面试题文档(QA)

java面试题文档(QA)

– 基础篇 1、 Java语言有哪些特点2、面向对象和面向过程的区别3 、八种基本数据类型的大小&#xff0c;以及他们的封装类4、标识符的命名规则。5、instanceof 关键字的作用6、Java自动装箱与拆箱7、 重载和重写的区别8、 equals与的区别9、 Hashcode的作用10、String、String …
阅读更多...
第四次软件工程作业

第四次软件工程作业

关于 石墨文档客户端 的案例分析 作业地址&#xff1a; https://edu.cnblogs.com/campus/nenu/2016CS/homework/2505 第一部分 调研&#xff0c; 评测 1.下载并使用&#xff0c;按照描述的bug定义&#xff0c;找3~5个功能性的比较严重的bug。请用专业的语言描述&#xff08;每个…
阅读更多...
Apple System: Error: ENFILE: file table overflow

Apple System: Error: ENFILE: file table overflow

2019独角兽企业重金招聘Python工程师标准>>> 在MAC上跑nodejs&#xff0c;遇到了一个问题&#xff1a;file table overflow 主要意思就是说文件打开太多了&#xff0c;超过了限制&#xff0c;产生这个问题主要是苹果操作系统的限制。 echo kern.maxfiles65536 | sud…
阅读更多...
springboot的缓存技术

springboot的缓存技术

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 我门知道一个程序的瓶颈在于数据库&#xff0c;我门也知道内存的速度是大大快于硬盘的速度的。当我门需要重复的获取相同的数据的时候&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023