当前位置：首页 > article >正文

函数扩展【ES6】

article 2025/3/9 4:44:33

战胜恐惧的最好办法就是直接面对它！！！

函数参数默认值：

函数写法：

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

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

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

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

rest参数（剩余参数）：

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

name属性：

获取属性的名字

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

箭头函数：写法简洁

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

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

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

应用实例：

let arr = ['aaa', 'bbb', 'ccc'];
// 普通函数写法
let newArr = arr.map(function (item) {
      return `<li>${item}</li>`
    })
// 箭头函数写法
let newArr1 = arr.map((item) => {
      return `<li>${item}</li>`
    })
// 箭头函数写法简化版：
let newArr2 = arr.map((item) => `<li>${item}</li>`)
console.log(newArr); //['<li>aaa</li>', '<li>bbb</li>', '<li>ccc</li>']
console.log(newArr1);//['<li>aaa</li>', '<li>bbb</li>', '<li>ccc</li>']
console.log(newArr2);//['<li>aaa</li>', '<li>bbb</li>', '<li>ccc</li>']

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

// 简化前
let test1 = () => {
      return {
        name: 'kitty',
        age: 100
      }
    }
// 简化后
let test2 = () => ({
      name: 'kitty',
      age: 100
    })
console.log(test1());// {name: 'kitty', age: 100}
console.log(test2());// {name: 'kitty', age: 100}

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

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

无法访问arguments，无法new：

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

let test = () => {

    }
new test() // test is not a constructor

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

 模糊搜索：
  <input type="text" id="mysearch">
  <script>
    let osearch = document.querySelector('#mysearch');

    osearch.oninput = function () {
      let _this = this;
      setTimeout(function () {
        console.log(this); // 指向window
        console.log(_this); // 指向 <input type="text" id="mysearch">
        console.log(`发送${this.value}到后端，获取列表数据`); // 这里的this.value是undefined
        console.log(`发送${_this.value}到后端，获取列表数据`); // 这里的this.value是输入框输入的值
      }, 1000)
    }
    </script>

在这里插入图片描述
箭头函数没有自己的this，在箭头函数中的 this 绑定是静态的，取决于函数被定义的位置，而不是调用的位置。【即指向父元素】

模糊搜索：
  <input type="text" id="mysearch">
  <script>
    let osearch = document.querySelector('#mysearch');

    osearch.oninput = function () {
      setTimeout(() => {
        console.log(this); // 指向 <input type="text" id="mysearch">
        console.log(`发送${this.value}到后端，获取列表数据`); // 这里的this.value是输入框输入的值
      }, 1000)
    }
   </script>