js函数的几种参数形式

1、默认参数

ES6 默认参数特性允许使用默认值初始化参数。这种比上面介绍的方法更好、更简洁。

// An highlighted block
function parameter(param1, param2 = 0) {
  console.log(param2); // => 0
  return param1 + param2;
}

parameter(1);            // => 1
parameter(1, undefined); // => 1

2、解构参数

在JS函数参数中,咱特别喜欢的是解构的特性。可以将内联参数的对象或数组进行解构。这个特性使得从参数对象中提取一些属性非常有用

function parameter({ name }) {
  return `Hello, ${name}!`;
}

const person = { name: '鸡腿' };
greet(person); // => 'Hello, 鸡腿'

{ name }是应用于对象解构的参数。

当然也可以结合默认参数:

function greetWithDefault({ name = '无名氏' } = {}) {
  return `Hello, ${name}!`;
}

greetWithDefault(); // => 'Hello, 无名氏!'

3、arguments 对象

JS 函数的另一个很好的特性是能够用可变参数调用同一个函数。这样可以使用 arguments 对象来获取传入的所有参数。

arguments对象是所有(非箭头) 函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。

例如,对函数的参数求和:

function argumentsSum() {
  console.log(arguments); // { 0: 5, 1: 6, length: 2 }
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

argumentsSum(5, 6); // => 11

arguments 是一个对应于传递给函数的参数的类数组对象。

有个问题是,每个函数作用域都定义了自己的arguments对象。因此,可能需要一个额外的变量来访问外部函数作用域arguments:

function outerFunction() {
  const outerArguments = arguments;
  return function innerFunction() {
    // outFunction arguments
    outerArguments[0];
  };
}

4、剩余参数

function sum(...numbers) {
  console.log(numbers); // [5, 6]
  return numbers.reduce((sum, number) => sum + number);
}

sum(5, 6); // => 11

…numbers是一个剩余参数,它将成为一个由剩余参数组成的真数组[5,6]。由于numbers 是一个数组,所以就可以使用数组自有方法reduce(与类数组对象的参数相反)。

如果不想在剩余参数中收集所有参数,则可以组合常规参数和剩余参数。

function multiplyAndSumArgs(multiplier, ...numbers) {
  console.log(multiplier); // 2
  console.log(numbers);    // [5, 6]
  const sumArgs = numbers.reduce((sum, number) => sum + number);
  return multiplier * sumArgs;
}

multiplyAndSumArgs(2, 5, 6); // => 22

multiplier 是一个常规参数,它获取第一个参数的值。然后剩下的参数…numbers 接收剩余的参数。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React是一个非常流行的前端库,常用于开发单页应用程序(SPA)。在SPA中,路由是非常重要的,因为它允许我们在不刷新页面的情况下切换页面视图。在React中,我们可以使用React Router来实现路由功能。React Router是一个独立的库,可以与React一起使用。 在React中,我们可以使用函数组件或类组件来定义我们的路由。这里我们将讨论函数组件路由配置的几种方法以及路由传参的几种方法。然后,我们将看看如何使用类组件来获取路由参数。 ## 函数组件路由配置的几种方法 ### 方法1:使用React Router的`<Route>`组件 React Router提供了一个`<Route>`组件,我们可以用它来定义我们的路由。下面是一个例子: ```javascript import { BrowserRouter as Router, Route } from 'react-router-dom' function App() { return ( <Router> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Router> ) } ``` 在上面的代码中,我们首先导入了`BrowserRouter`和`Route`组件。然后,我们在`<Router>`组件中定义了三个路由,分别是`"/"`,`"/about"`和`"/contact"`。每个路由都有一个对应的组件,当用户访问该路由时,将呈现该组件。 ### 方法2:使用React Router的`<Switch>`组件 如果我们使用上面的方法定义路由,当我们访问`"/about"`时,React将同时呈现`"/"`和`"/about"`,因为它们都匹配了路径。要解决这个问题,我们可以使用`<Switch>`组件。`<Switch>`组件只会呈现第一个匹配的路由,其余的路由都将被忽略。下面是一个例子: ```javascript import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ) } ``` 在上面的代码中,我们用`<Switch>`组件替换了`<Router>`组件。现在,当我们访问`"/about"`时,只有`"/about"`路由匹配,因此只会呈现`About`组件。 ### 方法3:使用React Router Hooks React Router还提供了一些Hooks,例如`useHistory`,`useLocation`和`useParams`。这些Hooks允许我们在函数组件中访问路由信息。下面是一个例子: ```javascript import { BrowserRouter as Router, Switch, Route, Link, useHistory, useLocation, useParams } from 'react-router-dom'; function App() { return ( <Router> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ); } function About() { const history = useHistory(); const location = useLocation(); const params = useParams(); return ( <div> <h2>About</h2> <p>当前路径:{location.pathname}</p> <p>查询参数:{JSON.stringify(location.search)}</p> <p>路由参数:{JSON.stringify(params)}</p> <button onClick={() => history.goBack()}>返回</button> </div> ); } ``` 在上面的代码中,我们定义了一个`About`组件,并使用`useHistory`,`useLocation`和`useParams` Hooks来访问路由信息。`useHistory` Hook允许我们访问`history`对象,它包含有关浏览器历史记录的信息,例如前进,后退和推送新条目。`useLocation` Hook允许我们访问`location`对象,它包含有关当前URL的信息,例如路径和查询参数。`useParams` Hook允许我们访问路由参数。 ## 路由传参的几种方法 ### 方法1:使用URL参数 使用URL参数是一种常见的路由传参方法。我们可以在URL中包含参数,然后在组件中使用路由参数来访问它们。下面是一个例子: ```javascript import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom'; function App() { return ( <Router> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/about/:name" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ); } function About() { const { name } = useParams(); return ( <div> <h2>About {name}</h2> </div> ); } ``` 在上面的代码中,我们在路由路径中包含了一个参数`:name`。当用户访问`/about/john`时,我们可以使用`useParams` Hook来访问`name`参数。 ### 方法2:使用查询参数 使用查询参数是另一种常见的路由传参方法。我们可以在URL中包含查询参数,然后在组件中使用`useLocation` Hook来访问它们。下面是一个例子: ```javascript import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom'; function App() { return ( <Router> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to={{ pathname: '/about', search: '?name=john' }}>About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ); } function About() { const location = useLocation(); const params = new URLSearchParams(location.search); const name = params.get('name'); return ( <div> <h2>About {name}</h2> </div> ); } ``` 在上面的代码中,我们在`<Link>`组件中使用了一个对象来设置查询参数。然后,在`About`组件中,我们使用`useLocation` Hook来访问`location`对象,然后使用`URLSearchParams`来解析查询参数。 ### 方法3:使用状态 使用状态是一种更高级的路由传参方法。我们可以在一个组件中设置状态,然后将该状态作为参数传递给另一个组件。下面是一个例子: ```javascript import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function App() { return ( <Router> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ); } function About(props) { const [name, setName] = useState(''); return ( <div> <h2>About {name}</h2> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <button onClick={() => props.history.push(`/about/${name}`)}>提交</button> </div> ); } ``` 在上面的代码中,我们在`About`组件中设置了一个状态`name`,并将其作为参数传递给另一个组件。然后,我们使用`useState` Hook来设置和更新该状态。当用户点击提交按钮时,我们使用`props.history.push`方法将状态传递给另一个组件。 ## 用类组件获取路由参数 除了使用函数组件,我们还可以使用类组件来定义我们的路由。下面是一个例子: ```javascript import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; class App extends Component { render() { return ( <Router> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about/john">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/about/:name" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ); } } class About extends Component { render() { const { match } = this.props; const { name } = match.params; return ( <div> <h2>About {name}</h2> </div> ); } } ``` 在上面的代码中,我们使用类组件定义了我们的路由。当用户访问`/about/john`时,我们可以使用`match.params`来访问路由参数

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值