前言:
想系统学习前端面试题,强烈推荐浏览 在线电子书(支持手机版,不断更新) 。
本书特点:系统全面(涵盖前端核心技术点),简洁,针对性强(针对面试场景设计)。
欢迎在github上留言反馈
js原生
如何判断两个对象是不是相等?
- 【转成字符串判断】(不支持函数,正则), JSON.stringife(obj);JSON.parse(str)
插件:
- loadsh: 不支持函数和DOM节点比较
- 【循环遍历】
什么是Polyfill?
Polyfill是一块代码(通常是web上的js),为旧浏览器提供它没有原生支持的较新功能;抚平不同浏览器之间对JS实现的差异
eg:
使用Silverlight 模拟 html canvas元素的功能 或 模拟 CSS实现 rem单位的支持,或text-shadow,其他
<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
什么是函数复作用?
做和这个函数功能不相关的事情,理想状态,一个函数只专注完成一件功能
js实例方法与静态方法的区别,如何注入?
静态方法:
可以直接用类名,方法名去调用的
注入方式:
构造函数:
- 当做属性写入
- 自执行函数内,返回一个构造函数,当做属性写入也放入自执行函数
- class类:在方法/属性前添加static 字段
实例方法:
不能直接调用,必须先实例化才可以调用
注入方式:
- 对象,通过原型链prototype 注入
- 在class类方法的默认状态
class类的注入
class Person{
//加上static 就是静态方法,不需要实例化调用
static getName(name){
console.log(`我的名字是${name}`);
}
//say属于实例方法,要先new实例化后才能调用
say(){
console.log('开始说话')
}
}
let china = new Person();
china.say();
Person.getName('JAY')
function函数的注入
let Person=function (){
}
/*
* 静态方法:只针对当前实例,可直接调用
* */
Person.say=function (){
console.log('我是一个人');
}
/*
* 实例方法:先实例化才能调用,实例方法写在原型链里面
* */
Person.prototype.getName=function (name){
console.log(`我的名字是${name}`);
}
Person.say(); //正常打印,不能使用 Person.getName('Jay')
let china=new Person();
china.getName('JAY'); //正常打印 ,不能使用china.say();
构造函数能过自执行函数注入:
let Person=(function (){
let PersonInner=function (){
this.jump=function (){
console.log('跳转起来');
}
}
PersonInner.staticMethod=function (){
console.log('静态方法');
}
return PersonInner;
})()
//静态方法: 直接通过构造函数调用
Person.staticMethod();
//实例方法的调用:要先new
let china=new Person();
china.jump();
堆和栈的区别?
1)相同点:
堆和栈是两种数据结构,都是一种按序排列的数据结构,只能在一端(称为栈顶top) 对数据项进行插入和删除。堆栈是个特殊的存储区,主要功能是暂时存放数据和地址。
2)不同点
堆:堆内存一般是由语言运行环境分配管理,如python虚拟机控制内存和运行环境
栈:
堆(heap) | 栈(stack) | |
---|---|---|
定义 | 数据存储结构 | 定义一个变量时,计算机会在内存中开辟一块存储空间来存放这个变量的值,这块空间叫做栈 |
时效性 | 持久化 | 临时 |
Context(执行上下文) | 全局 | 局部 |
内存分配 | 手动申请/释放,若不释放,程序结束时可能由OS回收 | 自动申请/释放(出栈时),系统分配是有大小限制的,超过就会内存溢出报错 |
数据存放类型 | 对象类型 | 基本数据类型 |
特点 | / | 先进后出 |
栈示意图(先进后出):
let obj={
name:'girl friend'
}
b=obj;
b.name='strange';
console.log(obj);
堆示意图:
var arr = [1,2,3];
brr = arr;
brr[0] = 10;
alert( arr[0] );
堆栈关系:
【栈】左侧:栈中存放引用地址,这个地址在计算机中叫做引用变量
【堆】右侧:堆中存放对象,多个引用地址会指向同一个对象,JS节省存储空间
代码的复用有哪几种方式?
函数封装
继承 extend
复制
混入mixin
借用apply/call
进程与线程的区别?
进程 | 线程 | |
---|---|---|
尺度划分 | 大(一个进程至少有一个线程) | 小(数量多,并发高) |
内存占用 | 独立内存单元(处理隔离) | 共享内存(处理并发,极大提高效率) |
根本区别 | 操作系统资源分配的基本单位 | CPU任务调度和执行的基本单位 |
性能开销 | 大(程序切换消耗大,独立执行) | 小(同一类线程共享代码与数据空间,拥有独立的运行栈和程序计数器(PC) |
所处环境 | 操作系统(可运行进程(程序)) | 进程 (通过CPU调试,每个时间片中只有一个线程执行) |
包含关系 | 进程包含线程 | 线程依赖进程 |
参考资料:
[每个程序员都会遇到的面试问题:谈谈进程和线程的区别]()
js延迟加载的方式有哪些?
defer和async、动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)、按需异步载入js
defer:异步加载,延迟执行(文档解析完成后)
async:异步加载,立即执行
new操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
参考资料:
解释下变量提升?
js引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行行地运行。这造成了所有变量的声明语句,都会被提升到代码头部,这就叫做变量提升(hoisting).
js的执行过程?
js特点:异步,单线程;
一、语法分析
js脚本代码块加载完毕后,进入语法分析,判断 语法是不中正确,如果不正确,向外抛出 语法错误(syntaxError), 停止该js代码块的执行,然后继续查找并加载下一个代码块;如果语法正确,则进入预编译阶段
二、预编译阶段
前置知识:
js运行环境:
- 全局环境:js代码加载完毕后,代码进入全局环境)
- 函数环境:函数调用执行时,进入该函数环境,不同函数则函数环境不同
- eval :不建议使用,有安全、性能问题
预编译阶段过程如下:
函数调用栈:
- 形成执行上下文:进入不同环境创建相应的执行上下,可创建多个
- 形成函数调用栈:js引擎以栈的形式处理执行上下文 (栈底永远全局执行上下文,栈顶永远是当前执行上下文)
创建执行上下文:
- 创建变量对象
- 建立作用域链
- 确定this指向
三、执行阶段:
可参考: 宏任务与微任务,事件循环event loop介绍
推荐文章:
js中的宏任务与微任务,事件循环event loop?
宏任务(macro-task):
同步任务 :js引擎按主线程按顺序执行的任务,一个一个任务执行,形成一个执行栈(函数调用栈)
eg:console.log(11); let a=10;
异步任务 :不直接进入js引擎主线程,而是满足条件时触发,相关的线程将该任务推进 任务队列,等待js引擎主线程上的任务执行完毕,再读取执行中的任务
eg:ajax, dom事件,setTimeout
微任务(micro- task)
微任务是在es6和node环境中出现的一个任务类型
eg:promise,process.nextTick
js引擎执行过程: 宏任务(同步任务) ---> 微任务 --> 宏任务(异步任务)
柯里化函数的例子,并说明柯里化的好处?
柯里化是一种模式,其中一个具有多个参数的函数被分解成多个函数,当被串联调用时,这些函数将一次累加一个所需的所有参数。这种技术有助于使用函数式编写的代码更容易阅读和编写。需要注意的是,要实现一个函数,它需要从一个函数开始,然后分解成一系列函数,每个函数接受一个参数。
使用场景:
- 使代码便于理解 //react-redux,connect方法, 将component要用到的state切面和action注入到它的property中,达到ui组件,和容器组件分离的目的。
let Container=connect(mapStateToProps,mapDispatchToProps)(Component);
let { Map }=Immutable;
let obj={
a:1,
b:2
}
//克隆出一个
let map=Map(obj);
//调用immutable中的map对象下的set方法来修改指定key的value
let map1=map.set('a',10);
let map2=map1.set('a',20);
//两个对象修改互不影响
console.log(map1.get('a'),map2.get('a')); //10,20
判断一个变量是不是数组的有哪几种方法?
- Object.prototype.toString.call(arg) === '[object Array]' //目前最准确的方法
- Array.isArray(arg) //有兼容性问题,IE8下不支持
- arg instanceof Array //不能跨iframe使用
- arg.constructor===Array //不能跨iframe使用,constructor可以改写, a.constructor=Object; 会导致判断不准确
//最通用的方法
var arr = [];
function isArray(str){
return Object.prototype.toString.call(str) == "[object Array]";
}
console.log(isArray(arr));//ie所有版本均支持;
0.1+0.2 为什么不等于0.3?
浮点数据误差问题,JS中整数与小数都只有一种类型:Number;
它的实现遵循IEEE 754标准,使用64位固定长度表示,就是标准的double双精度浮点数。
这样存储的存储结构优点:归一化处理整数和小数,节省存储空间。
64位比特可分为三个部分:
- 符号位S: 第1位正负数符号位(sign),0代表正数,1代表负数;
- 指数位E:中间的11位存储指数(exponent),用来表示次方数;
- 尾数位M:最后52位是尾数(mantissa),超出的部分自动进一舍零;
数学工式如上图:
4.5 转换过程
- 比较10进制的4.5转换成2进制就是 100.1
- 科学计数法表示注是(二进制) 1.001*2^2
- 舍去1后,M=001;
- E=1025
如何解决js 精度计算问题?
类库:
- Math.js
哪些操作会造成内存泄漏?
内存泄漏原因:不再用到的内存,没有及时释放,就叫做内存泄漏;
- 全局变量缓存数据 (无法被垃圾回收机制收集)
- 定时器没有清除
- 闭包的循环引用
- js错误引用dom元素 (dom虽然删除,但是引用还在内存中)
js垃圾回收机制?
- 引用计数 (如果没有引用指向该对象,对象将被垃圾回收机制回收,缺点:在循环引用的情况下,存在局限性)
- 标记清除 (处理循环引用的问题,和引用计数本质相同,可达内存被标记,其余的被当作垃圾回收)
null,undefined区别?分别会在什么情况下出现?
null:代表无的状态,此处不应该有值 ---(之前没定义这个变量,就是null)---作用对象原形的终点
undefined:代表未找到,缺少值---(之前定义了,却没有赋值就是undefined)---变量赋值,函数传参
js语言的特点?
答:异步,单线程,事件驱动,解释性语言,弱类型;
什么是作用域链?
作用域链就是【变量】和【函数】和可访问范围,
控制着变量和函数的可见性与生命周期,在js中变量的作用域有全局作用域和局部作用域 ;
什么是闭包,如何使用,闭包有什么问题?
闭包是由函数创建的一个词法作用域,里面的变量被引用后(外部函数引用,前提得先return出来),可以在这个词法环境之外使用;
函数嵌套函数,能够读取【其他函数】内部变量的【函数】;
闭包一定得return才能读取内部的值;
闭包的原理就是作用域链
用途
- 创建内部变量,使得这些变量不能随意被外部修改,但是又可以通过指定的函数接口修改
- 减少全局变量
- 让这些值始终保持在内存中
闭包的问题:
- 耗性能:闭包会使函数内的变量一直保持在内存当中,
解决:在退出函数之前,将不使用的函数变量全部删除;
//使用自执行函数写法
//定义一个闭包
let secretFn=(function (){
//变量secrent只有secretFn内的getSecret, setSecret 才可以访问,外部无法访问
let secrent='100';
let getSecret=function (){
return secrent;
}
let setSecret=function (newSecrent) {
secrent=newSecrent;
}
return {
getSecret,
setSecret
}
})()
console.log(secretFn.getSecret());
secretFn.setSecret(200);
console.log(secretFn.getSecret());
console.log(secretFn.secrent); //Type error 无法访问
//使用new写法
//定义一个闭包
let SecretFn=function (){
//变量secrent只有secretFn内的getSecret, setSecret 才可以访问,外部无法访问
let secrent='100';
this.getSecret=function (){
return secrent;
}
this.setSecret=function (newSecrent) {
secrent=newSecrent;
}
}
const secretOne=new SecretFn();
console.log(secretOne.getSecret());
secretOne.setSecret(200);
console.log(secretOne.getSecret());
function F() {
let a = 1
window.G = function () {
console.log(a)
}
}
F()
G() // 1, G能访问到F函数的变量,他就是闭包
如何获取闭包函数内的变量?
- 函数嵌套,闭包
- 函数返回值,return
js有哪几种数据类型?
js一共七种类型;
基本类型(6):String,Boolean,Number,Undefined,Null,Symbol(创建唯一的值)
引用类型(1):Object(Function,Array, Date, RegExp)
js如何判断数据类型?
- typeof :不能判断array,object,function;
- instanceof :可以使用可以用来判断数组; [1] instanceof Array 返回 true
- toSring Object.prototype.toString.call([]) 返回true
- constructor [].constructor===Array 返回true
js有哪些内置对象?
object是js中所有对象的父对象;
数据封闭类对象:object,array,boolean,number,string
其他对象:function,arguments,math,date,RegExp,error
js如何实现继承?
- 通过原型链(prototype)来实现
- 通过构造函数继承-(把子函数中使用)
- es6的class,配合extend来实现继承
- 拷贝继承(创建一个extendFun的方法)
前端路由实现原理?
前端实现路由有两种方式:
1) history模式
主要借助html5的两个api,
window.history.pushState("/detail") //添加历史记录
window.history.replaceState("/detail") //替换当前历史记录
两个 API 都会操作浏览器的历史记录,而不会引起页面的刷新。
2) hash模式
实现的api:
监听哈希变化触发的事件( hashchange) 事件,
window.location 处理哈希的改变时不会重新渲染页面
性能优化:
如何进行性能优化?
减少网络请求(大小,数量)---网络会有延迟,大部分浏览器一性能获取6-8个请求:
- 资源合并/代码压缩:js,图片(webP,base64),css
降低CPU消耗
- 减少DOM操作:缓存DOM查询,合拼DOM插入,事件节流
- 缓存:保持名字不变,如果要改变可以使用hash来改变
加速服务端资源返回的速度:
- cdn(千牛,bootcdn)
- 懒加载(主要处理图片,默认图片代码真实图片)
- SSR后端渲染
图片懒加载的实现原理?
原理:img src中放入一张很小的图片,把真实的图片放在img的属性中,data-src, 通过监听页面滚动过程中,图片距离顶部的高度来设置页面是否显示;
一般可以使用
- jquery.lazyload.js //到了可视区才加载
- lazysizes.js //没有到可视区才显示功能,不依赖jquery
注意事项:
- 使用节流函数进行性能优化
如何在js中实现不可变对象?
- 深拷贝,性能非常差,不适合大规模使用
- immutable.js,自成一体的一套数据结构,性能良好,但是学习额外的api
- immer,利用proxy特性,无需学习额外的api,性能良好
immutable实现原理?
原理:持久化数据结构,结构共享,只修改对象树中变化的节点和受它影响的父节点,其它节点共享;
immutable data就是一旦创建,就不能再被更改的数据。对immutable对象的任何修改或添加/删除操作都会返回一个新的immutable对象。
优点:
- 降低mutable 可变对象的复杂度
- 节省内存空间 (不用深拷贝对象,共享结构,没有被引用的对象会被垃圾回收)
- 数据回退,任意穿越(每次数据都是不一样的,只要把这些数据放在一个数组中储存起来,可任意回退)
- 拥抱函数式编程,关心数据的映射,命令式编程关心解决问题的步骤,函数式编程比命令式编程更适用于前端开发。因为只要输入一致,输出必然一致,这样开的组件更易于调试和组装。
缺点
- 容易与原生对象混
什么是重排什么是重绘?
DOM的结构属性改变就会触发重排或者重绘;
只改变DOM节点对象的css的颜色,不改变大小,其他排版属性就属于重绘;
visibility:hidden,隐藏dom节点只触发重绘,display:none隐藏dom节点触发重排和重绘;
改变padding会触发:重排+重绘
什么是深拷贝和浅拷贝,如何实现深拷贝?
js中数据类型分为2类,引用数据类型(array,object,function),和其他数据类型(string,number,boolean,null,undefind);
深拷贝指拷贝后的对象与原来的对象相互独立,修改任何一方,其他一方都不受影响;
深拷贝主要有
- es6的 spread展开,可以深拷贝数组,对象;
- for循环依次读取复制
- 先通过JSON.stringify把对象转化成字符串,再通过 JSON.parse把字符串转换成对象 (如果对象中包含函数,正则表达式会丢失;对象有循环引用会报错;)
- 外部库:jquery extend, 使用标准库 lodash的 cloneDeep
注意事项:
Object.assign 只能深拷贝第一层,深层的还是浅拷贝;
深拷贝方法:jquery的extend
$.extend([deep],target,object1,object2....) //deep不写就是浅拷贝
let phone={
from:"Apple"
}
let phone1={
product:"iphone",
price:5000
}
let phone2={
product:"ipad"
price:4000,
}
$.extend(true,obj1,obj2); //进行深拷贝,把obj2合拼到obj1中
$.extend(obj1,obj2); //不进行深拷贝
什么是事件节流和函数防抖的区别,和实际运用?
相同点:为了限制函数执行的次数 ,导致的性能浪费;
不同点:
事件节流throttle:指定时间周期内,只能执行一次;
运用
- 滚动到底部触发事件
- 函数防抖 debounce:指定时间周期后,才能执行此函数, 如果这周期内重复触发,就会重新开始计算
- 输入框实时搜索
- window resize
长列表优化?
思路:虚拟列表
- 只显示部分数据
- 通过监听滚动条的位置(向上滚动/向下)来进行,来进行对数组进行动态替换
- 顶部使用padding来代替
介绍下PWA,为什么service worker 可以提高性能 ?
定义:pwa渐近式增弹网页应用
PWA特点:
- 拥有桌面入口,可安装
- 原生应用界面: //在manifest文件中配置,自定义桌面图标/导航栏颜色
- 可离线访问 ,需要Https环境 //本地环境localhost也可以调试
- 支持Push推送
后台加载,哪怕页面关闭,pwa仍然可以在后台运行获取数据(有限制) //哪怕chrome关闭
service worker是html5中的api,它在web worker的基础上加了持久缓存和网络代理能力,结合cache api面向提供了js来操作浏览器缓存的能力。service worker接管网页请求,做为中间层;
service worker特点:
- 拥有独立的执行线程,单独的作用域范围,单独的运行环境,有自己独立的context上下文。
- 由于有独立线程,service worker不能直接操作页面DOM。但可以通过事件机制来处理,例如使用postMessage
canvas
canvas与svg区别?
- 历史:svg有十多年历史,并不是html5专用标签;
- 展示效果:svg导出后的效果是矢量图形,而canvas显示效果是位图(所以canvas可以引入图片)
- 技术原理:svg(XML文档)是通过html绘制--可以使用DOM操作,canvas通过js绘制;
- canvas支持颜色较svg多;
- 使用案例:svg(百度地图),canvas(图表)
canvas 与webGL的关系?
canvas就是一个画布,可以在canvas上获取2D上下文和3D上下文,其中3D上下文一般就是webGL.
webGL 是使用 js去调用部分封装过的OpenGL es2.0 标准接口,去提供硬件级别的3D图形加速功能。
三都的关系 : javascript-> webGL -> OpenGL -> ... -> 显卡 并 把最终渲染出来的图形呈现在canvas
webGL常用库:
- three.js //在浏览器绘制3D的js库,底层是webGL ( three.js会对不支持的浏览器做降级方案,使用casnvas 2D api处理, 有两个Rennderer ,,webGLRenderer, CanvasRenderer
canvas常用库:
- echarts //图表(柱状图、饼图、K线图、雷达图、热力图、关系图、树图、漏斗图、仪表盘、地图),也有使用webGL的3D图形
- antV //阿里开的图形引擎
js事件
js事件机制?
javascript是事件驱动型语言,网页上的任意操作(键盘,鼠标)会产生一个“事件”(event),当事件发现时,可以对事件进行响应,具体如何响应某个事件由事件处理函数完成。
1)事件流
事件流描述的是从页面中接受事件的顺序
DOM事件流的三个阶段:
- 捕获阶段:先调用捕获阶段的处理函数 btn.addEventListen('click'),事件从window对象自上而下向目标节点传播的阶段;
- 目标阶段:调用目标阶段的处理函数 ;
- 冒泡阶段:调用冒泡阶段的处理函数,事件从目标节点自下而上向window对象传播的阶段;
bug说明 :下图中缺少:html标签
2)DOM事件级别
DOM级别分为四级,由于DOM1中没有事件相关的内容,即没有DOM1级事件,所以DOM事件分为3个级别,分别是:DOM 0/2/3
- DOM0:el.onclick=function(){} // <button onclick="clickBtn()">btn</button>
- DOM2: el.addEventListener(eventName,callback,useCapture)
- click事件
- DOM3: 在DOM2的基础上,增加更多的事件类型
- UI事件:load、scroll
- 焦点事件:blur、focus
- 鼠标事件:dbclick、mouseup
- 键盘事件:keydown、keypress
- .....
- 说明:DOM3级事件允许使用者自定义一些事件
参考:js事件原理、事件委托、事件冒泡和事件绑定 addEventListener
3)事件代理
请参考:什么是事件委托/事件代理?
4)事件对象
event
- event.preventDefault() //阻止默认行为
- event.stoppropagation() //阻止事件冒泡
- event.target & event.currentTarget //目标对象,target指向事件真正的发出者,currentTarget指向监听事件者
5)铺获与冒泡的顺序问题
- 绑定多个DOM事件,先注册先执行
参考资料: 浏览器事件系统
什么是事件委托/事件代理?
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件,利用父级去触发子级的事件;
优点:
- 节省内存占用,减少事件注册
- 新增子对象时,无需再次对其绑定事件,适合动态添加元素
缺点(局限性):
- focus,blur 事件本身没有事件冒泡机制,所以无法委托
- mousemove,mouseout,需要不断通过位置去计算定位,对性能消耗高,不适合事件委托
- 层级过多,冒泡过程中可能被某层阻止掉(建议就近委托)
<script>
// jquery当中的事件委托,支持动态添加的元素
$('#ui').on('click','li',function (event){
console.log(event.target.innerHTML);
})
</script>
跨域
如何解决跨域的问题?
一、CORS: 跨域资源共享,
Access-Contorl-Allow-Origin 后台设置允许跨域访问的url;
使用额外的HTTP头告诉浏览器,
cors分类:简单请求,非简单请求;
- 简单请求:不会触发cors预检请求,
- 非简单请求:
二、通过jsonp
三、nodejs中间件代理,在服务端拿到数后,再把数据返回给前端,nginx代理
四、websocket协议跨域
五、postMessage,可以实现多个页面之间的通讯(html5中的一个api)
jsonp介绍、原理?
利用script标签没有跨域限制,来达到第三方通讯的目的,需要后端配合jsonp 的解释,第三方产生的响应为json数据的包装,即json padding
步骤:
- 【发送请求】:发送请求,携带返回数据的包装方法
- 【返回数据】后端返回数据,使用cb包装数据
- 【执行前端方法】前端加载完数据,调用本地已经封装好的cb方法,获取到回调的数据
form表单可以跨域吗?
可以;
跨域的唯一标准,就是你不能通过请求的方式拿到别人内容;
form表单只是发请求,而不是获取数据;
ajax一直在等待别人的done or fail 这就涉及到拿别人数据;
this
bind,call,apply的区别?
共用点:
- 改变函数执行时的上下文,再具体点就是改变函数运行时this的指向
- 三者第一个参数都是this要指向的对象,如果未传入,默认指向全局window
- 三者都可以传入参数
不同点:写法不一样
bind: fn.bind(thisArg,队列or数组)()
call: fn.call(thisArg, arg1, arg2,...)
apply: fn.apply(thisArg, [argsArray])
可以做的几个事:
- 求数组中的最大和最小值;
- 利用call和apply做继承
const arr=[1,2,3]
Max.max.apply(null ,arr);
this的指向问题?
this 是函数运行时所在的环境对象
this用法的四种情况:
- 纯粹的函数调用
- 作用对象方法的调用
- 作为构造函数调用
- apply调用
this的指向原则:
- this永远指向一个对象
- this指向完全取决于函数调用的位置
参考:
apply,call区别?
apply,call作用都是改变this的指向,只是参数写入的不同
apply把参数放入一个数组当中 ;
call把参数依次写入;
let params={
a:20
}
function fun(value1,value2){
console.log(this.a,value1,value2);
}
//apply,call功能一样,都是为了改变this的指向,参数的写入方式有不同
fun.apply(params,[11,12]);
fun.call(params,11,12);
API
String api?
属性:
- 长度:length
方法
增:
- 前/后:+
中间:
- 索引:先切割(str.slice(startIndex,endIndex)),再拼装
- 字符(首个,全部): str.replace(new RegExp(targetStr,'g'),targetStr+addStr);
- 删:
- 指定字符: replace+正则替换为空
- 指定索引删除:str.slice(startIndex,endIndex)
改:
- 正则替换
查(遍历):
判断
- 是否包含指定字符串: includes
- 是否以指定字符串(开始/结尾),可指定开始位置:startsWith,endsWith
查询
索引:
- -指定索引的字符,chatAt
- 类数组的方式: str[index]
字符
- (首次/最后一次)出现的索引: indexOf, lastIndexOf
- 统计:出现的总次数, split分隔后数组长度-1
- 返回指定符:substring(支持负数): 两个索引之间
其他操作:
- 重复:repeat
- 去除空格(开头+结尾): trim
- 转成小/大字母:toLowerCase/toUpperCase
Array api?
原型方法
方法:
- Array.from(): 把类数组/可迭代对象中创建一个新的数组实例
- Array.isArray(); //判断某个变量是否是数组对象
- Array.of(val1,val2) //创建数组 ,相当于 [val1,val2]
属性:
- Array.length: //不常用
实例属性:
- 长度:length
实例方法:
定义:
- 字面量赋值:let arr=['a'
- 构造函数:let arr=new Array(['a']);
增加:
- 开头(可支持多个参数):arr.unshift(val1,val2);
- 尾部 :arr.push('a')
中间:
- 指定索引位置增加:arr.splice(fromIndex,0,val1,val2)
- 指定元素后面添加:使用indexOf找到索引,再能过 arr.splice(fromIndex,0,val1,val2) 遍历添加
删除:
- 开头:arr.shift(), 返回被删除的元素,改变原数据
- 结尾:arr.pop(), 返回被删除的元素,改变原数组;
- 中间(对原数组没影响):arr.splice(startIndex,deleteNum,addNewValue) //在指定索引位置删除元素
修改
- 索引:arr[0]='a'
查询:
判断:
- 是否包含:arr.include('a')
满足某个条件:
- some(有一个满足条件)
- every(所有都满足条件)
- findIndex(满足条件的第一个索引)
- 索引:arr.indexOf('a')
遍历:
不修改原对象:
- forEach: 返回的是经过处理后的数组,长度不变
- reduce(reduceRight): 可返回任意值,(遍历->处理并返回)
- 修改原对象:filter ,map
- 其他:
- 填充 : arr.fill(value,start,end) 用一个固定值填充一个数组中,从起始索引(包含)到终止索引(不包含)内的全部元素。
- 元素翻转:arr.reverse(); //原数组改变
- 排序:arr.sort();
- 连接:arr.join('-'),按照指定链接符号, 把array转出一个string
- 切割:arr.slice(startIndex,endIndex); startIndex包含,endIndex不包含;//返回被切割后的数组(对原数组的浅拷贝),不影响原数据
- 获取对象所有的keys(Array Iterator对象): keys, 要使用 for(const key of iterator){console.log(key)} 才能查看,直接打印就是一个空的{}
Object Api?
构造函数属性:
- Object.length //值为1
- Object.prototype //可为所有Object类型对象添加属性
构造函数方法:
实例属性(object.prototype对象上):
- constructor : 特定函数,用于创建对象的原型
- proto : (被冻结,禁止修改)指向当对象被实例化的时候,用作原型对象
实例方法:
- toString: (不常用)返回对象的字符串表示
- hasOwnProperty: 判断对象自身属性(非原型链继承),返回boolean
Function Api?
原型属性(Function):
- arguments : 以数组形式获取传入函数的所有函数
- name : 获取函数的名称
实例属性(Function):
- constructor : 声明函数的原型构造方法
实例方法(Function.prototype):
- apply
- bind
- call
Number Api?
原型Number(属性):
原型Number(方法):
- 判断值是不是NaN: isNaN
- 判断是不是有穷数:isFinite
- 判断是不是整数: isInteger
Math Api?
原型方法(Math):
- 绝对值: abs(x)
- 随机数:返回0到1之间的伪随机数据,random
- 向上/下取整: ceil/floor
- 次幂: pow(4,3) //4x4x4 等于 4的3次幂
js 全局 函数?
全局属性:
- 无穷大:Infinity , -Infinity //正/负 无穷大
- 未定义:undefined
- NaN
全局函数
- 解析字符串并返回整数/浮点数:parseInt,parseFloat
- 把对象的值转成数字:Number
- 把对象的值转成字符串:String
- 重新运算参数的内容: eval
- 判断某个值是不是数字:isNaN
- 判断某个值是否为无穷大:isFinite //有限的返回true,无穷返回false, NaN返回false
- 编码/解码URI: encodeURI, decodeURI
- 编码/解码URI: encodeURIComponent, decodeURIComponent
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。