部分JS原生方法手写
部分JS原生方法手写
Array
let arr = [{
name: '科比',
num: 24
},
{
name: '詹姆斯',
num: 23
},
{
name: '保罗',
num: 3
},
{
name: '威少',
num: 1
}
]
forEach
对数组每一项元素进行操作，改变原数组
Array.prototype.myForeach = function (fn) {
for (let i = 0; i < this.length; i++) {
fn(this[i], i)
}
}
arr.myForeach((val, index) => {
console.log('val', val, 'index', index);
})
arr.forEach((val, index) => {
console.log('val', val, 'index', index);
})
map
对数组每一项元素进行操作，返回新数组，不改变原数组
Array.prototype.myMap = function (fn) {
let a = []
for (let i = 0; i < this.length; i++) {
a.push(fn(this[i], i, this))
}
return a
}
console.log(arr.myMap((item, index, arr) => item.num * 2));
console.log(arr.map((item, index, arr) => item.num * 2));
filter
返回所有满足条件元素组合的新数组，不改变原数组
Array.prototype.myFilter = function (fn) {
let a = []
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this) ? a.push(this[i]) : ''
}
return a
}
console.log(arr.filter(item => item.num > 4));
console.log(arr.myFilter((item, index, arr) => item.num > 4))
every
当所有元素满足条件时，返回true，否则false，不改变原数组
Array.prototype.myEvery = function (fn) {
let a = 0
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this) ? a++ : ''
}
return a === this.length
}
console.log(arr.every((item, index, arr) => item.num > 0));
console.log(arr.myEvery((item, index, arr) => item.num > 0));
some
只要有一项元素满足条件时，返回true，否则false，不改变原数组
Array.prototype.mySome = function (fn) {
//方法1
let a = 0
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this) ? a++ : ''
}
return !!a
//方法2
for (let i = 0; i < this.length; i++) {
if (fn(this[i], i, this)) return true
}
return false
}
console.log(arr.some((item, index, arr) => item.num > 4))
console.log(arr.mySome((item, index, arr) => item.num > 4))
reduce
累加器，返回最终结果，不改变原数组
Array.prototype.myReduce = function (fn, val) {
for (let i = 0; i < this.length; i++) {
val = fn(val, this[i], i, this)
}
return val
}
console.log(arr.reduce((val, item, index, arr) => val + item.num, 0))
console.log(arr.myReduce((val, item, index, arr) => val + item.num, 0))
findIndex
数组中有满足条件的元素时，返回该元素的索引，若有重复，取第一个，否则返回-1，不改变原数组
indexOf需要具体值
Array.prototype.myFindIndex = function (fn) {
for (let i = 0; i < this.length; i++) {
if (fn(this[i], i, this)) return i
}
return -1
}
console.log(arr.findIndex((item, index, arr) => item.name === '威少'))
console.log(arr.myFindIndex((item, index, arr) => item.name === '威少'))
find
返回满足条件的元素，若有重复，取第一个，否则返回undefinded，不改变原数组
Array.prototype.myFind = function (fn) {
for (let i = 0; i < this.length; i++) {
if (fn(this[i], i, this)) return this[i]
}
return undefined
}
console.log(arr.find((item, index, arr) => item.name === '科比'));
console.log(arr.myFind((item, index, arr) => item.name === '科比'));
fill
用指定元素填充数组中指定的元素，改变原数组
Array.prototype.myFill = function (val, start, end) {
//初始值为负时，返回原数组
if (start < 0) return this
//超出长度时，设置为末元素
let final = end < this.length ? end : this.length
for (let i = start; i < final; i++) {
this[i] = val
}
return this
}
console.log(arr.fill('jzy', 1, 3))
console.log(arr.myFill('jzy', 1, 3))
includes
判断数组中是否有给出的元素，若有则返回true，否则为false，能够判断NaN，不改变原数组
Array.prototype.myIncludes = function (val) {
for (let i = 0; i < this.length; i++) {
if (String(this[i]) === String(val)) return true
}
return false
}
console.log([1, 2, 3, 4, NaN].includes(NaN))
console.log([1, 2, 3, 4, NaN].myIncludes(NaN))
join
用指定元素将数组拼接为字符串，不改变原数组
Array.prototype.myJoin = function (val) {
let str = ''
for (let i = 0; i < this.length; i++) {
i == this.length - 1 ? str += String(this[i]) : str += String(this[i]) + val
}
return str
}
console.log([1, 2, 3, 4, NaN].join('*'));
console.log([1, 2, 3, 4, NaN].myJoin('*'));
flat
展开多重数组，展开次数为传入参数，不改变原数组
Array.prototype.myFlat = function (val) {
//默认次数为1
val = Number(val) ? Number(val) : 1
let arr = []
//当参数大于需要展开次数时，返回完全展开的数组
while (!this.some(item => Array.isArray(item))) {
return this
}
//展开一次数组
this.forEach(item => {
Array.isArray(item) ? arr = arr.concat(item) : arr.push(item)
})
//递归实现指定次数展开
return val === 1 ? arr : arr.myFlat(--val)
}
console.log([1, 2, 3, 4, [5, 6, [7, 8, [9, 0]]]].flat(2))
console.log([1, 2, 3, 4, [5, 6, [7, 8, [9, 0]]]].myFlat(2))
splice
截取指定长度的元素，返回截取元素组成的数组，在原数组中删除截取元素，并插入指定元素
Array.prototype.mySplice = function (x = this.length + 1, y = this.length, ...args) {
//处理x,y
x = Math.floor(x)
y = Math.floor(y)
x = x < 0 ? this.length + x : x
x = x < 0 ? 0 : x
y = x + y <= this.length ? y : this.length - x
let arr = []
if (x < this.length && y >= 0) {
let arr_ = []
for (let i = 0; i < this.length; i++) {
//原数组插入
if (x === i && !y) {
for (let i = 0; i < args.length; i++) {
arr_.push(args[i])
}
}
//原数组保留保留
if (x > i || !y) arr_.push(this[i])
//删除、返回对象
if (x === i && y) {
arr.push(this[i])
x++
y--
}
}
//清空this，重新赋值
this.length = 0
for (let i = 0; i < arr_.length; i++) {
this[i] = arr_[i]
}
}
return arr
}
let arr = [...str]
let arr2 = [...str]
console.log(arr.mySplice());
console.log(arr);
console.log(arr2.splice());
console.log(arr2);
Object
Tips:对对象使用forin方法时，会遍历原型链上的自定义属性
let obj = {
name: 'J1nzy',
age: 22,
sex: '男',
hobby: {
food: '糯米藕'
}
}
entries
将对象拆分为键值对的数组形式
Object.prototype.myEntries = function (obj) {
let arr = []
for (const key in obj) {
(Object.hasOwnProperty.call(obj, key)) && arr.push([key, obj[key]])
}
return arr
}
console.log(Object.entries(obj))
console.log(Object.myEntries(obj))
fromEntries
将键值对的数组转化为对象形式
Object.prototype.myFromEntries = function (arr) {
let obj = {}
for (let i = 0; i < arr.length; i++) {
let [key, value] = arr[i]
obj[key] = value
}
return obj
}
console.log(Object.fromEntries([
['name', 'J1nzy'],
['age', '22']
]))
console.log(Object.myFromEntries([
['name', 'J1nzy'],
['age', '22']
]))
keys
返回以对象每个键组成的数组
Object.prototype.myKeys = function (obj) {
let arr = []
for (const key in obj) {
Object.hasOwnProperty.call(obj, key) && arr.push(key)
}
return arr
}
console.log(Object.keys(obj))
console.log(Object.myKeys(obj))
values
返回以对象每个值组成的数组
Object.prototype.myValues = function () {
let arr = []
for (const key in obj) {
Object.hasOwnProperty.call(obj, key) && arr.push(obj[key])
}
return arr
}
console.log(Object.values(obj))
console.log(Object.myValues(obj))
instanceOf
若Father.prototype在person的原型链上，返回true，否则为false
function Father(){}
function Son() {}
Son.prototype.__proto__ = Father.prototype
let person = new Son()
function myInstanceOf(father,son) {
while (son.__proto__) {
if (son.__proto__ === father.prototype) return true
son = son.__proto__
}
return false
}
console.log(myInstanceOf(Father,person))
console.log(person instanceof Father)
is
判断两个对象是否相等，相等则返回true，否则false
Object.prototype.myIs = function (x, y) {
if (x === y) {
//处理+0和-0
return x !== 0 || 1 / x === 1 / y;
} else {
//处理NaN
return x !== x && y !== y;
}
}
let a = {
i: 1
}
let b = {
i: 1
}
let c = a
console.log(Object.myIs(a, b));//false
console.log(Object.myIs(a, c));//true
assign
将第一个对象改变为一个拼接后的对象，若有相同属性，以后面为准，并作为返回值
Object.prototype.myAssign = function (arr, ...arrs) {
if (arr === null || arr === undefined) throw ('添加类型错误')
for (let i = 0; i < arrs.length; i++) {
for (const key in arrs[i]) {
if (arrs[i].hasOwnProperty(key)) {
arr[key] = arrs[i][key]
}
}
}
return arr
}
let a = {
a: 1,
b: 2
}
let b = {
a: 3,
c: 4
}
let c = {
a: 4,
d: 5
}
console.log(Object.myAssign(a, b, c) === a);//true
console.log(Object.myAssign(a, b, c));
console.log(a);
Function
let mei = new Person('小美')
let li = new Person('小丽')
function Person(name) {
this.name = name
}
Person.prototype.showName = function (age,a) {
console.log(this.name + age + '岁了' + a);
}
call
改变this的指向，默认为window，传参为队列
Function.prototype.myCall = function (caller, ...args) {
caller = caller || window
//唯一，避免与属性重复
let fn = Symbol()
caller[fn] = this
return caller[fn](...args)
}
mei.showName.myCall(li, 16)
li.showName.myCall(mei, 18)
apply
改变this的指向，默认为window，传参为数组
Function.prototype.myApply = function (caller, args) {
caller = caller || window
//唯一，避免与属性重复
let fn = Symbol()
caller[fn] = this
return caller[fn](...args)
}
mei.showName.apply(li, [16,12])
mei.showName.myApply(li, [16,12])
bind
返回一个改变this指向后函数，该函数返回值不变
Function.prototype.myBind = function (binder, ...args) {
binder = binder || window
let fn = Symbol()
binder[fn] = this
return function () {
return binder[fn](...args)
}
}
Object.prototype.test = function (...args) {
console.log(this.name);
console.log(args);
return '美'
}
let mei = {
name: '小美'
}
let li = {
name: '小丽'
}
console.log(mei.test.bind(li, 1, 2, 3)());
console.log(mei.test.myBind(li, 1, 2, 3)());
String
let str = '1234567890'
substr
截取指定长度的字符串，不改变原字符串
String.prototype.mySubstr = function (x = 0, y = this.length) {
//处理下x,y
x = Math.floor(x)
y = Math.floor(y)
x = x < 0 ? this.length + x : x
x = x < 0 ? 0 : x
y = y < 0 ? 0 : y
let str = ''
//截取字符并不超出字符串
while (y && x < this.length) {
str += this[x]
x++
y--
}
return str
}
console.log(str.substr(-3, 5));
console.log(str.mySubstr(-3, 5));
substring
截取指定位置的元素并返回其组成的数组，x>y时，对调，负值置零，不改变原数组
String.prototype.mySubstring = function (x = 0, y = this.length) {
//处理下x,y
x = Math.floor(x)
y = Math.floor(y)
[x, y] = x > y ? [y, x] : [x, y]
x = x < 0 ? 0 : x
let str = ''
//当y大于字符串长度时，设置为字符串长度，y<0时返回空字符串
while (x < (y = y > this.length ? this.length : y) && y >= 0) {
str += this[x]
x++
}
return str
}
console.log(str.substring(4, -1));
console.log(str);
console.log(str.mySubstring(-2, -1));
slice
截取指定位置的元素并返回其组成的数组，负值会处理，不改变原数组
String.prototype.mySlice = function (x = 0, y = this.length) {
//处理下x,y
x = Math.floor(x)
y = Math.floor(y)
x = x < 0 ? this.length + x : x
y = y < 0 ? this.length + y : y
x = x < 0 ? 0 : x
y = y < 0 ? 0 : y
let str = ''
//当y大于字符串长度时，设置为字符串长度
while (x < (y = y > this.length ? this.length : y)) {
str += this[x]
x++
}
return str
}
console.log(str.slice(1, 10));
console.log(str.mySlice(1, 13));