search

博客列表 >js 基础语法知识汇总

js 基础语法知识汇总

初见
初见原创
2021年09月28日 16:53:34489浏览

js基础语法知识

常量与变量

  • ES6标准中引入了新的关键字const来定义常量，常量无法改变 使用const关键字创建常量，声明的同时必须赋值
  • let 关键字声明变量 变量如果只声明，未赋值，默认值为undefined 变量可以在程序任何地方修改
  • 为了区分变量与常量，一般变量名采用小写或驼峰标识，常量采用全大写的形式。
  1.  // 声明一个变量
  2.       let num = 5;
  3.       console.log(num); //返回数值5
  4.       num = 8;
  5.       console.log(num); //返回数值8 ，说明变量随时可以改变的
  6.       // 声明一个常量
  7.       const USERNAME = "admin";
  8.       console.log(USERNAME); //返回 admin
  9.       // 说明变量声明用let，声明后随时可改变，常量声明时必须赋值，一旦声明无法改变

数据类型

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

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

  1. let data = "box";
  2.       console.log(typeof data); //查看类型
  4.       //数组
  5.       const prices = [69, 86, 59, 23, 52];
  6.       console.log(prices);
  7.       console.log(prices[0], prices[1]);
  8.       //对象
  9.       const item1 = {
  10.         //属性 变量
  11.         name: "笔记本",
  12.         num: 6,
  13.         pirice: 699,
  14.       };
  15.       console.table(item1);
  16.       console.log(item1.name, item1.num);
  17.       const item2 = {
  18.         "my name": "充电报",
  19.         num: 9.9,
  20.       };
  21.       console.log(item2["my name"]);
  22.       // 实际工作中 数组和对象结合
  23.       const item3 = [
  24.         { name: "笔记本", num: 6, pirice: 699 },
  25.         { name: "笔记本", num: 6, pirice: 699 },
  26.       ];
  27.       console.table(item3);

函数的种类与参数类型

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

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

  1. function sum1(num1, num2) {
  2.          let total = 0;
  3.          total = num1 + num2;
  4.          console.log("total = ", total);
  5.        }
  6.        sum1(12, 34);
  7.        // (num1, num2) 形式参数
  8.        // (12, 34) 调用参数 实际参数
  9.        console.log("--------");
  10.        // 参数不足，设置默认参数
  11.        function sum2(num1, num2 = 0) {
  12.          let total = 0;
  13.          total = num1 + num2;
  14.          console.log("total =", total);
  15.        }
  16.        sum2(20);
  17.        console.log("--------");
  18.        //rest 归并参数
  19.        function sum3(...args) {
  20.          console.log(args);
  21.        }
  22.        sum3(256, 552, 25, 95, 85, 10);
  23.        console.log("--------");
  24.        function sum4(...args) {
  25.          console.log(
  26.            "total =",
  27.            args.reduce((p, c) => p + c)
  28.          );
  29.        }
  30.        sum4(256, 552, 25, 95, 85, 10);
  31.        console.log("--------");
  32.        const arr = [256, 552, 25, 95, 85, 10];
  33.        sum4(...arr);
  34.        //...用再形参中，归并操作 rest
  35.        //...调用参数中，扩展操作 spread
  37.        console.log("--------");
  39.        //匿名函数 一次性的 立即执行函数
  40.        //   function(a,b){
  41.        //       console.log(a+b);
  42.        //   }(10,50);
  43.        //如果匿名函数不是一次性的
  44.        let add = function (a, b) {
  45.          console.log(a + b);
  46.        };
  47.        add(40, 50);
  48.        // 使用箭头函数来简化匿名函数表达式
  49.       add = (a, b) => {
  50.          return a + b;
  51.        };
  52.        console.log(add(10, 50));
  53.        // 如果行数代码只有一行 省去{}
  54.        // 参数只有一个，（）可以去掉
  55.        //没有参数 （）不能省去
  57.        add = (a, b) =>   return a + b;
  58.        console.log(add(70, 50));
  59.         add = a =>   return a + 50;
  60.          add = ( =>   return 10+5;

作用域与闭包

  • 全局作用域 函数作用域 块作用域
  1. //作用域分为全局作用域，函数作用域，块作用域
  2.       {
  3.         let a = 1;
  4.         // 块作用域只能在块里面访问 if for while
  5.         console.log(a);
  6.       }
  7.       //全局作用域
  8.       //函数外 全局作用域\
  9.       let name = "xiaoming";
  10.       function demo() {
  11.         //函数作用域
  12.         let name = "xiaohong";
  13.         console.log(name);
  14.         //函数内部可以调用函数外作用域
  15.       }
  16.       demo();
  17.       //name 先在函数内部查询，如果有直接访问，如果没有，向上一个作用域查询，直到全局
  18.       //作用域链 查询变量 是单向的，由外向内传递 由内向外禁止
  • 闭包 两个条件 1、具有父子函数 2、自由变量
  1. //作用域分为全局作用域，函数作用域，块作用域
  2.       {
  3.         let a = 1;
  4.         // 块作用域只能在块里面访问 if for while
  5.         console.log(a);
  6.       }
  7.       //全局作用域
  8.       //函数外 全局作用域\
  9.       let name = "xiaoming";
  10.       function demo() {
  11.         //函数作用域
  12.         let name = "xiaohong";
  13.         console.log(name);
  14.         //函数内部可以调用函数外作用域
  15.       }
  16.       demo();
  17.       //name 先在函数内部查询，如果有直接访问，如果没有，向上一个作用域查询，直到全局
  18.       //作用域链 查询变量 是单向的，由外向内传递 由内向外禁止
  20.       //闭包 ：两个条件 1、具有父子函数 2、自由变量
  21.       function parent(a) {
  22.         //a 是子函数f的自由变量
  23.         function f(b) {
  24.           // b 外围参数
  25.           let c = 6; //c私有变量 bc都是当前函数自有的
  26.           return a + b + c;
  27.         }
  28.         return f;
  29.       }
  31.       //调用parent 返回一个函数
  32.       console.log(parent(8));
  33.       let f1 = parent(8);
  34.       console.log(f1(9));
  36.       console.log("---------");
  37.       //parent 调用结束 应该释放掉 ，但是a被子函数f引用，所以父函数不能销毁
  38.       //就产生了闭包，代码中闭包太多消耗内存
  39.       //经典应用 点赞 通常与iife 立即执行函数配合
  40.       let counter = (function (n) {
  41.         //n 是自由变量 不属于子函数
  42.         return function () {
  43.           // 外部参数和自己声明的变量
  44.           return n++;
  45.         };
  46.       })(56);
  47.       console.log(counter());
  48.       console.log(counter());
  49.       console.log(counter());

对象字面量简化

  1. let name = "xiaoming";
  2.       let user = {
  3.         //name:"xiaoming",
  4.         //name:name,
  5.         name,
  6.       };
  7.       console.log(user.name);
  8.       // 两个条件：1/对象属性和变量处于同一个作用域
  9.       // 2 对象属性和变量同名
  10.       //方法的简化
  11.       user = {
  12.         name,
  13.         getInfo() {
  14.           // 将: function 去掉
  15.           //尽量不要用箭头函数简化，除非不要碰到this
  16.           return "我是 " + user.name;
  17.         },
  18.       };
  19.       console.log(user.getInfo());
  20.       // this
  22.       let mobile = {
  23.         name: "iPhone 13",
  24.         getInfo() {
  25.           // 将: function 去掉
  26.           //尽量不要用箭头函数简化，除非不要碰到this
  27.           return mobile.name;
  28.         },
  29.       };
  30.       let mobile2 = {
  31.         name: "iPhone 13",
  32.         getInfo() {
  33.           // this 是mobile2的引用
  34.           // this=mobile2; 是假想代码
  35.           return this.name;
  36.         },
  37.       };

模板字符串与标签函数

  1.  console.log("0001");
  2.       let a = 10,
  3.         b = 20;
  4.       //${}插值占位符，可以将变量表达式嵌入到字符中
  5.       let res = `${a}+${b}=${a + b}`;
  6.       console.log(res);
  7.       //
  8.       let long = `
  9.       css 
  10.       html
  11.       js`;
  12.       console.log(long);
  13.       //标签函数 使用模板字符串为参数的函数
  14.       // alert`hello ${10} ${20}`;
  16.       //console.log`hello ${10} ${20} ${30} world`;
  18.       // 标签函数 第一个参数是数组，第二个是插值表达式
  19.       //
  20.       function total(num, price) {
  21.         console.log(num * price);
  22.       }
  23.       total(10, 20);
  24.       function total2(string, num, price) {
  25.         //console.log(num * price);
  26.         let res = `${string[0]}${10}${string[1]}${90},总金额 ${num * price} 元`;
  27.         console.log(res);
  28.       }
  29.       total2`数量：${10} 单价：${90}`;
  31.       // 模板字符串中的参数占位符很多，可以哦那个rest进行归并
  33.       sum`计算多个数之和：${5}${6}${6}${8}${9}${7}`;
  34.       function sum(strings, ...args) {
  35.         console.log(`${args.join()}之和是 ${args.reduce((p, c) => p + c)}`);
  36.       }
  37.       //标签字符串就是在模板字符串前加了标签
上一条：HTML常用标签的用法示例下一条：1.上手练习 2. 预习css知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多