ES6+新语法

目录

一、作用域:

(1)局部作用域

(2)全局作用域

(3)作用域链

二、js垃圾回收机制

(1)JS环境中的分配内存

(2)垃圾回收算法

三、闭包

四、变量提升

五、函数参数

(1)动态参数

(2)剩余参数

 (3)动态参数和剩余参数的区别

(4)展开运算符

六、箭头函数

七:解构赋值

(1)数组解构

(2)对象解构


一、作用域

(1)局部作用域:

函数作用域:在函数内部声明的变量只能在函数内部访问,外部无法访问

特点:

1、函数内部声明的变量,在函数外部无法被访问

2、函数的参数也是函数内部的局部变量

3、不同函数内部声明的变量无法相互访问

4、函数执行完毕后,函数内部的变量实际被清空了

块作用域:用{}包裹的称为代码块,代码块内部声明的变量外部 无法进行访问

注意:

1、let声明的变量会产生块作用域,var不会产生块作用域

2、const声明的常量也会产生块作用域

3、不同代码之间的变量无法相互访问

4、推荐使用let或const

(2)全局作用域:声明在script标签和.js文件的最外层就是所谓的全局作用域,在全局 作用域中声明的变量,任何其他作用域都可以被访问

(3)作用域链

特点:1、嵌套关系的作用域串联起来形成了作用域链

2、在相同的作用域中按着从小到大的额规则查找变量 

3、子作用域能够访问父作用域,父级作用域无法访问子级作用域

二、js垃圾回收机制

(1)JS环境中的分配内存,一般有如下生命周期

1、内存分配:当我们声明变量、函数和对象的时候,系统会自动为他们分配内存

2、内存使用:即读写内存,也就是使用变量函数等

3、内存回收:使用完毕回收器自动回收不再使用的内存

说明:全局变量一般不会回收(关闭页面回收)

一般情况下局部变量的值,不用了,会自动回收掉

特殊情况:程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏

(2)垃圾回收算法

1、引用计数法:现在几乎不用

(1.1)跟踪记录被引用的次数

(1.2)如果被引用了一次,那么记录次数1,多次引用会进行累加

(1.3)如果减少一个引用就减一

(1.4)如果引用次数为0,则释放内存

2、标记清除法

现在浏览器大多基于标记清除算法的某些改进

(2.1)标记清除法将‘不再使用的对象’定义为无法到达的对象

(2.2)从根部触发定时扫描内存中的对象

(2.3)无法从根部出发触及到的对象标记不再使用,稍后进行回收

三、闭包

 闭包可以简单理解成:定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时,就会形成闭包。闭包=内层函数+外层函数的变量

   特点

   1.函数嵌套函数。

   2.函数内部可以引用外部的参数和变量。

   3.参数和变量不会被垃圾回收机制回收。

   使用

   1.读取函数内部的变量;

   2.这些变量的值始终保持在内存中,不会在外层函数调用后被自动清除

   优点:

   1:变量长期驻扎在内存中;2:避免全局变量的污染;

   3:私有成员的存在;

   缺点:会造成内存泄露。

四、变量提升

变量:当代码在执行之前,会把所有在当前作用域下var声明的变量提升到当前作用于的最前面,只提升声明,不提升赋值,然后依次执行代码。

函数:会把函数声明提升到当前作用域的最前面,只提升声明,不提升函数调用

五、函数参数

(1)动态参数

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

  function sum(){
            let s=0
            for(let i=0;i<arguments.length;i++){
                s+=arguments[i]
            }
            console.log(`各个数据的和为${s}`)
        }
        sum(3,4,5)
        sum(2,3,3,4,5)

输出结果

(2)剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组,其为真数组,例如其用...参数数组名

  function sum2(...arr){
            let s=0
            for(let i=0;i<arr.length;i++){
                s+=arr[i]
            }
            console.log(`各个数据的和为${s}`)

        }
        sum2(3,5)
        sum2(2,3,4,5)

输出结果

注意:另外如果还有其他参数,则会先把用户输入的数给其他参数,剩余的参数给定义的数组参数

例如

function sum2(a,b,...arr){
            let s=0
            for(let i=0;i<arr.length;i++){
                s+=arr[i]
            }
            console.log(a,b)
            console.log(`各个数据的和为${s}`)

        }
        sum2(3,5)
        sum2(2,3,4,5)

输出结果:其中第一个把参数给了a,b;第二个函数调用,把前两个参数给了a,b剩余的参数4,5给了arr数组

 (3)动态参数和剩余参数的区别

动态参数是伪数组,箭头函数里没有arguments,剩余参数为真数组,开发中剩余参数常用

(4)展开运算符

...arr可以把数组进行展开,可以利用其求数组的最大值以及合并数组的操作,剩余参数在函数内部进行使用。

六、箭头函数

(1)箭头函数的形式:const fn=(参数)=>{}

 const fn=(...arr)=>{
            let s=0
            for(let i=0;i<arr.length;i++){
                s+=arr[i]
            }
            console.log(`各个数组的和为${s}`)

        }
        fn(2,3,4,5)

(2)箭头函数中没有arguments动态参数,有的是剩余参数...arr

(3)箭头函数中的this:箭头函数不会创建自己的this,它只会从自己的作用域链上的上一层沿用this

七:解构赋值

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

1、一维数组解构:

 const arr=[100,60,80]
 const[max,min,avg]=arr
 console.log(max)

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

注意:在两个变量值中[b,a]前面一定要加分号;要不会报错

JS中有哪些地方需要加分号:1、立即执行函数;2、以数组进行开头的时候

2、多维数组解构:

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

(2)对象解构:将对象属性和方法快速批量赋值给一系列变量的简洁语法

要求属性名和变量名必须一致

const {uname,age}={uname:'pink老师',age:18}
console.log(uname)
console.log(age)

对象解构的变量名,可以重新改名 旧变量名:新变量名

 const uname='奥特曼'
 const {uname:username,age}={uname:'大怪兽',age:18}
 console.log(usename)
 console.log(age)

1、数组对象的解构

 // 注意:其解析规律为若为对象则解析时为{},若为数组则解析时为[],若为数组对象则解析时为[{}]
        const obj=[{
            name:'小开心',
            age:'18'

        }]
        const [{name,age}]=obj
        console.log(name)
        console.log(18)

2、多级对象解构:解构时里面的对象要指明对象名

// 多级对象解构
        const obj={
           name:'小开心',
           family: {
              brother:'科科',
              sister:'小太阳',
            },
            age:12
        }
        const{name,family:{brother,sister},age}=obj
        console.log(name)
        console.log(brother)
        console.log(sister)
        console.log(age)

 

猜你喜欢

转载自blog.csdn.net/qq_50582468/article/details/129547294