js 基础语法知识汇总

js基础语法知识

常量与变量

• ES6标准中引入了新的关键字const来定义常量，常量无法改变 使用const关键字创建常量，声明的同时必须赋值
• let 关键字声明变量 变量如果只声明，未赋值，默认值为undefined 变量可以在程序任何地方修改
• 为了区分变量与常量，一般变量名采用小写或驼峰标识，常量采用全大写的形式。

 // 声明一个变量
      let num = 5;
      console.log(num); //返回数值5
      num = 8;
      console.log(num); //返回数值8 ，说明变量随时可以改变的
      // 声明一个常量
      const USERNAME = "admin";
      console.log(USERNAME); //返回 admin
      // 说明变量声明用let，声明后随时可改变，常量声明时必须赋值，一旦声明无法改变

数据类型

• 原始类型 number string boolean defined null
  三个最常用的 number string boolean
  这5种数据具有单值不可再分

• 引用类型 array object funtion
  数组[]使用成员的索引来访问，默认从0开始 数组成员可以是任何类型
  对象{}和数组很像，索引是一个字符串或标识符，使用的是点语法
  当属性使用了非法字符串，必须转为字符串

let data = "box";
      console.log(typeof data); //查看类型
      //数组
      const prices = [69, 86, 59, 23, 52];
      console.log(prices);
      console.log(prices[0], prices[1]);
      //对象
      const item1 = {
        //属性 变量
        name: "笔记本",
        num: 6,
        pirice: 699,
      };
      console.table(item1);
      console.log(item1.name, item1.num);
      const item2 = {
        "my name": "充电报",
        num: 9.9,
      };
      console.log(item2["my name"]);
      // 实际工作中 数组和对象结合
      const item3 = [
        { name: "笔记本", num: 6, pirice: 699 },
        { name: "笔记本", num: 6, pirice: 699 },
      ];
      console.table(item3);

函数的种类与参数类型

• 函数种类： 普通函数 匿名函数 闭包函数

• 参数类型：实际参数（调用参数）形式参数

function sum1(num1, num2) {
         let total = 0;
         total = num1 + num2;
         console.log("total = ", total);
       }
       sum1(12, 34);
       // (num1, num2) 形式参数
       // (12, 34) 调用参数 实际参数
       console.log("--------");
       // 参数不足，设置默认参数
       function sum2(num1, num2 = 0) {
         let total = 0;
         total = num1 + num2;
         console.log("total =", total);
       }
       sum2(20);
       console.log("--------");
       //rest 归并参数
       function sum3(...args) {
         console.log(args);
       }
       sum3(256, 552, 25, 95, 85, 10);
       console.log("--------");
       function sum4(...args) {
         console.log(
           "total =",
           args.reduce((p, c) => p + c)
         );
       }
       sum4(256, 552, 25, 95, 85, 10);
       console.log("--------");
       const arr = [256, 552, 25, 95, 85, 10];
       sum4(...arr);
       //...用再形参中，归并操作 rest
       //...调用参数中，扩展操作 spread
       console.log("--------");
       //匿名函数 一次性的 立即执行函数
       //   function(a,b){
       //       console.log(a+b);
       //   }(10,50);
       //如果匿名函数不是一次性的
       let add = function (a, b) {
         console.log(a + b);
       };
       add(40, 50);
       // 使用箭头函数来简化匿名函数表达式
      add = (a, b) => {
         return a + b;
       };
       console.log(add(10, 50));
       // 如果行数代码只有一行 省去{}
       // 参数只有一个，（）可以去掉
       //没有参数 （）不能省去
       add = (a, b) =>   return a + b;
       console.log(add(70, 50));
        add = a =>   return a + 50;
         add = ( =>   return 10+5;

作用域与闭包

• 全局作用域 函数作用域 块作用域

//作用域分为全局作用域，函数作用域，块作用域
      {
        let a = 1;
        // 块作用域只能在块里面访问 if for while
        console.log(a);
      }
      //全局作用域
      //函数外 全局作用域\
      let name = "xiaoming";
      function demo() {
        //函数作用域
        let name = "xiaohong";
        console.log(name);
        //函数内部可以调用函数外作用域
      }
      demo();
      //name 先在函数内部查询，如果有直接访问，如果没有，向上一个作用域查询，直到全局
      //作用域链 查询变量 是单向的，由外向内传递 由内向外禁止

• 闭包 两个条件 1、具有父子函数 2、自由变量

//作用域分为全局作用域，函数作用域，块作用域
      {
        let a = 1;
        // 块作用域只能在块里面访问 if for while
        console.log(a);
      }
      //全局作用域
      //函数外 全局作用域\
      let name = "xiaoming";
      function demo() {
        //函数作用域
        let name = "xiaohong";
        console.log(name);
        //函数内部可以调用函数外作用域
      }
      demo();
      //name 先在函数内部查询，如果有直接访问，如果没有，向上一个作用域查询，直到全局
      //作用域链 查询变量 是单向的，由外向内传递 由内向外禁止
      //闭包 ：两个条件 1、具有父子函数 2、自由变量
      function parent(a) {
        //a 是子函数f的自由变量
        function f(b) {
          // b 外围参数
          let c = 6; //c私有变量 bc都是当前函数自有的
          return a + b + c;
        }
        return f;
      }
      //调用parent 返回一个函数
      console.log(parent(8));
      let f1 = parent(8);
      console.log(f1(9));
      console.log("---------");
      //parent 调用结束 应该释放掉 ，但是a被子函数f引用，所以父函数不能销毁
      //就产生了闭包，代码中闭包太多消耗内存
      //经典应用 点赞 通常与iife 立即执行函数配合
      let counter = (function (n) {
        //n 是自由变量 不属于子函数
        return function () {
          // 外部参数和自己声明的变量
          return n++;
        };
      })(56);
      console.log(counter());
      console.log(counter());
      console.log(counter());

对象字面量简化

let name = "xiaoming";
      let user = {
        //name:"xiaoming",
        //name:name,
        name,
      };
      console.log(user.name);
      // 两个条件：1/对象属性和变量处于同一个作用域
      // 2 对象属性和变量同名
      //方法的简化
      user = {
        name,
        getInfo() {
          // 将: function 去掉
          //尽量不要用箭头函数简化，除非不要碰到this
          return "我是 " + user.name;
        },
      };
      console.log(user.getInfo());
      // this
      let mobile = {
        name: "iPhone 13",
        getInfo() {
          // 将: function 去掉
          //尽量不要用箭头函数简化，除非不要碰到this
          return mobile.name;
        },
      };
      let mobile2 = {
        name: "iPhone 13",
        getInfo() {
          // this 是mobile2的引用
          // this=mobile2; 是假想代码
          return this.name;
        },
      };

模板字符串与标签函数

 console.log("0001");
      let a = 10,
        b = 20;
      //${}插值占位符，可以将变量表达式嵌入到字符中
      let res = `${a}+${b}=${a + b}`;
      console.log(res);
      //
      let long = `
      css 
      html
      js`;
      console.log(long);
      //标签函数 使用模板字符串为参数的函数
      // alert`hello ${10} ${20}`;
      //console.log`hello ${10} ${20} ${30} world`;
      // 标签函数 第一个参数是数组，第二个是插值表达式
      //
      function total(num, price) {
        console.log(num * price);
      }
      total(10, 20);
      function total2(string, num, price) {
        //console.log(num * price);
        let res = `${string[0]}${10}${string[1]}${90},总金额 ${num * price} 元`;
        console.log(res);
      }
      total2`数量：${10} 单价：${90}`;
      // 模板字符串中的参数占位符很多，可以哦那个rest进行归并
      sum`计算多个数之和：${5}${6}${6}${8}${9}${7}`;
      function sum(strings, ...args) {
        console.log(`${args.join()}之和是 ${args.reduce((p, c) => p + c)}`);
      }
      //标签字符串就是在模板字符串前加了标签