js高级篇

Lsclever

已于 2022-08-10 13:11:01 修改

阅读量742

点赞数 5

分类专栏： js高级文章标签： javascript

于 2022-08-08 19:56:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47648494/article/details/126234424

版权

js高级专栏收录该内容

3 篇文章

订阅专栏

1、作用域

作用域:变量能够被访问的范围

作用域分为局部作用域和全局作用域;

局部作用域:函数作用域:函数内部声明的变量，只能内部访问，外部无法直接访问，函数在执行之后，函数内部的变量实际被清空了。

块级作用域:使用{}包裹的代码具有块级作用域。一般是for和if
全局作用域: <script>标签和.js文件的最外层或者从根部global出发的叫做全局作用域，全局作用域中声明的变量在html文件内部都可以访问，尽量少声明全局变量，防止全局变量被污染。

2、let、const、var

let和const有块级作用域，出现暂时性死区，其中const是常量，必须赋值，赋值后不可以修改

var没有块级作用域，会有变量提升

3、作用域链

作用域链:本质上是底层的变量查找机制，采取就近原则，函数被执行的时候，先在当前作用域查找变量，如果查不到往上一级作用域进行查找，直到全局作用域

4、垃圾回收机制

JS垃圾回收机制:简称GC，内存在不进行使用的时候会被清除，全局变量一般不会回收(关闭页面时回收)内存泄漏:用不到的内存，没有及时被清理掉，叫做内存泄漏
垃圾回收算法:引用计数法---缺陷:嵌套引用，如果两个对象，相互引用，会导致内存泄漏
标记清除法---从根部出发进行查找，无法被访问到的我们进行回收

5、闭包

闭包:内部函数访问到外部函数的作用域就会产生闭包
闭包的作用:外部也可以访问函数内部的变量，避免了全局变量污染闭包的缺陷:会造成内存泄漏
注意:回调函数也能访问函数内部的局域变量

6、变量提升

变量提升:变量声明之前就可以被访问，变量提升只提升声明，不提升赋值

 // 1. 把所有var声明的变量提升到 当前作用域的最前面
      // 2. 只提升声明， 不提升赋值
      // var num
      // console.log(num + '件')
      // num = 10
      // console.log(num)
      fn()
      function fn() {
        console.log(num)
        var num = 10
      }

7、函数提升

提升函数提升:是指函数在声明之前就可以被调用，如果是用变量接收一个函数也就是函数表达式不存在函数提升参数:声明函数的时候传入的是形参，调用函数的时候传入的是实参

8、剩余参数

动态参数: arguments，是个伪数组，只存在于函数中，能够动态获取函数的实参
剩余参数:...是语法符号，放在最未函数的形参之前，获取剩余的实参，是一个真数组，开发中提倡使用

<script>
      // arguments 动态参数 只存在于 函数里面
      // 是伪数组 里面存储的是传递过来的实参
      // console.log(arguments)  [2,3,4]
      function getSum() {
        let sum = 0
       
        for (var i = 0; i < arguments.length; i++) {
          console.log(arguments[i])
          sum += arguments[i]
        }
        console.log(sum)
      }
      getSum(3,57,9,6,42,432,43)
    </script>

9、展开运算符

展开运算符:可以将一个数组进行展开，不会修改原数组
展开运算符：可以展开数组、合并数组、将伪数组转化为真数组

 展开运算符 可以展开数组
      console.log(...arr)
      console.log(Math.max(1, 2, 3))
      ...arr1  === 1,2,3
      1 求数组最大值
      console.log(Math.max(...arr1)) // 3
      console.log(Math.min(...arr1)) // 1
      2. 合并数组3、可以把伪数组转化为真数组
      const arr2 = [3, 4, 5]
      const arr = [...arr1, ...arr2]
      console.log(arr)

剩余参数和展开运算符的区别:剩余参数:函数参数使用,得到真数组

10、箭头函数

箭头函数:
const fn = O=>{
console.log('我是箭头函数)
fnO
注意:

1.只有一个函数的时候可以省略小括号
2.如果函数体只有一行代码可以写到一行上
3.再写到一行上的时候可以无需写return直接写返回值4.加括号的函数体返回对象字面量表达式
const fn = uname => ({uname: uname})console.log(fn('我是个好人'))
箭头函数参数:箭头函数没有arguments动态参数，可以使用剩余参数
箭头函数this:箭头函数没有自己的this，它只会从自己的作用域链上一级沿用this，事件回调函数中使用箭头函数的时候，this为全局的window。

 // 1. 箭头函数 基本语法
      const fn = () => {
        console.log(123)
      }
       fn()
    const fn = (x) => {
        console.log(x)
      }
    fn(1)
      // 2. 只有一个形参的时候，可以省略小括号
       const fn = x => {
       console.log(x)
     }
      fn(1)
      // // 3. 只有一行代码的时候，我们可以省略大括号
      const fn = x => console.log(x)
       fn(1)
      // 4. 只有一行代码的时候，可以省略return
      const fn = x => x + x
      console.log(fn(1))
      // 5. 箭头函数可以直接返回一个对象
     const fn = (uname) => ({ uname: uname })
     console.log(fn('刘德华'))

11、filter筛选数组方法

筛选数组方法: filter()，返回数组，包含了符合条件的所有元素,如果没有符合条件的元素返回空数组，看的是回调函数返回值的布尔值
被遍历的数组.filter(function(item,index, arr){l/ item必须写，index,arr可选
return 筛选条件
})

 const arr = [10, 20, 30]
    const newArr = arr.filter(function (item, index) {
      // console.log(item)
      // console.log(index)
      return item >= 20
    })
 // 返回的符合条件的新数组

对象:无序的键值对的集合

12、数组解构

解构赋值:是一种快速为变量赋值的语法，本质上仍然是为变量赋值，分为数组解构、对象解构；

数组解构：是将数组的单元值快速批量的赋值给一系列变量的语法

注意:

1.赋值运算符=左侧的[用于批量声明变量，右侧的数组的单元值将被赋值给左侧的变量
2.变量的数量大于单元值数量的时候，多余的变量被赋值为underfind
3.变量的数量小于单元值数量的时候，可以通过...获取剩余单元值，但只能置于最末位对象解构:

const arr = [1, 2, 3]
      const [a, b, c] = arr
      console.log(a, b, c
// // 交换2个变量的值
      let a = 1
     let b = 2
       ;[b, a] = [a, b]
       console.log(a, b)

13、对象解构

对象解构：是将对象属性和方法快速批量赋值给一系列变量的语法
注意:

1.赋值运算符=左侧的用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
⒉.对象属性的值将被赋值给属性名相同的变量
3.对象中找不到与变量名相同的属性名的时候变量值为underfined

4.给新的变量名赋值:
const { name : uname，age } = { name : '小明’, age : 183

// 1. 对象解构的变量名 可以重新改名  旧变量名: 新变量名
     const { uname: username, age } = { uname: 'pink老师', age: 18 }

    console.log(username)
    console.log(age)

14、JS前面有两哪种情况需要加分号的？

1、立即执行函数

2、数组解构

15、数组对象

const res = {
        data: {
          data: [1, 2, 3],
        },
 const {data:{data: mydata}}=res
      console.log(mydata)

16、数组遍历foreach

遍历数组forEach方法:用于调用数组的每个元素，并将元素传递给回调函数，在特殊情况下：通过修改index,arr可以修改原数组，item如果是简单数据类型修改不了原数组，如果是复杂数据类型可以修改原数组。

17、数组去重

数组去重reduce方法:

const arr = ['a'， 'b', 'a'， 'b'， 'C', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
//如果indexof下标为-1代表数组中没有该字符，把该字符添加进去
let res = arr.reduce((acc, item)=>{
if (acc.indexof(item)===-1){
acc.push(item)
}
return acc
},[])
console.1og(res)

数组去重Set方法:

const arr =['a'， 'b', 'a'， 'b', 'c', 'e', 'e', 'e', 'd', 'd'， 'd', 'd']
const newArr = [. ..new Set(arr)]//展开式
console.log(newArr)