分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

JS操作

发布时间:2023-09-06 02:31责任编辑:胡小海关键词:暂无标签

1.循环绑定 => 变量污染

// 页面有一个ul下4个li// lis.length = 4for (var i = 0; i < lis.length; i++) { ?????// 给页面元素对象添加一个任意属性(保留索引的属性index) ???lis[i].index = i ???????// 循环绑定时. i分别是0,1,2,3, 也就给每一个li进行了点击事件的绑定 ???lis[i].onclick = function () { ????????// 在事件绑定时,没有执行事件内部的逻辑体, 在绑定结束后, 激活事件时, 才会执行 ???????// 循环结束后, i值定格在4, 索引在激活事件执行功能时,拿到的i的值全部是4 ???????// 需求1: 打印li的索引 ???????// console.log(i) ???????// 解决:每一个li都有index属性,取出自己(this)的索引 ???????console.log(this.index) ???????// 需求2: 打印自身内容 ???????// console.log(lis[i].innerText) ???????// 解决: this就能唯一指向当前激活事件的那个li对象 ???????console.log(this.innerText) ???}}

2.对象(字典)的增删改查

// 作为字典来使用 ?*****var dict = { ???a: "AAA", ???b: "BBB"}// 查console.log(dict.a);// 改dict.a = "AAAAA";console.log(dict);// 增dict.c = "CCC";console.log(dict);// 删delete dict.b;console.log(dict);// 总结: 只要是js对象, 就可以随意添加属性

3.Math的使用

abs(x):返回 x 的绝对值ceil(x):向上取整floor(x):向下取整max(...n):求最大值min(...n):求最小值pow(x,y):返回 x 的 y 次幂random():返回 0 ~ 1 之间的随机数

随机数

// 得到区间[min, max]之间的正整数function randomNum(min, max) { ????return parseInt(Math.random() * (max - min + 1)) + min; ??}

4.字符串的操作

chartAt(n):指定索引字符,同[n]concat(str):将目标字符串拼接到指定字符串之后indexOf(str):指定字符串第一次出现的位置lastIndexOf(str):指定字符串最一次出现的位置match(re):匹配指定正则,结果为数组(可全文匹配)replace(re, str):将正则匹配到的字符串替换为指定字符串search(re):匹配指定正则,结果为匹配的索引,反之-1substr(n, m):从索引n开始,截取m个字符长度(m省略代表截取到最后)substring(n, m):从索引n开始,截取到索引m(m省略代表截取到最后)slice(n, m):同substring(n, m)split(re):以指定正则将字符串拆分为数组toUpperCase():转换为大写toLowerCase():转换为小写trim():去除首尾空白字符
// 1.指定索引下的字符var s = "abcdef123456呵呵哈哈";console.log(s.charAt(3));// 2.判断是否存在: 呵呵是否在字符串中// -1代表不存在, 反正就是存在(的索引)console.log(s.indexOf("呵")); ?// 12console.log(s.lastIndexOf("呵")); // 13// 3.替换var newS = s.replace("abc", "ABC");console.log(s);console.log(newS);// 总结: 字符串为不可变类型, 如果某操作要改变字符串, 该操作一定拥有返回值// 4.裁剪 slice(n, m) 从索引n开始截取到索引m之前newS = s.slice(0, 3);console.log(newS);// 5.拆分数组var ss = "123 456 abc def";var arr = ss.split(" ");console.log(arr)
验证

5.数组操作

indexOf(ele):指定元素第一次出现的位置lastIndexOf(ele):指定元素最一次出现的位置reverse():反转数组join(str):以指定字符串连接成字符串sort(): 排序filter(function(value, index){ return true | false}):过滤器增删改查push(ele):从尾加unshift(ele):从头加pop():从尾删shift():从头删splice(begin, length, ...eles):完成增删改// begin开始索引// length长度// 新元素们(可以省略)
var arr = [3, 5, 1, 2, 4];console.log(arr); // [3, 5, 1, 2, 4]// 1.反转arr.reverse();console.log(arr); // [4, 2, 1, 5, 3]// 2.排序arr.sort();console.log(arr); // [1, 2, 3, 4, 5]console.log(arr.reverse()); // [5, 4, 3, 2, 1]// 3.判断元素是否存在 (不等于-1就是存在)console.log(arr.indexOf(5));// 4.拼接成字符串var ss = arr.join("@");console.log(ss); ?// 5@4@3@2@1// 5.过滤器 (保留符合条件的结果)var newArr = arr.filter(function (ele) { ?// 回调函数的回调次数有数组的个数决定 ???// filter回调了三个参数: ele, index, sourcerr ???// 偶数 ???if (ele % 2 == 0) { ???????// 满足过滤条件 ???????return true; ???} ???// 不满足过滤条件 ???return false;});// 满足过滤条件的就会添加到新数组中保留console.log(newArr) // [4, 2]/*原理arr.filter(fn) { ???var newArr = []; ???for (var i = 0; i < this.length; i++) { ???????var res = fn(this[i], i, this); ???????if (res == true) { ???????????newArr.push(res) ???????} ???} ???return newArr;}*/// 查// arr[index]// 改// arr[index] = newDate;// 增// 从尾加: push()// 从头加: unshift()// 删// pop():从尾删// shift():从头删// splice(begin, length, ...eles);// begin开始的索引// length操作的长度// 替换为的新元素们(可以省略)// 增// 从索引3之前操作0位,替换为10 => 在索引3插入10a.splice(3, 0, 10); // [4, 3, 5, 10, 1, 2]console.log(a);// 在索引0之前操作0位,替换为1,2 => 在首位添加1和2a.splice(0, 0, 1, 2);console.log(a); // [1, 2, 4, 3, 5, 10, 1, 2]// 改// 在索引末尾之前操作1位,替换为20 => 在末位修改为20a.splice(a.length - 1, 1, 20); ?// [1, 2, 4, 3, 5, 10, 1, 20]console.log(a); // [1, 2, 4, 3, 5, 10, 1, 20]// 删a.splice(2, 3);console.log(a); // [1, 2, 10, 1, 20]
验证

JS操作

原文地址:https://www.cnblogs.com/wangke0917/p/10314658.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved