ES6标准入门----总结一

迷南。 2023-06-03 07:58 30阅读 0赞

1.let命令  
下面的代码如果使用var，最后将输出10.

var a=[];
    for(var i=0;i<10;i++){
        
    	a[i]=function(){
        
    		console.log(i);
    	}
    }
    a[6](0);//10

上面的代码中，变量i是var声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变。而循环内被赋给数组a的函数内部的console.log(i)中的i指向全局的i。也就是说，所有数组a的成员中的i指向的都是同一个i，导致运行时输出的是最后一轮i的值，也就是10.  
如果使用let，声明的变量仅在块级作用域中有效，最后将输出6.

var a=[];
    for(let i=0;i<10;i++){
        
    	a[i]=function(){
        
    		console.log(i);
    	};
    }
    a[6]();//6

上面的代码中，变量i是let声明的，当前的i只在本轮循环中有效。所以每一次循环的i其实都是一个新的变量，于是最后输出的是6.JS引擎内部会记住上一次循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。  
另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for(let i=0;i<3;i++){
        
    	let i='abc';
    	console.log(i);
    }
    //'abc'
    //'abc'
    //'abc'

正确运行以上代码将输出三次abc。这表明，函数内部的变量i与循环变量i不在同一个作用域，而是有各自单独的作用域。

2.块级作用域  
ES5只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。  
第一种场景，内层变量可能会覆盖外层变量。

var tmp=new Date();
    
    function f(){
        
    	console.log(tmp);
    	if(false){
        
    		var tmp='hello world';
    	}
    }
    
    f();//undefined

以上代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出的结果为undefined，原因在于变量提升导致内层的tmp变量覆盖了外层的tmp变量。  
第二种场景，用来计数的循环变量泄漏为全局变量。

var s='hello';
    for(var i=0;i<s.length;i++){
        
    	console.log(s[i]);
    }
    
    console.log(i);//5

上面的代码中，变量i只用来控制循环，但循环结束后，它并没有消失，而是泄漏成了全局变量。

let实际上为JS新增了块级作用域。

function f1(){
        
    	let n=5;
    	if(true){
        
    		let n=10;
    	}
    	console.log(n);//15
    }

上面的函数有两个代码块，都声明了变量n，运行后输出5，这表示外层代码块不受内层代码块的影响。如果使用var定义变量n，最后输出的值就是10.

**块级作用域与函数声明：**  
ES5规定，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域声明。

//情况一
    if(true){
        
    	function f(){
        }
    }
    
    //情况二
    try{
        
    	function f(){
        }
    }catch(e){
        
    	//...
    }

上面两种函数声明在ES5中都是非法的。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际上都能运行，并不会报错。  
ES6引入了块级作用域，明确允许在块级作用域之中声明函数。ES6规定，在块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

以上代码在ES5中运行会得到"I am inside!"，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下。

//ES5环境
    function f(){
        console.log('I am outside!');}
    
    (function(){
        
    	function f(){
        console.log('I am inside!');}
    	if(false){
        }{
        }
    	f();
    }());

而在ES6中运行就完全不一样了，理论上会得到"I am outside!"。因为块级作用域中声明的函数类似于let，对作用域之外没有影响。但是，如果真的在ES6浏览器中运行上面的代码，是会报错的。  
原来，如果改变了块级作用域内声明的函数的处理规则，显然会对旧代码产生很大影响。为了减轻因此产生的不兼容问题，ES6中规定，浏览器的实现可以不遵守上面的规定，而有自己的行为方式，具体如下：

允许在块级作用域中声明函数；
    函数声明类似于var，即会提升到全局作用域的头部；
    同时，函数声明还会提升到所在的块级作用域的头部。

注意：上面3条规则只对ES6的浏览器实现有效，其他环境的实现不用遵守，依旧将块级作用域的声明当做let处理即可。  
根据这3条规则，在浏览器的ES6环境中，块级作用域内声明函数的行为类似于var声明变量。

//浏览器的ES6环境
    function f(){
        console.log('I am outside!');}
    
    (function (){
        
    	if(false){
        
    		//重复声明一次函数f
    		function f(){
        console.log('I am inside!');}
    	}
    	f();
    }());
    //Uncaught TypeError:f is not a function

上面的代码在符合ES6的浏览器中都会报错，因为实际运行的是以下代码。

//浏览器的ES6环境
    function f(){
        console.log('I am outside!');}
    (function(){
        
    	var f=undefined;
    	if(false){
        
    		function f(){
        console.log('I am inside!');}
    	}
    	f();
    }());
    //Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式的形式，而不是函数声明语句。

//函数声明语句
    {
        
    	let a='secret';
    	function f(){
        
    		return a;
    	}
    }
    
    //函数表达式
    {
        
    	let a='secret';
    	let f=function(){
        
    		return a;
    	};
    }

3.顶层对象的属性  
顶层对象在浏览器环境中指的是window对象，在Node环境中指的是global对象。在ES5中，顶层对象的属性与全局变量是等价的。

window.a=1;
    a//1
    
    a=2;
    window.a//2

上面的代码中，顶层变量的赋值与全局变量的赋值是同一件事。  
顶层变量的属性与全局变量相关，被认为是JS语言中最大的设计败笔之一。  
ES6为了改变这一点，为了保持兼容性，var命令和function命令声明的全局变量依旧是顶层对象的属性；let命令、const命令、class命令声明的全局变量不属于顶层变量的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性隔离。

var a=1;
    //如果在Node的REPL环境，可以写成global.a
    //或者采用通用方法，写成this.a
    window.a//1
    
    let b=1;
    window.b//undefined

上面的代码中，全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b又let声明，所以它不是顶层变量的属性，返回undefined。

4.解构赋值  
**数组解构赋值：**  
***默认值***  
解构赋值允许指定默认值。

let [foo=true]=[];
    foo//true
    
    let [x,y='b']=['a'];//x='a',y='b'
    let [x,y='b']=['a',undefined];//x='a',y='b'

ES6内部使用严格相等符（===）判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

let [x=1]=[undefined];
    x//1
    
    let [x=1]=[null];
    x//null

上面的代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。  
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到时才会求值。

function f(){
        
    	console.log('aaa');
    }
    
    let [x=f()]=[1];

上面的代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x;
    if([1][0]===undefined){
        
    	x=f();
    }else{
        
    	x=[1][0];
    }

**对象的解构赋值：**  
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值是由它的位置决定的；而对象的属性没有次序，变量必须与属性同名才能取到正确的值。  
对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，而不是前者。

let {
        foo:baz}={
        foo:"aaa",bar:"bbb"};
    baz//"aaa"
    foo//error:foo is not defined

上面的代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

//报错
    let {
        foo:{
        bar}}={
        baz:'baz'};

上面的代码中，等号左边对象的foo属性对应一个子对象，该子对象的bar属性在解构时会报错。原因很简单，因为foo此时等于undefined，再取子属性就会报错，请看下面的代码：

let _tmp={
        baz:'baz'};
    _tmp.foo.bar//报错

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

//错误的写法
    let x;
    {
        x}={
        x:1};
    //SyntaxError:syntax error

上面代码的写法会报错，因为JS引擎会将\{x\}理解为一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JS将其解释为一个代码块才能解决这个问题。

//正确的写法
    let x;
    ({
        x}={
        x:1});

5.字符串的扩展  
**字符串的Unicode表示法：**  
JS允许采用\\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。

"\u0061"
    //"a"

但是，这种表示法只限于码点在\\u0000-\\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表达。

"\uD842\uDFB7"
    //"?"
    
    "\u20BB7"
    // "7"

上面的代码表示，如果直接在\\u后面跟上超过0xFFFF的数值，JS会理解成\\u20BB+7。由于\\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟一个7.  
ES6对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"
    //"?"

6.Symbol  
ES5的对象属性名都是字符串，这容易造成属性名的冲突。ES6引入类型Symbol，从根本上防止属性名的冲突。  
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，它是JS语言的第7种数据类型，前6种分别是：Undefined、Null、Boolean、String、Number和Object。  
Symbol值通过Symbol函数生成。

let s=Symbol();
    
    typeof s//"Symbol"

上面的代码中，变量s就是一个独一无二的值。typeof运算符的结果表明变量s是Symbol数据类型，而不是字符串之类的其他类型。  
注意：  
Symbol函数前不能使用new命令，否则会报错，这是因为生成的Symbol是一个原始类型的值，不是对象。也就是说，由于Symbol值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时比较容易区分。

var s1=Symbol('foo');
    var s2=Symbol('bar');
    
    s1//Symbol(foo)
    s2//Symbol(bar)
    
    s1.toString()//"Symbol(foo)"
    s2.toString()//"Symbol(bar)"

注意：  
Symbol函数的参数只表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的。

//没有参数的情况
    var s1=Symbol();
    var s2=Symbol();
    
    s1===s2//false
    
    //有参数的情况
    var s1=Symbol('foo');
    var s2=Symbol('foo');
    
    s1===s2//false

上面的代码中，s1和s2都是Symbol函数的返回值，而且参数相同，但是它们是不相等的。

Symbol值不能与其他类型的值进行运算，否则会报错。

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

但是Symbol值可以显示转为字符串。

var sym=Symbol('My symbol');
    
    String(sym)//'Symbol(My symbol)'
    sym.toString()//'Symbol(My symbol)'

另外，Symbol值也可以转为布尔值，但是不能转为数值。

var sym=Symbol();
    Boolean(sym)//true
    !sym//false
    
    Number(sym)//TypeError
    sym+2//TypeError

**Symbol.for()、Symbol.KeyFor()**  
有时，我们希望重新使用同一个Symbol值，Symbol.for方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有已该参数作为名称的Symbol值。如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。

var s1=Symbol.for('foo');
    var s2=Symbol.for('foo');
    
    s1===s2//true

上面的代码中，s1和s2都是Symbol值，但它们都是同样参数的Symbol.for方法生成的，所以实际上是同一个值。  
Symbol.for()和Symbol()这两种写法都会生成新的Symbol。它们的区别是，前者会被登记在全局环境中供搜索，而后者不会。Symbol.for不会在每次调用时都返回一个新的Symbol类型的值，而是会先检查给定的key是否已经存在，如果不存在才会新建一个值。

Symbol.keyFor方法返回一个已登记的Symbol类型值的key。

var s1=Symbol.for('foo');
    Symbol.keyFor(s1)//"foo"
    
    var s2=Symbol('foo');
    Symbol.keyFor(s2)//undefined

上面的代码中，变量s2属于未登记的Symbol值，所以返回undefined。

7.Set  
ES6提供了新的数据结构----Set。它类似于数组，但是成员的值都是唯一的，没有重复。Set本身是一个构造函数，用来生成Set数据结构。

const s=new Set();
    [2,3,5,4,5,2,2].forEach(x=>s.add(x));
    for(let i of s){
        
    	console.log(i);
    }
    //2 3 5 4

上面的代码通过add方法向Set结构加入成员，结果表明Set结构不会添加重复的值。

Set函数可以接受一个数组（或者具有iterable接口的其他数据结构）作为参数，用来初始化。

//例一
    const set=new Set([1,2,3,4,4]);
    [...set]//[1,2,3,4]
    
    //例二
    const items=new Set([1,2,3,4,5,5,5,5]);
    items.size//5

上面的代码中也展示了一种去除数组重复成员的方法。

//去除数组的重复成员
    [...new Set(array)]

向Set加入值时不会发生类型转换，所以5和"5"是两个不同的值。Set内部判断两个值是否相等时使用的算法叫做"Same-value equality"，它类似于精确相等运算符（===），主要区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。

let set=new Set();
    let a=NaN;
    let b=NaN;
    set.add(a);
    set.add(b);
    set//Set{NaN}

上面的代码向Set实例添加了两个NaN，但是实际上只能添加一个。这表明，在Set内部两个NaN是相等的。  
另外，两个对象总是不相等的。

let set=new Set();
    set.add({
        });
    set.size//1
    
    set.add({
        });
    set.size//2

上面的代码表示，由于两个空对象不是精确相等的，所以它们被视为两个值。

**Set实例的属性和方法：**  
Set结构的实例有以下属性：

Set.prototype.constructor:构造函数，默认就是Set函数
    Set.prototype.size:返回Set实例的成员总数

Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍4个操作方法。

add(value):添加某个值，返回Set结构本身
    delete(value):删除某个值，返回一个布尔值，表示删除是否成功
    has(value):返回一个布尔值，表示参数是否为Set的成员
    clear():清除所有成员，没有返回值

遍历操作：

keys():返回键名的遍历器
    values():返回键值的遍历器
    entries():返回键值对的遍历器
    forEach():使用回调函数遍历每个成员

需要特别指出的是，Set遍历顺序就是插入顺序。

由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

上面的代码中entries方法返回的遍历器同时包括键名和键值，所以每次输出一个数组，其两个成员完全相等。

forEach()  
Set结构实例的forEach方法用于对每个成员执行某种操作，没有返回值。

let set=new Set([1,2,3]);
    set.forEach((value,key)=>console.log(value*2));
    //2
    //4
    //6

遍历的应用  
扩展运算符内部使用for…of循环，所以也可以用于Set结构

let set=new Set(['red','green','blue']);
    let arr=[...set];
    //['red','green','blue']

扩展运算符和Set结构相结合就可以去除数组的重复成员。

let arr=[3,5,2,2,5,5];
    let unique=[...new Set(arr)];
    //[3,5,2]

而且数组的map和filter方法也可以用于Set。

let set=new Set([1,2,3]);
    set=new Set([...set].map(x=>x*2));//返回Set结构：{2,4,6}
    
    let set=new Set([1,2,3,4,5]);
    set=new Set([...set].filter(x=>(x%2)==0));//返回Set结构：{2,4}

因此使用Set可以很容易的实现并集、交集和差集。

8.Map  
ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。也就是说，Object结构提供了“字符串----值”的对应，Map结构提供了“值----值”的对应，是一种更完善的Hash结构实现。如果需要“键值对”的数据结构，Map比Object更合适。

注意：  
只有对同一个对象的引用，Map结构才将其视为同一个键。

const map=new Map();
    
    map.set(['a'],555);
    map.get(['a'])//undefined

上面的set和get方法表面上是针对同一个键，实际上却是两个值，内存地址是不一样的，因此get方法无法读取该键，返回undefined。  
同理，同样的值的两个实例在Map结构中被视为两个键。

const map=new Map();
    
    const k1=['a'];
    const k2=['a'];
    
    map
    .set(k1,111)
    .set(k2,222);
    
    map.get(k1)//111
    map.get(k2)//222

上面的代码中，变量k1和k2的值是一样的，但它们在Map结构中被视为两个键。  
由上可知，Map的键实际上是和内存地址绑定的，只要内存地址不一样，就视为两个键。  
如果Map的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map就将其视为一个键，包括0和-0.另外，虽然NaN不严格等于自身，但Map将其视为同一个键。

let map=new Map();
    
    map.set(-0,123);
    map.get(+)//123
    
    map.set(true,1);
    map.get('true',2);
    map.get(true)//1
    
    map.set((undefined,3);
    map.set(null,4);
    map.get(undefined)//3
    
    map.set(NaN,123);
    map.get(NaN)//123

9.Promise对象  
Promise是异步编程的一种解决方案，比传统的解决方案----回调函数和事件----更合理更强大。  
所谓Promise，简单来说就是一个容器，里面保存着未来才会结束的事件（通常是一个异步操作）的结果。从语法上来说，Promise是一个对象，从它可以获取异步操作的消息。

**Promise对象有以下两个特点：**

*  对象的状态不受外界的影响。Promise对象代表一个异步操作，有3种状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态；
 *  一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能：从Pending变为Fulfilled和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变，而是一直保持这个结果，这时就称为Resolved（已定型）。就算改变已经发生，再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同。事件的特点是，如果错过了它，再去监听是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误不会反应到外部。再者，当处于Pending状态时，无法得知目前进行到哪一个阶段（刚刚开始还是即将完成）。

**基本用法：**  
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。  
下面的代码创造了一个Promise实例。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。  
Promise实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数。

Promise.then(function(value){
        
    	//success
    },function(error){
        
    	//failure
    });

Promise新建后就会立即执行。

let promise=new Promise(function(resolve,reject){
        
    	console.log('Promise');
    	resolve();
    });
    
    promise.then(function(){
        
    	console.log('Resolved.');
    });
    
    console.log('Hi!');
    
    //Promise
    //Hi!
    //Resolved

什么的代码中，Promise新建后会立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数将在当前脚本所有同步任务执行完成后才会执行，所以Resolved最后输出。

**Promise.prototype.then()**  
Promise实例具有then方法，即then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。  
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此，可以采用链式写法，即then方法后面再调用另一个then方法。

getJSON("/posts.json").then(function(json){
        
    	return json.post;
    }).then(function(post){
        
    	//...
    });

上面的代码使用then方法依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数传入第二个回调函数。  
采用链式的then可以指定一组按照次序调用的回调函数。这时，前一个回调函数有可能返回的还是一个Promise对象（即有异步操作），而后一个回调函数就会等调该Promise对象的状态发生变化，再被调用。

getJSON("/post/1.json").then(function(post){
        
    	return getJSON(post.commentURL);
    }).then(function funcA(comments){
        
    	console.log("Resolved: ",comments);
    },function funcB(err){
        
    	console.log("Rejected: ",err);
    });

上面的代码中，第一个then方法指定的回调函数返回的是另一个Promise对象。这时，第二个then方法指定的回调函数就会等待这个新的Promise对象状态发生变化。如果变为Resolved，就调用funcA；如果状态变为Rejected，就调用funcB。  
如果采用箭头函数，上面的代码可以写的更简洁。

getJSON("/post/1.json").then(
    	psot=>getJSON(post.commentURL)
    ).then(
    	comments=>console.log("Resolved: ",comments),
    	err=>console.log("Rejected: ",err)
    );

**Promise.prototype.catch()**  
Promise.prototype.catch方法是.then(null,rejection)的别名，用于指定发生错误时的回调函数。

getJSON('/posts.json').then(function(posts){
        
    	//...
    }).catch(function(error){
        
    	//处理getJSON和前一个回调函数运行是发生的错误
    	console.log('发生错误！',error);
    });

上面的代码中，getJSON方法返回一个Promise对象，如果该对象状态变为Resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为Rejected，然后调用catch方法指定的回调函数处理这个错误。另外，then方法指定的回调函数如果在运行中抛出错误，也会被catch方法捕获。

Promise对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

getJSON('/post/1.json').then(function(post){
        
    	return getJSON(post.commentURL);
    }).then(function(comments){
        
    	//some code
    }).catch(function(error){
        
    	//处理前面3个Promsie产生的错误
    });

上面的代码中，一共有3个Promise对象：一个由getJSON产生，两个由then产生。其中任何一个抛出的错误都会被最后一个catch捕获。  
一般说来，不要在then方法中定义Rejected状态的回调函数（即then的第二个参数），而应总是使用catch方法

//bad
    promise
    	.then(function(data){
        
    		//success
    	},function(err){
        
    		//error
    	});
    
    //good
    promsie
    	.then(function(data){
        
    		//success
    	})
    	.catch(function(err){
        
    		//error
    	});

上面的代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面的then方法执行中的错误，也更接近同步的写法（try/catch）。因此，建议使用catch方法，而不使用then方法的第二个参数。  
跟传统的try/catch方法不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。

上面的代码中，someAsyncThing函数产生Promise对象会报错，但是由于没有指定catch方法，因而这个错误不会被捕获，也不会传递到外层代码。正常情况下，运行后不会有任何输出，但是浏览器此时会打印出错误“ReferenceError:x is not defined”，不过不会终止脚本执行，如果这个脚本放在服务器中执行，退出码就是0（即表示执行成功）。