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和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