1、JavaScript入门和语法类型

目录1、JavaScript入门1.1 打开Web中的控制台1.2 输入并运行JavaScript1.3 输入多行JavaScript代码1.4 严格模式2. 语法和类型2.1 基础2.2 注释2.3 变量声明方式2.4 变量命名规则2.5 初始化2.6 变量作用域2.7 变量提升2.8 全局变量2.9 常量2.10 数据结构和类型2.10.1 基本数据类型2.10.2 数据类型的转换2.10.3 数字和运算符2.10.4 字符串转换为数字2.10.5 字面量2.10.5.1 数组字面量2.10.5.2 布尔字面量2.10.5.3 数字字面量2.10.5.3.1 整数字面量2.10.5.3.2 浮点数字面量2.10.5.4 对象字面量2.10.5.4.1 增强的对象字面量2.10.5.5 RegExp字面量2.10.5.6 字符串字面量2.10.5.6.1 特殊字符2.10.5.6.2 转义字符参考待了解1、JavaScript入门1.1 打开Web中的控制台edge浏览器按下F12。控制台界面如下1.2 输入并运行JavaScript. 在控制台界面(如图)中输入console.log(eval(3 5))1.3 输入多行JavaScript代码代码如下(function(){use strict;/* 代码开始 */functiongreetMe(yourName){alert(你好${yourName});}greetMe(世界);/* 代码结束 */})();1.4 严格模式始终使用如下的代码(function(){use strict;/* 代码开始 *//* 代码结束 */})();2. 语法和类型2.1 基础JavaScript是区分大小写的并使用Unicode字符集。constFruhfoobar;因此上面的变量Fruh和fruh是两个不同的变量。在JavaScript中指令被称为语句并用分号分隔。如果一条语句独占一行的话分号是可以省略。但如果一行中有多条语句那么这些语句必须用分号进行分隔。建议在每条语句的末尾加上分号。从左往右扫描JavaScript脚本的源文本并将其转换为输入元素(token、控制字符、行终止符、注释和空白字符空白字符指的是空格、制表符和换行符等)序列。2.2 注释单行注释和多行注释如下// 单行注释/* 这是一个更长的 * 多行注释 */不能在注释中出现*/必须插入反斜杠进行转义*\/。此外还可以在JavaScript文件的开头见到像#!/usr/bin/env node这样的注释这是hashbang注释语法用于指定执行脚本的特定JavaScript引擎路径。2.3 变量声明方式关键字作用var声明一个变量(局部或全局变量)可选择将其初始化为一个值let声明一个块级作用域的局部变量可选择将其初始化为一个值const声明一个块级作用域的只读命名常量2.4 变量命名规则变量的名字叫标识符通常以字母、下划线或者美元符号开头后续的字符还可以是数字。此外还可以在标识符中使用大部分Unicode字母。在声明后使用变量。2.5 初始化在let x 42中let x称作声明 42称作初始化器。未声明访问变量会抛出ReferenceError初始化器会给变量赋值。在var和let声明中初始化器是可选的。如果声明变量时没有进行初始化变量会被赋值为undefined。const声明总是需要初始化器因为禁止在声明后进行任何类型的赋值以及隐式地将其初始化为undefined。2.6 变量作用域作用域描述全局作用域在脚本模式中运行的所有代码的默认作用域模块作用域在模块模式中运行的代码的作用域函数作用域由函数创建的作用域块级作用域用一对花括号创建的作用域在函数外部声明变量时该变量为全局变量在函数内声明变量时为局部变量。let和const声明被限制在声明所在的块语句中。if(Math.random()0.5){consty5;}console.log(y);用var创建的变量不是块级的而是块所在函数或全局作用域的。if(true){varx5;}console.log(x);2.7 变量提升用var声明的变量会被提升也就是该变量所在的作用域的任何地方引用该变量即使还没有到达该变量声明的地方。如果在声明该变量之前访问该变量其值总是undefined。console.log(xundefined);varx3;(function(){console.log(x);varx局部值;})();上面的例子可以被解释为varx;console.log(xundefined);x3;(function(){varx;console.log(x);x局部值;})();由于存在变量提升一个函数中所有的var语句应尽可能地放在接近函数顶部的地方。在变量声明之前引用块中的变量将总是抛出ReferenceError因为该变量处于从块开始到声明所在的“暂时性死区”中。console.log(x);constx3;与var声明不同函数声明是全部被提升的可以在该函数的作用域中的任何地方安全地调用函数。2.8 全局变量全局变量是全局对象的属性。在网页中全局对象是window可以用window.variable语法读取和设置全局变量。在所有的环境中globalThis变量也是全局变量可以用于读取和设置全局变量。可以通过制定window或frame的名字在当前window或frame访问另一个window或frame中声明的变量。如果在window中声明了一个叫phoneNumber的全局变量就可以在iframe中使用parent.phoneNumber引用它。2.9 常量可以用const关键字创建一个只读命名常量。常量标识符要求和变量标识符一致必须以字母、下划线或美元符号开头并可以包含字母、数字或下划线。constPI3.14;常量不可以通过赋值来改变其值或在脚本运行时被重新声明。必须为其初始化一个值。常量的作用域规则和let块级作用域变量一致。在同一作用域中不能使用与变量名或函数名相同的名字来声明常量。functionf(){}constf5;const仅阻止重新赋值而不阻止修改。被赋值为常量的对象的属性是不受保护所以下面的语句执行时不会产生错误。constMY_OBJECT{key:值};MY_OBJECT.key其他值;2.10 数据结构和类型2.10.1 基本数据类型关键字含义Booleantrue | falsenull一个表示空值的特殊关键字undefined一个未定义值的顶级属性Number整数或浮点数BigInt任意精度的整数String表示文本值的字符序列Symbol实例是唯一且不可变的数据类型Object2.10.2 数据类型的转换JS是一门动态类型语言在声明变量时可以不必指定该变量的数据类型在脚本执行期间会根据需要自动转换数据类型。letanswer42;answer不客气感谢所有的鱼;2.10.3 数字和运算符在使用运算符的表达式中涉及数字和字符串JS会把数字转换成字符串。x答案是 42;// 答案是 42y42 是答案;// 42 是答案“z377;// 377在使用其他运算符时JS不会把数字转换成字符串。37-7;// 3037*7;// 2592.10.4 字符串转换为数字parseInt只返回整数。最佳实践是带上进制参数。parseInt(101,2)// 5将字符串转换为数字的另一种方法是使用(一元加)运算符。1.11.11.11.11.11.12.22.10.5 字面量在JS中字面量可以表示值。这些字面量是脚本中按字面意思给出的固定的值而不是变量。2.10.5.1 数组字面量数组字面量是由一对方括号括起来的包含零个或多个表达式的列表其中每个表达式代表一个数组元素。该数组会以指定的值作为其元素进行初始化而其length被设定为指定参数的个数。constcoffees[French Roast,Colombian,Kona];coffees.length;每次字面量被求值的时候数组字面量都会创建一个新的数组对象。例如在全局作用域中用字面量定义的数组在脚本加载后被创建如果数组字面量位于函数内每次调用函数都会初始化一个新数组。在数组字面量中连续放置两个逗号数组会为未指定的元素留下一个空槽。constfish[Lion,,Angel];fish;第二项是“empty与实际的undefined不同。当使用数组遍历方法时空槽会被跳过。通过索引访问fish[1]仍会返回undefined。在元素列表的尾部添加了一个逗号它将会被忽略。constmyList[home,,school,];myList;在书写时显示地将缺失的元素声明为undefined或者至少插入一个注释以突出元素缺失。这样能提高代码的清晰度和维护性。const list [home, undefined, school, undefined]; list;2.10.5.2 布尔字面量布尔类型有两种字面量值true和false。不要将原始布尔值true和false与Boolean对象的真和假弄混。2.10.5.3 数字字面量JS数字字面量包含多种基数的整数字面量和以10为基数的浮点数字面量。数字字面量必须是无符号的。-123。4会被解释为一元操作符-应用于数字字面量123.4。2.10.5.3.1 整数字面量整数和BigInt字面量可以用十进制、十六进制、八进制和二进制表示。类型要求十进制整数由数字序列构成没有前缀0八进制整数以0或0O、0o开头只能包含0-7十六进制整数以0x或0X开头包含0-9和a-f或A-F(字符的大小写不影响数值)二进制整数以0b或0B开头只能包含0、1BigInt由整数字面量和n后缀组成。可以上面的类型但是0123n不允许0,117,123456789123456789n015,0001,0o7777777777777n0x1123,0x00111,0x123456789ABCDEFn0b11,0b0011,0b11101010101010101n2.10.5.3.2 浮点数字面量浮点数字面量由一个无符号的十进制整数、小数点、小数部分(另一个十进制数)和指数部分组成。指数部分以e或E开头后面跟着一个整数这个整数可以有正负号。浮点数字面量至少有一位数字而且必须带小数点或者e(E)。其语法是[digits].[digits][(E|e)[(|-)]digits]。3.1415926.1234567893.1E12.1e-232.10.5.4 对象字面量对象字面量是由一对花括号括起来的包含零个或者多个属性名和相关值的列表。constsalesToyota;functioncarTypes(name){returnnameHonda?name:对不起我们不售卖${name}。;}constcar{myCar:Saturn,getCar:carTypes(Honda),special:sales};// objectconsole.log(car.myCar);console.log(car.getCar);console.log(car.special);可以使用数字或字符串字面量作为属性的名字或者在另一个对象字面量内嵌套一个对象字面量。constcar{manyCars:{a:Saab,b:Jeep},7:Mazda};console.log(car.manyCars.b);console.log(car[7]);对象属性名字可以是任意字符串包括空串。如果对象属性名字不是合法的JavaScript标识符或数字它必须用引号包裹。属性不合法便不能用点访问属性值。constunusualPropertyNames{:空字符串,!:砰}console.log(unusualPropertyNames.);console.log(unusualPropertyNames.!);而是通过方括号表示法来访问。console.log(unusualPropertyNames[]);console.log(unusualPropertyNames[!]);2.10.5.4.1 增强的对象字面量对象字面量支持一组简写语法包括在创建时设置原型、foo: foo赋值的简写、定义方法、支持super调用以及使用表达式计算属性名。constobj{// __proto____proto__:theProtoObj,// handler: handler的简写handler,// 方法toString(){// Super调用returnd super.toString();},// 计算动态属性名[prop_(()42)()]:42,};2.10.5.5 RegExp字面量一个正则表达式字面量是字符被斜杠围成的表达式。constre/abc/;2.10.5.6 字符串字面量字符串字面量是由一对双引号或单引号括起来的零个或多个字符。字符串被限定在同种引号之间。foobar1234一行\n另一行Joyo 的猫可以在字符串字面量值上使用String对象的素有方法。JS会自动将字符串字面量转换为一个临时字符串对象调用该方法然后废弃那个临时字符串对象。console.log(John 的猫.length);模板字面量由一对反引号包围。在 JavaScript 中“\n” 是换行符。在 JavaScript 中模板字符串可以 跨越行但是由双引号和单引号 包裹的字符串不行。constnameLev,timetoday;你好${name}${time}过得怎么样带标签的模板是用于指定模板字面量并调用“标签”函数解析模板字面量的紧凑语法。constformatArg(arg){if(Array.isArray(arg)){returnarg.map((part)-${part}).join(\n);}if(arg.toStringObject.prototype.toString){returnJSON.stringify(arg)}returnarg;}constprint(segments,...args){letmessagesegments[0];segments.slice(1).forEach((segment,index){messageformatArg(args[index])segment;});console.log(message);};consttodos[学习 JavaScript,学习 Web API,构建网站,利润];constprogress{javascript:20,html:50,css:10};print我需要做:${todos}当前进度为${progress};/* print我需要做 ${todos} 当前进度为${progress} print([我需要做\n, 当前进度为, \n], [todos, progress]) message 我需要做\n segments.slice(1) [当前进度为, \n] forEach循环 第一次 segment 当前进度为 index 0 args[0] todos 我需要做\n (formatArg(todos: Array) 当前进度为) 我需要做\n \n.join([- 学习 JavaScript, - 学习 Web API, - 构建网站, - 利润]) 当前进度为 message 我需要做\n- 学习 JavaScript\n- 学习 Web API\n- 构建网站\n- 利润\n当前进度为 forEach循环 第二次 segment \n index 1 args[1] progress message (formatArg(progress: Object) segment) message {javascript: 20, html: 50, css: 10} \n message 我需要做\n- 学习 JavaScript\n- 学习 Web API\n- 构建网站\n- 利润\n当前进度为{javascript: 20, html: 50, css: 10}\n */2.10.5.6.1 特殊字符字符意思\0空字节\b退格符\f换页符\n换行符\r回车符\t制表符\v垂直制表符’撇号或单引号双引号\反斜杠字符\XXX由从0到377最多三位八进制数XXX表示的Latin-1字符\xXX由从00和FF的两位十六进制数字XX表示的Latin-1字符\uXXXX由四位十六进制数字XXX表示的Unicode字符\u{XXXXX}Unicode码位转义2.10.5.6.2 转义字符constquoteHe read \The Cremation of Sam McGee\ by R.W. Service.;console.log(quote);consthomec:\\temp;console.log(home);可以在换行之前加上反斜杠以转义换行。这样反斜杠和换行都不会出现在字符串的值中。conststrthis string \ is broken \ across multiple \ lines.;console.log(str);参考1、JavaScript入门2、语法和类型待了解1、严格模式2、立即调用函数表达式3、hashbang注释语法4、Array5、索引集合6、Boolean7、正则表达式8、String