JS传参技巧总结

Dear 丶 2022-03-25 15:08 202阅读 0赞

## **1.隐式创建 html 标签** ##

这种方法一般配合ajax，上面的value使用了模板引擎

## **2.window\['data'\]** ##

window['name'] = "the window object";

## **3.使用localStorage，cookie等存储** ##

window.localStorage.setItem("name", "xiaoyueyue");
    window.localStorage.getItem("name")

**特点：**

1、localStorage 是持久存储，不主动删除 一直存在 sessionStorage 是临时存储,关闭浏览器数据就没了

2、localStorage 可以多窗口共享 sessionStorage 不能多窗口共享数据

## **4.获取地址栏方法** ##

**自己封装的方法**

**正则表达式方法**

function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
    }

## **5.标签绑定函数传参** ##

<button id="test1" onclick="alert(id)">test1</button>
     
    
    <button id="test" name="123" yue="xiaoyueyue" friend="heizi" onclick="console.log(this.getAttribute('yue'),this.getAttribute('friend'))">test</button>

### **this拓展** ###

使用this传参，在使用art-template中琢磨出来的，再也不用只传递一个id拼接成好几个参数了！happy！

var box = document.createElement("div");
    box.innerHTML = "<button id='1' data-name='xiaoyueyue' data-age='25' data-friend='heizi' onclick='alertInfo(this)'>点击</button>";
    document.body.appendChild(box);
    
    // name,age,friend
    function alertInfo(val) {
      console.log(val);
      alert('大家好,我是' + val.dataset.name + ', 我今年' + val.dataset.age + '岁了，我的好朋友是' + val.dataset.friend + ' !')
    
    }

### **event** ###

既然可以使用this，那么在事件当中event.target方法也是可以的：

根据 class 获取当前的索引值，参数可以为 event对象

## **6.HTML5 data-\* 自定义属性** ##

var btn = document.querySelector("button")
        btn.onclick = function () {
          alert(this.dataset.name)
        }

## **7.字符串传参** ##

### **单个参数** ###

var name = 'xiaoyueyue',
      age = 25;
    
    var box = document.createElement("div");
    box.innerHTML = '<button onclick="alertInfo(\'' + name + '\')">点击</button>';
    document.body.appendChild(box);
    
    
    // name, age
    function alertInfo(name, age, home, friend) {
      alert("我是" + name)
    }

### **多参传递** ###

var name = 'xiaoyueyue',
      age = '25',
      home = 'shanxi',
      friend = 'heizi';
    
    var params = """ + name + "","" + age + "","" + home + "","" + friend + """;
    var box = document.createElement("div");
    box.innerHTML = "<button onclick='alertInfo(" + params + ")'>点击</button>";
    document.body.appendChild(box);
    
    
    // name, age,home,friend
    function alertInfo(name, age, home, friend) {
      alert("我是" + name + ',' + "我今年" + age + "岁了！")
    }

### **复杂传参** ###

## **8.arguments** ##

arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。它是一个类数组的对象。

function fenpei() {
        var args = Array.prototype.slice.call(arguments);
        alert("我是" + args[2] + "油品，数量为 " + args[1] + " 吨， id为 " + args[0])
    
    }