小知识点总结

在职业和学习中，会遇见一些小知识点，无法归类，在这里做一些基本的总结，包括伪数组、数字的一些常用的函数和一些细节处理：

一、伪数组

1.什么是伪数组？

• 首先这是一个对象
• 所有键名都是正整数或零，例如：{0:"text1",1:"text2"}
• 具有length属性
• 常见的典型的伪数组：函数的arguments对象、DOM集合、字符串

---

它不具有数组的push(),pop()方法

2.伪数组转为真实数组

Array.prototype.slice.call(objArr);

Array.from(objArr);

举例，函数的arguments对象：

function User(name,pass) {
 this.name = name
 this.pass = pass
 console.log(arguments)
 //具有length属性
 console.log(arguments.length)
 //TypeError: arguments.slice is not a function
 //console.log(arguments.slice(2,2))
 console.log(Array.prototype.slice.call(arguments,1))
 const obj =  { '0': 'WANWAN', '1': 18, '2': 'HAHAHAH' }
 console.log(obj.length)  
 //undefined 因为没有length属性
 console.log(Array.prototype.slice.call(obj))  
 //这里打印为[],但是不会报错
 obj.length = 3
 console.log(Array.prototype.slice.call(obj))
}
const _u =  new User('WANWAN',18,'HAHAHAH')

打印结果：

使用Array.from(objArr)

function User(name,pass) {
  this.name = name
  this.pass = pass
  console.log(Array.from(arguments))
  console.log(arguments)
}
const _u =  new User('WANWAN',18,'HAHAHAH')

二、数组的函数和返回值

准备两个数组：

let _arr = [{
 id:1,
 name:"hello"
},{
 id:2,
 name:"hello2"
},{
 id:3,
 name:"hello3"
},{
 id:4,
 name:"hello4"
}]
let _b_arr = [1,2,3,4]

1.map

• 创建一个新[数组]，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

console.log(_b_arr.map(item => item * 2))
打印结果：<br/>
[ 2, 4, 6, 8 ]

• 方法按照原始[数组元素],顺序依次处理元素映射，一对一
  • 基础类型，不会修改原数组
  • 引用类型，会改变原数组

let _resultBarr = _b_arr.map(item => item * 2)
console.log(_b_arr)
console.log(_resultBarr)
打印结果：
[ 1, 2, 3, 4 ]
[ 2, 4, 6, 8 ]

_arr.map(item => {
  item.num = item.id
  return item
})
 
console.log(_arr)
打印：
[
  { id: 1, name: 'hello', num: 1 },
  { id: 2, name: 'hello2', num: 2 },
  { id: 3, name: 'hello3', num: 3 },
  { id: 4, name: 'hello4', num: 4 }
]

let resultArr = _arr.map(item => {
  item.num = item.id
  return item
})
 console.log(resultArr)
 打印：
[
  { id: 1, name: 'hello', num: 1 },
  { id: 2, name: 'hello2', num: 2 },
  { id: 3, name: 'hello3', num: 3 },
  { id: 4, name: 'hello4', num: 4 }
]

2.filter

过滤，不修改原数组，返回值接收过滤后的数组，看例子：

_arr.filter(item => item.id > 2)
let resultArr = _arr.filter(item => item.id > 2)
console.log(_arr)
console.log(resultArr)

打印结果：

3.reduce

累加器，数组最后返回一个值，多用于求和、求积、等叠加用法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

• total 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
• currentValue 必需。表示当前正在处理的数组元素；
• currentIndex 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
• arr 可选。表示原数组；
• initialValue 可选。表示初始值 简单例子，求和：

let _arr = [1,2,3,4,5]
console.log(_arr.reduce((a,b) => a + b))
console.log(_arr.reduce((a,b) => {
  return a+b
},10))

打印：15 25

4.splice

从数组中添加/删除项目，然后返回被删除的项目，修改原数组

arrayObject.splice(index,num,[...item])

• index:需要进行操作的数组元素的下标
• num：要删除的元素的数量，设为0，则不删除
• [...item] 需要添加的新数组

let _arr = [1,2,3,4,5,6,7]
console.log(_arr)
console.log(_arr.splice(2,3))
console.log(_arr)
console.log(_arr.splice(2,0 , ...[100,200,300]))
console.log(_arr)
打印结果：
[1, 2, 3, 4, 5, 6, 7]
[ 3, 4, 5 ]
[ 1, 2, 6, 7 ]
[]
[1, 2, 100, 200, 300, 6, 7]

5.slice

截取字符串，不修改原数组

stringObject.slice(start,end)

• start：起始下标，包括 start,如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，
• end：结束下标,不包括 end

let _arr = [1,2,3,4,5,6,7]
console.log(_arr.slice(2,3))
console.log(_arr)
console.log(_arr.slice(-2))
打印：
[ 3 ]
[1, 2, 3, 4, 5, 6, 7]
[ 6, 7 ]

三、callee & caller

1.caller

是函数对象的一个属性，指的是这个函数对象的调用者

function funA() {
  console.log(funA.caller)
}
function funB() {
  funA()
  console.log(funB.caller)
}
funB()

打印结果：

2.callee

callee则是arguments对象的一个属性,该属性指向函数本身

function funA() {
  console.log(arguments.callee)
}
function funB() {
  funA()
  console.log(arguments.callee)
}
funB()

打印结果：

三、数组的细节

我们想做一个函数生成器，从0开始打印n次：

const  funcGenerator = (num) => new Array(num).fill(0).map(item => params => console.log(params))
funcGenerator(10).map((func,index) => func(index))

要注意这里的fill(0),否则会报undefined

四、对象的细节

console.log(NaN == NaN)  --> false
console.log(NaN === NaN)  --> false
console.log(Object.is(NaN,NaN))  --> true
console.log([NaN].indexOf(NaN))  -->  -1
console.log([NaN].includes(NaN))  -->true

Object.create(null)和 {} 的区别？
Object.create(null) 的 __proto__ 为 undefined,会初始化为一个纯净的对象，不会继承其他的一些属性，同时也不可以是使用Object上的一些__proto__方法。
Object 的 __proto__ 是 object.prototype