函数扩展【ES6】

战胜恐惊的最好办法就是直接面对它！！！
  
  
函数参数默认值：

函数写法：

1. function ajax (url, method, async) { // 三个形参
2.       console.log(url, method, async); // /aaa get true
3.     }
4. ajax('/aaa', "get", true) // 三个实参

复制代码

但是我不想每次都传 method 和async这两个参数，有没有默认值呀。。。 有的！可以设置默认值，假如不传入该参数就走默认值。假如传入就覆盖，打印传入的值。

1. function ajax (url, method = "get", async = true) { // 三个形参
2.       console.log(url, method, async); // /bbb get true
3.     }
4. ajax('/bbb')

复制代码

1. function ajax (url, method = "get", async = true) {
2.       console.log(url, method, async); // /ccc post true
3.     }
4. ajax('/ccc', "post")

复制代码

rest参数（剩余参数）：

1. function test (x, y, ...data) {
2.       // 第一种方法拿到剩余参数
3.       console.log(Array.from(arguments).slice(2)); // [3, 4, 5]
4.       // 第二种方法拿到剩余参数
5.       console.log(data);// [3, 4, 5]
6.     }
7. test(1, 2, 3, 4, 5)

复制代码

name属性：

获取属性的名字

1. function test1 () { }
2. console.log(test1.name); // test1

复制代码

箭头函数：写法简便

1. // 普通函数的写法
2. let test = function () { }
3. // 箭头函数的写法
4. let tets1 = () => { }

复制代码

假如在箭头函数的大括号里没有其他的逻辑/代码 return和大括号都可以省略【即 函数里只有return的时候】：

1. let test = () => { return 11111; }
2. let test1 = () => 11111;
3. console.log(test()); //11111
4. console.log(test1()); //11111

复制代码

应用实例：

1. let arr = ['aaa', 'bbb', 'ccc'];
2. // 普通函数写法
3. let newArr = arr.map(function (item) {
4.       return `<li>${item}</li>`
5.     })
6. // 箭头函数写法
7. let newArr1 = arr.map((item) => {
8.       return `<li>${item}</li>`
9.     })
10. // 箭头函数写法简化版：
11. let newArr2 = arr.map((item) => `<li>${item}</li>`)
12. console.log(newArr); //['<li>aaa</li>', '<li>bbb</li>', '<li>ccc</li>']
13. console.log(newArr1);//['<li>aaa</li>', '<li>bbb</li>', '<li>ccc</li>']
14. console.log(newArr2);//['<li>aaa</li>', '<li>bbb</li>', '<li>ccc</li>']

复制代码

返回对象的时候必要留意：假如只有return想省略掉return和大括号的时候要给原对象的花括号{}外添加一个括号() 代表我们是一个对象是一体的。

1. // 简化前
2. let test1 = () => {
3.       return {
4.         name: 'kitty',
5.         age: 100
6.       }
7.     }
8. // 简化后
9. let test2 = () => ({
10.       name: 'kitty',
11.       age: 100
12.     })
13. console.log(test1());// {name: 'kitty', age: 100}
14. console.log(test2());// {name: 'kitty', age: 100}

复制代码

假如只有一个参数，可以省略小括号：

1. let arr = ['aaa', 'bbb', 'ccc'];
2. // 省略()前
3. let newArr = arr.map((item) => `<li>${item}</li>`)  
4. // 省略()后
5. let newArr1 = arr.map(item => `<li>${item}</li>`)
6. // 有大于一个的参数的时候需要加小括号
7. let newArr3 = arr.map((item, index) => `<li>${item}-${index}</li>`)

复制代码

无法访问arguments，无法new：

1. let test = () => {
2.       console.log(arguments); // es6.html:18 Uncaught ReferenceError: arguments is not defined
3.     }
4. test(1, 2, 3)

复制代码

1. let test = () => {
3.     }
4. new test() // test is not a constructor

复制代码

箭头函数没有自己的this ，this指向父作用域：
普通函数的写法：在普通函数中this指向，谁调用指向谁。

1. 模糊搜索：
2.   <input type="text" id="mysearch">
3.   <script>
4.     let osearch = document.querySelector('#mysearch');
6.     osearch.oninput = function () {
7.       let _this = this;
8.       setTimeout(function () {
9.         console.log(this); // 指向window
10.         console.log(_this); // 指向 <input type="text" id="mysearch">
11.         console.log(`发送${this.value}到后端，获取列表数据`); // 这里的this.value是undefined
12.         console.log(`发送${_this.value}到后端，获取列表数据`); // 这里的this.value是输入框输入的值
13.       }, 1000)
14.     }
15.     </script>

复制代码

箭头函数没有自己的this，在箭头函数中的 this 绑定是静态的，取决于函数被界说的位置，而不是调用的位置。【即指向父元素】

1. 模糊搜索：
2.   <input type="text" id="mysearch">
3.   <script>
4.     let osearch = document.querySelector('#mysearch');
6.     osearch.oninput = function () {
7.       setTimeout(() => {
8.         console.log(this); // 指向 <input type="text" id="mysearch">
9.         console.log(`发送${this.value}到后端，获取列表数据`); // 这里的this.value是输入框输入的值
10.       }, 1000)
11.     }
12.    </script>

复制代码

对于传统的事件绑定照旧发起各人用普通函数的写法，这里this谁调用我我指向谁！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。