JS进阶_day01

最新推荐文章于 2024-06-21 16:41:46 发布
最新推荐文章于 2024-06-21 16:41:46 发布
阅读量82 收藏
点赞数
分类专栏： JavaScript笔记 文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44697315/article/details/129764075
版权

1.作用域

1.1局部作用域

局部作用域分为函数作用域和块作用域

函数作用域：

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

function getSum() {
    //函数内部是函数作用域 属于局部变量
    const num = 0
}
console.log(num) //此处报错 函数外部不能使用局部作用域变量

总结：

  1. 函数内部声明的变量，在函数外部无法被访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后，函数内部的变量实际被清空了

块作用域：

在JavaScript中使用{ }包裹的代码称为代码块，代码块内部声明的变量外部将有可能无法被访问。

for(let i = 1; i <= 6; i++) {
    //i只能在该代码块中被访问
    console.log(i) //正常
}
//超出了 i 的作用域
console.log(i) //报错

总结：

  1. let声明的变量会产生块作用域，var不会产生块作用域
  2. const声明的常量也会产生块作用域
  3. 不同代码块之间的变量无法互相访问
  4. 推荐使用let或const

1.2全局作用域

<script>标签和.js文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。全局作用域中声明的变量，任何其它作用域都可以被访问

<script>
    //全局作用域
    //全局作用域下声明了num变量
    const num = 0
    function fn() {
        //函数内部可以使用全局作用域的变量
        console.log(num)
}
    //此处全局作用域
</script>

注意：

  1. 为Window对象动态添加的属性默认也是全局的，不推荐
  2. 函数中未使用任何关键字声明的变量未全局变量，不推荐
  3. 尽可能少声明全局变量，防止全局变量被污染

1.3作用域链

作用域链本质就是底层的变量查找机制。

  • 在函数被执行时，会优先查找当前函数作用域中查找变量   
  • 如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域    
<script>
    //全局作用域
    let a = 1
    let b = 2
    //局部作用域
    function f() {
        let a = 1
        //局部作用域
        function g() {
            a = 2
            console.log(a)
        }
        g()//调用g
    }
    f()//调用f
</script>

总结：

  1. 嵌套关系的作用域串联起来形成作用域链
  2. 相同作用域链中按着从小到大的规则查找变量
  3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域

1.4JS垃圾回收机制

垃圾回收机制（Garbage Collection）简称GC

JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收

内存的生命周期

JS环境中分配的内存，一般有如下生命周期：

  1. 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
  2. 内存使用：即读写内存，也就是使用变量、函数等
  3. 内存回收：使用完毕，由垃圾回收器自动回收不再使用的内存
<script>
    //为变量分配内存
    const age = 18
    //为对象分配内存
    const obj = {
    age: 19
}

    //为函数分配内存
    function fn() {
        const age = 18
        console.log(age)
    }
</script>

说明：

  • 全局变量一般不会回收（关闭页面回收）
  • 一般情况下局部变量的值，不用了，会自动回收掉

内存泄漏：程序中分配的内存由于某种原因程序未释放或无法释放叫作内存泄漏

堆栈空间分配区别：

  1. 栈（操作系统）：由操作系统自动分配释放函数的参数值、局部吧等，基本数据类型放到栈里面
  2. 堆（操作系统）：一般由程序员分配释放，如程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面。

垃圾回收算法：

  • 引用计数法

IE采用的引用计数法，定义“内存不再使用”，就是看一个对象是否有指向它的引用，没有引用了就回收对象

算法：

  1. 跟踪记录被引用的次数
  2. 如果被引用了一次，那么久记录次数1，多次引用会累加++
  3. 如果减少一个引用就减1--
  4. 如果引用次数是0，则释放内存

但它却存在一个致命问题：嵌套引用（循环引用）

如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄漏。

  • 标记清除法

现代的浏览器已经不再使用引用计数算法了。

现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。

核心：

  1. 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
  2. 就是从根部（在JS中就是全局对象）触发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的。
  3. 那些无法由根部触发触及到的对象被标记为不再使用，稍后进行回收。

1.5闭包

概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域

简单理解：闭包 = 内层函数 + 外层函数的变量

function outer() {
    const a = 1
    function f() {
        console.log(a)
    }
    f()
}
outer()

闭包作用：封闭数据、提供操作，外部也可以访问内部函数的变量

闭包的基本格式：

function outer() {
    let i = 1
    function fn() {
        console.log(i)
    }
    return fn
}
const fun = outer()
fun() //1
//外层函数使用内部函数的变量

闭包应用：实现数据的私有

比如，我们要做一个统计函数调用次数，函数调用一次，就++

闭包的应用：
        // 普通形式；统计函数调用的次数
         let i = 0 //因为i是全局变量 容易被修改
         function fn() {
             i++
             console.log(`函数被调用了${i}次`)
        }
// 闭包形式；统计函数调用的次数
            function count() {
                let i = 0
                function fn() {
                    i++
                    console.log(`函数被调用了${i}次`)
                }
                return fn
            }
            const fun = count()

1.6变量提升

变量提升是JavaScript中比较“奇怪” 的现象，它允许在变量声明之前即被访问（仅存在于var声明变量）

//访问变量str
console.log(str + 'world') //undefined world
//声明变量
var str = 'hello'

注意：

  1. 变量在未声明即被访问时会报语法错误
  2. 变量在var声明之前即被访问，变量的值为undefined
  3. let/const声明的变量不存在变量提升
  4. 变量提升出现在相同作用域中
  5. 实际开发中推荐先声明再访问变量

2.函数进阶

2.1函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用

fn()
function fn() {
    console.log('可以在声明之前调用')
}
//函数表达式不可以先调用再声明

总结：

  1. 函数提升能够使函数的声明调用更灵活
  2. 函数表达式不存在提升现象
  3. 函数提升出现在相同作用域中

2.2函数参数

2.2.1动态参数

arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

//求生函数，计算所有参数的和
function sum() {
    let s = 0
    for(let i = 0; i < arguments.length; i++) {
        s += arguments[i]
    }
    console.log(s)
}
//调用求和函数
sum(5, 10)//两个参数
sum(1, 2, 4) //三个参数

总结：

  1. arguments是一个伪数组，只存在于函数中
  2. arguments的作用是动态获取函数的实参
  3. 可以通过for循环依次得到传递过来的实参

2.2.2剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

//...后面随便跟参数名
function getSum(a, b, ...arr) {
    console.log(arr) //[4, 5, 6]
}
getSum(2, 3, 4, 5, 6)
  1. ...是语法符号，置于最末函数形参之前，用于获取多余的实参
  2. 借助...获取的剩余实参，是一个真数组
  3. 函数里面使用

扩展：展开运算符

展开运算符（...），将一个数组进行展开

const arr = [1, 5, 3, 8, 2]
console.log(...arr) //1 5 3 8 2

说明：

  1. 不会修改原数组
  2. 数组里面使用

典型运用场景：求数组最大值（最小值）、合并数组等

//1.求数组最大最小值
const arr1 = [1, 2, 3]
console.log(Math.max(...arr1)) //3
console.log(Math.min(...arr1)) //1


// 2.合并数组
const arr2 = [4, 5]
const arr3 = [...arr1, ...arr2]
console.log(arr3)//[1, 2, 3, 4, 5]

2.3箭头函数

目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

2.3.1基本语法

// 一、普通函数
const fn = function () {
    console.log('我是普通函数')
}
fn()

// 二、箭头函数
const fn = () => {
    console.log(123)
}
fn()

// 2.1只有一个参数可以省略小括号
const fn = x => {
            console.log(x)
}
fn(1)

// 2.2只有一行代码可以省略大括号
const fn = x => console.log(x)
fn(1)

// 2.3只有一行代码可以省略return
const fn = x => x + x
console.log(fn(1))

// 2.4箭头函数可以直接返回一个对象
const fn = (uname) => ({uname:uname})
console.log(fn('白敬亭'))

2.3.2箭头函数参数

  1. 普通函数有arguments动态参数
  2. 箭头函数没有arguments动态参数，但是有剩余参数...args
// 1.利用箭头函数求和
        const getSum = (...arr) => {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            return sum
        }
        console.log(getSum(2, 3))

2.3.3箭头函数this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值。

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this

// 一、以前的this指向
        // console.log(this) //window
        // // 1.普通函数
        // function fn () {
        //     console.log(this) //window
        // }
        // fn()

        // // 2.对象方法里面的this 谁调用就指向谁
        // const obj = {
        //     name: 'andy',
        //     sayHi: function () {
        //         console.log(this) //obj
        //     }
        // }
        // obj.sayHi()
// 二、箭头函数的this指向  
        // 1.指向上一层
        // const fn = () => {
        //     console.log(this) //window
        // }
        // fn()

        // 2.对象方法 箭头函数this
        // const obj = {
        //     uname: '白敬亭',
        //     sayHi: () => {
        //         console.log(this) //window
        //     }
        // }
        // obj.sayHi()

        const obj = {
            uname: '白敬亭',
            sayHi: function () {
                console.log(this) //obj
                let i = 10
                const count = () => {
                    console.log(this) //obj
                }
                count()
            }
        }
        obj.sayHi()

3.解构赋值

3.1数组解构

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

基本语法：

  1. 赋值运算符 = 左侧的[ ]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
// 普通数组
        // const arr = [100, 60, 80]
        // 数组解构 赋值
        // const [max, min, avg] = arr
        // 等价于以下写法
        // const max = arr[0]
        // const min = arr[1]
        // const avg = arr[2]

const [max, min, avg] = [100, 60, 80]

典型应用场景：交换两个变量

let a = 1
let b = 2; //这里必须加分号
[b, a] = [a, b]
console.log(a, b) //2 1

注意：js前面必须加分号情况

1.立即执行函数
(function t() { })();
//或者
;(function t() { })()


2.数组解构
//数组开头的，特别是前面有语句的一定注意加分号
;[b, a] = [a, b]

变量多 单元值少的情况：

// 变量多 单元值少 最后一个是undefined
        const [a, b, c, d] = [1, 2, 3]
        console.log(a) //1
        console.log(b) //2
        console.log(c) //3
        console.log(d) //undefined

变量少 单元值多的情况：

// 变量少 单元值多 
        const [a, b] = [1, 2, 3]
        console.log(a) //1
        console.log(b) //2

利用剩余参数解决变量少 单元值多的情况：

// 利用剩余参数解决变量少 单元值多的情况
        const [a, b, ...c] = [1, 2, 3, 4]
        console.log(a) //1
        console.log(b) //2
        console.log(c) //[3, 4] 真数组

防止有undefined传递单元值的情况，可以设置默认值：

// 防止undefined传递
        // const [a = 0, b = 0] = [1, 2]
        // console.log(a) //1
        // console.log(b) //2
        const [a = 0, b = 0] = []
        console.log(a) //0
        console.log(b) //0

按需导入，忽略某些返回值：

// 按需导入赋值
        const [a, b, , d] = [1, 2, 3, 4]
        console.log(a) //1
        console.log(b) //2
        console.log(d) //4

支持多维数组的解构：

// 支持多维数组
        const arr = [1, 2, [3, 4]]
        console.log(arr[0]) //1
        console.log(arr[1]) //2
        console.log(arr[2]) //[3,4]
        console.log(arr[2][0]) //3
        console.log(arr[2][0]) //4

const [a, b, [c, d]] = [1, 2, [3, 4]]
        console.log(a) //1
        console.log(b) //2
        console.log(c) //3
        console.log(d) //4

3.2对象解构

3.2.1基本语法

  1. 赋值运算符 = 左侧的 { }用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 注意解构的变量名不要和外面的变量名冲突否则报错
  4. 对象中找不到与变量名一致的属性时变量值为undefined
// 解构的语法
        // 注：变量名和属性名必须一致
        const {name, age} = {name: '白敬亭', age: 18}
        // 等价于 const name = obj.name
        console.log(name) //白敬亭
        console.log(age) //18

 给新的变量名赋值

可以从一个对象中提取变量并同时修改新的变量名

//普通对象
const obj = {
    name: '白敬亭',
    age: 18
}

//给新的变量名赋值 旧变量名: 新变量名
const {name: uname, age: ages} = obj
console.log(uname) //白敬亭
console.log(ages) //18

数组对象解构

// 2.解构数组对象
            const pig = [{
                name: 'bjt',
                age: 19
            }]
            const [{name, age}] = pig
            console.log(name) //bjt
            console.log(age) //19

多级对象解构

const pig = {
            name: '佩奇',
            family: {
                mother: '猪妈妈',
                father: '猪爸爸',
                brother: '乔治'
            },
            age: 6
        }
        // 多级对象解构
        const {name, family: {mother, father, brother}, age} = pig
        console.log(name)
        console.log(mother)
        console.log(father)
        console.log(brother)
        console.log(age)


const person = [
            {
                name: '佩奇',
                family: {
                    mother: '猪妈妈',
                    father: '猪爸爸',
                    brother: '乔治'
                },
                age: 6
            }
        ]
        const [{name, family:{mother, father, brother}, age}] = person
        console.log(name)
        console.log(mother)
        console.log(father)
        console.log(brother)
        console.log(age)

遍历数组forEach方法（重点）

  • forEach()方法用于调用数组的每个元素，并将元素传递给回调函数
  • 主要使用场景：遍历数组的每个元素
  • 语法：
被遍历的数组.forEach(function (当前数组元素, 当前元素索引号) {
    //函数体
})

注意：

  1. forEach主要是遍历数组
  2. 参数当前数组元素是必须要写的，索引号可选

筛选数组filter方法（重点）

  • filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  • 主要使用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组
  • 语法：
const arr = [10, 20, 30]
        const newArr = arr.filter(function (item, index) {
            // console.log(item) //数组元素 10 20 30
            // console.log(index) //索引号0 1 2
            return item >= 20
        })
        console.log(newArr)

//等价于以下写法
const arr = [10, 20, 30]
const newArr = arr.filter(item => item >= 20)
        console.log(newArr)

小蔡爱学习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mybatis_day01.docx
10-24
mybatis是一种持久层框架，也属于ORM映射。前身是ibatis。 相比于hibernatehibernate为全自动化，配置文件书写之后不需要书写sql语句，但是欠缺灵活，很多时候需要优化； mybatis为半自动化，需要自己书写sql语句，...
Mybatis_day01.pdf
08-08
MyBatis1. 目前最主流的持久层框架为hibernate与mybatis，而且国内目前情况使用Mybatis的公司比hibernate要多。 2. Hibernate学习门槛不低，要精通门槛更高。门槛高在怎么设计O/R映射，在性能和对象模型之间如何权衡...
ECMAScript 6之变量的解构赋值
weixin_33755847的博客
09-05 162
1，数组的解构赋值 基本用法 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 以前，为变量赋值，只能直接指定值。 var a = 1; var b = 2; var c = 3; ES6允许写成下面这样。 var [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值...
es6之变量的结构赋值
cainiaolaili的博客
03-18 605
1.数组的解构赋值 基本用法  ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。   以前，为变脸赋值，智能直接指定值。 let a=1; let b=2; let c=3;ES6允许写成这样。let [a,b,c]=[1,2,3];可以从数组中提取值，按照对应位置，对变量赋值。这种写法属于“模式匹配”，只要等号两边的模式相...
js进阶_day03
qq_44697315的博客
04-01 85
面向对象就是把事务分解成一个个对象，然后由对象之间分工与合作。在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。面向对象的特性：封装性继承性多态性。
JavaScript进阶学习day4-APIs_day1
m0_65359288的博客
03-18 1489
data-属性名="属性值"获取自定义属性：对象.dataset.自定义属性名。
JavaScript进阶学习day6-APIs_day3
m0_65359288的博客
03-23 1163
最近忙疯了，暂停了几天的学习，有点小小的愧疚，所以现在开始正常学习啦~
JavaScript进阶学习day5-APIs_day2
m0_65359288的博客
03-19 209
①事件源②事件类型③事件调用函数2、随机点名案例3、轮播图案例注意：自动调用点击事件对象.click()//这个相当于是浏览器自动实行对象的点击事件（这个常用于轮播图的自动播放）要注意的是重新开始定时器，要在函数里面写整个的定时器开始函数1、鼠标事件①鼠标经过：mouseenter②鼠标离开：mouseleave2、焦点事件①获得焦点：focus②失去焦点：blur3、键盘事件①键盘按下：keydown②键盘弹起：keyup4、文本事件①表单输入（用户输入文本）：input。
JavaScript进阶学习day7-APIs_day4
m0_65359288的博客
03-25 311
②下载完毕之后就去到demo文件夹，找到自己想要的样式，然后就查看源代码，找到你想要的轮播图的样式引入的css和js文件，然后复制去到你想要放的文件夹。ul.appendChild(ul.children[0].cloneNode(false))（浅克隆，只克隆标签名）ul.children[0].cloneNode(true)（深克隆，把里面的内容页克隆过来）2、获取到的时间处理（日期对象的方法，所以姚先获得日期对象，才能用它的方法）2）父盒子.insertBefore(要插入的元素，在哪个元素的前面)
JavaScript进阶学习day10-APIs_day7
m0_65359288的博客
05-18 314
2、块作用域：大括号被包在一起的代码称作块作用域，大括号里面定义的变量有可能无法被访问（用var定义的就能够被访问，因为var没有块作用域，但是let和const有块作用域）7、变量提升：用var定义的变量会有变量提升，只提升变量的声明，不会提升赋值，函数提升（注意的是函数表达式的话要先声明后提升，以为只会提升声明而不会提升赋值）6、闭包=内层函数+外层函数的变量（函数嵌套函数，里层函数引用到外层函数的变量）作用：外部也可以访问函数内部的变量，但是闭包可能存在内存泄漏。使用与本来需要匿名函数的地方。
JavaScript进阶学习day9-APIs_day6
m0_65359288的博客
05-18 193
abc]只要匹配的字符串匹配abc里面其中一个就行，如果是精确匹配的话只选一个，匹配小写字母[a-z],匹配大写字母[A-Z],匹配数字[0-9],量词{n,}写几，就意味着出现的次数为大于等于n，逗号两边不能有空格。[^a-z],在中括号里面添加^，代表取反，除了小写字母之外的。量词{n,m}，就意味着出现的次数大于等于n,小于等于m。③检索（查找）符合规则的字符串（了解就行）定义的规则名.test(被检测的字符串)2、分类：边界符、量词、字符类。1、表单验证、过滤敏感词。
JavaScript进阶学习day8-APIs_day5
m0_65359288的博客
05-18 406
setTimeout(函数回调，等待毫秒数)：仅仅只执行一次，可以理解为将一段代码延迟执行。先执行执行栈中的同步任务，异步任务放入任务队列，一旦执行栈是所有同步任务执行完毕之后，系统会依次顺序读取任务队列里面的异步任务。①存：localStorage.setItem('key','value')记得key和value都要引号括起来。步骤：先把对象转换为字符串（JSON对象转换），然后将字符串（JSON对象）转成对象。④改：localStorage.setItem('旧属性值','新值')
basic_day01_all.zip_day01
09-20
日期算法-功能简介-目录算法-时间算法-区域算法-
Hibernate_day01.zip
09-15
hibernate框架概述，环境搭建，hibernate基本配置，hibernate常用的几个API
spring_day01
01-10
框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件
不出网上线CS的各种姿势（内网横向）
最新发布
qq_64395221的博客
06-21 887
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 984
JSON，Ajax
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 460
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 221
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
knockout_day的类型是tuple，Month_Observation_Day的类型是ndarray，我要把Month_Observation_Day中数字为1的对应位置的knockout_day的数抽出来
06-09
result = [knockout_day[i] for i in np.where(Month_Observation_Day == 1)[1] if knockout_day[i] == 1] print(result) ``` 输出结果为： ``` [] ``` 注意，上述代码中的结果为空列表，因为在示例中的 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值