Js 学习日记(持续更新)

Js的三元运算符跟三元不等式

	${ 判断条件 == 0 ? ' true ' : ' false   '  }
	status ==0 ?"等待付款":(status =="1"?"已支付":"已取消")

Js如何在动态生成的table删除对应行或者列

获取当前 行 列 的this指向(圈重点)

    var tr = i.parentNode.parentNode;
    //i 相当于 行 或者 列 的 this 指向
    var tbody = tr.parentNode;
     tbody.removeChild(tr);

Js给已有元素添加元素

  通过 id 查找 HTML 元素
     document.getElementById("intro");
 通过标签名查找 HTML 元素
     getElementsByTagName("p")
 通过类名找到 HTML 元素
    document.getElementsByClassName("intro");
 ---------
 添加属性:
    obj.setAttribute('键','值');
 获取属性值:
    obj.getAttribute('键');
 删除属性:
    obj.removeAttribute('键');

Js数组对象添加元素

新数组:array;

原数组:list;

给原数组list的对象加一个名为indexNum的属性,属性值为str

let array = [];
 let list = [{name:'aa',age:11},{name:'bb',age:22},{name:'cc',age:33},];
 list.map((item,index)=>{
   array.push(
      Object.assign(item,{indexNum:'str'})
     )
   });
  console.log(123,array); 
249

Js对象转换数组

	 var data = res.result.listInfo
		 var resdata = []
		 for(var i in data){
			 if(data){
				 resdata.push(data[i]) 
			 }
		 }

Jq获取下拉框的值

var liveshow_select = $('#liveshow_select option:selected').val()
//选中的value值
var liveshow_select_text = $('#liveshow_select option:selected').text()
//选中的文本值
 var gift_url  = $('#online_Gift    option:selected' ).attr("name")
//选中的name的值

Jq更改input placeholder值

$('#input').attr('placeholder','新文本内容')

JQ动态设置key

  var a =  id
  var b =  10086
  var add = {}
  add[a]=b

js获取地址栏参数

<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  decodeURI(r[2]); return null;
    }
    var parameter = getUrlParam("name");
        	
     alert(parameter);

js判断

&&运算符

两边条件都为true时,结果才为true
如果有一个为false,结果就为false
当第一个条件为false时,就不再判断后面的条件

||运算符

当第一个条件为true时,结果为true
当第一个条件为false,结果为false

Js object.keys 跟 object.values 搭配取参数

 let date_room = []
   date_room = Object.keys(roomdata[j].day_detail).map((item, index) =>({
                 key: item,
	             val: Object.values(roomdata[j].day_detail)[index].toString(),
				 title:roomdata[j].title
            }));

Js转换时间戳

 function UnixToDate(unixTime, isFull, timeZone) {
	if (typeof (timeZone) == 'number'){
		unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
	}
	var time = new Date(unixTime * 1000);
	var ymdhis = "";
	ymdhis += time.getUTCFullYear() + "-";
	ymdhis += (time.getUTCMonth()+1) + "-";
	ymdhis += time.getUTCDate();
	if (isFull === true){
		ymdhis += " " + time.getUTCHours() + ":";
		ymdhis += time.getUTCMinutes() + ":";
		ymdhis += time.getUTCSeconds();
	}
	return ymdhis;
}
  $(function(){
       var time =   UnixToDate(1484222693)
       console.log(time)
   })

JS数组匹配对象

<script>
	let strA = ['id', 'name'];

	let arrB = [{
		"id": "2",
		"name": "小王",
		'value': 1
	}
	]
	const list = JSON.parse(JSON.stringify(arrB))
	list.forEach(item => {
		const items = [...new Set([...Object.keys(item), ...strA].filter(v => !(Object.keys(item).includes(v) && strA.includes(v))))]
		items.forEach(key => void delete item[key])
	});

	// arrB.forEach(item=>{
	// 	const items  = [...new Set(Object.keys(item).filter(v =>strA.includes(v)))]
	// 	items.forEach(key => void list.push({[key]:Reflect.get(item,key)}))
	// })
	console.log(list);
</script>

JS 循环table表格

$('#submit').click(function () {
        $.ajax({
            url: '/',
            type: 'POST',
            success: function (args) {
                var str = "";
                str += "<table border='solid'>";
                for (var i = 0; i < args.length; i++) {//该数组为嵌套数组[[xx],[xx],[xx]]形式
                    if (i === 0) {    //取第一个数组为表头
                        str += "<tr>";
                        for (var j = 0; j < args[i].length; j++) {
                            str += " <th>" + args[i][j] + "</th>";
                        }
                        str += "</tr>";
                    }else {
                        str += "<tr>"; //循环取数组的值生成html代码
                        for (var k = 0; k < args[i].length; k++) {
                            str += " <td>" + args[i][k] + "</td>";
                        }
                        str += "</tr>";
                    }
                }
                str += "</table>";
                document.getElementById('info').innerHTML=str
                console.log(str)
            }
        })
    });

JS渲染动态表格

			var str = "";
								str += "<table border='solid'>";
								str += "<tr>";
								for (var j = 0; j < table_th.length; j++) {
									str += " <th>" + table_th[j] + "</th>";
								}
								str += "</tr>";
								list.forEach((e) => {
									str += '<tr>'
										for (var j = 0; j <=Object.values(e).length - 1; j++) {
											str += `<td>${Object.values(e)[j]}</td>`;
										}
										str += '</tr>';
								})
								str += "</table>";
								$('#table_list').html(str)

JS动态生成密码

//生成随机密码
    password() {
        const getNumber = () => Math.floor(Math.random() * 10); // 0~9的数字
        const getUpLetter = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65); // A-Z
        const getLowLetter = () => String.fromCharCode(Math.floor(Math.random() * 26) + 97); // a-z
        const confirmItem = [getNumber(), getUpLetter(), getLowLetter()]
        // 随机index
        const getIndex = () => Math.floor(Math.random() * 3);
        // 从0-9,a-z,A-Z中随机获取一项
        const getPassItem = () => confirmItem[getIndex()];
        let arr = []
        arr.push(...confirmItem)
        arrlengthadd()
        function arrlengthadd() {
            if (arr.length < 8) {
                arr.push(getPassItem())
                arrlengthadd()
            } else {
                return
            }
        }
        return arr.toString().replace(/,/g,'')
    }

JS对象合并

	var arr = [{ title: '今天有点饿' }]
	var add = [{ age: '18' }]
    let res =  arr.map((item,index)=>{
		return {...item,...add[index]}
	})
	console.log(res)

JS动态改变键值

      Object.keys(data).forEach((ele) => {
            this.list = [...Object.keys(data[ele]).map((key) => ({ key, val: data[ele][key] }))];
            console.log(this.list);
          });

JS findindex方法 使用 (删除指定值)

const data = {
        modify_action: [],
      },
   let data = { action: 'updateh5Old', url: 'www.baidu.com' };
   this.data.modify_action.push(data);
  var index = this.data.modify_action.findIndex((ele) => ele.action == 'updateh5Old');
 this.data.modify_action.splice(index, 1);

获取地址栏参数

地址栏例如 http://www.hahaha.com/list?Id=9#/

    var url = window.location.href ; //获取当前url
    var dz_url = url.split('#')[0];  //获取#/之前的字符串
    var cs = dz_url.split('?')[1];  //获取?之后的参数字符串
    var cs_arr = cs.split('&'); //参数字符串分割为数组
    var cs={};
    for(var i=0;i<cs_arr.length;i++){         
    //遍历数组,拿到json对象
      cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
    }
this.id = cs.id;    

js数组和数组对象去重

    let Number = ['1', 1, 2, 2, 3];
    let add = [];
    for (var i = 0; i < Number.length; i++) {
      if (add.indexOf(Number[i]) === -1) {
        add.push(Number[i]);
      }
    }
    let data = [{ name: '小王' }, { name: '小红' }, { name: '小王' }];
    let result = [];
    let arr = {};
    for (var j = 0; j < data.length; j++) {
      if (!arr[data[j].name]) {
        result.push(data[j]);
        arr[data[j].name] = true;
      }
    }
    console.log(result);
    console.log(add);

扁平递归树形

    //递归树形
    treeArray(data, related_id) {
      var tree = [];
      var temp;
      for (var i = 0; i < data.length; i++) {
        if (data[i].related_id == related_id) {
          var obj = data[i];
          temp = this.treeArray(data, data[i].id);
          if (temp.length > 0) {
          //递归下级
            obj.children = temp;
          }
          tree.push(obj);
        }
      }
      return tree;
    },
    //调用方法
    this.treeArray(res.data.data, null)

树形递归扁平

  //递归扁平
    treeList(data) {
      var queen = [];
      var out = [];
      queen = queen.concat(data);
      while (queen.length) {
        var first = queen.shift();
        if (first.children) {
          queen = queen.concat(first.children);
          delete first['children'];
        }
        out.push(first);
      }
      return out;
    },
//this. treeList(data)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值