ES6新特性之傻瓜式说明

ES6出来挺长一段时间了，但目前网上好像教程并不多也不详细。我依然遵循傻瓜式教学模式，白话文说明JavaScript和ES6的一些区别，说明下ES6的一些新特性。本文适合新手学习，大神请勿见笑，在下在此班门弄斧了。本文估计要写一段时间，晚上抽空便更新一段。
var和let的区别

var是函数作用域，let是代码块作用域

var a = 12;

if(true){

	var a = 5;

	console.log(a);

}

console.log(a);

两次都输出5，if模块里a被重新赋予值5；

let b = 12;

if(true){

	let b = 5;

	console.log(b);

}

console.log(b);

第一次输出5，第二次输出12，let是代码块作用域，代码块里重新let，不会影响代码块外面的a；

 

let解决变量提升的问题

console.log(a);		// undefined

console.log(b);		// undefined

var a = 12;

let b = 3;

这里其实会出现类似函数提升一样的效果，也就是对于 js 引擎上面的代码的执行顺序其实是先 var a，再 console.log(a)(所以会输出undefined) ,而let不会出现函数提升的效果；

 

暂时性死区

var a = 123;

if(true){

	a = 456;

	let a = 5;

	console.log(a);

}

尽管a是全局变量，但是在代码块里let了a，这个代码块便形成封闭作用域，全局变量a也会失效，这时a = 456是在let a之前操作，这时的a是未定义的，所以a = 456这个操作会报错，形成暂时性死区；

 

块级作用域

{

	let a = 5;

	console.log(a);

	{

		console.log(a);

	}

}

console.log(a);

第一第二行打印出5，第三行报错，let是代码块作用域，内部声明的函数皆不会影响到作用域的外部；

块级作用域另一个例子：

function f(){

	console.log('out');

}

(function(){

	if(true){

		function f(){

			console.log('in');

		}

	}

	f();

}());

ES6环境下输出为out，if模块下函数重定义只在块级内生效，不会影响到块级外；

 

const的用法

const a;

const a = 5;

let a = 5;

const给变量赋值后，值就不能改变，const定义赋值需同时进行，不可只定义不赋值；

const作用域和let相同，声明的常量也不提升，也存在暂时性死区；

 

const obj = {

	"name": "666"

};

Object.freeze(obj);

obj.name = 'hi';

console.log(obj);

const定义一个对象后，对象虽不能再定义，但是依然可以改变对象中的属性；

如果希望对象中的属性也不可被更改，就用对象冻结方法Object.freeze();

 

跨模块常量，读取其他js文件中的变量

同目录下constants.js中的代码为：

export const A = 123;

export const B = 'abc';

export const C = '666';

引入constants.js

import * as constants from './constants';

console.log(constants.A);	// 123

console.log(constants.B);	// abc

import {A,B} from './constants';

console.log(A);		// 123

console.log(B);		// abc

 

解构赋值，一种特殊的复制方法

let [a,b,c] = [1,2,3];

console.log(a);		// 1

let [a,[b,c],d] = [1,[3],5];

console.log(b);		// 3

let [,,c] = ['isA','isB','isC'];

console.log(c);		// isC

let [a] = 1;	// 报错，=号两边模式必须相同

let [a = 'a'] = [];		// 设置默认值

console.log(a);			// a

let [a,b = 'isB'] = ['a'];		// b设置默认值

console.log(a);		// a

console.log(b);		// isB

let [a = 'aaa',b] = [undefined,'bbb'];

console.log(a);		// aaa

console.log(b);		// bbb

let { a } = { b: 'bbb', a: 'aaa' };

console.log(a);		// aaa

let { a } = { b: "bbb", c: "ccc" };

console.log(a);		// undefined

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名；

let { b: a} = { c: 'ccc', b: 'bbb'};

console.log(a);		// bbb

let obj = { first: 'hello', second: 'world'};

let { first: f, second: s } = obj;

console.log(f);		// hello

console.log(s);		// world

真正被赋值的是后者，而不是前者；

let obj = {

	p: [

		'hello',

		{

			y: 'world'

		}

	]

};

let { p: [ x, { y } ] } = obj;

console.log(x);		// hello

console.log(y);		// world

let x;

{ x } = { x: 'xxx' };

console.log(x);		// 语法错误，{ x }会被理解成一个代码块

let x;

({ x } = { x: 'xxx' });

console.log(x);		// xxx

字符串的解构赋值

let [a,b,c,d,e] = 'hello';

console.log(a);		// h

console.log(b);		// e

console.log(c);		// l

console.log(d);		// l

console.log(e);		// o

length属性的解构赋值

let { length: len } = 'hello word';

console.log(len);	// 10

其他属性的解构赋值

let { toString: s } = 123;

console.log(isNaN(s));	// true

let { a, b } = { a: null, b: undefined };

console.log(a);		// null

console.log(b);		// undefined

函数参数解构赋值

function add([x,y]){

	return x + y;

}

console.log( add([1,2]) );	// 3

function move({ x = 0, y = 0} = {}){

	return { x, y };

}

console.log( move() );					// { x: 0, y: 0 }

console.log( move({ x: 5, y: 9}) );		// { x: 5, y: 9 }

console.log( move({ y:6 }) );			// { x: 0, y: 6 }

console.log( move({}) );				// { x: 0, y: 0 }

变换x，y值

let x = 3, y = 5;

[ x, y ] = [ y, x ];

console.log(x);		// 5

console.log(y);		// 3

解构赋值取函数返回的数组

function example(){

	return [1, 2, 3];

}

let [a, b, c] = example();

console.log(a);		// 1

console.log(b);		// 2

console.log(c);		// 3

解构赋值取函数返回的对象

function example(){

	return {

		a: 'aaa',

		b: 'bbb',

		c: 'ccc'

	}

}

var { a, b, c } = example();

console.log(a);		// aaa

console.log(b);		// bbb

console.log(c);		// ccc

其他应用

function f([x, y, z]){...}

f([1, 2, 3]);

function f({x, y, z}){...}

f({y: 1, x: 2, z: 3});

解构赋值提取json数据

var jsonData = {

	id: 1002,

	status: "ok",

	data: [

		{

			age: 23,

			name: "quuek"

		},

		{

			age: 20,

			name: "huuk"

		},

		{

			age: 18,

			name: "asut"

		}

	]

}

let { id, status, data: list } = jsonData;

console.log(id);		// 1002

console.log(status);	// ok

console.log(list);		// [{ age: 23, name: "quuek"}, ...]

 

集合遍历

let map = new Map();

map.set('first', 'hello');

map.set('second', 'world');

for(let[key, val] of map){

	console.log(key + ' is ' + val);	// first is hello    second is world

}

获取键名

for (let [key] of map) {

  // ...

}

// 获取键值

for (let [,value] of map) {

  // ...

}

 

字符串遍历器

let str = 'a1b2c3d4e5';

for(let item of str){

	console.log(item);		// a,1,b,2,c,3 ...

}

 

includes(), startsWith(), endsWith()的使用方法

let str = 'this is a string of test';

let includes = str.includes('es');

let startsWith = str.startsWith('t');

let endsWith = str.endsWith('t');

console.log(includes);

console.log(startsWith);

console.log(endsWith);

let includes2 = str.includes('es', 6);

let startsWith2 = str.startsWith('t', 3);

let endsWith2 = str.endsWith('t', 7);

console.log(includes2);

console.log(startsWith2);

console.log(endsWith2);

使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

 

repeat(n)	将原字符串重复n次

let newab = 'ab'.repeat(3);

console.log(newab);		// ababab

 

传统的JavaScript语言，输出模板通常是这样写的。

$("#result").append(

  "There are <b>" + basket.count + "</b> " +

  "items in your basket, " +

  "<em>" + basket.onSale +

  "</em> are on sale!"

);

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

let count = 5, onSale = 'qw';

document.getElementById('result').innerHTML = (`

  <p>There are <b>${count}</b> items</p>

  <div class="second-line">in your basket, <em>${onSale}</em></div>

  are on sale!

`);

普通字符串

`In JavaScript '\n' is a line-feed.`

多行字符串

`In JavaScript this is

 not legal.`

console.log(`string text line 1

string text line 2`);

字符串中嵌入变量

var name = "Bob", time = "today";

`Hello ${name}, how are you ${time}?`

上面代码中的字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$("#warning").html(`

  <h1>Watch out!</h1>

  <p>Unauthorized hockeying can result in penalties

  of up to ${maxPenalty} minutes.</p>

`);

模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {

  if (!user.hasPrivilege(action)) {

    throw new Error(

      // 传统写法为

      // 'User '

      // + user.name

      // + ' is not authorized to do '

      // + action

      // + '.'

      `User ${user.name} is not authorized to do ${action}.`);

  }

}

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

var x = 1;

var y = 2;

`${x} + ${y} = ${x + y}`

"1 + 2 = 3"
未写完，更新中......
巴特西

ES6新特性之傻瓜式说明

最新文章

热门文章
