JS葵花宝典秘籍笔记,为你保驾护航金三银四
前端葵花宝典秘籍,为你保驾护航金三银四
Github来源: | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者
种草一句话:越努力,越幸运!以现在大多数人的努力程度之低,根本轮不到可以拼天赋。
分享一下前端面试秘籍,希望能够帮助更多的小伙伴。加我😚即可交流问题(不是大佬,互相学习,创造良好的学习环境)。以下哪些你不懂呢?
- 首先关注公众号:微信搜:程序员哆啦A梦
- QQ群1:711613774(已满)
- QQ群2:634382181
- 微信号:xiaoda0423(备注发送:已关注掘金魔王哪吒)
一面
一面的问题不是很难,但是要得到面试官比较高的评价,还是需要一定的表达能力和对技术比较本质的认识的,如果在回答问题的时候能够做一些适当的扩展,自然会让面试官对你有不一样的评价。
回答问题的步骤:先回答问题本质,在回答具体细节,最后做一些平时编程中的扩展。面试官会觉得你确实是在这个技术上面下过功夫的。
二面
问题都比较直接,答案也是知道就知道,不知道就不知道。这些问题一部分是基础,一部分是根据你的专业技能的来提问的。
在面试中有一些回答不出来很正常,但是如果能够做到出乎面试官的意料,也是面试官对你很重要的加分项。
三面
会问项目多一点,对自己做过的项目一定要深入,包括使用使用到的技术原理、为什么要使用这些技术。
项目中某个比较重要的点是如何实现的(需要深入技术的原理),遇到的最大困难是什么(有哪些),你怎么解决的?如果需要扩展某个功能,如何降低系统的耦合度,如果针对某个功能进行优化,你会怎么设计和优化。
四面
主要看你的潜力(就是有没有培养的价值),但是从你平时的学习中仍然是可以看得出来的。
五面
诚信至上,所以在简历中不要存在任何虚假信息,企图通过虚假信息得到面试机会的后果得不偿失。对自己的是否一个明确的职业规划,表达能力、与同事相处的能力以及对工作的态度。
arguments[]
函数参数数组
arguments[]
数组只定义在函数体中。
在函数体中,**arguments
指代该函数的Arguments
对象。该对象拥有数值属性,可当做数组来用,含有传入到该函数的所有参数。arguments
标识符本质上是一个局部变量,在每个函数中会自动声明并初始化该变量**。
arguments
仅在函数体中时,才指代Arguments
对象,在全局代码中为undefined
。
Arguments
函数的参数和其他属性。
Arguments
对象只定义函数体中,从技术上来说,Arguments
对象不是数组,但它拥有数值属性和length
属性。
数值类型可当做是数组元素,length
属性则表示数组元素的个数,这些数组元素是传递给该方法的参数值。元素0是第一个参数,元素1是第二个参数等等。
所有作为参数传入的值都会变成Arguments
对象的数组元素,即使在函数声明中没有指定参数名。
callee
和length
属性。
- callee属性 指代当前正在执行的函数
- length属性 传递给函数的参数个数,以及Arguments对象中数组元素的个数
Arguments
对象
arguments
是一个对应于传递给函数的参数的类数组对象。
示例:
1 | function func1(a, b, c) { |
可以被转换为一个真正的Array:
1 | var args = Array.prototype.slice.call(arguments); |
Arguments
对象的主要用途:
- 用来判断有多少个参数传入函数,还可以用来指代未命名的参数
- 除了数组元素和length属性,还可以通过callee属性来指代匿名函数本身。
Arguments.callee当前正在执行的函数
arguments.callee
,指代当前正在执行的函数,通过它可以引用匿名函数自身。该属性只定义在函数体中。
示例:
1 | // 在匿名函数内使用callee属性来引用匿名函数自身 |
Arguments.length传给函数的参数个数
arguments.length
,Arguments
对象的length
属性表示给当前函数的参数个数。该属性只能定义在函数体中。
该属性表示的是实际传入的参数个数,不是声明的参数个数。
示例:
1 | alert("实参长度:" +arguments.length); |
Object.keys()
Object.keys()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
语法
1 | Object.keys(obj) |
参数
obj
要返回其枚举自身属性的对象。
返回值
一个表示给定对象的所有可枚举属性的字符串数组。
示例:
1 | // simple array |
Object.getOwnPropertyNames()
Object.getOwnPropertyNames()
方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol
值作为名称的属性)组成的数组。
语法Object.getOwnPropertyNames(obj)
参数
obj
一个对象,其自身的可枚举和不可枚举属性的名称被返回。
返回值
在给定对象上找到的自身属性对应的字符串数组。
示例:
1 | var arr = ["a", "b", "c"]; |
Object.create()
Object.create()
方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
。
1 | const person = { |
语法Object.create(proto,[propertiesObject])
参数
proto
新创建对象的原型对象。
propertiesObject
可选。需要传入一个对象,该传入对象的自有可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。
返回值
一个新对象,带着指定的原型对象和属性。
例外
如果propertiesObject
参数是 null
或非原始包装对象,则抛出一个 TypeError
异常。
用 Object.create
实现类式继承
1 | // Shape - 父类(superclass) |
如果你希望能继承到多个对象,则可以使用混入的方式。
1 | function MyClass() { |
Object.assign
会把 OtherSuperClass
原型上的函数拷贝到 MyClass
原型上,使 MyClass
的所有实例都可用 OtherSuperClass
的方法。
使用 Object.create 的 propertyObject
参数
1 | var o; |
vue准备工作
- 学习认识flow,Vuejs源码目录设计,Vuejs源码构建,从入口开始(了解Vue准备)。
Flow
是facebook
出品的JavaScript
静态类型检查工具。Vue
的源码利用了flow
做了静态类型检查。
flow的工作方式:
通常类型检查分为2种:第一种:类型推断;第二种:类型注解。
什么是类型推断呢?
通过变量的使用上下文来推断出变量类型。
什么是类型注解呢?
事先注解好想要的类型,flow会基于这些注解来判断。
在Vuejs的主目录下有.flowconfig
文件,是flow
的配置文件,[libs]
部分是用来描述包含指定库定义的目录。
flow
文件夹目录:
compiler.js
编译相关component.js
组件数据结构global-api.js
global api结构modules.js
第三方库定义options.js
选项相关ssr.js
服务端渲染相关vnode.js
虚拟node相关
了解Vue.js源码目录src下:
compiler
编译相关core
核心代码platforms
不同平台的支持server
服务端渲染sfc
-.vue
文件解析shared
共享代码
Vuejs源码是基于Rollup构建的。
Vue 初始化过程
推荐:Vue 初始化过程
init流程图
Vue的本质:其实就是一个用Function实现的Class,通过它的原型prototype以及它本身扩展的一系列的方法和属性。
对数据渲染的过程有了更深的一层理解,从new Vue()
开始,创建了一个vue是对象,会先进行init初始化——>$mount()——>compile(若已经是render则该过程不需要)——>render——>创建VNode——>patch过程——>生成真实的DOM
null
如果想要任意类型T
可以为null
或者是undefined
,只需写为?T
的格式。
1 | var foo: string = null |
Vue项目中为什么要在列表组件中写key,其作用是什么
key是给每个vnode的唯一的id,可以依靠key,更准确,更快的拿到oldVnode中对应的vnode节点。
['1','2','3'].map(parseInt)
答案是[1,NaN,NaN]
,为什么不是[1,2,3]
呢?
map函数的第一个参数callback,这个callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引。
1 | arr.map(callback: (value:T, index: number, array: T[]) => U, thisArg?:any); |
- parseInt是用来解析字符串的,使得字符串成为指定基数的整数。接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。
1 | parseInt(string, radix); |
parseINT('1', 0)
表示 radix 为0时,且string参数不以”0x”和”0”开头时,按照10为基数进行处理,返回为1。
parseInt('2',1)
,基数为1,(1进制),表示的数中,最大值小于2,所以无法解析,返回为NaN。
什么是防抖和节流
防抖,字面意思放置的手抖再次触发。
1 | onReachBottom() { |
触发高频事件后n秒后函数只会执行一次,如果n秒内高频事件再次被触发,则需要重新计算时间。
1 | // 掘金:魔王哪吒 |
节流,字面节约流量,高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执 行频率。
1 | // 掘金:魔王哪吒 |
Set, Map, WeakSet, WeakMap
set,对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用
weakset,成员都是对象,成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏。
Map,本质上是键值对的集合,类似集合,可以遍历,方法很多,可以跟各种数据格式转换。
WeakMap,只接收对象为键名(null除外),不接收其他类型的值作为键名,键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的,不能遍历,方法有get,set,has,delete
深度优先遍历和广度优先遍历
深度优先遍历
指从某个顶点出发,首先访问这个顶点,然后找出刚访问 这个结点的第一个未被访问的邻结点,然后再以此邻结点为顶点,继续找它的 下一个顶点进行访问。重复此步骤,直至所有结点都被访问完为止。
广度优先遍历
是从某个顶点出发,首先访问这个顶点,然后找出刚访问这个结点所有未被访问的邻结点,访问完后再访问这些结点中第一个邻结点的所有结点,重复此方法,直到所有结点都被访问完为止。
1 | //1.深度优先遍历的递归写法 |
1 | //2.深度优先遍历的非递归写法 |
1 | //3.广度优先遍历的递归写法 |
1 | //4.广度优先遍历的非递归写法 |
实现一个拷贝函数?
Object.prototype.toString()
toString()
方法返回一个表示该对象的字符串。
1 | function Dog(name) { |
语法
1 | obj.toString() |
每个对象都有一个 toString()
方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString()
方法被每个 Object
对象继承。如果此方法在自定义对象中未被覆盖,toString()
返回 "[object type]"
,其中 type
是对象的类型。
1 | var o = new Object(); |
使用
toString()
检测对象类型
可以通过 toString()
来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString()
来检测,需要以 Function.prototype.call()
或者 Function.prototype.apply()
的形式来调用,传递要检查的对象作为第一个参数,称为 thisArg
。
示例:
1 | var toString = Object.prototype.toString; |
Function.prototype.call()
call()
方法使用一个指定的 this
值和单独给出的一个或多个参数来调用一个函数。
call()
方法接受的是一个参数列表
示例:
1 | // 掘金:魔王哪吒 |
语法
1 | function.call(thisArg, arg1, arg2, ...) |
thisArg
可选的。在 function
函数运行时使用的 this
值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined
时会自动替换为指向全局对象,原始值会被包装。
arg1, arg2, ...
指定的参数列表。
返回值
使用调用者提供的 this
值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined
。
描述
call()
允许为不同的对象分配和调用属于一个对象的函数/方法。
call()
提供新的 this
值给当前调用的函数/方法。你可以使用 call
来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。
使用 call 方法调用父构造函数
示例:
1 | // 掘金:魔王哪吒 |
Function.prototype.apply()
apply()
方法调用一个具有给定this
值的函数,以及以一个数组(或类数组对象)的形式提供的参数。
语法
1 | // 掘金:魔王哪吒 |
参数
thisArg
必选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined
时会自动替换为指向全局对象,原始值会被包装。
argsArray
可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined
,则表示不需要传入任何参数。从ECMAScript 5
开始可以使用类数组对象。
返回值
调用有指定this
值和参数的函数的结果。
描述
在调用一个存在的函数时,你可以为其指定一个 this 对象。 this 指当前对象,也就是正在调用这个函数的对象。 使用 apply, 你可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。
用 apply 将数组各项添加到另一个数组
1 | // 掘金:魔王哪吒 |
Function.prototype.bind()
bind()
方法创建一个新的函数,在 bind()
被调用时,这个新函数的 this
被指定为 bind()
的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
1 | // 掘金:魔王哪吒 |
语法
1 | // 掘金:魔王哪吒 |
返回值
返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。
创建绑定函数
1 | // 掘金:魔王哪吒 |
在默认情况下,使用 window.setTimeout()
时,this
关键字会指向 window
(或 global
)对象。当类的方法中需要 this
指向类的实例时,你可能需要显式地把 this
绑定到回调函数,就不会丢失该实例的引用。
将一个类似于数组的对象转换成一个真正的数组
1 | // 掘金:魔王哪吒 |
Array.prototype.slice()
slice()
方法返回一个新的数组对象,这一对象是一个由 begin 和 end
决定的原数组的浅拷贝(包括 begin
,不包括end
)。原始数组不会被改变。
1 | // 掘金:魔王哪吒 |
语法
1 | // 掘金:魔王哪吒 |
返回值
一个含有被提取元素的新数组。
描述
slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:
如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。
如果向两个数组任一中添加了新元素,则另一个不会受到影响。
类数组(Array-like)对象
slice 方法可以用来将一个类数组(Array-like
)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。
1 | // 掘金:魔王哪吒 |
除了使用 Array.prototype.slice.call(arguments)
,你也可以简单的使用 [].slice.call(arguments)
来代替。
可以使用 bind 来简化该过程
1 | // 掘金:魔王哪吒 |
环状数据
1 | // 掘金:魔王哪吒 |
拷贝这样封闭的环状数据结构,会导致死循环
先说说什么是深拷贝与浅拷贝
浅拷贝:也就是拷贝A对象里面的数据,但是不拷贝A对象里面的子对象
深拷贝:会克隆出一个对象,数据相同,但是引用地址不同(就是拷贝A对象里面的数据,而且拷贝它里面的子对象)
浅拷贝和深拷贝的区别
推荐: 请分别用深度优先思想和广度优先思想实现一个拷贝函数? 每日一题系列(六)
uniapp实现小程序微信登录
推荐:企业微信开放平台注册流程
1 | <button open-type="getUserInfo"/> |
补充:app
生成签名证书
testalias 和 test.keystore中的'test'
都是可以修改的,可以替换为自己项目中的名字。输入下面的keytool -genkey
命令就可以生成证书了
1 | keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore |
用签名生成工具生成签名
uniapp的mainfest.json
文件配置中,appid必须是'_UNI_'
开头,所以你的配置文件中得是'_UNI_'
开头的。
推荐:小程序静默登录方案设计
推荐:小程序用户登录架构设计
登录方案
Cookie + Session
登录Token
登录SSO
单点登录OAuth
第三方登录
SSO
单点登录,适用于中大型企业,想要统一内部所有产品的登录方式的情况。
实现垂直居中
1 | // 掘金:魔王哪吒 |
canvas如何实现按比例沾满全屏
document.documentElement.clientWidth
: 可见区域宽度;document.documentElement.clientHeight
: 可见区域高度。canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
screen.availWidth
:屏幕可用宽度;screen.availHeight
:屏幕可见高度。canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
screen.width:屏幕显示宽度
screen.height:屏幕显示高度
canvas.width = screen.width
canvas.height = screen.height
window.innerWidth:窗口的宽度
window.innerHeight:窗口的高度
canvas.width = window.innerWidth
canvas.height = window.innerHeight
Vue2.0
Vue源码根目录下文件夹:
build
打包相关的配置文件,根据不同的入口,打包为不同的文件dist
打包之后文件所在位置examples
部分示例flow
,因Vue使用了Flow
来进行静态类型检查,这里是定义了声明一些静态类型packages
,分别生成其他的npm
包src
,主要源码所在位置compiler
模板解析的相关文件codegen
根据ast
生成render
函数directives
通用生成render
函数之前需要处理的指令parser
模板解析core
核心代码components
全局组件global-api
全局方法instance
实例相关内容,包括实例方法,生命周期,事件等observer
双向数据绑定相关文件util
工具方法vdom
虚拟dom
相关entries
入口文件,也就是build
文件夹下config.js
中配置的入口文件platforms
平台相关的内容web
,web
端独有文件compiler
编译阶段需要处理的指令和模块runtime
运行阶段需要处理的组件,指令和模块server
服务端渲染相关util
工具库weex
,weex
端独有文件shared
共享的工具方法test
测试用例
从入口文件查看Vue源码
先看package.json
文件,有项目的依赖,有开发环境,生产环境等编译的启动脚本,有项目的许可信息等。来看看:npm run dev
:
1 | // 掘金:魔王哪吒 |
rollup
是一个类似于webpack的打包工具,入口文件:/src/entries/web-runtime-with-compiler.js
1 | // 掘金:魔王哪吒 |
定义Vue对象它的构造函数及其简单:
1 | // 掘金:魔王哪吒 |
Vue的静态方法和实例方法:
1 | // src/core/index.js |
1 | vm._uid // 自增的id |
钩子函数:
beforeCreate
,创建之前created
,创建beforeMount
,挂载前mounted
,挂载beforeUpdate
,更新前updated
,更新activated
,触发deactivated
,停用beforeDestroy
,销毁前destroyed
,毁坏
1 | // vm.$options |
拿到一个函数的返回值类型,使用TS
1 | const func = (): number => 1; |
Array
构造函数:
1 | new Array() |
size
设定的数组元素个数。返回数组的length
属性等于size
。- 参数列表,
element0,..,elementn
,当Array()
构造函数用这些参数调用时,新创建的数组实例会用指定的参数值来初始化,并将length
属性设置为参数个数。 - 当不带参数调用
Array()
时,返回的数组为空,length
属性为0。 concat()
,把元素衔接到数组中。every()
,测试断言函数是否对每个数组元素都为真。filter()
,返回满足断言函数的数组元素。forEach()
,为数组的每一个元素调用指定函数。indexOf()
,在数组中查找匹配元素。join()
,将数组的所有元素转换为字符串,并衔接起来。lastIndexOf()
,在数组中反向查找。map()
,从数组的元素中,计算出新的数组元素。pop()
,移除数组最后一个元素。push()
,把元素添加到数组尾部。reduce()
,从数组的元素中,计算出一个值。reduceRight()
,从右到左缩减数组。reverse()
,在原数组中颠倒元素的顺序。shift()
,移除数组的第一个元素。slice()
,返回数组的一部分。some()
,测试是否至少有一个数组元素能让断言函数为真。sort()
,在原数组中对数组元素进行排序。splice()
,插入,删除,或替换数组元素。toLocaleString()
,将数组转换为本地字符串。toString()
,将数组转换为字符串。unshift()
,在数组头部插入元素。
Array.concat()
1 | array.concat(value, ...) |
返回值,一个新数组,包含array
的元素,以及衔接的新元素。
concat()
会将参数衔接到array
中得到一个新数组并返回,它不会修改array
,如果传给concat()
的某个参数本身是一个数组,则会将该数组的元素衔接到array
中,而不是数组本身。
1 | var a = [1,2,3]; |
Array.every()
测试断言函数是否对每个元素为真
1 | array.every(predicate) |
参数:
predicate
,用来测试数组元素的断言函数。o
,调用predicate
时的可选this
值。
返回值:如果对array
的每一个元素调用predicate
时都返回真值,则返回true
,如果有任何一个元素调用predicate
时返回假值,则返回false
。
every()
方法用来测试数组的所有元素是否都满足某些条件。如果predicate
的每一次调用都返回true
,则every()
返回true
,否则,为false
。
当遍历的数组为空时,every()
返回true
1 | [1,2,3].every(function(x) { return x<5 ;}) // true |
Array.filter()
返回通过断言的数组元素
array.map(predicate)
array.map(predicate, o)
predicate
,用来判断array
中的元素是否需要包含在返回数组中的调用函数o
,调用predicate
时的可选this
值
返回值:
一个新数组,只包含那些让predicate
返回真值的数组元素
filter()
会创建一个新数组,包含那些让predicate
函数返回真值的array
的元素。filter()
方法不会修改arrry
本身,注意predicate
函数有可能会修改。
返回新创建的数组。
Array.forEach()
为每一个数组元素调用一个函数
1 | array.forEach(f) |
参数
1 | f 为array的每一个元素调用的函数 |
返回值:该方法无返回值,注意forEach()
没有返回值,特别注意,它不会返回array
。
forEach(), map(), filter(), every(), some()
接受函数作为第一个参数,并接受可选的第二个参数。在函数体内,this值等于o。
如果没有指定第二个参数,this值在非严格模式下是全局对象,在严格模式下则为null
。
1 | var a = [1,2,3]; |
Array.indexOf()
查找数组
1 | array.indexOf(value) |
参数:
1 | value 要在array中查找的值 |
返回值,所在index,如果不存在匹配元素时,返回-1
1 | 判断是否相等使用的是"==="操作符 |
Array.join()
,将数组元素衔接为字符串
1 | array.join() |
separator
,在返回的字符串中,用来分隔数组的某个元素与下一个元素的可选字符或字符串。如果省略,默认是英文逗号。
返回值,一个字符串。
1 | a = new Array(1,2,3,"test"); |
Array.lastIndexOf()
反向查找数组
1 | array.lastIndexOf(value); |
value
,要在array
中查找的值start
,开始查找的可选数组序号,如果省略,则从最后一个元素开始查找
Array.length
数组大小
length
属性表示数组中的元素个数
如果设置的
length
大于原值,数组会变大,新添加到末尾处的元素的值为undefined
。
Array.map()
从数组元素中计算新值
1 | array.map(f); |
f
为array的每一个元素调用的函数,它的返回值会成为返回数组的元素。o
-f
调用时的可选this
值。
返回值:一个新数组,由函数f
计算出的元素组成。
1 | [1,2,3].map(function(x) { return x*x }); // [1,4,9] |
Array.pop()
移除并返回数组的最后一个元素
1 | array.pop() |
返回值:array
的最后一个元素
pop()
会移除array
的最后一个元素,缩短数组的长度,并返回所移除元素的值。如果数组已经为空,pop()
不会修改该数组,返回值为undefined
。
pop()
和push()
,先进后出的栈功能:
1 | var stack = []; // stack: [] |
Array.push()
给数组追加元素
1 | array.push(value,...); |
返回值:把指定值追加到数组后数组的新长度。(它会直接修改array,而不会创建一个新的数组)
push()
和pop()
,先进后出的栈功能。
Array.reduce()
从数组元素中计算一个值
1 | array.reduce(f); |
f
一个函数,可以合并两个值,并返回一个“缩减”的新值。initial
,用来缩减数组的可选初始值,如果指定该参数,reduce()
的行为会像把该参数插入array
的头部一样。
返回值:数组的化简值
示例:
1 | [1,2,3,4].reduce(function(x,y) { return x*y; }) // 24 |
Array.reduceRight()
从右到左缩减数组
1 | array.reduceRight(f) |
f
一个函数,可以合并两个值,并返回一个“缩减”的新值。initial
用来缩减数组的可选初始值,如果指定该参数,reduceRight()
的行为会像是把该参数插入aray
的尾部一样。
返回值:数组的缩减值,该值是最后一次调用f
时的返回值。
1 | [2,10,60].reduceRight(function(x,y) { return x/y; }) // 3 |
Array.reverse()
颠倒数组中的元素顺序
1 | array.reverse() |
Array
对象的reverse()
方法可以颠倒数组元素的顺序。它会在原数组中进行操作,而不会创建一个新数组。
1 | a = new Array(1,2,3); |
Array.shift()
移除数组的第一个元素
1 | array.shift() |
返回值:数组原来的第一个元素。
如果数组为空,
shift()
什么也不干,返回undefined
值,没有创建新数组。
1 | var a = [1,[2,3],4]; |
Array.slice()
返回数组的一部分
1 | array.slice(start, end) |
返回值:一个新数组,包含array中从start一直到end之间的所有元素(包含start指定的元素,但不包含end指定的元素),如果没有指定end,返回的数组包含从start到array尾部的所有元素。
1 | var a = [1,2,3,4,5]; |
Array.some()
测试是否有元素满足断言函数
1 | array.some(predicate) |
predicate
用来测试数组元素的断言函数o
调用predicate
时的可选this
值
返回值:如果array
中有至少一个元素调用predicate
时返回真值,则返回true,如果所有元素调用predicate
时都返回假值,则返回false。
1 | [1,2,3].some(function(x) { return x>5; }); //false |
Array.sort()
对数组元素进行排序
1 | array.sort() |
orderfunc
用来指定如何排序的可选函数
返回值:该数组的引用。注意是在原数组中进行排序,没有新键数组。数组中的undefined元素会始终排列在数组末尾。
1 | function numberorder(a,b) {return a-b;} |
Array.splice()
插入,删除或替换数组元素
1 | array.splice(start,deleteCount,value,...) |
start
开始插入和删除处的数组元素的序号。deleteCount
要删除的元素个数,从start
开始,并包含start
处的元素,如果指定为0,表示插入元素,而不用删除任何元素。value,...
要插入数组中的零个或多个值,从start
序号开始插入。
返回值:
如果从数组中删除了元素,则返回一个新数组,包含这些删除的元素,splice()
会直接修改数组。
1 | var a = [1,2,3,4,5,6]; |
Array.toLocaleString()
将数组转换为本地字符串
1 | array.toLocaleString() |
返回值:数组的本地化字符串表示。(异常,调用该方法时,如果对象不是数组,会抛出异常。)
Array.toString()
将数组转化成字符串
1 | array.toString() |
返回值:array
的字符串表示。(异常,调用该方法时,如果对象不是数组,会抛出异常。)
Array.unshift()
在数组头部插入元素
1 | array.unshift(value,...) |
参数:value,...
,要插入array
头部的一个或多个值。
返回值:数组的新长度。unshift()
不会创建新数组,而是直接修改数组本身。
1 | var a = []; |
Boolean
对布尔值的支持
构造函数:
1 | new Boolean(value) // 构造函数 |
参数:value
,Boolean
对象存放的值,或要转换成布尔值的值。
Boolean()
会将参数转换成布尔值,并返回一个包含该值的Boolean
对象。0,NaN,null,空字符串""和undefined
都会转成false。toString()
根据Boolean
对象代表的布尔值返回"true"或"false"
字符串。valueOf()
返回Boolean
对象中存放的原始布尔值。Boolean
对象时一个封装布尔值的对象。
Boolean.toString,将布尔值转换成字符串
1 | b.toString() |
- 调用该方法时,如果对象不是Boolean类型,会抛出异常.
Boolean.valueOf(),Boolean对象的布尔值
Date操作日期和时间
1 | new Date() |
不带参数时,Date()
构造函数将根据当前日期和时间创建一个Date
对象。
Date.getDate()
返回一个Date对象的月份中的日期值
返回:给定Date对象date的月份中的日期值,使用本地时间。返回值1~31之间
Date.getDay() ,返回值0(星期天)~6(星期一)
Date.getFullYear(),返回值是一个完整的4位数字的年份
Date.getHours(),返回一个Date对象的小时值,返回值0~23
Date.getMilliseconds(),返回一个Date对象的毫秒值
Date.getMinutes(),返回一个Date对象的分钟值,返回值在0~59之间
Date.getMonth(),返回一个Date对象的月份值,0(1月)~11(12月)之间
Date.getSeconds(),返回一个Date对象的秒钟值,0~59之间
Date.getTime(),将一个Date对象以毫秒形式返回
Date.getYear(),返回一个Date对象的年份值
Date.now(),以毫秒的形式返回当前时间
Date.parse(),解析一个日期或时间字符串
Date.setDate()设置一个Date对象的一月中的日期值
Date.setFullYear()设置一个Date的年份值
Date.setHours()设置一个Date的小时,分钟,秒以及毫秒值
Date.setMilliseconds()设置一个日期的毫秒值
Date.setMinutes()设置一个Date的分钟,秒钟,以及毫秒值
Date.setMonth()设置一个Date的月份以及日期值
Date.setSeconds()设置一个Date的秒钟以及毫秒值
Date.setTime()使用毫秒值设置一个时间
Date.setYear()设置一个Date的年份值
decodeURI()节码一个URI中的字符
1 | decodeURI(uri) |
encodeURI()转义一个URI中的字符
转义一个URI中的字符
Function函数
1 | // 构造函数 |
属性
1 | arguments[] |
方法:
1 | apply() |
Function.apply()
1 | function.apply(调用function的对象/函数体中this/如果参数为null,则使用全局对象,一个值数组) |
示例:
1 | Object.prototype.toString.apply(o); |
Function.bind(),返回一个作为方法调用的函数
1 | function.bind(o) |
示例:
1 | var g = f.bind(o, 1,2); |
Function.arguments[]传递给函数的参数,不建议使用
Function.call()将函数作为对象的方法调用
1 | function.call(thisobj, args...) |
示例:
1 | Object.prototype.toString().call(o); |
Function.caller()调用当前函数的函数,该属性不是必需的,不应该使用它
Function.length()声明的参数的个数
Function.prototype()对象类的原型
Function.toString()将函数转换成字符串
返回:表示函数的字符串
Global全局对象
全局属性
全局对象不是一个类,注意,所有全局变量也都是全局对象的属性:
Infinity
表示正无穷大的数值NaN
表示不是数值的值undefined
表示undefined
值
全局函数
decodeURI()
解码使用encodeURI()
转义的字符串decodeURIComponent()
解码使用encodeURIComponent()
转义的字符串encodeURI()
通过转义特定字符对URI编码encodeURIComponent()
通过转义特定字符对URI的组成部分编码escape()
用转义序列替换特定字符来对字符串编码eval()
执行JavaScript代码字符串,返回结果isFinite()
判断一个值是否无穷大isNaN()
判断一个值是否是非数值parseFloat()
从字符串中解析数值parseInt()
从字符串中解析整数unescape()
解码使用escape()
编码的字符串
全局对象
Array
Boolean
Date
Error
EvalError
Function
JSON
Math
Number
Object
String
TypeError
URIError
NaN非数字属性
NaN是一个全局属性,指向一个特殊的非数字值。NaN
属性不可用for/in
循环枚举,也不能用delete
操作符删除。NaN
不是常量,不可将它设置为任何其他值。
检查一个值是否是数字,使用isNaN(),NaN总是与其他值不相等,它本身也不相等。
Object包含所有JavaScript对象的特性的超类
1 | new Object() |
属性:constructor,引用当前对象的构造函数。
方法:
- hasOwnProperty()
检查对象是否拥有一个指定名字的本地定义的属性
- isPrototypeOf()
检查当前对象是不是指定对象的原型
- propertyIsEnumerable()
检查指定名字的属性是否存在并且可以用for/in循环枚举
- toLocaleString()
返回该对象的一个本地化的字符串表示
- toString()
返回该对象的一个字符串表示
- valueOf()
返回当前对象的原始值,如果存在原始值的话。
静态方法:
- Object.create()
使用指定的原型及属性创建一个新的对象
- Object.defineProperties()
创建或配置指定对象的一个或多个属性
- Object.defineProperty()
创建或配置指定对象的某个属性
- Object.freeze()
将指定对象设置为不可改变
- Object.getOwnPropertyDescriptor()
查询指定对象的指定属性的特性
- Object.getOwnPropertyNames()
返回要给包含指定对象的所有非继承属性名的数组,包含不可枚举属性
- Object.getPrototypeOf()
返回指定对象的原型
- Object.isExtensible()
检查当前对象是否能添加到新的属性中
- Object.isFrozen()
检查当前对象是否已冻结
- Object.isSealed()
检查指定对象是否为封闭的
- Object.keys()
返回一个包含指定对象的所有非继承可枚举属性名的数组
- Object.preventExtensions()
阻止像指定对象添加新的属性
- Object.seal()
阻止向指定对象添加新属性或删除现有属性
Object类是JavaScript语言的内置数据类型。它是所有其他JavaScript对象的超类,因此,Object类的所有方法和行为都被其他对象继承了。
Object.constructor对象的构造函数
所有对象的constructor属性都指向用做当前对象的构造函数的那个函数。如果使用Array()
构造函数创建一个数组a,则a.constructor是一个Array
:
1 | a = new Array(1,2,3); //创建一个对象 |
检测是否是一个数组:
1 | function isArray(x) { |
constructor
属性经常用于检测未知对象的类型。给定一个未知的值,可以使用typeof
操作符来检查它是一个原始值还是一个对象。
如果它是一个对象,则可以使用constructor
属性来检查对象的类型。
Object.create()使用指定的原型和属性来创建一个对象
1 | Object.create(proto) |
参数:
1 | // proto |
示例:
1 | // 创建一个对象,有x,y属性,同时继承属性z |
Object.defineProperties();
创建或配置对象的多个属性
1 | // o |
示例:
1 | // 把只读属性x和y添加到新创建的对象中 |
Object.defineProperty()
创建或配置对象的一个属性
1 | Object.defineProperty(o, name, desc) |
参数:
1 | // o |
示例:
1 | function constant(o, n, v) { |
Object.freeze()
将一个对象设置为不可改变,冻结对象是一个永久性的操作,一旦冻结,就不能解冻。Object.freeze()只设置数据属性的可写特性,那些有对应setter函数的属性不会受到影响,Object.freeze()不会影响继承属性。
Object.getOwnPropertyDescriptor()
查询一个属性的特性
1 | Object.getOwnPropertyDescriptor(o,name) |
参数:
1 | // o |
数据属性有一个值以及三个性质:
- 可枚举型
- 可读写型
- 可配置性
访问器属性有一个getter和setter方法,以及可枚举性和可配置性。
数据属性的描述符:
1 | { |
访问器属性的描述符:
1 | { |
Object.getOwnPropertyNames()
返回非继承属性的名字
1 | Object.getOwnPropertyNames(o); |
返回,一个包含o的多有非继承属性的名字的数组,包含那些不可枚举的属性
1 | Object.getOwnPropertyNames([]) // ["length"]: "length" 不可枚举 |
Object.getPrototypeOf()
返回一个对象的原型
1 | var p = {}, // 一个原始对象 |
Object.hasOwnProperty()
检查一个属性是否是继承的
示例:
1 | var o = new Object(); // 创建一个对象 |
Object.isExtensible()
判断某个对象上是否可以添加新属性
示例:
1 | var o = {}; // 新创建一个对象 |
Object.isFrozen()判断对象是否不可改变
- 如果一个对象的所有非继承属性都是只读的,或者它是封闭的,表示它是冻结的
- 如果可以向一个对象添加新的属性,并且不可删除现有的属性,则称它为封闭的
- Object.isFrozen()检测它的参数是否为冻结状态
- 对象一旦冻结就不能再解冻了
Object.isPrototypeOf()判断当前对象是否为另一个对象的原型
- 如果object是o的原型则返回true,如果o不是一个对象,或object不是o的原型则返回false。
1 | var o = new Object(); |
Object.isSealed()判断一个对象的属性是否可添加或删除
- 对象一旦封闭,将没有办法解封
- 封闭一个对象:Object.seal()或Object.freeze()
Object.keys()返回自有的可枚举的属性名
1 | Object.keys({x:1,y:2}); // ["x","y"] |
Object.preventExtensions()
禁止在一个对象上添加新的属性
- Object.preventExtensions()将o的可扩展性设置为false,之后将不能向它添加新的属性
- 这是一个永久性的改变
Object.propertyIsEnumerable()
检测某个属性是否在for/in
循环中可见
1 | var o = new Object(); |
Object.seal()阻止添加或删除对象的属性
Object.toLocaleString()返回对象的本地化的字符串表示
Object.toString()定义一个对象的字符串表示形式
Object.valueOf()给定对象的原始值
parseFloat()将一个字符串转为数字
parseInt()将一个字符串转为整数
String()字符串支持
方法:
- charAt()
取出一个字符串中指定位置的字符
- charCodeAt()
返回一个字符串中指定位置的字符的编码
- concat()
将一个或多个值连接成一个字符串
- indexOf()
在指定字符串中寻找一个字符或字串
- lastIndexOf()
在指定字符串中向后寻找一个字符或字串
- localCompare()
使用本地定义的顺序比较字符串
- replace()
使用正则表达式执行查找与替换操作
- search()
在一个字符串中查找匹配某个正则表达式的字串
- slice()
返回字符串的一个切片或子串
- split()
在指定的分隔符字符串或正则表达式处断开,将一个字符串分隔为由字符串组成的数组
- substr()
提取字符串的一个字串,subString()的一个变体
- substring()
提取字符串的一个字串
- toString()
返回原始的字符串值
- valueOf()
返回原始的字符串值
回看笔者往期高赞文章,也许能收获更多喔!
- TypeScript趁早学习提高职场竞争力
- 一个合格的初级前端工程师需要掌握的模块笔记
- 前端模拟面试字数过23477万内容
- Vue.js笔试题解决业务中常见问题
- 【初级】个人分享Vue前端开发教程笔记
- 长篇总结之JavaScript,巩固前端基础
- 前端面试必备ES6全方位总结
- 达达前端个人web分享92道JavaScript面试题附加回答
- 【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系
- 【思维导图】前端开发-巩固你的JavaScript知识体系
- 14期-连肝7个晚上,总结了计算机网络的知识点!(共66条)
- 这是我的第一次JavaScript初级技巧
- localStorage和sessionStorage本地存储
- HTML5中的拖放功能
- 挑战前端知识点HTTP/ECMAScript
- 必学必会-音频和视频
- 前端170面试题+答案学习整理(良心制作)
- 前端HTML5面试官和应试者一问一答
- 哪吒闹海,席卷图文学习前端Flex布局
- 腾讯位置服务开发应用
- 【进阶】面试官问我Chrome浏览器的渲染原理(6000字长文)
- 面试官一上来就问我Chrome底层原理和HTTP协议(万字长文)
- 熬夜总结了 “HTML5画布” 的知识点
- this/call/apply/bind(万字长文)
- HTTP/HTTPS/HTTP2/DNS/TCP/经典题
- 执行上下文/作用域链/闭包/一等公民
- Web页面制作基础
- 学习总结之HTML5剑指前端(建议收藏,图文并茂)
❤️关注+点赞+收藏+评论+转发❤️
点赞、收藏和评论
我是Jeskson
(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)
我们下期见!
文章持续更新,可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录
github
收录,欢迎Star
:https://github.com/webVueBlog/WebFamily