search

博客列表 >JavaScript 急速入门之槅门窥视

JavaScript 急速入门之槅门窥视

培(信仰)
培(信仰)原创
2021年01月09日 22:54:52589浏览

js 急速入门之槅门窥视

js:前端通用的脚步语言

写到哪里

  1. <!-- js:前端通用的脚本 语言 -->
  2. <!-- 运行在前端的js -->
  3. <h2>www.php.cn</h2>
  4. <!-- <button onClick="alert(1)">Button1</button> -->
  5. <!-- 1. 内联脚本 -->
  6. <button onclick="document.querySelector('h2').classList.toggle('active');">
  7.   Button1
  8. </button>
  9. <!-- 2. 内部脚本  -->
  10. <button onclick="activeTitle(this)">Button2</button>
  11. <script>
  12.   function activeTitle() {
  13.     document.querySelector("h2").classList.toggle("active");
  14.   }
  15. </script>
  16. <!-- 3. 外部脚本  -->
  17. <!-- 使用外部脚本 浏览器可以缓存，可以共享，推荐使用此方法 -->
  18. <script src="outjs.js"></script>

总结： 1. 事件属性：内联脚本 2. script 标签中：内部脚本 3. script 标签的 src 属性中：外部脚本

变量与常量

  1. <script>
  2.   // 1. 变量
  3.   // 声明
  4.   let userName;
  5.   console.log(userName);
  6.   let itemName = "手机";
  7.   console.log(itemName);
  8.   userName = "percy";
  9.   console.log(userName);
  11.   // 2. 常量
  12.   // 声明是必须初始化
  13.   const unitPrice = 3699;
  14.   console.log(unitPrice);
  16.   //3. 标识符
  17.   // 字母，数字，下划线，$；且不能用数字开始
  18.   // 严格区分大小写  userName,username 不是同一个变量
  19.   // 不得使用关键字和保留字
  21.   // 4. 命名方案
  22.   // 驼峰式：userName(小驼峰)
  23.   // pascal：UserName(大驼峰)
  24.   // 匈牙利式：oBtn,_sex,_salary (首字母小写表示变量类型，第二个单词开始首字母大写)
  25.   // js中推荐全部使用驼峰式，方法和函数使用Pascal，常量全部使用大写
  26. </script>

总结：
变量用：let
常量用：const
尽量不要用 var

标识符只能用字母，数字，下划线，$;且不能用数字开始
使用小驼峰命名方案

变量类型与类型转换

  1. 原始类型：字符串（string），数值（number），布尔（boolean)，undefined，null
    注意：声明变量不给值系统默认 undefined
  1. <script>
  2.   let o = null;
  3.   console.log(o, typeof o);
  4.   // 如何判断一个值是否是null呢？ ===
  5.   if (o === null) console.log("null");
  6. </script>
  1. 引用类型：数组，对象，函数
    数组的值不限类型
  1. <script>
  2.   let arr = [100, "phone", 6699];
  3.   console.log(arr);
  4.   console.log(arr instanceof Array);
  5.   console.log(arr instanceof Object);
  7.   // 怎么判断一个变量是数组呢？
  8.   console.log(Array.isArray(arr));
  10.   let items = {
  11.     id: 100,
  12.     name: "phone",
  13.     price: 6899,
  14.   };
  15.   console.log(items);
  16.   console.table(items);
  18.   // 判断是否是对象
  19.   console.log(items instanceof Object);
  21.   // 函数
  22.   function show() {
  23.     console.log(typeof num);
  24.   }
  25.   console.log(typeof show);
  26. </script>

总结：
判断是否是数组：Array.isArray(arr)
判断是否是对象：instanceof Object

函数提升与重写

  1. <script>
  2.   // 函数声明
  3.   // 命名规则 函数命名：动词 + 名词，变量和常量命名用名词
  4.   function getName(name) {
  5.     return name + " Welcome ";
  6.   }
  7.   // 调用
  8.   console.log(getName("yp"));
  10.   // 函数提升 ：调用可以在函数声明之前书写
  11.   // 声明会自动提升到顶部
  13.   function getName(name) {
  14.     return " 欢迎 " + name;
  15.   }
  16.   // 1. 避免函数提升，写到匿名函数中(函数表达式)
  18.   let sum = function (a, b) {
  19.     return a + b;
  20.   };
  22.   // 2. 避免函数被重写：
  23.   //   将函数做为值，赋值给一个常量
  24.   const sum1 = function (a, b) {
  25.     return a + b;
  26.   };
  28.   console.log(sum1(1, 2));
  29. </script>

函数参数与返回值

  1. // 必选参数
  2. let sum = function (a, b) {
  3.   return a + b;
  4. };
  5. console.log(sum(1, 2));
  6. console.log(sum(1));
  7. //可选参数，设置默认值
  8. sum = function (a, b = 0) {
  9.   return a + b;
  10. };
  11. console.log(sum(1));
  12. console.log(sum(1, 4));
  14. sum = function (a, b, c, d) {
  15.   return a + b + c + d;
  16. };
  18. console.log(sum(1, 2, 3, 4));
  19. //   ... :归内参数，简化函数的参数声明
  20. // 当参数比较多时可使用
  21. sum = function (...arr) {
  22.   console.log(arr);
  23.   console.log(arguments);
  24.   // arguments 类数组：类似数组其实是对象
  25.   // 属性为从0递增的正整数，且有length 属性
  26.   // reduce()操作数组所以要转换
  27.   // Array.from(arguments) 可以将类数组转化为数组
  28.   console.log(Array.from(arguments));
  29.   // return arr.reduce(function (p, c) {
  30.   //   return p + c;
  31.   // });
  32.   // 简化为箭头函数
  33.   // return arr.reduce((prev,curr)=>prev+curr);
  34.   return Array.from(arguments).reduce((prev, curr) => prev + curr);
  36.   // Array.of() 将独立元素封装成数组
  37.   console.log(Array.of(...arguments));
  38. };
  40. console.log(sum(1, 2, 3, 6));
  42. let params = [1, 2, 3, 4, 5, 6];
  43. console.log(params);
  44. //   ...:扩展参数，简化函数的调用参数
  46. console.log(sum(...params));
  48. //   函数都是单值返回 迭代器例外，如果想返回多个值，将结果封装到数组或对象中
  49. //   let getItems = function () {
  50. //     return [100, "phone", 6899];
  51. //   };
  52. // 使用箭头函数简写
  53. let getItems = () => [100, "phone", 6899];
  55. console.log(getItems());
  56. // 返回带有描述的内容就使用对象
  58. // getItems = function(){
  59. //     return {id:100,name:"phone",price:6899};
  60. // }
  61. //   使用箭头函数简写
  62. getItems = () => {
  63.   return { id: 100, name: "phone", price: 6899 };
  64. };
  65. console.log(getItems());

高阶函数

高阶函数：使用函数为参数或者将函数作为返回值的函数

  1. // 1. 回调函数：自己不用给别人用的函数
  2. // document.addEventListener("click",function () {
  3. //     alert("hello ...");
  4. // })
  5. // 使用箭头函数简写
  6. document.addEventListener("click", () => alert("~~~world"));
  7. // 2. 偏函数：当函数的参数比较多时，先传入必要的参数，其他更多的函数用函数的返回值传递
  8. //   简化了声明时的参数
  9. //   let sum = function (a, b) {
  10. //     return function (c, d) {
  11. //       return a + b + c + d;
  12. //     };
  13. //   };
  14. //   使用箭头函数简写
  15. let sum = (a, b) => (c, d) => a + b + c + d;
  17. //   调用
  18. //   let f1=sum(1,2);
  19. //   console.log(f1(3,4));
  20. console.log(sum(1, 2)(3, 4));
  22. //   柯里化（极端的偏函数） 简化了调用的参数
  23. //   sum = function (a) {
  24. //     return function (b) {
  25. //       return function (c) {
  26. //         return function (d) {
  27. //           return a + b + c + d;
  28. //         };
  29. //       };
  30. //     };
  31. //   };
  32. //   使用箭头函数简写
  33. sum = (a) => (b) => (c) => (d) => a + b + c + d;
  35. //   简化调用
  36. console.log(sum(1)(2)(3)(40));
  38. //   4. 纯函数
  39. // 完全独立于调用的上下文，返回值只能受到传入的参数影响
  40. // function getDate () {
  41. //     return Date.now();
  42. // }
  43. // 使用箭头函数简写
  44. getDate = () => Date.now();
  45. //   以上不是纯函数
  46. console.log(getDate());

箭头函数

箭头函数用来简化“匿名函数”的声明
如果函数体只有一条语句，可不写 return 和大括号
如果只有一个参数，小括号都可以不写
如果没有参数，小括号不能省

  1. 箭头函数没有原型属性 prototype，不能当构造函数用

  2. 箭头函数中的 this，始终与它的上下文绑定

  1. let sum = function (a, b) {
  2.   return a + b;
  3. };
  4. //使用箭头函数简写
  5. sum = (a, b) => a + b;
  7. console.log(sum(3, 4));
  9. let tips = (str) => console.log(str);
  10. tips("欢迎新同学");

作用域与闭包

js 使用词法作用域或者叫静态作用域，总是和他的使用上下文绑定
js 三种作用域：全局，函数，块

  1. // 1. 全局作用域:写在外面就是全局作用域
  2. let title = "php ";
  3. console.log(title);
  5. // 2. 函数作用域：写在函数内
  6. function getSite() {
  7.   //   函数内声明的变量是私有变量
  8.   // 函数中可以使用他的上下文的变量
  9.   let domain = "www.php.cn";
  10.   return title + domain;
  11. }
  12. console.log(getSite());
  13. //    3. 块作用域
  14. {
  15.   let a = 1;
  16.   const b = "hello";
  17.   var c = 2;
  18. }
  19. //   console.log(a,b);
  20. // 以后尽量不用var，因为var不支持块作用域
  21. console.log(c);
  22. //   4. 闭包：能够访问自由变量的函数
  23. // 自由变量: 既不是函数的参数也是私有变量，存在于函数调用上下文中
  24. // 非函数本身定义，而是上下文中的变量（可理解为父级中的变量）
  25. let num = 1;
  26. function add(a, b) {
  27.   let t = 0;
  28.   // t是私有变量，a,b是参数，num就是自由变量
  29.   return t + a + b + num;
  30. }
  32. function a() {
  33.   let n = 100;
  34.   //   这个返回的子函数就是闭包；闭包就是子函数
  35.   return function () {
  36.     return n;
  37.   };
  38. }
  40. //    使用箭头函数简写
  41. getNum = () => {
  42.   let n = 200;
  43.   return () => n;
  44. };
  45. console.log(a()());
  46. console.log(getNum()());
  48. addNum = () => {
  49.   let n = 1;
  50.   return () => n++;
  51. };
  53. console.log(addNum()());
  54. console.log(addNum()());
  55. console.log(addNum()());
  56. console.log("----------------");
  58. let f1 = addNum();
  59. console.log(f1());
  60. console.log(f1());
  61. console.log(f1());

立即执行函数

立即执行函数：IIFE
立即执行：声明完直接调用
有什么用处呢？可以模拟块作用域。

  1. //立即执行函数：IIFE
  2. function sum(a, b) {
  3.   console.log(a + b);
  4. }
  5. sum(10, 20);
  6. //立即执行：声明完直接调用
  7. (function sum(a, b) {
  8.   console.log(a + b);
  9. })(10, 30);
  11. ((a, b) => console.log(a + b))(10, 40);
  12. //用处？可以模拟块作用域
  14. // if (true) {
  15. //     let b=888;
  16. // }
  18. // console.log(b);
  19. //失败是因为let 声明的块作用域
  21. //制作模块
  22. let module = (function (name, email) {
  23.   return {
  24.     getName: () => "name:" + email,
  25.     getEmail: () => "email:" + email,
  26.   };
  27. })("admin", "admin@php.cn");
  29. console.log(module.getName());

总结：
回调函数：简而言之是自己的函数写好为别人服务提供服务器
纯函数：返回值只受到参数影响，不受上下文影响；

js知识点很多，仅用这些做入门三板斧吧。

上一条：深入理解js变量于函数基础下一条：json/Ajax异步请求
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多