자바스크립트에서 매개변수를 전달하는 방법-JS 튜토리얼-php.cn

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에서 매개변수를 전달하는 방법은 무엇인가요?

1. 암시적으로 html 태그 생성

<input type="hidden" name="tc_id" value="{{tc_id}}">

로그인 후 복사

이 방법은 일반적으로 ajax에서 사용됩니다. 위의 값은 템플릿 엔진

2.window['data']

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

로그인 후 복사

3을 사용합니다. . localStorage, 쿠키 등을 사용하여

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

로그인 후 복사

Features: cookie, localStorage, sessionStorage, indexDB

Features	cookie	localStorage	sessionStorage	indexDB
데이터 수명주기	일반적으로 서버 생성에 의해 결정되며 만료 시간을 설정할 수 있습니다	청소하지 않으면 항상 존재합니다	페이지를 닫으면 지워집니다	청소되지 않으면 항상 존재합니다
데이터 저장 size	4K	5M	5M	Unlimited
서버와 통신	매번 헤더에 실리게 되어 요청 성능에 영향을 줍니다	참여하지 않습니다	참여하지 않습니다	참여하지 않습니다

위 표에서 볼 수 있듯이 쿠키는 더 이상 저장을 권장하지 않습니다. 대용량 데이터 저장 요구사항이 없다면 <code>localStorage 및 sessionStorage를 사용할 수 있습니다. 많이 변경되지 않는 데이터의 경우 localStorage를 사용하여 저장해 보세요. 그렇지 않으면 sessionStorage를 사용하여 저장할 수 있습니다. cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。

注意点:存储object类型数据，此深拷贝方法会忽略掉函数和 undefined

var obj = {
  type: undefined,
  text: "xiaoyueyue",
  methord: function() {
    alert("I am an methord");
  }
};

localStorage.setItem("data", JSON.stringify(obj));
console.log(JSON.parse(localStorage.getItem("data"))); // {text: "xiaoyueyue"}

로그인 후 복사

4.获取地址栏方法

自己封装的方法

function parseParam(url) {
  var paramArr = decodeURI(url)
      .split("?")[1]
      .split("&"),
    obj = {};
  for (var i = 0; i < paramArr.length; i++) {
    var item = paramArr[i];
    if (item.indexOf("=") != -1) {
      var tmp = item.split("=");
      obj[tmp[0]] = tmp[1];
    } else {
      obj[item] = true;
    }
  }
  return obj;
}

로그인 후 복사

2.正则表达式方法

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.标签绑定函数传参

<!--base-->
<button id="test1" onclick="alert(id)">test1</button>

<!--高级-->
<button
  id="test"
  name="123"
  yue="xiaoyueyue"
  friend="heizi"
  onclick="console.log(this.getAttribute(&#39;yue&#39;),this.getAttribute(&#39;friend&#39;))"
>
  test
</button>

로그인 후 복사

this 拓展

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

var box = document.createElement("p");
box.innerHTML =
  "<button id=&#39;1&#39; data-name=&#39;xiaoyueyue&#39; data-age=&#39;25&#39; data-friend=&#39;heizi&#39; onclick=&#39;alertInfo(this.dataset)&#39;>点击</button>";
document.body.appendChild(box);

// name,age,friend
function alertInfo(data) {
  alert(
    "大家好,我是" +
      data.name +
      ", 我今年" +
      data.age +
      "岁了，我的好朋友是" +
      data.friend +
      " !"
  );
}

로그인 후 복사

这里需要注意一点：存储的 data—含有大写的单词 =》这里会统一转化为小写，比如：data-orderId = “2a34fb64a13211e8a0f00050568b2fdd”，在实际取值的时候为this.dataset.orderid;

event

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

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

  var getIndexByClass =  function (param) {
    var element = param.classname ? param : param.target;
    var className = element.classname;
    var domArr = Array.prototype.slice.call(document.querySelectorAll('.' + className));
    for (var index = 0; index < domArr.length; index++) {
      if (domArr[index] === element) {
        return index;
      }
    }
    return -1;
  },

로그인 후 복사

6.HTML5 data-* 自定义属性

<button data-name="xiaoyueyue">点击</button>

로그인 후 복사

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

로그인 후 복사

7.字符串传参

单个参数

var name = "xiaoyueyue",
  age = 25;

var box = document.createElement("p");
box.innerHTML = "<button onclick=\"alertInfo(&#39;" + name + "&#39;)\">点击</button>";
document.body.appendChild(box);

// name, age
function alertInfo(name, age, home, friend) {
  alert("我是" + name);
}

로그인 후 복사

多参传递

  var name = 'xiaoyueyue',
      age = '25',
      home = 'shanxi',
      friend = 'heizi',
      DQ = "&quot;"; // 双引号的超文本标记语言

    var params = "&quot;" + name + "&quot;,&quot;" + age + "&quot;,&quot;" + home + "&quot;,&quot;" + friend + "&quot;";
    var params2 = DQ + name + DQ + ',' + DQ + age + DQ + ',' + DQ + home + DQ + ',' + DQ + friend + DQ;
    var box = document.createElement("p");
    box.innerHTML = "<button onclick=&#39;alertInfo(" + params + ")&#39;>点击</button>";
    console.log(box)
    document.body.appendChild(box);


    // name, age,home,friend
    function alertInfo(name, age, home, friend) {
      alert("我是" + name + ',' + "我今年" + age + "岁了！")

로그인 후 복사

复杂传参

var data = [
  {
    name: "xiaoyueyue",
    age: "25",
    home: "shanxi",
    friend: "heizi"
  }
];

var box = document.createElement("p"),
  html = "";

for (var i = 0; i < data.length; i++) {
  html +=
    "<button id=&#39;btn&#39;  onclick=&#39;alertInfo(id,\"" +
    data[i].name +
    &#39;","&#39; +
    data[i].age +
    &#39;","&#39; +
    data[i].home +
    &#39;","&#39; +
    data[i].friend +
    "\")&#39;>点击</button>";
}
box.innerHTML = html;
document.body.appendChild(box);

function alertInfo(id, name, age, home, friend) {
  alert("我是 " + name + " , " + friend + " 是我的好朋友");
}

로그인 후 복사

8.arguments

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

【推荐学习：javascript高级教程】

<button
  onclick="fenpei(&#39;f233c7a290ae11e8a0f00050568b2fdd&#39;,&#39;100&#39;,&#39;0号 车用柴油(Ⅴ)&#39;)"
>
  分配
</button>

로그인 후 복사

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

로그인 후 복사

9.form 表单

借助form

참고: 객체 유형 데이터를 저장할 때 이 깊은 복사 방법은 함수를 무시하고 정의되지 않은

// form表单序列化，摘自JS高程
function serialize(form) {
  var parts = [],
    field = null,
    i,
    len,
    j,
    optLen,
    option,
    optValue;

  for (i = 0, len = form.elements.length; i < len; i++) {
    field = form.elements[i];

    switch (field.type) {
      case "select-one":
      case "select-multiple":
        if (field.name.length) {
          for (j = 0, optLen = field.options.length; j < optLen; j++) {
            option = field.options[j];
            if (option.selected) {
              optValue = "";
              if (option.hasAttribute) {
                optValue = option.hasAttribute("value")
                  ? option.value
                  : option.text;
              } else {
                optValue = option.attributes["value"].specified
                  ? option.value
                  : option.text;
              }
              parts.push(
                encodeURIComponent(field.name) +
                  "=" +
                  encodeURIComponent(optValue)
              );
            }
          }
        }
        break;

      case undefined: //fieldset
      case "file": //file input
      case "submit": //submit button
      case "reset": //reset button
      case "button": //custom button
        break;

      case "radio": //radio button
      case "checkbox": //checkbox
        if (!field.checked) {
          break;
        }
      /* falls through */

      default:
        //don&#39;t include form fields without names
        if (field.name.length) {
          parts.push(
            encodeURIComponent(field.name) +
              "=" +
              encodeURIComponent(field.value)
          );
        }
    }
  }
  return parts.join("&");
}

로그인 후 복사

4 주소 표시줄 방법을 가져옵니다

캡슐화합니다. 자신의 방법

<form id="formData">
  <p class="pop-info">
    <label for="ordersaleCode">订单编号：</label>
    <input
      type="text"
      id="ordersaleCode"
      name="ordersaleCode"
      placeholder="请输入订单编号"
    />
  </p>
  <p class="pop-info">
    <label for="extractType">配送方式：</label>
    <select id="extractType" name="extractType" class="mySelect">
      <option value="0" selected>配送</option>
      <option value="1">自提</option>
    </select>
  </p>
</form>
<button>获取参数</button>

로그인 후 복사

2. 정규 표현식 방법

document.querySelector("button").onclick = function() {
  console.log("param: " + serialize(document.getElementById("formData"))); // param: ordersaleCode=&extractType=0
};

로그인 후 복사

5. 라벨 바인딩 함수 매개변수 전달

var Event = (function() {
  var clientList = {},
    pub,
    sub,
    remove;

  var cached = {};

  sub = function(key, fn) {
    if (!clientList[key]) {
      clientList[key] = [];
    }
    // 使用缓存执行的订阅不用多次调用执行
    cached[key + "time"] == undefined ? clientList[key].push(fn) : "";
    if (cached[key] instanceof Array && cached[key].length > 0) {
      //说明有缓存的 可以执行
      fn.apply(null, cached[key]);
      cached[key + "time"] = 1;
    }
  };
  pub = function() {
    var key = Array.prototype.shift.call(arguments),
      fns = clientList[key];
    if (!fns || fns.length === 0) {
      //初始默认缓存
      cached[key] = Array.prototype.slice.call(arguments, 0);
      return false;
    }

    for (var i = 0, fn; (fn = fns[i++]); ) {
      // 再次发布更新缓存中的 data 参数
      cached[key + "time"] != undefined
        ? (cached[key] = Array.prototype.slice.call(arguments, 0))
        : "";
      fn.apply(this, arguments);
    }
  };
  remove = function(key, fn) {
    var fns = clientList[key];
    // 缓存订阅一并删除
    var cachedFn = cached[key];
    if (!fns && !cachedFn) {
      return false;
    }
    if (!fn) {
      fns && (fns.length = 0);
      cachedFn && (cachedFn.length = 0);
    } else {
      if (cachedFn) {
        for (var m = cachedFn.length - 1; m >= 0; m--) {
          var _fn_temp = cachedFn[m];
          if (_fn_temp === fn) {
            cachedFn.splice(m, 1);
          }
        }
      }
      for (var n = fns.length - 1; n >= 0; n--) {
        var _fn = fns[n];
        if (_fn === fn) {
          fns.splice(n, 1);
        }
      }
    }
  };
  return {
    pub: pub,
    sub: sub,
    remove: remove
  };
})();

로그인 후 복사

이 확장

이 매개변수를 사용하여 매개변수를 전달하고 아트 템플릿 사용을 고려하세요. 이것이 나오면 더 이상 하나의 ID만 전달하고 이를 여러 매개변수에 연결할 필요가 없습니다! 행복하다!

// app.js
App({
  onLaunch: function(e) {
    // 注册 storage，这是第二条
    wx.Storage = Storage;
    // 注册发布订阅模式
    wx.yue = Event;
  }
});

로그인 후 복사

여기서 주의할 점: 저장된 데이터 - 대문자를 포함하는 단어 =>는 균일하게 소문자로 변환됩니다. 예를 들어 실제 값이

this.dataset.orderid ;<ul>
<h3>event</h3>
<li>이를 사용할 수 있으므로 <code>event.target

메서드도 이벤트에서 사용할 수 있습니다. 다음에 따라 현재 인덱스 값과 매개변수를 가져옵니다. 클래스는 이벤트 객체일 수 있습니다

// 添加收货地址页面订阅
 onLoad: function (options) {
        wx.yue.sub("addAddress", function (data) {
            y.setData({
                addAddress: data
            })
        })
 }
/**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
    // 取消多余的事件订阅
    wx.Storage.removeItem("addAddress");
},
 onUnload: function () {
    // 取消多余的事件订阅
    wx.yue.remove("addAddress");
}

로그인 후 복사

6.HTML5 데이터-* 사용자 정의 속성

// 传递地址页面获取好数据传递
wx.yue.pub("addAddress", data.info);
// 补充跳转返回

로그인 후 복사

rrreee7. 문자열 매개변수 전달

단일 매개변수
rrreee
다중 매개변수 전달
rrreee
복잡한 매개변수 전달
rrreee

8.arguments

위 내용은 자바스크립트에서 매개변수를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

자바스크립트에서 매개변수를 전달하는 방법

1. 암시적으로 html 태그 생성

2.window['data']

3을 사용합니다. . localStorage, 쿠키 등을 사용하여

4.获取地址栏方法

5.标签绑定函数传参

this 拓展

event

6.HTML5 data-* 自定义属性

7.字符串传参

单个参数

多参传递

复杂传参

8.arguments

9.form 表单

이 확장

단일 매개변수

다중 매개변수 전달

복잡한 매개변수 전달