JavaScript系列之JS入门基本语法

DOGIOOH 2020-11-13 01:49:51
javascript JS 入门 系列 基本


JavaScript系列之JS入门/基本语法

01 JavaScript入门

JavaScript是一门基于对象和事件驱动的,并具有安全性能的脚本语言

常见误区:我们通常见名猜意会认为JavaScript与Java有所联系,而事实上,JavaScript除了语法上有点像Java,其他部分基本上没啥关系。


JavaScript发展过程中的关键节点

  • 1995年,网景公司的Brendan Eich只花了10天时间就设计出了JavaScript语言。
  • 1997年,ECMA组织定制了JavaScript语言的标准,被称为ECMAScript标准,也是ECMAScript的第一版标准。
  • ECMAScript 6标准(简称ES6)已经在2015年6月正式发布。

JavaScript的执行原理

  • JavaScript是一门单线程脚本语言,不需要编译,边解释边执行。JS不一定非要在浏览器中运行,只要有JS引擎即可,最典型的比如NodeJS,采用了谷歌的v8引擎,使得JS完全脱离浏览器运行。浏览器再加载文档时,首先需要先对HTML进行解析,浏览器在解析HTML文件的时候,“自上而下”加载,加载的过程中进行解析渲染。在解析过程中,如果遇到请求外部资源,如图片、CSS、iconfot等,这些请求过程是异步的,不会影响HTML文档的继续加载和解析。当文档加载过程中遇到JS文件,HTML文档会立马挂起渲染的线程(加载解析渲染同步进行),挂起后,要等到JS文件加载完而且解析执行完之后,才恢复HTML文档的渲染线程。因为JS可能会修改DOM结构,最明显的例子就是document.write。这也就意味着:在JS执行完成之前,后续所有资源的下载都可能没有必要没有意义,这也就是JS阻塞后续资源下载的根本原因,所以,开发过程中,经常把JS代码放到HTML文档末尾。
  • JS的执行机制就是一个主线程 + 一个任务队列。同步任务就是放在主线程上执行的任务,异步任务就是放在任务队列的任务。主线程里面是同步任务,在执行栈中出栈即被执行,异步任务先交由相应的模块处理比如Timer模块,一定是等到达触发条件比如时间到了,callback才会被放在任务队列中,一旦执行栈中任务完成了,就会到任务队列中去执行队列中的各个callback。callback queue中指的是“任务队列”,也可以理解为消息队列,“消息”可以理解为:注册异步任务时添加的回调函数。需要注意的是:执行栈里的同步任务没完成是不会执行任务队列里的异步callback的,哪怕超时了。

02 JavaScript基本语法

JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}。但是,JavaScript并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。让JavaScript引擎自动加分号在某些情况下会改变程序的语义,导致运行结果与期望不一致

JavaScript中的核心语法由变量、数据类型、数组、运算符号、控制语句、注释、输入/输出、语法约定组成


  • 变量
var//用于声明变量的关键字
//先声明变量再赋值
var x;
x=5;
//同时声明和赋值变量
var x=5;
//变量可以不经声明而直接使用,但这种方法容易出错
x=5;
//变量本身类型不固定,因此JavaScript是动态语言
var s=1;
s="abc";

  • 数据类型

    JavaScript中的数据类型有:undefined null number boolean string Array Object

    undefined : 变量没有初始值,仅仅在判断函数参数是否传递的情况下有用。
    null : 表示一个空值,与undefined值相等.它和0以及空字符串''不同,0是一个数值,''表示长度为0的字符串,而null表示“空”。
    number : JavaScript不区分整数和浮点数,统一用Number表示
    boolean : ture / false
    string : 以单引号'或双引号"括起来的任意文本.
    Array : JavaScript的数组可以包括任意数据类型
    Object : JavaScript的对象是一组由键-值组成的无序集合,键都是字符串类型,值乐意是任意数据类型。
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script>
    var str = "JavaScript";
    var num = 10;
    var u;
    var arr=[1,2,3,str];
    var date = new Date();
    //在控制台输出
    console.log(typeof str);
    console.log(typeof num);
    console.log(typeof u);
    console.log(typeof arr);
    console.log(typeof date);
    </script>
    </body>
    </html>
    

  • String类型

    • JavaScript的字符串就是用''""括起来的字符表示。如果'本身也是一个字符,那就可以用""括起来,但如果字符串内部既包含'又包含"则需要用转义字符\来标识。

    • 模板字符串:要把多个字符串连接起来,可以用+号连接。如果有很多变量需要连接,用+号就比较麻烦,ES6新增了一种模板字符串,用${变量名}表示,可以自动替换字符串中的变量。

    • 常用方法:

      • charAt(index) :返回指定位置字符串
      • indexOf(str,index) : 查找某个指定的字符串在字符串中首次出现的位置
      • substring(index1,index2):返回位于指定索引index1和index2之间的字符串,[index1,index2)
      • split(str) : 将字符串分割为字符串数组

  • 数组

    • 数组的创建方式:

      • var arr = [1,2,3 ];

      • var arr =new Array(5);

        arr[0]=1;

        arr[1]=3;

      • var arr = new Array(1,2,3);

    • 数组常用方法:

      • 属性 length:设置或返回数组中元素的数目
      • join() : 把数组的所有元素放入一个字符串,通过传入的分隔符进行分隔
      • sort() :对数组进行排序
      • push() : 向数组末尾添加一个或更多元素,返回新的长度

  • 程序实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="apple,banana,orange,watermelon,peach";
var arr=str.split(",");
console.log("======通过split分割为数组========")
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);
console.log("=======通过join变为string========");
var str1 = arr.join("-");
console.log(str1);
console.log("========通过push添加元素===============")
arr.push("strawburry");
console.log(arr)
</script>
</head>
<body>
</body>
</html>

  • 运算符

    • &&运算是与运算,只有所有都为true&&运算结果才是true
    • ||运算是或运算,只要其中有一个为true||运算结果就是true
    • !运算是非运算,它是一个单目运算符,把true变成falsefalse变成true
    • 比较运算符有:> >= < <= == 需要注意的是== 会自动转换数据类型再比较,很多时候,会得到非常诡异的结果,而===不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。
    • 浮点数的相等比较:要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值。
    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
    

  • 逻辑控制语句
    • if条件语句
    • switch多分支语句
    • for、while循环语句
    • for-in(其实相当于Java中的增强循环 for( : )in相当于:)

  • 中断循环
    • break;跳出循环
    • continue;跳出一次循环

  • 注释
    • 单行注释://
    • 多行注释:/*… */

  • 弹窗提示
    • alert(“提示信息”)
    • prompt(“提示信息”,“输入框的默认信息”)

  • 语法约定
    • 代码区分大小写
    • 变量,对象和函数的名称
      • JS的关键字小写
      • 内置对象大写字母开头
      • 对象的名称通常小写
      • 方法命名规则和Java相同
    • 分号

版权声明
本文为[DOGIOOH]所创,转载请带上原文链接,感谢
https://blog.csdn.net/yinyanyao1747/article/details/93758293

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple