Single built-in object in 'JavaScript Breakthrough'-JS Tutorial-php.cn

ECMA-262 defines built-in objects as "objects provided by JavaScript implementations that do not depend on the host environment. These objects already exist before the JavaScript program is executed." What this means is that developers do not have to explicitly instantiate built-in objects because they are already instantiated. We have already introduced most of the built-in objects such as Object, Array and String. ECMA-262 also defines two singleton built-in objects: Global and Math.

Global Object

Global object can be said to be the most special object in JavaScript, because no matter which angle you look at it, this object does not exist. The Global object is defined in a sense as the ultimate "catch-all object". In other words, properties and methods that do not belong to any other object are ultimately its properties and methods. All properties and functions defined in the global scope are properties of the Global object. The functions introduced earlier in this book, such as isNaN(), isFinite(), parseInt(), and parseFloat(), are actually all methods of the Global object. In addition to this, the Global object also contains some other methods.

URI encoding method

The encodeURI() and encodeURIComponent() methods of the Global object can encode URIs (Uniform Resource Identifiers, Universal Resource Identifiers) for sending to the browser. Certain characters, such as spaces, cannot be included in a valid URI. These two URI encoding methods can encode the URI. They replace all invalid characters with special UTF-8 encoding so that the browser can accept and understand it.

Among them, encodeURI() is mainly used for the entire URI, while encodeURIComponent() is mainly used to encode a certain segment in the URI. The main difference between them is that encodeURI() does not encode special characters that are themselves URIs, such as colons, forward slashes, question marks, and hash marks; whereas encodeURIComponent() encodes any non-standard characters it finds. Consider the following example.

var uri = "http://shijiajie.com/illegal value.htm#start"; 
 
console.log(encodeURI(uri)); 
// "http://shijiajie.com/illegal%20value.htm#start" 
 
console.log(encodeURIComponent(uri)); 
// "http%3A%2F%2Fshijiajie.com%2Fillegal%20value.htm%23start"

Copy after login

The result of encoding using encodeURI() is that all characters except spaces are intact, and only spaces are replaced with %20. The encodeURIComponent() method replaces all non-alphanumeric characters with the corresponding encoding. This is why encodeURI() can be used on an entire URI, but encodeURIComponent() can only be used on strings appended to an existing URI.

In general, we use the encodeURIComponent() method more often than encodeURI() because in practice it is more common to encode query string parameters rather than the underlying URI.

The two methods corresponding to the encodeURI() and encodeURIComponent() methods are decodeURI() and decodeURIComponent() respectively. Among them, decodeURI() can only decode characters replaced with encodeURI(). For example, it replaces %20 with a space, but does nothing with %23 because %23 represents the pound sign #, which is not replaced using encodeURI(). Likewise, decodeURIComponent() is able to decode all characters encoded using encodeURIComponent(), i.e. it can decode the encoding of any special character. Consider the following example:

var uri = "http%3A%2F%2Fshijiajie.com%2Fillegal%20value.htm%23start"; 
 
console.log(decodeURI(uri)); 
// http%3A%2F%2Fshijiajie.com%2Fillegal value.htm%23start 
 
console.log(decodeURIComponent(uri)); 
// http://shijiajie.com/illegal value.htm#start

Copy after login

Here, the variable uri contains a string encoded by encodeURIComponent(). In the output of the first call to decodeURI(), only %20 is replaced with spaces. In the output result of the second call to decodeURIComponent(), the encoding of all special characters is replaced with the original characters, and an unescaped string is obtained (but this string is not a valid URI) .

eval() method The

eval() method is like a complete JavaScript parser, it only accepts one parameter, the JavaScript string to be executed. Look at the example below:

eval("console.log(&#39;hi&#39;)");

Copy after login

This line of code is equivalent to the following line of code:

console.log("hi");

Copy after login

When the parser finds that the eval() method is called in the code, it treats the passed parameters as actual JavaScript statements To parse, and then insert the execution results into the original position. Code executed via eval() is considered part of the execution environment containing the call, so the code being executed has the same scope chain as that execution environment. This means that code executed via eval() can reference variables defined in the containing environment, for example:

var msg = "hello world"; eval("console.log(msg)"); // "hello world"

It can be seen that the variable msg is defined outside the environment where eval() is called, but the console.log() called there can still display "hello world". This is because the second line of code above is eventually replaced with a real line of code. Similarly, we can also define a function in the eval() call and then reference the function in the external code of the call:

eval("function sayHi() { console.log('hi'); }" ); sayHi(); // "hi"

Obviously, the function sayHi() is defined inside eval(). But since the call to eval() is eventually replaced by the actual code that defines the function, sayHi() can be called on the next line. The same goes for variables:

eval("var msg = &#39;hello world&#39;;"); 
console.log(msg); // "hello world"

Copy after login

在 eval() 中创建的任何变量或函数都不会被提升，因为在解析代码的时候，它们被包含在一个字符串中;它们只在 eval() 执行的时候创建。

严格模式下，在外部访问不到 eval() 中创建的任何变量或函数，因此前面两个例子都会导致错误。同样，在严格模式下，为 eval赋值也会导致错误：

"use strict"; eval =
"hi"; // causes error

Copy after login

能够解释代码字符串的能力非常强大，但也非常危险。因此在使用 eval() 时必须极为谨慎，特别是在用它执行用户输入数据的情况下。否则，可能会有恶意用户输入威胁你的站点或应用程序安全的代码(即所谓的代码注入)。

Global 对象的属性

Global 对象还包含一些属性，其中一部分属性已经在本书前面介绍过了。例如，特殊的值 undefined、NaN 以及 Infinity 都是Global 对象的属性。此外，所有原生引用类型的构造函数，像 Object 和 Function，也都是 Global 对象的属性。下表列出了Global 对象的所有属性。

Single built-in object in JavaScript Breakthrough

ECMAScript 5 明确禁止给 undefined、NaN 和 Infinity 赋值，这样做即使在非严格模式下也会导致错误。

window 对象

JavaScript 虽然没有指出如何直接访问 Global 对象，但 Web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为了 window 对象的属性。来看下面的例子。

var color = "red"; 
 
function sayColor(){ 
    console.log(window.color); 
} 
 
window.sayColor();  // "red"

Copy after login

JavaScript 中的 window 对象除了扮演规定的 Global 对象的角色外，还承担了很多别的任务。

Math 对象

JavaScript 还为保存数学公式和信息提供了一个公共位置，即 Math 对象。与我们在 JavaScript 直接编写的计算功能相比，Math对象提供的计算功能执行起来要快得多。Math 对象中还提供了辅助完成这些计算的属性和方法。

Math 对象的属性

Math 对象包含的属性大都是数学计算中可能会用到的一些特殊值。下表列出了这些属性。

属性说明

Single built-in object in JavaScript Breakthrough

min() 和 max() 方法

Math 对象还包含许多方法，用于辅助完成简单和复杂的数学计算。其中，min() 和 max() 方法用于确定一组数值中的最小值和最大值。这两个方法都可以接收任意多个数值参数，如下面的例子所示。

var max = Math.max(3, 54, 32, 16); 
 
console.log(max); // 54 
 
var min = Math.min(3, 54, 32, 16); 
 
console.log(min); // 3

Copy after login

要找到数组中的最大或最小值，可以像下面这样使用 apply() 方法。

var values = [1, 2, 3, 4, 5, 6, 7, 8]; 
 
var max = Math.max.apply(Math, values); 
 
console.log(max); // 8

Copy after login

这个技巧的关键是把 Math 对象作为 apply() 的第一个参数，从而正确地设置 this 值。然后，可以将任何数组作为第二个参数。

舍入方法

下面来介绍将小数值舍入为整数的几个方法：Math.ceil()、Math.floor() 和 Math.round()。这三个方法分别遵循下列舍入规则：

Math.ceil() 执行向上舍入，即它总是将数值向上舍入为最接近的整数;

Math.floor() 执行向下舍入，即它总是将数值向下舍入为最接近的整数;

Math.round() 执行标准舍入，即它总是将数值四舍五入为最接近的整数。

下面是使用这些方法的示例：

console.log(Math.ceil(25.9));     // 26 
console.log(Math.ceil(25.5));     // 26 
console.log(Math.ceil(25.1));     // 26 
 
console.log(Math.round(25.9));    // 26 
console.log(Math.round(25.5));    // 26 
console.log(Math.round(25.1));    // 25 
 
console.log(Math.floor(25.9));    // 25 
console.log(Math.floor(25.5));    // 25 
console.log(Math.floor(25.1));    // 25

Copy after login

random() 方法

Math.random() 方法返回介于0和1之间一个随机数，不包括0和1。对于某些站点来说，这个方法非常实用，因为可以利用它来随机显示一些名人名言和新闻事件。套用下面的公式，就可以利用 Math.random() 从某个整数范围内随机选择一个值。

值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)

Copy after login

公式中用到了 Math.floor() 方法，这是因为 Math.random() 总返回一个小数值。而用这个小数值乘以一个整数，然后再加上一个整数，最终结果仍然还是一个小数。举例来说，如果你想选择一个1到10之间的数值，可以像下面这样编写代码：

var num = Math.floor(Math.random() * 10 + 1);

Copy after login

总共有10个可能的值(1到10)，而第一个可能的值是1。而如果想要选择一个介于2到10之间的值，就应该将上面的代码改成这样：

var num = Math.floor(Math.random() * 9 + 2);

Copy after login

从2数到10要数9个数，因此可能值的总数就是9，而第一个可能的值就是2。多数情况下，其实都可以通过一个函数来计算可能值的总数和第一个可能的值，例如：

function selectFrom(lowerValue, upperValue) { 
    var choices = upperValue - lowerValue + 1; 
    return Math.floor(Math.random() * choices + lowerValue); 
} 
 
var num = selectFrom(2, 10); 
console.log(num);   // 介于2和10之间（包括2和10）的一个数值

Copy after login

函数 selectFrom() 接受两个参数：应该返回的最小值和最大值。而用最大值减最小值再加1得到了可能值的总数，然后它又把这些数值套用到了前面的公式中。这样，通过调用 selectFrom(2,10) 就可以得到一个介于2和10之间(包括2和10)的数值了。利用这个函数，可以方便地从数组中随机取出一项，例如：

var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; 
 
var color = colors[selectFrom(0, colors.length-1)]; 
 
console.log(color); // 可能是数组中包含的任何一个字符串

Copy after login

其他方法

Math 对象中还包含其他一些与完成各种简单或复杂计算有关的方法，但详细讨论其中每一个方法的细节及适用情形超出了本书的范围。下面我们就给出一个表格，其中列出了这些没有介绍到的 Math 对象的方法。

Single built-in object in JavaScript Breakthrough

虽然 ECMA-262 规定了这些方法，但不同实现可能会对这些方法采用不同的算法。毕竟，计算某个值的正弦、余弦和正切的方式多种多样。也正因为如此，这些方法在不同的实现中可能会有不同的精度。

关卡

// 如何高效产生m个n范围内的不重复随机数(m<=n) 
var getRandomNumber = function(n, m){ 
  // 待实现方法体 
} 
console.log(getRandomNumber(20, 3)); // 8,4,19

Copy after login