常用到的javascript语法和函数

1.箭头函数（箭头函数参考地址）

在react中经常使用到，他可以帮助我们不用去绑定this，

例如:

class Example extends React.Component{
render(){
return(<button onClick={this.handleClick}>箭头函数免绑定this</button>)
}
}

否则，你需要<button onClick={this.handleClick.bind(this)}>一般形式函数的写法需要绑定this</button>

或者，在constructor要为this.handleClick手动指定this的指向，

class Example extends React.Component{
constructor(props){

super(props);

this.handleClick=this.handleClick.bind(this);

}
render(){
    return(
        <button onClick={this.handleClick}>箭头函数免绑定this</button>
    )
}

}

缺点：箭头函数是没有 "arguments" 的

2.import和export的使用（简单使用）

export default 和export，参考2

export和import用于JavaScript的模块化操作。

//变量、方法、类均可导出和引入

//A.js导出
export var foo1;
export function foo2(){};
export class foo3 extends React.component{};

//B.js导入
import {foo1，foo2， foo3} from 'A.js'

转载自上参考地址

            a、export default 向外暴露的成员，可以使用任意的变量来接收

　　　b、在一个模块中 ; export default 只允许向外暴露一次

　　　c、在一个模块中 ; 可以同时使用 export default 和 export 向外暴露成员

　　　d、export 暴露的成员只能使用 { } 的形式来接收，这种形式，叫做【按需导出】   

　　　e、export 可以向外暴露多个成员，同时，如果某些成员，我们在 import 的时候， 不需要，则可以 不在 { } 中定义

　　　f、使用 export 导出的成员 必须严格按照导出时候的的名称 来使用  { } 按需接收

　　　g、使用 export  导出的成员就是需要使用别的名称接收  可以用 as （bbb as aaa） 来接收

3.ES6计算属性名（参考地址）

var prefix = "user_"; //属性名的前缀，
var o = { 
 baz: function(..){ .. }, 
 [ prefix + "foo" ]: function(..){ .. }, 
 [ prefix + "bar" ]: function(..){ .. } 
 .. 
};

对象的属性由键值对构成，当对象的键名不固定的时候，也就是键的名字我们不知道的时候就可以用这个方法来，动态地给对象添加不同的属性

let a ={};
const b='height'
a[b]=170;

//以上语句等效于
a={
    height:170
}

故以后再看到下面的写法，就不要再惊讶，因为这就是对象的计算属性 

console.log({  
    todo: '',
    processing: 'blue',
    urgent: 'red',
    doing: 'gold',
  }['doing']);
//将会打印出gold

 

4.Rest 参数(剩余参数)与 Spread 操作符（参考地址）

a.Rest 参数的操作符表示为3个点

'...'。

它的意思就是“把剩余的参数都放到一个数组中。Rest 参数必须放到参数列表的末尾。

//调用
showName("Julius", "Caesar", "Consul", "Imperator");
//定义
function showName(firstName, lastName, ...titles) {
  console.log( firstName + ' ' + lastName ); // Julius Caesar

  // titles 数组中包含了剩余的参数
  // 也就是有 titles = ["Consul", "Imperator"]
  console.log( titles[0] ); // Consul
  console.log(  titles[1] ); // Imperator
  console.log( titles.length ); // 2
}

想获取所有输入的参数只能使用 arguments数组。使用如同剩余参数

b.Spread 操作符（扩展操作符）

同样也是三个点

‘...’

它会把可迭代的对象 arr “展开”为参数列表。

 

Array.form可以将可迭代对象转换为数组
在ant design pro项目中，很多地方使用扩展操作符来改变对象里的字段的值，

利用扩展运算符解构赋值，很方便，很灵活，具体可参考解构赋值

5.数组与字符串相互转换的函数（参考地址）

a数组->字符串

var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");//数组元素间用什么符号链接，可依自身需要改变。
console.log(b);//0-1-2-3-4

b.字符串->数组

const s = "abc,abcd,aaa";
let ss = s.split(",");// 在每个逗号(,)处进行分解。
console.log(ss);//[abc,abcd,aaa]

6.判断对象是否为空（参考地址）

isNull(para);

当para为null/undefined/0/NaN，函数返回true，其余都为false

7.js中'!!'的使用

!!para将参数强制转化为boolean

8.判断对象是否含有某个属性的方法(参考网址)

a.使用in关键字

let obj={x:1};
console.log("x" in obj);//true
console.log("y" in obj);//false

b.使用对象的hasOwnProperty()方法

let obj={x:1};
console.log(obj.hasOwnProperty("x"));//true
console.log(obj.hasOwnProperty("y"));//false