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

最新推荐文章于 2022-04-27 22:12:37 发布

百里一兔

最新推荐文章于 2022-04-27 22:12:37 发布

阅读量404

点赞数 1

分类专栏： Web_javaScript 阶段复习文章标签： 20190920

本文链接：https://blog.csdn.net/lb569484787/article/details/101050808

版权

Web_javaScript 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

阶段复习

25 篇文章 0 订阅

订阅专栏

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.算数运算符
+ 、 - 、 * 、 ** 幂（ES2016）、 / 、 % 、 ++ 、 - -

2.赋值运算符
=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=、**=

3.比较运算符
比较运算符在逻辑语句中使用，以判定变量或值是否相等。
==、=== 值相等并且类型相等、!=、!== 值不相等或类型不相等、>、<、>=、<=

4.逻辑运算符
逻辑运算符用于判定变量或值之间的逻辑。
若给定 x = 6 且 y = 3，下表解释了逻辑运算符：

运算符	描述	例子
&&	与	(x < 10 && y > 1) 为 true
`\|\|`	或	(x == 5
!	非	!(x == y) 为 true

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. 布尔值
布尔值只有两个值：true 或 false。布尔值经常用在条件测试中。

（1）Boolean() 函数
确定表达式（或变量）是否为真。
Boolean(10 > 9) // 返回 true
或者甚至更简单：

(10 > 9)              // 也返回 true
10 > 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.propertyName person.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指的是全局对象。
●在函数中，严格模式下，this 是 undefined。
●在事件中，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.箭头函数
箭头函数允许使用简短的语法来编写函数表达式。

// ES5
var x = function(x, y) {
  return x * y;
}

 //ES6
const 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 函数来修改。
闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

百里一兔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript复习（上）——使用、输出、语法、运算符、数据类型和函数

JavaScript 是属于 HTML 和 Web 的编程语言。编程令计算机完成您需要它们做的工作。一、JS的使用1.JS位于<script>与 </script>标签之间。2.脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。3.脚本可以放置在外部文件中。如需使用外部脚本，请在 <script&...
复制链接

扫一扫