300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > JavaScript复习(上)——使用 输出 语法 运算符 数据类型和函数

JavaScript复习(上)——使用 输出 语法 运算符 数据类型和函数

时间:2020-03-02 20:54:45

相关推荐

JavaScript复习(上)——使用 输出 语法 运算符 数据类型和函数

JavaScript 是属于 HTML 和 Web 的编程语言。

编程令计算机完成您需要它们做的工作。

一、JS的使用

1.JS位于<script>与 </script>标签之间。

2.脚本可被放置与 HTML 页面的<body><head>部分中,或兼而有之。

3.脚本可以放置在外部文件中。

如需使用外部脚本,请在<script>标签的 src (source) 属性中设置脚本的URL。

<script src="myScript.js"></script>

二、JS的输出

1.使用innerHTML写入 HTML 元素

由于id属性定义 HTML 元素,可以使用document.getElementById(id)方法,更改 HTML 元素的innerHTML属性

document.getElementById("id").innerHTML = 1;

2.使用document.write()写入 HTML 输出

在 HTML 文档完全加载后使用document.write()将删除所有已有的 HTML。

3.使用window.alert()写入警告框

4.使用console.log()写入浏览器控制台

三、JS语句

1.JavaScript 语句由以下构成:值、运算符、表达式、关键词和注释。

2.分号;

分号分隔 JavaScript 语句。

请在每条可执行的语句之后添加分号。

如果有分号分隔,允许在同一行写多条语句。

3.JavaScript 空白字符

JavaScript 会忽略多个空格。

4.JavaScript 代码块

JavaScript 语句可以用花括号({…})组合在代码块中。

代码块的作用是定义一同执行的语句。

5.JS关键词

break、continue 、do ... while 、for、function 、if ... else、return 、var

debugge: 停止执行 JavaScript,并调用调试函数(如果可用)。

switch:标记需被执行的语句块,根据不同的情况。

try ... catch:对语句块实现错误处理。

四、JavaScript 语法

JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构。

JavaScript 语句定义两种类型的值:混合值和变量值。

混合值被称为字面量(literal)。变量值被称为变量

1.JS字面量

(1)写数值有无小数点均可。

(2)字符串是文本,由双引号或单引号包围。

2.JS变量

在编程语言中,变量用于存储数据值。

JavaScript 使用var关键词来声明变量。

赋值运算符=号用于为变量赋值。

如果再次声明某个 JavaScript 变量,将不会丢它的值。

3.JS运算符

JavaScript 使用算数运算符(+ - * /)来计算值.

4.JS 注释

并非所有 JavaScript 语句都被“执行”。

双斜杠///**/之间的代码被视为注释。

5.JavaScript 标识符

标识符是名称。

在 JavaScript 中,标识符用于命名变量(以及关键词、函数和标签)。

(1)在 JavaScript 中,字符必须是字母、下划线(-)或美元符号($)

(2)连串的字符可以是字母、数字、下划线美元符号。

(3)名称对大小写敏感(y 和 Y 是不同的变量)

(4)保留字(比如 JavaScript 的关键词)无法用作变量名称

6.JS 对大小写敏感

所有 JavaScript 标识符对大小写敏感。

7.JS 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

8.Value = undefined

在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。

不带有值的变量,它的值将是undefined

五、JS数学和运算符

运算符不是变量,没有数据类型。

1.算数运算符

+ 、 - 、 * 、 ** 幂(ES)、 / 、 % 、 ++ 、 - -

2.赋值运算符

=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=、**=

3.比较运算符

比较运算符在逻辑语句中使用,以判定变量或值是否相等。

==、=== 值相等并且类型相等、!=、!== 值不相等或类型不相等、>、<、>=、<=

4.逻辑运算符

逻辑运算符用于判定变量或值之间的逻辑。

若给定 x = 6 且 y = 3,下表解释了逻辑运算符:

5.条件(三元)运算符

variablename = (condition) ? value1:value2

!!!比较不同的类型!!!

比较不同类型的数据也许会出现不可预料的结果。

如果将字符串与数字进行比较,那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。

为了确保正确的结果,在比较值前应该把变量转换为合适的类型:

age = Number(age);if (isNaN(age)) {voteable = "输入错误";} else {voteable = (age < 18) ? "年轻" : "成熟";}

6.JS数学与JS随机

JS Math对象可以对数字执行数学任务。

有很多的方法。

点击此处,查看JS数学与JS随机

7.typeof 运算符

返回变量或表达式的类型。

点击此处,查看JS类型转换

六、JS数据类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型。

JavaScript 中有五种可包含值的数据类型:

●字符串(string)

●数字(number)

●布尔(boolean)

●对象(object)

●函数(function)(见本章七)

有三种对象类型:

●对象(Object)

●日期(Date)(日期将在JS复习(中)复习)

●数组(Array)

同时有两种不能包含值的数据类型:

●null

●undefined

1.字符串值

字符串(或文本字符串)是一串字符(比如 “Bill Gates”)。

字符串被引号包围,可使用单引号或双引号,用于存储和操作文本。

点击此处,查看JS字符串

2. 数值

只有一种数值类型。写数值时用不用小数点均可,可以使用科学计数法。

JavaScript 数值始终是 64 位的双精度浮点数。

用 64 位存储数值,其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号。

点击此处,查看JS数值

3. 布尔值

布尔值只有两个值:truefalse。布尔值经常用在条件测试中。

(1)Boolean() 函数

确定表达式(或变量)是否为真。

Boolean(10 > 9) // 返回 true

或者甚至更简单:

(10 > 9) // 也返回 true10 > 9// 也返回 true

(2)所有具有“真实”值的即为 True,所有不具有“真实”值的即为 False

true例子:

100、3.14、-15、“Hello”、“false”(字符串)、7 + 1 + 3.14、5 < 6

false例子:

0、-0、""" "(都是空值)、undefined、null、false、NaN、对象==对象

(3)布尔可以是对象

通常 JavaScript 布尔是由字面量创建的原始值:

var x = false // typeof x 返回 boolean

但是布尔也可以通过关键词 new 作为对象来定义:(不建议使用)

var y = new Boolean(false) // typeof y 返回 object

比较x和y:

当使用==运算符时,相等的布尔是相等的。

当使用===运算符时,相等的布尔是不相等的,因为 === 运算符需要在类型和值两方面同时相等。

比较两个 JavaScript 对象将始终返回false

4.数组

数组用方括号书写。[]

数组的项目由逗号分隔。

数组的类型是object

数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推。

例如:

var cars = ["Porsche", "Volvo", "BMW"];

点击此处,查看JS数组

5.对象

(1)JavaScript 对象用花括号来书写。

JavaScript 对象是被命名值的容器。

对象属性是名称:值(name:value)对,由逗号分隔。

单一值:var car = "porsche";

多个值:var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

(2)对象也可以有方法

方法是在对象上执行的动作

方法以函数定义被存储在属性中。

方法是作为属性来存储的函数。

var person = {firstName: "Bill",lastName : "Gates",id : 678,fullName : function() {return this.firstName + " " + this.lastName;}};

(3)访问对象属性和方法

访问属性:

1° objectName.propertyNameperson.lastName;

2° objectName[“propertyName”]person["lastName"];

访问方法:

objectName.methodName()name = person.fullName();

不使用 () 访问 fullName 方法,则将返回函数定义

(4)不要把字符串、数值和布尔值声明为对象

他们会增加代码的复杂性并降低执行速度。

而且对象无法进行比较。

点击此处,查看JS对象

6.Undefined

在 JavaScript 中,没有值的变量,其值是 undefined。

typeof也返回undefined

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

7.空值

空值与 undefined 不是一回事。

空的字符串变量既有值也有类型。

var car = "";// 值是 "",类型是 "string"

8.Null

在 JavaScript 中,null 是 “nothing”。它被看做不存在的事物。

null 的数据类型是对象。

可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

可以通过设置值为 null 清空对象。

七、JS函数

JavaScript 函数是通过function关键词定义的。

您可以使用函数声明函数表达式

1.函数调用

函数中的代码将在其他代码调用该函数时执行:

●当事件发生时(当用户点击按钮时)

●当 JavaScript 代码调用时

●自动的(自调用)

(1)以函数形式调用函数

function myFunction(a, b) {return a * b;}myFunction(10, 2); // 将返回 20//= window.myFunction(10, 2);

(2)this 关键词

this关键词指的是它所属的对象。

this就是函数运行时所在的环境对象。

它拥有不同的值,具体取决于它的使用位置:

●在方法中,this指的是所有者对象。

●单独的情况下,this指的是全局对象。

●在函数中,this指的是全局对象。

●在函数中,严格模式下,thisundefined

●在事件中,this指的是接收事件的元素。

●像call()apply()这样的方法可以将this引用到任何对象。

< 我觉得有个包含的概念,this指向当前函数的父级,如果是window就是最高父级。>

推荐查看阮一峰大神的<Javascript 的 this 用法>

也可以查看W3C的this关键字

(3)全局对象

当不带拥有者对象调用对象时,this 的值成为全局对象。

在 web 浏览器中,全局对象就是浏览器对象。

var x = myFunction(); // x 将成为 window 对象function myFunction() {return this;}

(4)作为方法来调用函数

在 JavaScript 中,您可以把函数定义为对象方法。

var myObject = {firstName:"Bill",lastName: "Gates",fullName: function () {return this.firstName + " " + this.lastName;}}myObject.fullName(); // 将返回 "Bill Gates"

我认为,这里的this在fullName函数里,而fullName的父级是myObject,this就指向myObject。

(5)通过函数构造器来调用函数

如果函数调用的前面是new关键字,那么这是一个构造函数调用。

构造器调用会创建新对象。新对象会从其构造器继承属性和方法。

构造器内的this关键词没有值。

this的值会成为调用函数时创建的新对象。

// 这是函数构造器:function myFunction(arg1, arg2) {this.firstName = arg1;this.lastName = arg2;}// 创建了一个新对象:var x = new myFunction("Bill", "Gates");x.firstName; // 会返回 "Bill"

2.局部变量

在 JavaScript 函数中声明的变量,会成为函数的局部变量。

局部变量只能在函数内访问。

3.函数声明

声明函数:

function functionName(parameters) {要执行的代码}

被声明的函数不会直接执行,是在被调用时执行。

由于函数声明不是可执行的语句,不以分号结尾

4.函数提升

用函数声明的方法构造的函数,可以在声明之前被调用。

myFunction(5);function myFunction(y) {return y * y;}

使用表达式定义的函数不会被提升。

5.函数表达式

JavaScript 函数也可以使用表达式来定义。

函数表达式可以在变量中存储:

var x = function (a, b) {return a * b};

在变量中保存函数表达式之后,此变量可用作函数。

同时,它也是一个匿名函数(没有名称的函数)。

存放在变量中的函数不需要函数名。他们总是使用变量名调用。

上面的函数使用分号结尾,因为它是可执行语句的一部分。

6.Function() 构造器

函数也可以通过名为Function()的内建 JavaScript 函数构造器来定义。

var myFunction = new Function("a", "b", "return a * b");

大多数情况下,可以避免在 JavaScript 中使用new关键词。

var myFunction = function (a, b) {return a * b};

俩个例子是一样的。

7.自调用函数

函数表达式可以作为“自调用”。

在不进行调用的情况下,自调用表达式是自动被调用(开始)的。

如果表达式后面跟着(),函数表达式会自动执行。

●函数声明不能进行自调用,但是可以在函数周围添加括号,以指示它是一个函数表达式,从而变成自调用函数。

(function () { //实际上是一个匿名的自调用函数。var x = "Hello!!";//我会调用我自己})();

8.函数是对象

JavaScript 中的typeof运算符会为函数返回 “function”。

但是最好是把 JavaScript 函数描述为对象。

JavaScript 函数都有属性方法

(1)arguments.length会返回函数被调用时收到的参数数目。

(2)toString()方法以字符串返回函数。

定义为对象属性的函数,被称为对象的方法。

为创建新对象而设计的函数,被称为对象构造函数(对象构造器)。

9.箭头函数

箭头函数允许使用简短的语法来编写函数表达式。

// ES5var x = function(x, y) {return x * y;}//ES6const x = (x, y) => { return x * y }; //最好保留花括号和return

箭头函数没有自己的 this。它们不适合定义对象方法。

箭头函数未被提升。它们必须在使用前进行定义。

使用const比使用var更安全,因为函数表达式始终是常量值。

10.函数参数

函数参数(parameter)指的是在函数定义中列出的名称,指的是传递到函数或由函数接收到的真实值。不需要定义类型。

(1)参数默认

如果调用参数时省略了参数(少于被声明的数量),则丢失的值被设置为:undefined

有时这是可以接受的,但是有时最好给参数指定默认值。

如果函数调用的参数太多(超过声明),则可以使用 arguments 对象来达到这些参数。

(2)arguments 对象

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

(3)参数通过值传递,对象是由引用传递的

参数的改变在函数之外是不可见的。对象属性的改变在函数之外是可见的。

如果函数改变了参数的值,它不会改变参数的原始值。如果函数改变了对象属性,它也改变了原始值。

11.JS函数Call()

call()方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过call(),可以使用属于另一个对象的方法。

(1)无参数

var person = {fullName: function() {return this.firstName + " " + this.lastName;}}var person1 = {firstName:"Bill",lastName: "Gates",}var person2 = {firstName:"Steve",lastName: "Jobs",}person.fullName.call(person1); // 将返回 "Bill Gates"

(2)有参数

var person = {fullName: function(city, country) {return this.firstName + " " + this.lastName + "," + city + "," + country;}}var person1 = {firstName:"Bill",lastName: "Gates"}person.fullName.call(person1, "Seattle", "USA");

12.JS函数Apply()

apply()方法与call()方法非常相似。

不同之处是:

call()方法分别接受参数。

apply()方法接受数组形式的参数。

如果要使用数组而不是参数列表,则apply()方法非常方便。

拿上面的例子对比:

var person = {fullName: function(city, country) {return this.firstName + " " + this.lastName + "," + city + "," + country;}}var person1 = {firstName:"Bill",lastName: "Gates"}person.fullName.call(person1,[ "Seattle", "USA"]);

在数组上模拟 max 方法

Math.max() 方法找到(数字列表中的)最大数字。

由于 JavaScript 数组没有 max() 方法,因此可以应用 Math.max() 方法。

Math.max.apply(null, [1,2,3]); // 也会返回 3

第一个参数(null)无关紧要。换为其他结果相同。

13.JS闭包

推荐查看阮一峰大神的<学习Javascript 闭包>

不通过关键词var创建的变量总是全局的,即使它们在函数中创建。

全局变量能够被页面中(以及窗口中)的所有脚本使用和修改。

局部变量只能用于其被定义的函数内部。对于其他函数和脚本代码来说它是不可见的。

拥有相同名称的全局变量和局部变量是不同的变量。修改一个,不会改变其他。

var add = (function () {var counter = 0;return function () {return counter += 1;}})();add();add();add();// 计数器目前是 3

点击此处,查看例子

注意:变量add的赋值是自调用函数的返回值。

自调用函数只运行一次。它设置计数器为零(0),并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护,并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数,即使在父函数关闭之后。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。