任务12.2 JavaScript语言基础

网页设计项目教程（HTML5+CSS3+JavaScript）模块12使用JavaScript脚本语言实现网页任务12.2JavaScript语言基础学习目标从变量的声明与赋值，到数据类型、运算符与表达式知识目标了解变量的命名规范；掌握var、let、const声明变量的方式；掌握数据类型分类与特点；掌握运算符与表达式的书写与使用。能力目标能够使用var、let、const声明并赋值变量；能够判断变量的数据类型；能够运用运算符完成计算，并在控制台输出结果。素养目标培养严谨的编码习惯；提升逻辑思维能力；养成规范书写的意识；体会程序调试的过程。任务描述JavaScript与其他程序语言一样，包含了变量、数据类型、运算符、表达式等基础知识JavaScript脚本语言与其他程序语言一样，包含了变量、数据类型、运算符、表达式等基础知识。作为一门新语言的学习者，需要学习如何声明变量、区分数据类型、使用运算符、编写表达式。变量是存储和提取信息的容器，是编写程序的基础；数据类型决定了变量能够保存什么样的数据，运算符与表达式则决定了如何对数据进行运算。学好这些基础知识，才能为后面的语句、函数、对象等内容打下坚实的基础。本任务目标：掌握变量的声明与赋值，认识JavaScript的数据类型，会用运算符与表达式完成计算。12.2.1变量的声明和赋值：命名规范变量是用于存储和提取信息的容器，命名JavaScript变量需要遵守以下规范字符组成变量名称可由字母、数字、下划线（_）或者美元符（$）构成。首字符不为数字变量名称的首个字符不可为数字，如1name不是合法的变量名。不可为关键字变量名称不可为关键字或保留字，如var、let、const等。大小写敏感变量名称区分大小写，name与Name是两个不同的变量。声明变量JavaScript使用var、let或者const作为标识符来声明变量，且无需指定变量的数据类型；变量的数据类型由所赋的值决定——这正是JavaScript作为弱类型语言的特点。12.2.1使用var声明变量使用var可一次声明一个或多个变量，也可在声明时赋初始值、后续多次赋值varname;varage,gender;varname="张三";varage=19,gender="男";name="李四";age=20;声明使用var可一次声明一个或多个变量，不同变量名之间由英文逗号隔开。赋值在声明变量时可赋初始值，并且可多次为变量赋值；但变量的取值仅与最后一次赋值有关。执行后各变量的最终取值name→"李四"age→20gender→"男"12.2.1使用let与const声明变量let的用法与var类似；const用于声明常量，声明时必须赋初始值使用let声明变量//声明变量letname;letage,gender;

//赋值变量name="张三";name="李四";let与var的用法类似，可一次声明一个或多个变量，也可在声明时赋初始值、后续多次赋值。使用const声明变量//声明时必须赋初始值constname="张三";constage=19,gender="男";const用于声明常量，声明时必须赋初始值，并且无法再次为变量赋值。提示：使用const声明的变量若再次赋值，代码将会报错，因此常量一经定义便不能再修改。var、let、const三种声明方式对比三种标识符的用法有同有异，可根据是否需要初始值、是否需要再次赋值来选择标识符是否需要初始值是否可再次赋值说明var不需要可以可一次声明一个或多个变量；可多次赋值，取值仅与最后一次赋值有关。let不需要可以用法与var类似，可一次声明一个或多个变量，也可多次赋值。const需要不可以用于声明常量；声明时必须赋初始值，之后无法再次为变量赋值。小结var与let用法类似，都可声明时赋初始值、后续多次赋值；const必须在声明时赋初始值，之后不可再赋值；无论使用哪种标识符，变量名都要遵守命名规范。常见错误constage=19;age=20;//报错使用const声明的变量不能被再次赋值。12.2.2数据类型分类JavaScript是弱类型语言，声明变量时无需指定数据类型，其数据类型根据赋值确定JavaScript数据类型基础数据类型引用数据类型Number型（数值）示例：20、3.1415926String型（字符）示例："张三"、'男'Boolean型（布尔）示例：true、falseUndefined型（未定义）示例：undefinedNull型（空值）示例：null对象示例：{name:"张三",age:20}数组示例：["苹果","香蕉","哈密瓜"]基础数据类型包含Number型、String型、Boolean型、Undefined型、Null型；引用数据类型一般包含对象、数组两种。12.2.2数据类型：Number型Number型即数值型，包括整型与浮点型，另外还支持Infinity、NaN两种特殊值varnum1=20;//整型varnum2=3.1415926;//浮点型varnum3=1/0;//Infinityvarnum4=0/0;//NaN整型与浮点型整型表示不包含小数点的整数，如20；浮点型表示包含整数部分和小数部分的数值，如3.1415926；Number型的数据可直接参与算术运算，运算结果为数值型。两种特殊取值Infinity：表示无穷大。当数字大于JavaScript所能表示的最大数值时，数据的取值为Infinity。NaN：表示非数值（NotaNumber）。当数字运算的返回值并非数值时，返回的结果为NaN。提示数值与字符串相加时，数值会被转换为字符串；使用typeof运算符可以查看变量的数据类型，如typeofnum1的结果为number。12.2.2数据类型：String型String型即字符型，单个字符或者字符串置于单引号或者双引号之间varname="张三";vargender='男';

varword01="'hello'";//字符串中含单引号varword02='"world"';//字符串中含双引号要点String型即字符型，单个字符或者字符串处于单引号或者双引号之间；当字符串本身包含单引号，则使用双引号包裹该字符串；当字符串本身包含双引号，则只用单引号包裹该字符串。使用说明字符串可以包含中文、数字、字母与符号等任意字符；引号必须成对出现，且成对的引号类型要一致，不能一单一双；输出字符串时，最外层的引号本身不会被输出；字符串可以通过加号（+）与数值连接，此时数值会被转换为字符串；字符串中可使用转义字符，如\n表示换行、\t表示制表符。12.2.2数据类型：Boolean、Undefined、Null型三种基础数据类型各有其取值与适用场合，其数据类型同样由所赋的值决定Boolean型即布尔型，取值为true或者false，表示逻辑真或逻辑假。varisLogin=true;varisShow=false;Undefined型即未定义型，取值为undefined。声明了变量而未赋初始值，则该变量的默认值为undefined。varname;console.log(name);//undefinedNull型即空值型，取值null，表示尚未存在的对象。varname=null;提示：JavaScript是弱类型语言，声明变量时无需指定数据类型，其数据类型根据赋值确定；因此同一个变量先后可以保存不同类型的值，这一点与Java、C等强类型语言不同。12.2.2引用数据类型：对象对象是多个属性的集合，是常用的引用型数据类型，可用构造函数、字面量两种方式创建构造函数方式在new操作符后紧跟构造函数，创建对象后再为对象添加属性。varstudent=newObject();="张三";student.age=20;字面量方式在一对花括号中插入多条属性，属性之间通过英文逗号隔开。varstudent={name:"张三",age:20};要点对象是多个属性的集合，是常用的引用型数据类型；JavaScript提供了构造函数、字面量两种创建对象的方式；属性名与属性值之间用英文冒号分隔，多条属性之间用英文逗号分隔，通过点语法可以获取属性的值。12.2.2引用数据类型：数组数组是多条数据的集合，每个数据元素的数据类型没有任何限制，可以是字符串、数字或对象varfruits=["苹果","香蕉","哈密瓜","西瓜"];varscores=[78,98,86,90];varstudents=[{name:"张三",age:20},{name:"李四",age:19}];索引号数组中的每个元素都具有一个索引号；第一个元素的索引号为0，第二个元素的索引号为1，以此类推；最后一个元素的索引号为「数组元素的总个数−1」。varscores=[78,98,86,90];varnum=scores[2];console.log(num);//86取值通过「数组名[索引号]」可以获取数组中的某个元素，上例中scores[2]取出的元素为86。12.2.3表达式表达式是变量、常量、布尔及运算符的集合，其计算结果通常赋给变量或作为函数的参数表达式是什么表达式是变量、常量、布尔及运算符的集合；表达式的计算结果通常会通过赋值语句赋给一个变量，或者直接作为函数的参数。算术表达式字符串表达式赋值表达式布尔表达式说明在定义完变量后，可以对其进行赋值、更新、计算等一系列操作，这一过程通常由一个表达式来完成；表达式中的运算符决定了运算的先后顺序。varpi=3.14;vard=2*10;vars=pi*d*d;alert("这个圆的面积为："+s);运行结果pi→3.14d→2*10=20//算术表达式s→3.14*20*20=1256alert→"这个圆的面积为：1256"赋值表达式"vars=..."把计算结果赋给变量s，再作为alert函数的参数输出。12.2.4运算符的分类JavaScript中的运算符按照功能分类，主要可分为算术、赋值、逻辑、关系四种运算符算术运算符+-*/%++--用于实现通用的数学计算，如加、减、乘、除、取余以及自加、自减。赋值运算符=+=-=*=/=%=用于给一个变量赋值，并可与其他运算符组合，先计算再赋值。逻辑运算符&&||!用于两个逻辑型数据之间的运算，返回值为布尔型。关系运算符=====!=><>=<=用于比较两个操作数的大小，比较结果为布尔值。运算符与表达式运算符用于参与数据的运算，常见的写法是「变量运算符变量」，例如z=4+2；运算的结果通常赋值给一个变量，或直接作为函数的参数，因此运算符是构成表达式的基本要素。算术运算符算数运算符是最简单、最常用的运算符，可实现通用的数学计算，如表12-1所示运算符表达式说明示例+x+y返回x加y的值z=4+2，z为6-x-y返回x减y的值z=4-2，z为2*x*y返回x乘y的值z=4*2，z为8/x/y返回x除y的值z=4/2，z为2%x%y返回x除y的余z=4%2，z为0++x++、++x返回值递增1、递增并返回数值x=1，z=x++，x为2、z为1x=1，z=++x，x为2、z为2--x--、--x返回值递减1、递减并返回数值x=1，z=x--，x为0、z为1x=1，z=--x，x为0、z为0表12-1算术运算符自加与自减：运算符前后位置的区别自加（++）、自减（--）放置在操作数的前面和后面，所得的运算结果不同自加、自减在操作数前面varx=10,y=8;varm=++x;//先执行x=x+1,后执行m=xvarn=--y;//先执行y=y-1,后执行n=yconsole.log(x,m);//11,11console.log(y,n);//7,7自加、自减在操作数后面varx=10,y=8;varm=x++;//先执行m=x,后执行x=x+1varn=y--;//先执行n=y,后执行y=y-1console.log(x,m);//11,10console.log(y,n);//7,8执行顺序前缀++x/--yx=x+1m=x先自加（减）1，再把最新值赋给变量后缀x++/y--m=xx=x+1先把当前值赋给变量，再自加（减）1赋值运算符赋值运算符（=）用于给变量赋值，有些赋值运算符还可与其他运算符组合使用运算符表达式说明示例=x=y将y的值赋值给xx=1，y=2，x=y，x的值为2+=x+=y将x加y的值赋值给xx=1，y=2，x+=y，x的值为3-=x-=y将x减y的值赋值给xx=1，y=2，x-=y，x的值为-1*=x*=y将x乘y的值赋值给xx=1，y=2，x*=y，x的值为2/=x/=y将x除y的值赋值给xx=1，y=2，x/=y，x的值为0.5%=x%=y将x除y的余值赋值给xx=1，y=2，x%=y，x的值为1表12-2赋值运算符提示：赋值运算符可与其他运算符组合，对变量中包含的值进行计算后，再赋值给运算符左边的变量。逻辑运算符逻辑运算符主要包含&&、||、!，用于两个逻辑型数据之间的运算，返回值为布尔型运算符表达式说明示例&&表达式1&&表达式2与运算。若两边表达式的值均为true，则返回值为true；任意一个表达式的值为false，则返回值为false4>1&&3>2，返回值为true1>4&&3>2，返回值为false||表达式1||表达式2或运算。若两边表达式的值均为false，则返回值为false；任意一个表达式的值为true，则返回值为true4<1||3<2，返回值为false4<1||3>2，返回值为true!!表达式求反运算。若表达式的值为true，则返回值为false；若表达式的值为false，则返回值为true!(4>1)，返回值为false!(4<1)，返回值为true表12-3逻辑运算符要点&&一假则假||一真则真!取反关系运算符（一）：相等与不等关系运算符用于比较两个操作数，比较结果为布尔值；==只比较值，===同时比较值与类型运算符表达式说明示例==x==y相等。若x与y的值相等，则返回值为true，反之为false；该运算不涉及数据类型的判断"7"==7，返回值为true"7"==8，返回值为false===x===y全等。若x与y的数据类型一致，且值相等，则返回true；该运算对值和数据类型同时判断"7"===7，返回值为false"7"==="7"，返回值为true!=x!=y不等。若x与y的值不相等，则返回true，反之为false；该运算不涉及数据类型的判断"7"!=7，返回值为false"7"!=8，返回值为true表12-4关系运算符（相等与不等）注意「==」只比较值是否相等，「===」在比较值的同时还要比较数据类型是否一致；因此"7"==7返回true，而"7"===7返回false，实际开发中推荐使用「===」。关系运算符（二）：大小比较大于、小于、大于或等于、小于或等于等运算符用于比较两个操作数的大小运算符表达式说明示例>x>y大于。若x大于y，则返回true，反之为false7>8，返回值为false<x<y小于。若x小于y，则返回true，反之为false7<8，返回值为true>=x>=y大于或等于。若x大于或等于y，则返回true，反之为false7>=8，返回值为false<=x<=y小于或等于。若x小于或等于y，则返回true，反之为false7<=8，返回值为true表12-4关系运算符（大小比较）要点