2020-07-24

class创建和函数创建的组件区别

• 两个的props都是只读的不能直接改
• 使用class创建的组件有自己的私有数据和生命周期函数，而用函数创建的组件只有props属性，没有私有数据且没有自己的生命周期函数

有状态组件和无状态组件

• 用class创建出来的组件叫做“有状态组件”，而用函数构造创建的组件叫做“无状态组件”。
• 有状态组件与无状态组件的本质区别就是：有无state属性，有无生命周期函数。
• 如果一个组件需要有自己的私有数据则推荐使用class创建的有状态组件反之则用函数创建。

组件中props与state的区别

• props中的数据都是外界传过来的；
• state中的数据都是组件私有的；（一般通过ajax获取的数据都是私有数据）
• props中的数据都是只读的，不能重新赋值
• state 中的数据都是可读可写的

展开运算符...

合并数组

let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b]; // [1,2,3,4,5,6]

替代apply

function f(a,b,c){
  console.log(a,b,c)
}
let args = [1,2,3];
// 以下三种方法结果相同
f.apply(null,args)
f(...args)
f(1,2,3)

function f2(...args){
  console.log(args)
}
f2(1,2,3) // [1,2,3]

function f3(){
  console.log(Array.from(arguments))
}
f3(1,2,3) // [1,2,3]

Array.from() 可以通过以下方式来创建数组对象：

• 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
• 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

let a = [1,2,3];
let b = [4,5,6];

Array.prototype.push.apply(a,b);
// 或
a.push(...b)
// 两种方法取其一

解构赋值

let a = [1,2,3,4,5,6]
let [c,...d] = a
console.log(c); // 1
console.log(d); // [2,3,4,5,6]
//展开运算符必须放在最后一位

字符串转为数组,正确识别 32 位的 Unicode 字符

[...'siva'] // ['s','i','v','a']
[...'x\uD83D\uDE80y'].length // 3

具有 Iterator 接口的对象,转换成数组

var nodelist = document.querySelectorAll('div');
console.log([...nodelist]) // 转化成数组

var map = new Map([[1,11],[2,22],[3,33]]);
console.log([...map.keys()]); // [1,2,3]

浅拷贝

//数组
var a = [1,2,4]
var b = [...a]
a.push(6)
console.log(b) // [1,2,4]

//对象
var a = {a:1}
var b = {...a}
a.a = 5
console.log(b.a) // 1

摘自https://www.jianshu.com/p/3935a80342a0