Shulou(Shulou.com)06/01 Report--

What are the new features of ECMAScript 6, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Brief introduction

ECMAScript 6.0 (hereinafter referred to as ES6) is the next generation standard of the JavaScript language, which was officially released in June 2015. Its goal is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise development language.

Today we will talk about the new syntax features introduced in ES6.

The relationship between ECMAScript and JavaScript

In November 1996, Netscape, the creator of JavaScript, decided to submit JavaScript to the International Organization for Standardization ECMA.

In 1997, ECMA issued 262 standard document ECMAScript 1.0.

The relationship between ECMAScript and JavaScript is that the former is the specification of the latter, and the latter is an implementation of the former.

Let's take a look at the release history of ECMAScript:

Since the release of ES2015, or ES6, in 2015, ECMAScript has been released to ES2020 at the rate of one version a year.

We will explain the new features of these new versions of ECMAScript in a later article.

Let and const

Let and const were introduced into ES6 to solve the problems of previous var variables.

Before ES6, there were two scopes of variables in JS: global scope and function scope.

The global scope is easy to understand, and when we start writing JavaScript in the browser console or Node.js interactive terminal, we enter the so-called global scope.

Variables with global scope can be accessed in any other scope.

The function scope is the variable defined inside the function, which can be accessed within the function.

There are some problems with these two scopes:

Variable lifting

The "variable promotion" occurs in the var command, that is, the variable can be used before it is declared, with a value of undefined.

/ / case of var console.log (foo); / / output undefined var foo = 2

Variable coverage

When we use global variables in the scope of a function, if a variable with the same name is defined in the scope of the function, no matter where it is defined, it will overwrite the global variable. As follows:

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

Variable leakage

Variable leakage means that variables that we only wanted to use in a small scope ended up leaking outside the scope, as shown below:

Var s = 'hello'; for (var I = 0; I

< s.length; i++) { console.log(s[i]); } console.log(i); // 5~~为了解决上面两个问题，ES6引入了let和const。这两个都是块级作用域。不同的是const定义的变量初始化之后就不能变化了。什么是块级作用域呢？类似于 if、switch 条件选择或者 for、while 这样的循环体即是所谓的块级作用域,或者更简单一点使用大括号括起来的就叫做块级作用域。块级作用域的最大好处就是不会产生作用域提升，如下所示：~~~js{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1解构赋值 什么是解构赋值呢？ ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。 如下所示： let [a, b, c] = [1, 2, 3];let [ , , third] = ["foo", "bar", "baz"];let [x, , y] = [1, 2, 3];let [head, ...tail] = [1, 2, 3, 4];let [x, y] = [1, 2, 3]; 解构赋值还可以设定默认值，我们来看下面的几个例子： let [foo = true] = []; foo // truelet [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'let [x = 1] = [undefined]; x // 1let [x = 1] = [null]; x // null 如果解构的默认值是一个函数，那么可以触发惰性赋值： function f() { console.log('aaa'); } let [x = f()] = [1]; 上面的例子中，f函数将不会被执行。 除了结构变量之外，还可以结构对象： let { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" let { baz } = { foo: "aaa", bar: "bbb" }; baz // undefinedvar { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world' 解构还支持嵌套的结构： let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World" 解构赋值有两个非常重要的作用。 第一就是交换变量： let x = 1; let y = 2; [x, y] = [y, x]; 我们就可以不再使用中间变量，直接进行两个变量值的交互。 第二个作用就是从函数中返回多个值： // 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();//提取JSON数据let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData;数组的扩展 ES6中的Array.from方法用于将下面两类对象转为真正的数组： 类似数组的对象（array-like object） 可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。 什么是类似数组对象呢？ 所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组。 下面的变量就是类数组变量： let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; 这个类数组对象怎么转换成为数组呢？ // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] 我们看下通常的使用场景： // NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).forEach(function (p) { console.log(p); }); // arguments对象 function foo() { var args = Array.from(arguments); // ... } 什么是可遍历对象呢？ 只要是部署了Iterator接口的数据结构，都叫做可遍历对象。 我们看下下面的例子： Array.from('hello') // ['h', 'e', 'l', 'l', 'o'] let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b'] 同时还引入了扩展运算符（...），通过扩展运算符，也可以很方便的转换为数组对象： function foo() { var args = [...arguments]; } // arguments对象 [...document.querySelectorAll('div')] // NodeList对象 Array.from方法还可以接收第二个参数，用来对数组中的元素进行操作： Array.from(arrayLike, x =>

X * x); / / equivalent to Array.from (arrayLike) .map (x = > x * x); Array.from ([1,2,3], (x) = > x * x) / / [1,4,9]

The Array.of method makes it easy to create new arrays:

Array.of (3, 1Array) / / [3] Array.of (3) / / [3] Array.of (3). The extension of length / / 1Array () / / [] Array (3) / / [,] Array (3) / / [3) 11 (8) / / the extension of the function

ES6, you can support the default value of the function:

Function log (x, y = 'World') {console.log (x, y);} function Point (x = 0, y = 0) {this.x = x; this.y = y;}

The default value of the function can be combined with the default value of deconstruction assignment:

Function foo ({x, y = 5}) {console.log (x, y);} foo ({}) / / undefined, 5 foo ({x: 1}) / / 1,5 foo ({x: 1, y: 2}) / / 1,2 foo () / / TypeError: Cannot read property'x'of undefined

Next, let's look at a complex example:

/ / function M1 ({x = 0, y = 0} = {}) {return [x, y];} / II function m2 ({x, y} = {x: 0, y: 0}) {return [x, y];}

Let's take a look. What's the difference between the two ways of writing above?

When the function has no arguments:

M1 () / / [0,0] m2 () / / [0,0]

When both x and y have values:

M1 ({x: 3, y: 8}) / / [3,8] m2 ({x: 3, y: 8}) / / [3,8]

When x has a value, y has no value:

M1 ({x: 3}) / / [3,0] m2 ({x: 3}) / / [3, undefined]

When both x and y are worthless:

M1 ({}) / / [0,0]; m2 ({}) / / [undefined, undefined] M1 ({z: 3}) / / [0,0] m2 ({z: 3}) / / [undefined, undefined]

Do you see the difference? For the deconstruction assignment of M1, there is a default value of 0 for xpene y. However, the deconstruction assignment of m2 has no default value for xrecoery y.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.