Javascript常用笔记(不定时更新)

1,关于两个!!a的用法
在Antd的checkbox group里面有用,判断indeterminate的状态的地方
!!a是一个布尔值,代表a有内容,即a不为null,不为undefined,不为空字符串

1
2
3
4
5
    var array1=[1,2,3];
    var array2=[];

    !!array1.length;//true
    !!array2.length;//false

2,Spread运算符(…)

用法1:用于构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var arr1 = [1,3,5];
    var arr2 = [2,4,6];

    […arr1,…arr2]  //输出[1,3,5,2,4,6]

    //第二个例子
    var o2 = {
        age:22,
        address:'中国北京',
    }
   
    var o1={
        name:'张三',
        ...o2,
    }
    console.log(o1);//得到一个属性都有的对象

用法2:用于调用函数时,将一个数组用作函数的参数,(就是把这个数组转化为参数的列表)

1
2
3
4
5
6
    function testFunc(x,y,z){
        return x+y+z;
    }

    var args = [1,2,3];
    testFunc(…args);  //输出6

用法3,(不知道是不是应该叫用法3)
属性前面的三个点(…props),是延展操作符。 在React中,延展操作符一般用于属性的批量赋值。比如

1
2
3
4
5
6
7
8
9
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;
    //等同于
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component foo={x} bar={y} />;

使用延展操作符的好处是,当你的属性有所增加的时候,组件中的使用不需要去增加对应的属性。

3,filter函数,
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

1
2
3
4
5
6
7
    var ages = [32,33,16,40];

    function checkAdult(age){
          return age >= 18;
    }

    ages.filter(checkAdult);//[32,33,40]

4,Array(46).keys()迭代器
这个不太懂,比如得到一个数组,元素是数字[0,1,2,3,……,45]
就是用下面这个方法

1
2
3
4
    var it = Array(46).keys();//这是一个迭代器对象,具体是啥我也不造,目前看到过的都是...它 当参数用,从零到四十五
    var arr1 = [];
    arr1 = [...it];
    document.getElementById("demo3").innerHTML=arr1;//输出0,1,2,3,4,5,.....,45

5, var a = a || {}
是给a赋默认值的一种写法。
如果a已经赋值了,这 a 为真 a || {} 返回 a,即a还是原来的值。
如果a为假 a || {} 返回 {},就为a赋值为{} 了。

6,Object.assign(target,source)复制

1
2
3
4
5
6
7
8
9
10
    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };

    const returnedTarget = Object.assign(target, source);

    console.log(target);
    // expected output: Object { a: 1, b: 4, c: 5 }

    console.log(returnedTarget);
    // expected output: Object { a: 1, b: 4, c: 5 }

Antd受控组件-以Table组件为例

//详细信息直接看以下代码中的注释内容。
//就是一个组件里面要告诉外面发生事件的时候要setState的属性
//外面要告诉里面组件的状态是看state里面的属性
//https://ant.design/components/table-cn/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, { Component } from 'react';  
import { Table, Button } from 'antd';
import './TableTest4.css';

const columns = [
    {
        title:'Name',
        dataIndex:'name',
    },
    {
        title:'Age',
        dataIndex:'age',
    },
    {
        title:'Address',
        dataIndex:'address',
    },
];

const data =[];
for(let i=0;i<46;++i){
    data.push({
        key:i,
        name:`特仑苏${i}`,
        age:32,
        address:`London,Park Lane no.${i}`,
    });
}

export default class TableTest4 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys:[],
            loading : false,
            //hasSelected : selectedRowKeys.length > 0,//React里面是不能state里面的状态互相联动的
            //一个组件里面是不能这么写的
        }
    }

    componentDidMount() {
    }

    start = () => {
        this.setState({loading:true});
        //ajax request
        setTimeout(()=>{
            this.setState(
                {
                    selectedRowKeys:[],
                    loading:false,
                }
            );
        }
        ,1000);

    }

    onSelectChange = (selectedRowKeys,selectedRows) =>{
        console.log('selectedRowKeys changed',selectedRowKeys);
        console.log('selectedRows',selectedRows);
        this.setState({selectedRowKeys})
    }

    render() {
        const hasSelected = this.state.selectedRowKeys.length>0;
        const rowSelection = {
            selectedRowKeys:this.state.selectedRowKeys,//外面告诉里面是看state的状态
            onChange:this.onSelectChange,//里面告诉外面变化的时候应该怎么触发事件
        }

        return (
            <div>
                <p>TableTest4</p>
                <div style={{marginBottom:16}}>
                    <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={this.loading}>
                        Reload
                    </Button>
                    <span style={{marginLeft:8}}>
                        {hasSelected?`Selected ${this.state.selectedRowKeys.length} items`:''}
                    </span>
                </div>                
                <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
            </div>                
        );
    }
}