@TOC 本文章没有细节目录，有需要可 Ctrl+F 搜索关键字
React&Ant Design
Class 类组件 和 函数组件 封装
//类组件
class MyClass extends React.Component {
....代码
}
MyClass = Form.create({})(MyClass);
export default MyClass
//函数组件
const myFunction =(form)=>{
...代码
}
const MyFunction = Form.create()(myFunction);
export default MyFunction
简单使用
JavaScript数组 .
// 第一个项目为0 第二个为1 以此类推
let foo = ["我是0","我是1","我是2"];
console.log(foo[1])//我是1
JS对象拼接
var obj={fName:'张三',oName:'83岁',aNmae:'没对象'};
console.log(obj.fName+'，今年'+obj.oName+'一直'+obj.aNmae);
//张三，今年83岁一直没对象
typeof 确定js变量类型
//typeof 可返回的原始类型 👇
typeof '' //string
typeof 1 //number
typeof true 或 false // boolean 布尔值
typeof [1,2,3] // object 数组即对象
//空值 未定义的 均undefined
Null
//Null是nothing 不存在的
//但是在js里面null仍被当成对象可以用typeof来验证
typeof null //“object”
//可以通过设置为 undefined 来清空对象
var a = 1; //a=1
var a = undefined //a不会为1 而未定义
undefined && Null的区别
typeof undefined // undefined
typeof null //这并不是无,而是一个没有值的对象
undefined === null //false 绝对等于下面他们的类型不一样
undefined == null //true 相对等于，他们俩都没有值
JavaScript函数，对象，事件
js函数创建及使用--简单
function myName(参数1,参数2){
//要执行的代码 比如提示框
alert('我是弹窗')
}
//调用
onClick="myName"
局部变量
//ES6语法 let 和const 均有此功能
function myName(){
var car="Audi"
//这里才能用car
}
console.log(car) // "car" is not defined
| 对象 | 属性 |
|---|---|
| 日产GTR | 涡轮增压V6发动机 |
| 双门四座跑车 | |
| 锻造合金轮毂 |
所有对象都有属性，但是每个对象的属性又不固定。 所有对象都有相同的方法，但是方法会在不同时间执行。
对象也是变量，但对象包含很多值
var car={名称:“值”,name:"object",number:"123"}
//car 它是被命名为car 用来存放值的容器
| 属性 | 属性值 |
|---|---|
| 名称 | 值 |
| name | object |
| number | 123 |
对象也可以有方法
方法是在对象上执行的动作
方法以 函数的形式 存在属性中 （匿名函数）
//parameter参数
var name ={
parameter1:"早",
parameter2:"上",
parameter:"好",
modus:function(){
return "你"+ this.a+this.b+this.c;
}
}
//调用方法里面的函数
console.log(name.modus())
this关键词----重点
在函数定义中 this引用该函数的“所有者，拥有者”
上面的例子中【简单来说this代替了name】，指的是拥有modus函数的 name对象！ 另一种说法，this.parameter1的意思就是this对象的parameter1的属性。
简单梳理对象
var person = {
a:'1'
b:'2'
//空格 折行 都是OK滴
};
//访问对象属性上面有写过
//就拿现在这个例子来
person.a // 1
//调用/访问对象函数，上面有。
//如果调用/访问对象函数没有加() 那么他将返回函数的定义，比如👇👇
c:function(){
this.a+","+this.b
}
//没加()他将返回function(){this.a+","+this.b}
最后！ 请不要把字符串、数值和布尔值声明为对象！ 如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); //把x声明为String对象
var y = new Number();//把y声明为Number对象
var z = new Boolean();//把z声明为boolean对象
常见的HTML事件(个人认为)
| 事件 | 描述 |
|---|---|
| onChange | HTML元素以被改变 |
| onClick | 用户单击了HTML元素 |
| onMouseover | 用户把鼠标移动到HTML元素上 |
| onMouseout | 用户把鼠标移开HTML |
| onkeydown | 用户按下键盘 |
| onSelect | 文本被选中 |
| onSubmit | 确认按钮被点击 |
字符串长度 if判断可用
let length='ABCD123'
console.log(length.length)// 7
字符串也可以是对象（Object）
let x = "Boys"
let y = new Name"Boys"
//typeof x string
//typeof y object
但是 x == y 因为他们的字符串是相等的
x === y 这样就不等于，因为他们俩的类型不相等
正则表达式
var str = "Visit W3School!";
var n = str.replace("W3School","123"); // Visit 123！
//search() 方法使用表达式来搜索匹配，然后返回匹配的位置。
//replace(,"修改的内容") 方法返回模式被替换处修改后的字符串。
var obj = /e/.exec("The best things in life are free!");
// true 查找e有没有
访问修改数组
let car=['a','b','c','d']
car[2]='我'
console.log(car);//[ 'a', 'b', '我', 'd' ]
for循环 遍历数组 -----重点
let car = ['Password','Apple','KuGo' ,'Work','Greed'];
for(i = 0; i < car.length; i++){
car[1];
//如果在里面打印，会导致有几个数组就输出几次
}
console.log(car);//[ 'Password', 'Apple', 'KuGo', 'Work', 'Greed' ]
//还有一种方法，不需要全局变量i
for(let i = 0; i < car.length; i++){
const element = car[i]
//只能在里面打印
console.log(element);
//Password
//Apple
//KuGo
//Work
//Greed
}
添加数组 关联数组
let fruits = ['Banana','Red','denunciation','course'];
//push()方法
fruits.push('添加')// ['Banana','Red','denunciation','course','添加']
//length 也可以，麻烦
fruits.[fruits.length]='添加'
-----------------关联数组-------------------
var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length; // person.length 返回 3
var y = person[0] // person[0] 返回 "Bill"
//上面的 3 代表有 三个数组
警告！
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[2] = "Lemon";
//2代表Apple，这时如果添加Lemon 他会把Apple替换掉！！
🍟 Flutter
Flutter介绍
没空写
随手记
主要是一些布局小技巧以及API 2022-4-18
内边距组件: 设置组件的内边距
Padding(
padding:EdgeInsets.all(n),
child:组件
)
水平组件: 子组件全都水平排列
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 水平方向的布局方式,spaceEvenly元素与元素之间,首尾元素与父容器的距离均匀分配
crossAxisAlignment: CrossAxisAlignment.center, 垂直方向布局方式
children: <Widget>[...] //Lisi<Widget>类型的容器
)
```
垂直组件:
子组件全都垂直排列
内部不能放置ListView组件
```dart | pure
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 垂直方向的布局方式,spaceEvenly元素与元素之间,首尾元素与父容器的距离均匀分配
crossAxisAlignment: CrossAxisAlignment.center, 水平方向布局方式
children: <Widget>[...] //Lisi<Widget>类型的容器
)
自适应组件: 类似flex布局中设置flex的值使得元素按占比布局
Expanded(
flex:n, 子组件占父元素的比例
child:组件
)
自适应占据控件组件Spacer() 可以用于Column等组件中,用于按照自适应组件的方式占据空间 Spacer(); 内部就是返回一个Expanded的SizedBox的空间布局 Spacer(flex:n);
圆形
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 2,
),
),
)
时间格式化
import 'package:intl/intl.dart';
DateFormat inputFormat = DateFormat("yyyy-MM-dd HH:mm:ss");
DateTime dateTime = inputFormat.parse("18-08-2019 20:59:59");
DateFormat outputFormat = DateFormat("HH:mm:ss");
String dateInString = outputFormat.format(dateTime); // 20:59:59
