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…
阅读更多...
final的用法

final的用法

final 根据程序上下文环境&#xff0c;Java关键字final有“这是无法改变的”或者“终态的”含义&#xff0c;它可以修饰非抽象类、非抽象类成员方法和变量。你可能出于两种理解而需要阻止改变&#xff1a;设计或效率。 final类不能被继承&#xff0c;没有子类&#xff0c;f…
阅读更多...
爱恨交织的编程语言 是什么吸引了你

爱恨交织的编程语言 是什么吸引了你

摘要&#xff1a;每门编程语言都有自身独特的地方&#xff0c;那么为什么有些语言会一直存活在我们周围&#xff0c;而有些语言却逐渐被人淡忘&#xff0c;是什么吸引你&#xff1f; 每名程序员至少知道两门以上的编程语言&#xff0c;有些甚至不是所谓的编程语言&#xff08;比…
阅读更多...
Unable to parse the date: 2017-12-30 日期格式转化失败

Unable to parse the date: 2017-12-30 日期格式转化失败

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 报错如题&#xff0c; 日期格式转化失败。 原因&#xff1a;参数是2017-09-23 这种格式&#xff0c;代码却是写的转为&#xff1a; &qu…
阅读更多...
linux逻辑卷管理

linux逻辑卷管理

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

[LeedCode]921. 使括号有效的最少添加

题目描述&#xff1a; 给定一个由 ( 和 ) 括号组成的字符串 S&#xff0c;我们需要添加最少的括号&#xff08; ( 或是 )&#xff0c;可以在任何位置&#xff09;&#xff0c;以使得到的括号字符串有效。从形式上讲&#xff0c;只有满足下面几点之一&#xff0c;括号字符串才是…
阅读更多...
abstract的一些用法

abstract的一些用法

&#xfeff;&#xfeff;abstract&#xff08;抽象&#xff09;修饰符&#xff0c;可以修饰类和方法 1&#xff0c;abstract修饰类&#xff0c;会使这个类成为一个抽象类&#xff0c;这个类将不能生成对象实例&#xff0c;但可以做为对象变量声明的类型&#xff0c;也就是编译…
阅读更多...
github 如何设置项目的语言显示

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

github 会根据一个项目文件最多的那个种类的文件显示为对应的语言项目 如果想让整个项目显示为 HTML 项目, 需要进行以下步骤的设置 1.在根目录下创建一个文件 .gitattributescreate .gitattributes2.在 .gitattributes 内编辑以下内容&#xff1a; *.js linguist-languageHTML…
阅读更多...
C++提高进阶，你知道多少？

C++提高进阶，你知道多少？

C从零开始 ——何谓编程 引言 曾经有些人问我问题&#xff0c;问得都是一些很基础的问题&#xff0c;但这些人却已经能使用VC编一个对话框界面来进行必要的操作或者是文档/视界面来实时接收端口数据并动态显示曲线&#xff08;还使用了多线程技术&#xff09;&#xff0c;却连…
阅读更多...
POJ 3352 Road Construction ； POJ 3177 Redundant Paths （双联通）

POJ 3352 Road Construction ； POJ 3177 Redundant Paths （双联通）

这两题好像是一样的&#xff0c;就是3177要去掉重边。 但是为什么要去重边呢&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;我认为如果有重边的话&#xff0c;应该也要考虑在内才是。 这两题我用了求割边&#xff0c;在去掉割边&#xff0c;用DFS缩…
阅读更多...
postman界面变成了左右结构怎么办

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

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

面向对象阶段个人总结

&#xfeff;&#xfeff;面向对象阶段的个人总结 我个人对面相对向的总结。我想到了我认为比较好的方法&#xff0c;就是对照每次学习一个大模块的前的章节目录进行回顾总结&#xff0c;比如我们这阶段学习是面向对象的课程&#xff0c;下面我就来按照章节 目录进行一个系统…
阅读更多...
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…
阅读更多...
2018.12.18运算符,分支结构(循环),异常处理,函数

2018.12.18运算符,分支结构(循环),异常处理,函数

1复习 <!DOCTYPE html><html><head> <meta charset"UTF-8"> <title>复习预习</title> <style> .b { /* 作用域: {}产生的, {作用域开始的标识, }作用域结束的标识 */ /*出现在作用域中的所有内…
阅读更多...
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 请求访…
阅读更多...
java异常预习

java异常预习

java中的异常捕获结构有try&#xff0c;catch&#xff0c;finally三部分组成。其中&#xff0c;try语句块存放的是可能发生异常的java语句&#xff1b;catch程序块在try语句块之后&#xff0c;用来激发被捕获的异常&#xff1b;finally语句块是异常处理结构的最后执行部分&…
阅读更多...
【亲测有效】Kali Linux无法安装网易云音乐的解决方案

【亲测有效】Kali Linux无法安装网易云音乐的解决方案

问题描述 由于 Kali Linux 的内核是基于 Debian 的&#xff0c;我们在安装网易云音乐的时候更偏向于选择安装网易云音乐 v1.1.0 deepin15&#xff08;64位&#xff09; 的包&#xff0c;可是我发现在安装过程中&#xff0c;无法定位 libqcef1 软件包&#xff0c;对于很多钟爱网…
阅读更多...
C/C++函数名修饰约定

C/C++函数名修饰约定

函数名字修饰&#xff08;Decorated Name&#xff09;方式 函数的名字修饰&#xff08;Decorated Name&#xff09;就是编译器在编译期间创建的一个字符串&#xff0c;用来指明函数的定义或原型。 正在装载数据…… LINK程序或其他工具有时需要指定函数的名字修饰来定位函数的…
阅读更多...
设计模式中类之间的关系

设计模式中类之间的关系

设计模式 个人感觉设计模式是程序员的核心技能 &#xff0c;然后看了一些设计模式的书&#xff0c;都是讲设计模式的一些理论&#xff0c;放在实现上都有点模糊&#xff0c;后来图书馆看到一本《设计模式的艺术》&#xff0c;感觉很不错&#xff0c;有一些比较具体且容易理解的…
阅读更多...
如何查看jar包的版本号？

如何查看jar包的版本号？

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 jar包根目录里的META-INF目录下的MANIFEST.MF文件里一般有会记录版本信息&#xff0c;可以到这个文件里查看 打开Java的JAR文件我们经…
阅读更多...
最新文章

Copyright @ 2022~2023