微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > JavaScript 急速入门之槅门窥视
博主信息
博文 32
粉丝 0
评论 0
访问量 29783
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScript 急速入门之槅门窥视
培(信仰)
原创
740人浏览过

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知识点很多，仅用这些做入门三板斧吧。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：再复杂的技术,其实都可以用一二句话说明白
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录