js高级01

作用域

1.局部作用域

• 局部作用域声明的变量 外部不能访问  （除非不带 let ）

• 函数中未使用任何关键字声明的变量 为全局变量

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

函数作用域  函数内部

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

块级作用域

在js中使用 { } 包裹的代码称为代码块 代码块内部声明的变量外部将无法被访问

1.2 全局作用域

• 全局作用域中声明的变量 任何其他作用域都可以被访问 

<script>
  // 此处是全局
  
  function sayHi() {
    // 此处为局部
  }

  // 此处为全局
</script>

作用域链

变量的查找机制  由内向外查找  

作用域链查找的规则？

• 会优先查找当前函数作用域中 查找变量

• 查找不到则会依次逐级查找父级作用域直到全局作用域

注意：

1. 子作用域能够访问父作用域 父级作用域无法访问子级作用域

js垃圾回收机制

• 不在使用的变量 被js自动回收

闭包

内层函数 + 外层函数的变量

• 内层函数用到外层函数的变量 外层函数就叫闭包函数

作用·：

扩展局部变量的作用范围

注意：

内存泄漏

函数提升

• 用function定义的函数 会整体提升

     fn1();
        function fn1() {
            console.log('我是fn1');
        }

arguments 伪数组  ( 了解 )

arguments是一个伪数组   只存在于函数中

作用：

arguments 的作用是动态获取函数的实参

• 当实参较多 形参无法接收时  

•  在函数内部打印该 arguments 伪数组

 function play(a, b, c) {
     console.log(arguments);
 }
 play(1, 2, 3)
 play(1, 2, 3, 5, 10, 12)
 play(13, 15, 41, 21, 31, 32, 58, 15, 12)

• 就可以获取 实参 值

...自定义形参   剩余参数

• 剩余参数是一个真数组

  可以接收所有实参 也可以接收一部分实参 

  ...自定义形参    接收所有实参

  function play(...ccc) {
      console.log(ccc);
  }
  play(1, 2, 3)
  play(1, 2, 3, 4, 5, 6)
  play(1, 2, 3, 12, 36, 34, 14)

...自定义形参  得到实参的总和

let a = 0 
function play(...ccc) {
    for (let i = 0; i < ccc.length; i
++) {
        a += ccc[i]  //相加实参值 赋值 a
    }
    return a //把a返回给调用函数
}
console.log(play(1, 2, 3)); //打印控制
台
console.log(play(1, 2, 3, 4, 5, 6)); //
打印控制台
console.log(play(1, 2, 3, 12, 36, 34, 
14)); //打印控制台

...自定义形参  接收部分参数

• 利用形参 a , b , c  删除了 实参的前三个

 function play(a, b, c, ...grh) {
     console.log(grh);
 }
 play(1, 3, 4, 5, 65)
 play(1, 3, 4, 5, 65, 43, 34, 232)
 play(1, 3, 4, 5, 65, 43, 34, 232, 102, 
31, 12)

展开运算符

• 把数组中元素展开变成参数序列让某个函数使用

• 写到实参位置的 ... 就是展开运算符 

• 写到形参位置的 ... 就是剩余参数 

展开运算符 和 剩余参数

• 剩余参数： 函数参数使用 得到真数组

• 展开运算符： 数组中使用 数组展开 

直接打印数组 与 使用展开运算符 打印数组  区别

• 直接打印数组 数组之间有逗号

• 使用展开运算符打印数组 中间没有 逗号

let arr1 = ['aaa', 'bbb', 'ccc', 'ddd']
console.log(...arr1);

展开运算符求 最大值 ， 最小值

console.log(Math.max(...[1, 2, 3, 4, 5, 6]));
console.log(Math.min(...[1, 2, 3, 4, 5, 6]));

合并数组

let arr2 = [1,2,3];
let arr3 = [4,5,6];
let arr4 = [...arr2, ...arr3]
console.log(arr2);
console.log(arr3);
console.log(arr4);

箭头函数

箭头函数各种写法

const fn = () => {}       

const fn = x => {}   

const fn = (x,y) => x + y      一行代码写法

const fn = (x,y) => ({x,y})   返回对象特殊写法

基本语法

 const fn1 = () => {
     console.log(`我是箭头函数`);
 }
 //调用
 fn1()

只有一行代码 需要返回值 可以省略大括号 { } 并自动做为返回值 被返回

 const fn3 = (a, b) => a + b
 console.log(fn3(2, 2))

如果是一个对象类型 需要（）包裹

 const fn4 = name => ({ name: name })
        console.log(fn4(`张三`));

箭头函数参数 

箭头函数 只能使用剩余参数

箭头函数 this 指向

• 箭头函数 this 指向外面的 window

  let obj2 = {
      name: '李四',
      age: 28,
      sayHi: () => {
          // 使用箭头函数，this指向对象外面的
window
          console.log(this);
      }
  }
  obj2.sayHi();

数组解构 - 赋值给变量 

• 解构数组记得加 ； 号 

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

数组解构  -  交换变量

• 注意声明变量值后面加  ； 号

 let one1 = 111
 let one2 = 222;
 [one2, one1] = [one1, one2]
 console.log(one1, one2);

数组解构复杂情况

 // 1.数组中元素少，解构的变量多，多余变量默认undefined
 const [a, b, c, d] = [111, 222, 333];
 console.log(a, b, c, d);
 // 2.数组中元素多，解构的变量少，未负值无效;
 const [e, f] = [111, 222, 333];
 console.log(e, f);
 // 3.可以利用剩余参数，接收多余的数组元素;
 const [g, h, ...args] = [111, 222, 333, 444];
 console.log(g, h, args);
 // 4.可以给解构的变量，设置默认值;
 //    默认值如果没有被赋值，就是默认状态; 如果被赋值，会被覆盖掉;
 const [i, j = 0, k = 0] = [111, 222];
 console.log(i, j, k);
 // 5.接收指定项
 const [l, , , m] = [111, 222, 333, 444];
 console.log(l, m);
 // 6.多维数组的结构
 const [n, [o, p]] = [111, [222, 333]];
 console.log(n, o, p);

对象解构

• 对象的解构类似数组的解构 只不过数组有序 对象无序

• 变量和属性 一一对应 没有属性 强行解构返回 undefined

let obj = {
    name: '小猪佩奇',
    age: 18
}
const { name, age } = obj
console.log(name, age);

对象解构复杂情况

对象里面套对象  （解构方式）

const pig = {
    name: '佩奇',
    age: 6,
    family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        brother: '乔治'
    }
}
// 解构方式
const { name, age, family: { mother, father, brother} } = pig;

 console.log(name, age, mother, father, brother);

数组里面放对象，对象里面在放对象

const arr = [
    {
        name: '佩奇',
        age: 6,
        family: {
            mother: '猪妈妈'
            father: '猪爸爸'
            brother: '乔治'
        }
    }
]
// 解构方式
const [{ name, age, family: { mother, father, brother } }] = arr;

console.log(name, age, mother, father, brother);

对象里面放数组

  let obj = {
      code: 200,
      msg: '获取新闻列表成功',
      data: [
          { id: 1, title: '特大喜讯1...', count: 33 },
          { id: 2, title: '特大喜讯2...', count: 44 },
          { id: 3, title: '特大喜讯3...', count: 55 },
      ]
  }
//解构方式
  const { data: pal } = obj

  console.log(pal);

多级对象解构案列

将下面多级对象进行解构

        const msg = {
            "code": 200,
            "msg": "获取新闻列表成功",
            "data": [
                {
                    "id": 1,
                    "title": "5G商用自己，三大运用商收入下降",
                    "count": 58
                },
                {
                    "id": 2,
                    "title": "国际媒体头条速览",
                    "count": 56
                },
                {
                    "id": 3,
                    "title": "乌克兰和俄罗斯持续冲突",
                    "count": 1669
                },

            ]
        }

对象解构方式

  const { data } = msg;
  console.log(data);

函数解构方式

function render({ data }) {
  console.log(data);
}
render(msg)