1.各种扩展方法

string

数值

函数

数组扩展

https://es6.ruanyifeng.com/#docs/array

只要有Iterator接口的对象都可以使用扩展运算符。

返回一个同样的新数组Array.from([1, 2, 3])。

对象的扩展

获取属性值：

// 方法一，通过点的方式
obj.foo = true;// 方法二，通过方括号内表达式的方式
obj['a' + 'bc'] = 123;
obj['foo']=true;

反射相关：

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

• 遍历属性

（1）for...infor...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。（2）Object.keys(obj)Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。（3）Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。（4）Object.getOwnPropertySymbols(obj)Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。（5）Reflect.ownKeys(obj)Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

解构赋值

https://es6.ruanyifeng.com/#docs/object#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC

Object.assign()等同于对象的扩展运算符：

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

链判断运算符

• 获取值：就是C#的 person?.Name?.Age
• 执行方法：func?.()等于C#执行委托时的action?.Invoke();

Null判断运算符
获取值的时候有可能是个null或者undefined，需要指定默认值。与C#的??运算符一致。用来取代旧的js||运算符，此运算符为null、undefined、false、0时都会执行。

对象的扩展方法

https://es6.ruanyifeng.com/#docs/object-methods

判断是否相等

1. ==：会进行类型转换
2. ===：不进行类型转换，但+0和-0是相等的，NaN不等于Nan，即：

+0 === -0 //true
NaN === NaN // false

3. Object.is(a,b):不进行类型转换,但+0和-0是不相等的，NaN等于NaN。

Object.assign应用数组时：

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

Object.assgin用来：

1. 为对象添加属性
2. 为对象添加方法
3. 克隆对象
4. 合并多个对象
5. 为属性指定默认值

2.Set和Map

Set

可以被new，就是array的不重复版本，里面的项都是不重复的。

Map

可以被new，相当于C#的Dictionary，有size，has，get，set，delete，clear等方法。

3.export和import

EXPORT：可以导出变量、方法和类。

下面两种写法一样

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;export { firstName, lastName, year };

export出去的是对变量或方法的引用，不能是变量或者方法的值：

//错误 export是一个具体的值
export 1;// 报错 export是一个具体的值
var m = 1;
export m;//以下正确
export var m = 1;
var m = 1;
export {m};
var n = 1;
export {n as m};

export default：本质上，就是输出一个叫做default的变量或方法。一个模块只能有export default，但可以有多个其他export。

export default也可以用来输出类

// MyClass.js
export default class { ... }// main.js
import MyClass from 'MyClass';
let o = new MyClass();

export导出组件的几种方式：

1. 传统写法：

class ClickCounter extends Componment{constructor(props){super(props);this.onClickButton=this.onClickButton.bind(this);this.state={counter:0};}onClickButton(){this.setState({counter:this.state.counter+1);};render(){return()}
}
export defalut ClickCounter;

2. 无状态组件（所有数据都来自props）的简写，React支持只用一个函数代表的无状态组件。

function Counter(props)
{const {a,b,c}=props;return({a}{b})
}
export default Counter;

3. 无状态组件的解构写法：

function Counter({a,b,c})
{return(<div>{a}{b}</div>)
}
export default Counter;

4. react-redux的无状态写法：

cosnt TodoList=({variableA,methodB,methodC})=>{return();
};
const mapState=state=>{return {variableA:state.AA,}
};
const mapMethod=dispatch=>{return{methodB:id=>dispatch(meA(id)),methodC:id=>dispatch(meB(id))}
}
export default connect(mapState,mapMethod)(TodoList);

IMPORT

import命令是编译时加载，所以没法做到动态加载（C#的Assembly.Load）,所以就有了import()方法。

import { area, circumference } from './circle';//加载部分
import * as circle from './circle';//加载全部

import的时候的名字因为必须要和export的名字对应上才行，所以不是很方便，就产生了export default命令。可以随便起名字了，但是需要把大括号取消掉。

export default function () {console.log('foo');
}
import customName from './export-default';//可以随便起名字，没有大括号
customName(); // '

3.编程风格

https://es6.ruanyifeng.com/#docs/style

• 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。
• 优先使用解构赋值
• 不要给对象追加属性，实在必要，使用Object.assign
• 使用扩展运算符（…）拷贝数组
• 简单的、单行的、不会复用的函数，建议采用箭头函数
• 不要在函数体内使用 arguments 变量，使用 rest 运算符（…）代替

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！