# day003

**Repository Path**: yang-wanting/day003

## Basic Information

- **Project Name**: day003
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 1，react的路由用法：

######    安装：react-router-dom /react-router

   

```
render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/home">首页</Link>  
                    <Link to="/movie/">电影</Link>  
                    <Link to="/about">关于</Link>
                    <hr />
                    <Route path="/home" component={Home} ></Route><hr/>
                    <Route path="/movie" component={Movie} exact></Route><hr/>
                    <Route path="/about" component={About}></Route><hr/>
                </div>
            </HashRouter>
        );
    }
```

-  HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；

- Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
- Link表示一个路由的链接

注意事项：

react里面有包容性规则，如果需要打破这个规则，需要添加属性“exact”;

如果全部打破，则会打乱页面的整合度，所以最好使用“排他功能”，即在代码块外面使用<Switch/>,

则会整合整个页面，提升整个页面的优化性能。

#### 2，路由的传值：

通过配置路由的地址，在Link跳转时

\- Route path路径后面 /:id （key）
\- Link to 路径后面 /top/（value）

接收传值：

\- class类组件，this.props.match.params.属性名
\- 函数组件：形参.match.params.属性名

```
render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/movie/top/10">电影</Link>  
                    <hr />
                    <Route path="/movie/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }
```

在Route内置组件中，配置path地址：

```
`<Route path=``"/movie/:type/:id"` `component={Movie} exact></Route>`
```

在Link内置组件中，配置to属性，进行跳转：

```
`<Link to=``"/movie/top/10"``>电影</Link>`
```



#### 3，数据类型的判断：

JS有七种数据类型，又可以分为基本数据类型和引用数据类型，前者存放在栈中，后者存放在堆中；

基本数据类型：String,Number,Boolean,Null,Undefined,Symbol(ES6新增数据类型)；

引用数据类型：Object

##### typeof:

对于基本数据类型是起作用的，但是它对null是不起作用的，对于自定义数据类型和内置JS数据类型

是返回object的

##### constructor:

利用实例化对象的constructor属性指向构造函数自己
一般用法为 A.constructor

```js
var num = 12;
        console.log([].constructor); //Array
        console.log('string'.constructor); //string
        console.log(num.constructor); //number
        console.log(new Object().constructor); //object
```

但如果声明了一个构造函数，并且把他的原型指向改变了，这种情况下，constructor 也不能准确的判断

instanceof:

因为A instanceof B 可以判断A是不是B的实例，返回一个布尔值，由构造类型可由此判断出数据类型

```js
console.log(
    123 instanceof Number, //false
    'dsfsf' instanceof String, //false
    false instanceof Boolean, //false
    [1,2,3] instanceof Array, //true
    {a:1,b:2,c:3} instanceof Object, //true
    function(){console.log('aaa');} instanceof Function, //true
    undefined instanceof Object, //false
    null instanceof Object, //false
    new Date() instanceof Date, //true
    /^[a-zA-Z]{5,20}$/ instanceof RegExp, //true
    new Error() instanceof Error //true
)
```

还需要注意null和undefined都返回了false，这是因为它们的类型就是自己本身，并不是Object创建出来它们，所以返回了false。

**4 **toString:

所有数据类型的父类都是Object, toString为Object的原型prototype的方法，返回格式为[object xxx],其中Object对象返回的是[Object object],其他类型需通过call/apply来调用

```js
var toString = Object.prototype.toString;

toString.call(123); //"[object Number]"
toString.call('abcdef'); //"[object String]"
toString.call(true); //"[object Boolean]"
toString.call([1, 2, 3, 4]); //"[object Array]"
toString.call({name:'wenzi', age:25}); //"[object Object]"
toString.call(function(){ console.log('this is function'); }); //"[object Function]"
toString.call(undefined); //"[object Undefined]"
toString.call(null); //"[object Null]"
toString.call(new Date()); //"[object Date]"
toString.call(/^[a-zA-Z]{5,20}$/); //"[object RegExp]"
toString.call(new Error()); //"[object Error]"
```

使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。