[TOC]

本部分主要是针对于JavaScript中常用的数据结构类型进行分析说明。

变量与常量

在JavaScript中，基本的变量声明可以用var方式。JavaScript允许省略var，直接对未声明的变量赋值。也就是说，VAR a = 1 与 a = 1，这两条语句的效果相同。但是由于这样的做法很容易不知不觉地创建全局变量（尤其是在函数内部），所以建议总是使用var命令声明变量。

在ES6中，对于变量声明的方式进行了扩展。引入了let方式，let即是定义块级别的变量，不会以闭包方式扩展到块外面。另一种引入了可以用于定义常量的const声明。

function f() {
  {
    let x;
    {
      // okay, block scoPEd name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

变量作用域

变量提升

JavaScript是解释执行的语言， JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.LOG(a);
var a = 1;

上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码：

var a;
console.log(a);
a = 1;

最后的结果是显示undefined，表示变量a已声明，但还未赋值。请注意，变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。

console.log(b);
b = 1;

上面的语句将会报错，提示“ReferenceError: b is not defined”，即变量b未声明，这是因为b不是用var命令声明的，JavaScript引擎不会将其提升，而只是视为对顶层对象的b属性的赋值。

避免全局变量

在计算机编程中，全局变量指的是在所有作用域中都能访问的变量。全局变量是一种不好的实践，因为它会导致一些问题，比如一个已经存在的方法和全局变量的覆盖，当我们不知道变量在哪里被定义的时候，代码就变得很难理解和维护了。在ES6中可以利用let关键字来声明本地变量，好的 JavaScript 代码就是没有定义全局变量的。有一些技术可以帮助你让所有的事情都保持在本地：

为了避免全局变量，第一件事情就是要确保所有的代码都被包在函数中。最简单的办法就是把所有的代码都直接放到一个函数中去：

函数包裹

(function(win) {
    "use strict"; // 进一步避免创建全局变量
    var doc = window.document;
    // 在这里声明你的变量
    // 一些其他的代码
}(window));

声明命名空间

var MyApp = {
    namespace: function(ns) {
        var parts = ns.split("."),
            object = this, i, len;
        for(i = 0, len = parts.lenght; i < len; i ++) {
            if(!object[parts[i]]) {
                object[parts[i]] = {};
            }
            object = object[parts[i]];
        }
    return object;
    }
};

// 定义命名空间
MyApp.namespace("Helpers.Parsing");

// 你现在可以使用该命名空间了
MyApp.Helpers.Parsing.DateParser = function() {
    //做一些事情
};

模块化

另一项开发者用来避免全局变量的技术就是封装到模块 Module 中。一个模块就是不需要创建新的全局变量或者命名空间的通用的功能。不要将所有的代码都放一个负责执行任务或者发布接口的函数中。最常见的 JavaScript 模块类型就是异步模块定义 Asynchronous Module Definition (AMD)。

//定义
define( "parsing", //模块名字
        [ "dependency1", "dependency2" ], // 模块依赖
        function( dependency1, dependency2) { //工厂方法

            // Instead of creating a namespace AMD modules
            // are expected to return their public interface
            var Parsing = {};
            Parsing.DateParser = function() {
              //do something
            };
            return Parsing;
        }
);

// 通过 Require.js 加载模块
require(["parsing"], function(Parsing) {
    Parsing.DateParser(); // 使用模块
});

解构赋值

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。

传统的访问数组前三个元素的方式为：

    var First = someArray[0];
    var second = someArray[1];
    var third = someArray[2];

而通过解构赋值的特性，可以变为：

    var [first, second, third] = someArray;

数组与迭代器

以上是数组解构赋值的一个简单示例，其语法的一般形式为：

    [ variable1, variable2, ..., variableN ] = array;

这将为variable1到variableN的变量赋予数组中相应元素项的值。如果你想在赋值的同时声明变量，可在赋值语句前加入var、let或const关键字，例如：

    var [ variable1, variable2, ..., variableN ] = array;
    let [ variable1, variable2, ..., variableN ] = array;
    const [ variable1, variable2, ..., variableN ] = array;

事实上，用变量来描述并不恰当，因为你可以对任意深度的嵌套数组进行解构：

    var [foo, [[bar], baz]] = [1, [[2], 3]];
    console.log(foo);
    // 1
    console.log(bar);
    // 2
    console.log(baz);
    // 3

此外，你可以在对应位留空来跳过被解构数组中的某些元素：

    var [,,third] = ["foo", "bar", "baz"];
    console.log(third);
    // "baz"

而且你还可以通过“不定参数”模式捕获数组中的所有尾随元素：

    var [head, ...tail] = [1, 2, 3, 4];
    console.log(tail);
    // [2, 3, 4]

当访问空数组或越界访问数组时，对其解构与对其索引的行为一致，最终得到的结果都是：undefined。

    console.log([][0]);
    // undefined
    var [missing] = [];
    console.log(missing);
    // undefined

请注意，数组解构赋值的模式同样适用于任意迭代器：

    function* fibs() {
      var a = 0;
      var b = 1;
      while (true) {
        yield a;
        [a, b] = [b, a + b];
      }
    }
    var [first, second, third, fourth, fifth, sixth] = fibs();
    console.log(sixth);
    // 5

对象

通过解构对象，你可以把它的每个属性与不同的变量绑定，首先指定被绑定的属性，然后紧跟一个要解构的变量。

    var robotA = { name: "Bender" };
    var robotB = { name: "Flexo" };
    var { name: nameA } = robotA;
    var { name: nameB } = robotB;
    console.log(nameA);
    // "Bender"
    console.log(nameB);
    // "Flexo"

当属性名与变量名一致时，可以通过一种实用的句法简写：

    var { foo, bar } = { foo: "lorem", bar: "ipsum" };
    console.log(foo);
    // "lorem"
    console.log(bar);
    // "ipsum"

与数组解构一样，你可以随意嵌套并进一步组合对象解构：

    var complicatedObj = {
      arrayPRop: [
        "Zapp",
        { second: "brannigan" }
      ]
    };
    var { arrayProp: [first, { second }] } = complicatedObj;
    console.log(first);
    // "Zapp"
    console.log(second);
    // "Brannigan"

当你解构一个未定义的属性时，得到的值为undefined：

    var { missing } = {};
    console.log(missing);
    // undefined

请注意，当你解构对象并赋值给变量时，如果你已经声明或不打算声明这些变量（亦即赋值语句前没有let、const或var关键字），你应该注意这样一个潜在的语法错误：

    { blowUp } = { blowUp: 10 };
    // Syntax error 语法错误

为什么会出错？这是因为JavaScript语法通知解析引擎将任何以{开始的语句解析为一个块语句（例如，{console}是一个合法块语句）。解决方案是将整个表达式用一对小括号包裹：

    ({ safe } = {});
    // No errors 没有语法错误

默认值

当你要解构的属性未定义时你可以提供一个默认值：

    var [missing = true] = [];
    console.log(missing);
    // true
    var { message: msg = "Something went wrong" } = {};
    console.log(msg);
    // "Something went wrong"
    var { x = 3 } = {};
    console.log(x);
    // 3

由于解构中允许对对象进行解构，并且还支持默认值，那么完全可以将解构应用在函数参数以及参数的默认值中。

function removeBreakpoint({ url, line, column }) {
      // ...
    }

当我们构造一个提供配置的对象，并且需要这个对象的属性携带默认值时，解构特性就派上用场了。举个例子，jQuery的ajax函数使用一个配置对象作为它的第二参数，我们可以这样重写函数定义：

jquery.ajax = function (url, {
      async = true,
      beforeSend = noop,
      cache = true,
      complete = noop,
      croSSDomain = false,
      global = true,
      // ... 更多配置
    }) {
      // ... do stuff
    };

同样，解构也可以应用在函数的多重返回值中，可以类似于其他语言中的元组的特性：

function returnMultipleValues() {
      return [1, 2];
    }
var [foo, bar] = returnMultipleValues();

Spread operator(… 扩展操作符)

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

还有另外一个好处就是可以用来替换Object.assign来方便地从旧有的对象中创建新的对象，并且能够修改部分值。譬如

var obj = {a:1,b:2}
var obj_new_1 = Object.assign({},obj,{a:3});
var obj_new_2 = {
  ...obj,
  a:3
}

类型/格式判断与转换

typeof

typeof运算符可以返回一个值的数据类型，可能有以下结果。

（1）原始类型

数值、字符串、布尔值分别返回number、string、boolean。

typeof 123 // "number"
typeof "123" // "string"
typeof false // "boolean"

（2）函数

函数返回function。

// 定义一个空函数
function f(){}

typeof f
// "function"

（3）undefined

undefined返回undefined。

typeof undefined
// "undefined"

利用这一点，typeof可以用来检查一个没有声明的变量，而不报错。

v
// ReferenceError: v is not defined

typeof v
// "undefined"

实际编程中，这个特点通常用在判断语句。

// 错误的写法
if (v){
    // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined"){
    // ...
}

（4）其他

除此以外，都返回object。

typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"

从上面代码可以看到，空数组（[]）的类型也是object，这表示在JavaScript内部，数组本质上只是一种特殊的对象。另外，null的类型也是object，这是由于历史原因造成的，为了兼容以前的代码，后来就没法修改了，并不是说null就属于对象，本质上null是一个类似于undefined的特殊值。

instanceof

typeof对数组（array）和对象（object）的显示结果都是object，那么怎么区分它们呢？instanceof运算符可以做到。

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

类型的自动转换

当遇到以下几种情况，JavaScript会自动转换数据类型：

• 不同类型的数据进行互相运算；

• 对非布尔值类型的数据求布尔值;

• 对非数值类型的数据使用一元运算符（即“+”和“-”）。

基本类型(Basic)

数值类型

科学计算

随机数

random() 方法可返回介于 0 ~ 1 之间的一个随机数。

<script type="text/javascript">
document.write(Math.random())
</script>

类型转换

使用Number函数，可以将任意类型的值转化成数字。

• 数值：转换后还是原来的值。

• 字符串：如果可以被解析为数值，则转换为相应的数值，否则得到NaN。空字符串转为0。

• 布尔值：true转成1，false转成0。

• undefined：转成NaN。

• null：转成0。

Number函数将字符串转为数值，要比parseInt函数严格很多。基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN。

parseInt('011') // 9
parseInt('42 cats') // 42
parseInt('0xcafebabe') // 3405691582

Number('011') // 11
Number('42 cats') // NaN
Number('0xcafebabe') // 3405691582

如果Number传入的参数是一个对象，那么转换规则会相对复杂一点，具体而言描述如下：

1. 先调用对象自身的valueOf方法，如果该方法返回原始类型的值（数值、字符串和布尔值），则直接对该值使用Number方法，不再进行后续步骤。

2. 如果valueOf方法返回复合类型的值，再调用对象自身的toString方法，如果toString方法返回原始类型的值，则对该值使用Number方法，不再进行后续步骤。

3. 如果toString方法返回的是复合类型的值，则报错。

格式化显示

这里用的是numeraljs，格式化显示的效果如下所示：

• Number

• Currency

• Bytes

• Percentages

• Time

布尔类型

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。如果JavaScript预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

• undefined

• null

• false

• 0

• NaN

• ""（空字符串）

类型转换

所有对象的布尔值都是true，甚至连false对应的布尔对象也是true。

Boolean(new Boolean(false))
// true

空类型

JavaScript中常见的空类型为undefined与null，不过typeof undefined === ‘undefined’ 而 typeof null === ‘object’。

null表示"没有对象"，即该处不应该有值。典型用法是：

• 作为函数的参数，表示该函数的参数是对象。

• 作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还未定义。典型用法是：

• 变量被声明了，但没有赋值时，就等于undefined。

• 调用函数时，应该提供的参数没有提供，该参数等于undefined。

• 对象没有赋值的属性，该属性的值为undefined。

• 函数没有返回值时，默认返回undefined。

Symbols

Symbols是JavaScript的第七种原始类型，它代指一个全局唯一的不可变对象。如果需要创建一个Symbol对象，则需要调用Symbol函数：

var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");

如上的代码会创建三个新的符号，注意，虽然Symbol使用了”foo”这个字符串作为输入对象，但是每次会创建一个新的符号：

Symbol("foo") === Symbol("foo"); // false

确切地说，symbol与其它类型并不完全相像。symbol被创建后就不可变更，你不能为它设置属性（在严格模式下尝试设置属性会得到TypeError的错误）。他们可以用作属性名称，这些性质与字符串类似。

另一方面，每一个symbol都独一无二，不与其它symbol等同，即使二者有相同的描述也不相等；你可以轻松地创建一个新的symbol。这些性质与对象类似。

ES6中的symbol与Lisp和Ruby这些语言中更传统的symbol类似，但不像它们集成得那么紧密。在Lisp中，所有的标识符都是symbol；在JS中，标识符和大多数的属性键仍然是字符串，symbol只是一个额外的选项。

关于symbol的忠告：symbol不能被自动转换为字符串，这和语言中的其它类型不同。尝试拼接symbol与字符串将得到TypeError错误。

> var sym = Symbol("<3");
> "your symbol is " + sym
// TypeError: can't convert symbol to string
> `your symbol is ${sym}`
// TypeError: can't convert symbol to string

有三种获取symbol的方法。

• 调用Symbol()。正如我们上文中所讨论的，这种方式每次调用都会返回一个新的唯一symbol。

• 调用Symbol.for(string)。这种方式会访问symbol注册表，其中存储了已经存在的一系列symbol。这种方式与通过Symbol()定义的独立symbol不同，symbol注册表中的symbol是共享的。如果你连续三十次调用Symbol.for("cat")，每次都会返回相同的symbol。注册表非常有用，在多个web页面或同一个web页面的多个模块中经常需要共享一个symbol。

• 使用标准定义的symbol，例如：Symbol.iterator。标准根据一些特殊用途定义了少许的几个symbol。

字符串类型

创建增删

插值

ES6中开始支持较为复杂的模板字符串方式：

// Basic literal string creation
`In JavaScript 'n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadystateChangeHandler);

随机字符串

UUID

• node-uuid

类型编码

类型转换

使用String函数，可以将任意类型的值转化成字符串。规则如下：

• 数值：转为相应的字符串。

• 字符串：转换后还是原来的值。

• 布尔值：true转为“true”，false转为“false”。

• undefined：转为“undefined”。

• null：转为“null”。

而对于较复杂一点的对象类型，转换规则如下：

1. 先调用toString方法，如果toString方法返回的是原始类型的值，则对该值使用String方法，不再进行以下步骤。

2. 如果toString方法返回的是复合类型的值，再调用valueOf方法，如果valueOf方法返回的是原始类型的值，则对该值使用String方法，不再进行以下步骤。

3. 如果valueOf方法返回的是复合类型的值，则报错。

HTML编码

function html_encode(str)   
{   
  var s = "";   
  if (str.length == 0) return "";   
  s = str.replace(/&/g, ">");   
  s = s.replace(/</g, "&lt;");   
  s = s.replace(/>/g, "&gt;");   
  s = s.replace(/ /g, "&nbsp;");   
  s = s.replace(/'/g, "&#39;");   
  s = s.replace(/"/g
脚本宝典总结
       
以上是脚本宝典为你收集整理的""&quot;"");全部内容，希望文章能够帮你解决""&quot;"");所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。