ES5/6新特性_Es6新特性

ES5/6新特性_Es6新特性文章目录一、ES5:1、数组尾逗号:2、严格模式:二、ES6:1、模板字符串2、块级作用域3、箭头函数4、解构赋值5、对象字面量改进6、SpreadOperator7、Promise8、函数默认参数9、模块的Import和Export10、内置对象新增API:11、新增Map集合:12、新增Set集合:13、Symbol符号一、ES5:1、数组尾逗号:[,,,].length[1,2,3,].length//支持ES5的则length为3//不支持ES5的length为4{ p

一、ES5:

1、数组尾逗号:

[,,,].length
[1, 2, 3,].length
//支持ES5的则length为3
//不支持ES5的length为4

{ 
   
	prop1: value1,
	prop2: value2,
}
只听到从架构师办公室传来架构君的声音:
客土植危根,逢春犹不死。有谁来对上联或下联?

2、严格模式:

启动严格模式:

此代码由Java架构师必看网-架构君整理
use strict; //注意:必须作为其作用范围内的第一条语句

范围:

//为<script>开启严格模式
//作用范围是整个其所在的<script>元素

//为function开启严格模式
//作用范围是整个其所在的函数

严格模式下:

  1. 变量必须先声名后赋值
  2. 不允许直接使用以0开头的八进制表示,如果要表示八进制数字,以 0o 为前缀
  3. 如果直接使用函数名调用函数,则函数体中的this为undefined。

二、ES6:

1、模板字符串

作用:拼接字符串与变量,可换行

此代码由Java架构师必看网-架构君整理
let name = 'wuxiaodi'; let res = ` hello ${ name} ! `;

2、块级作用域

let / const
特点: let/const没有声明提升,在变量定义前使用,会报错(暂存性死区)

注意点:
1.const是定义常量的,let是定义变量的。
2.const定义常量必须初始值。
3.const定义的常量如果是object或者array类型还是可以继续使用它们的方法去改变内部,但不可以给这个常量本身重新赋值。

3、箭头函数

() => {}

  • 函数表达式的简写,不需要通过function关键字创建函数,并且还可以省略return关键字。
  • 箭头函数不会绑定自己的 this,箭头函数中的this会继承当前上下文的this关键字。
  • 箭头函数不能作为构造函数使用

比如:

[1, 2, 3].map(x => x + 1);	// [2, 3, 4]

等同于:

[1, 2, 3].map((function(x) { 
   
	return x + 1;
}).bind(this));

4、解构赋值

// 对象
const user = { 
    name: 'guanguan', age: 2 };
const { 
    name, age } = user;
console.log(`${ 
     name} : ${ 
     age}`);  // guanguan : 2

// 数组
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo);  // 1

我们也可以析构传入的函数参数

const add = (state, { 
    payload }) => { 
   
	return state.concat(payload);
}

析构时还可以配 alias,让代码更具有语义。

const add = (state, { 
    payload: todo }) => { 
   
	return state.concat(todo);
};

5、对象字面量改进

这相当于解构赋值的反向操作,用于重新组织一个Object。

const name = 'wuxiaodi';
const age = 8;

const user = { 
    name, age};

定义对象方法时,还可以省去function关键字

app.model({ 
   
	reducers: { 
   
		add() { 
   }	//等同于: add: function() {}
	},
	effects: { 
   
		*addRemote() { 
   } //等同于addRemote: function*(){}
	},
});

6、Spread Operator

Spread Operator 即 3 个点 …,有几种不同的使用方法。

可用于组装数组。

const todos = ['Learn dva'];
[...todos, 'Learn antd'];	// ['Learn dva', 'Learn antd']

也可用于获取数组的部分项。

const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest;	//['b', 'c']

// With ignore
const [first, , ...rest] = arr;
rest;  // ['c']

还可收集函数参数为数组。

function directions(first, ...rest) { 
   
  console.log(rest);
}
directions('a', 'b', 'c');  // ['b', 'c'];

代替apply

function foo(x, y, z){ 
   }
const args = [1, 2, 3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

对于 Object 而言,用于组合成新的 Object 。(ES2017 stage-2 proposal)

const foo = { 
   
  a: 1,
  b: 2,
};
const bar = { 
   
  b: 3,
  c: 2,
};
const d = 4;
const ret = { 
    ...foo, ...bar, d };  // { a:1, b:3, c:2, d:4 } PS:如果有相同的key,后面的会覆盖前面的

7、Promise

Promise 用于更优雅地处理异步请求。比如发起异步请求:

fetch('/api/todos')
	.then(res => res.json())
	.then(data => ({ 
    data }))
	.catch(err => { 
   { 
    err }});

定义promise

const delay = (timeout) => { 
   
	return new Promise(resolve => { 
   
		setTimeout(resolve, timeout);
	});
};

delay(1000).then(_ => { 
   
	console.log('executed');
});

8、函数默认参数

function logActivity(activity = 'skiing') { 
   
	console.log(activity);
}
logActivity();	//skiing

9、模块的 Import 和 Export

import用于引入模块,export用于导出模块。

比如:

// 引入部分
import dva from 'dva';

// 引入部分
import { 
    connect } from 'dva';
import { 
    Link, Route } from 'dva/router';

// 引入全部并作为 github 对象
import * as github from './services/github';

// 导出默认
export default App
// 部分导出,需 import { App } from './file';引入
export class App extend Component { 
   };

10、内置对象新增API:

Array:

  • Array.from()
    返回数组,该方法可以将类数组对象转换为数组结构
  • Array.prototype.fill()
    数组的填充方法
  • Array.prototype.includes()
    判断数组是否包含某值

String:

  • String.prototype.startsWith()
    判断字符串是否以括号里的内容开头的,返回值是boolean值
  • String.prototype.endsWith()
    判断字符串是否以括号里的内容结尾,返回值是boolean值

11、新增Map集合:

作用:主要用于存储key-value键值对
创建:

let map = new Map();

API:

属性:
Map.prototype.size

方法:

Map.prototype.clear()
Map.prototype.delete(key)
Map.prototype.entries()
Map.prototype.forEach()
Map.prototype.get(key)
Map.prototype.has(key)
Map.prototype.keys()
Map.prototype.set(key, value)
Map.prototype.values()

12、新增Set集合:

作用:存储任何类型的唯一值,即集合中所保存的元素是不重复的。
创建:

let set = new Set();
let set = new Set(arrayLike)

API:

add()
delete()
clear()
forEach()
...

13、Symbol符号


关于ES6新增的全部方法可看阮一峰大佬的ECMAScript 6 入门

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/209474
0
   

发表评论