1.各种扩展方法

string

ES写法

C#

说明

​​for (let chr of 'foo')​​

​​toArray​​

遍历字符

​​let msg = "Hello, ${place}"​​

​​$"hello,{place}"​​

模板字符串

s.includes()

contains

是否包含

s.startWith()

startWith

s.endWith()

endWith

s.repeat(3)

将s重复三遍输出

s.padStart/s.padEnd

同

字符串补全

s.trim()/s.trimStart/s.trimEnd

同

消除空格

s.matchAll()

Regex

正则匹配

s.replace()

s.search()

s.spilt()

数值

ES

C#

说明

Number.isFinite()

Int.MaxValue…

是否极数

Number.isNaN()

。。

Number.parseInt()

Number.parseFloat()

Number.isInteger()

Math.trunc()

除去小数部分，非四舍五入

Math.sign()

判断大于0小于0等于0，会自动类型转换

Math.cbrt()

立方根

Math.max()

最大值

2 ** 3

指数运算，结果是8

1234n

bigint类型

BigInt(123) BigInt(‘123’)

转为bigint

函数

ES

C#

说明

.length

返回函数入参的个数，不包含有默认值的参数

rest参数

params

格式为：(…values)。values接收到的就是一个数组

.name

获取函数名

数组扩展

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

ES

C#

说明

扩展运算符（…）

将一个数组（字符串）转为用逗号分隔的参数序列，相当于展开数组

arr.push()

list.Add()

arr.contact()

list.AddRange()

合并数组

arr.find()/arr.findIndex()

同

查找

arr.fill()

填充数组

arr.keys()–arr.values()–arr.entries()

用于遍历key，value，kv对

arr.includes()

contains

数组是否包含某个值

arr.flat(Infinity)

拉平数组，例如原数组里有数组

arr.flatMap(action)

先对数组每一项执行一个委托，然后再flat

arr.sort()

OrderBy()

arr.forEach()

ForEach()

arr.filter()

Where()/Find()

arr.every()

Every()

arr.some()

Any()/Exist()

arr.join()

Join

arr.reduce

归纳函数，对每一项执行一个委托，并把委托的结果作为参数传给下一个委托

arr.map

Select

对每一项执行一个委托，然后返回一个新的数组

Array.from()

将一个类似数组或可遍历的对象，转为真正的数组

Array.of(3, 11, 8)

将一组值转为数组，替代Array()或new 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...in

for...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

判断是否相等


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

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

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

ES

C#

说明

Object.is(a,b)

==

判断a b是否相等

Object.assign(target,source1,source2)

将source对象的所有可枚举属性（不包括继承属性），赋值到target上。是浅拷贝

Object.getOwnPropertyDescriptors()

返回所有属性（非继承属性）的描述对象，为了解决assign无法拷贝get set的问题

Object.getOwnPropertyDescriptor()

返回指定的某个属性的描述对象

Object.setPrototypeOf()

Object.getPrototypeOf()

Object.keys()，Object.values()，Object.entries()

同arr的一致

Object.fromEntries()

是entries的逆操作，用于将键值数组转为对象

Object.assign应用数组时：

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

Object.assgin用来：


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

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(
            <div></div>
        )
    }
}
export defalut ClickCounter;

  1. 无状态组件（所有数据都来自props）的简写，React支持只用一个函数代表的无状态组件。
function Counter(props)
{
    const {a,b,c}=props;
    return(
        <div>{a}{b}</div>
    )
}
export default Counter;

  1. 无状态组件的解构写法：
function Counter({a,b,c})
{
    return(
        <div>{a}{b}</div>
    )
}
export default Counter;
  1. react-redux的无状态写法：
cosnt TodoList=({variableA,methodB,methodC})=>{
    return(<div></div>);
};
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 运算符（…）代替