JavaScript知识点总结（一）

这是是我的一个小的总结，如果哪里有需要补充的欢迎大家补充，一起学习，希望也可以帮到有需要的人

1.基本的数据类型：

number：数组类型
string ：字符串类型
boolean ：布尔类型
undefined：不存在
null ：空值
symbol : 常用于对象上添加唯一的属性
BigInt：用于表示精确精度整数的数据类型，旨在解决JS中处理超出Number类型表示范围的大整数(超过 Number.MAX_SAFE_INTEGER 或小于 Number.MIN_SAFE_INTEGE)的问题

2.引用的数据类型

object 对象
array 数组
function 函数

3.判断JS的数据类型

1.typeof 判断

typeof 123 ; //number
typeof '123'; //string
typeof null; //object
typeof underfined; //undefined
typeof Symbol(); //'symbol'
typeof true; //boolean
typeof {}; //Object
typeof function(){}; //'function'
typeof []; //'object'

2.instanceof

1.语法： a instanceof b

简单理解：判断a是否是b的实例

3.真正的理解：检查a的隐式原型属性（包含隐式原型上的隐式原理）是与b的显示原型属性指向同一个对象

({}) instanceof Object ; //true
([]) instanceof Object ; //true
null instanceof Object; //false
([]) instanceof Array; //true
({}) instanceof Array; //false

3.判断是否是数组

方法：Array.isArray()\

4.全等 === 判断类型和值是否相等

NaN === NaN // false

4.数组的常用方法

4.1 更新数组的方法

push 给数组最后添加一个元素
pop 删除数组的最后一个元素
unshift 给数组的前面添加一个元素
shift 删除数组前面的第一个元素
splice 删除/新增指定下标的元素
sort 排序
reverse 让数组进行反转

可能会出现的面试题

Javascript 怎么实现字符串反转？

  var str = 'abcd'
  
  function reverse(str){
      return str.split('').reverse().join('')
  }

reverse(str) // 'dcba'

JS完成一个发布订阅

var eventBus = {
    arrays:{
        click:[],
        scroll:[],
    },
    on:function(type,fn){
      if(this.arrays[type].length === 0){
          this.arrays[type]=[]
      }
        const a = this.arrays[type]
        a.push[fn]
    }, 
    emit: function(type,data){
        const a = this.arrays[type]
        if(!a) return  //防御性编程
        for(let i =0;i< a.length;i++){
           const fn =  a[i]
           fn(data)
        }
    }
}

 eventBus.on('click',function(){console.log('clicked' + data)})

setTimeout(function(){
    eventBus.emit('click'.'button#x')
},3000)

4.2 遍历元素的方法

forEach 遍历

map 返回一个新数组，新数组长度和原数组一致，但内部的值往往会发生变化。（长度不变，值变）

var arr = [1,2,3];
arr.map(function(currentValue,index,arr){
    
},thisValue);
//不会对原来的数组值有影响
var arr = [1,2,3];
arr.map(function(currentValue){
    const result = currentValue * currentValue
    return result; //[1,4,9]
})

* 在React中更新数据中的某个值，往往使用map方法

filter 返回一个新的数组，新数组的长度往往比原数组更少，但内部的值和原数组一致。（长度变，值不变）
```
const arr =[1,2,3];
const res = arr.filter(item=> item >1); //[2,3]
```
- 在React中删除数据中的某个值，往往使用 filter 方法

reduce 常用于统计，累加和求和等功能

1.数组的归并代方法，用于遍历数组且进行归并
2.接收2个参数，callback为回调方法，inVal初始值（选填）
[1,2,3].reduce(callback,intVal);
3.回调方法接收2个参数，一个是pre，一个是cur
[1,2,3].reduce((pre,cur)=>{
    return pre +cur
},0)
 //找最大值
const result = [1,2,3,4,5,7].reduce((pre,cur)=>Math.max(pre,cur));
console.log(result);//7
 //数组去重
const resultList = [1,2,3,4,4,5,5].reduce((preList,cur)=>{
    if(preList.indexOf(cur) === -1){
        preList.push(cur)
    }  
    return preList
},[]) 
console.log (resultList) // [1,2,3,4,5]

//字符串的反转
const str = 'hello world'
const resultStr = Array.from(str).reduce((pre,cur)=>{
    return `${cur}${pre}`
},'')
console.log(resultStr) //dlrow olleh

购物车模块，计算总价

find 查找某个元素，找到返回这个元素，找不到返回undefined

const arr =[1,2,3]
arr.find(item => item === 1); // 1
arr.find(item => item === 100); // undefined

findIndex 查找某个元素的下标，找到返回这个元素的下标，找不到返回-1
```
const arr =[1,2,3]
arr.findIndex(item=> item ==2); // 1
```

every 所有返回true整体才返回true，只有一个返回true，整体就返回false

const arr = [1,2,3]
arr.every(item => item>0) //true
arr.every(item => item>1) //false

some 只要一个返回true，整体就返回true，只有全部返回false，整体返回false
```
const arr =[1,2,3]
arr.some(item=> item>1000); //false
```

4.3其他方法

slice 截取数组中某些元素
concat 拼接数组
join 将数组内部元素以某种方式拼接成字符串
includes 判断是否包含某个元素，包含返回true，不包含返回false
indexOf 判断是否包含某个元素，包含返回其下标，不包含返回-1

5 .常见的DOM操作有哪些？

5.1 新增的DOM元素

document.createElement() 创建DOM元素
xxxDOM.appendChild() 将某个DOM自身删除

5.2 删除DOM元素

xxxDom.removeChild() 将xxxDom下面某个子元素删除
xxxDom.remove() 将xxxDOM自身删除

5.3修改DOM元素

xxxDom.innerText / xxxDomtextContent 设置元素的文本内容
xxxDom.innerHTML 设置元素的html内容

5.4 获取/查询DOM元素

document.getElementById() 根据id选择器获取某个DOM元素
document.querySelector() 根据任意选择器获取找到的第一个DOM元素
document.querySelectorAll() 根据任意选择器获取找到的所有的DOM元素

6.作用域

1.分类

1.全局作用域

2.局部作用域

3.块级作用域（let和const声明的变量叫做块级作用域）

2.特点

1.代码定义的时候作用域就已经产生并且固定了（不能修改）

2.抽象概念

3.函数作用域即使用函数执行完也不会销毁，除非函数成为垃圾函数

3.作用域链

1.查找变量的时候先在当前作用域查找，如果当前的作用域中没有，就会沿着上一级的作用域链进行查找，如果找到既有反对对应的值，如果还没有找到就会继续沿着上一级去查找，直到找到全局的作用域，如果再没有，就会抛出错误：xxx is not defined

2.本质：

1.数组，数组中的每一项都是变量对象，用于保存对应作用域的局部变量

2.最后一个变量对象是全局global对象

4.区别（自己总结）（🪝背）

· let 和 const 定义的块级作用域只能在它声明的位置所属的代码块中访问

· let 和 const 在声明前变量是不可访问的状态，再声明前访问会报错，变量提升不起作用

· 使用var声明的变量可以重复声明，let 和const在同一作用域内只能声明一次

· var 和let 可以先声明后赋值，默认初始值是undefined

· 使用const在声明的时候必须赋值，且赋值之后不可更改，所以const也被称之为常量

· const引用地址不能变更，但它声明的数组和对象的值可以改变

js面试的知识点的自我总结（一）