HTML数组

数组
 var arr=[1,2,3,4,5,6,7];
数组的forEach中的this是window,不是数组自身,(多用于对象型数组)
item 第一位参数是数组中元素
 index  第二位参数是数组中的下标
 arrays 第三位参数是数组自身
 arr.forEach(function (item,index,arrays) {
           console.log(item,index,arrays);
           if(item%2===0){
                item+=10;
            arrays[index]=item;
            }
        });
forEach遍历数组每一项只用于数组中,item数组的每项只能读,更改数据用index,如果是每一项是对象item可以改对象的属性值。
对象型数组双循环,外循环用for循环,内循环用for(in)循环。循环数组新建行,循环对象属性新建列。这样就将对象型数组放入表格当中。
var arr=[3,4,5]; 0,1,2这里的数字我们叫它下标
var arr1=[];//定义一个空数组
使用new Array()新建数组时,填写一个参数时,这个参数将变为这个数组的长度如果填写的参数超过一个时,我们认为是给数组中添加了这些元素,并没有规定长度
使用new Object([])   var arr4=new Object([1,2,3,4,5]);这也是定义一个数组
push  在数组的尾部添加数据,可以给尾部添加多个数据,每个数据用逗号分割,返回数组的长度
unshift 在数组的头部添加数据,可以给头部添加多个数据,每个数据用逗号分隔,返回数组的长度
pop 尾部删除一个元素,返回被删除的元素
shift 头部删除一个元素,返回被删除的元素
这里分开写unshift是每次给最前面插入-1,在最前面插入-2,表现为-2,-1
表示在最前面插入两个一个是-1,一个是-2,表现为-1,-2,arr.unshift(-1,-2);
删除1个,不加任何参数var s=arr.pop();
引用 当数据不是数字,字符,布尔,是对象变量时,将这个数据传递另一个变量时,他们之间的关系是引用关系对象引用关系

结果=第一个数组.concat(第二个数组,第三个数组...)结果就是返回的数组被连接的最终数组因此该方法一定要有变量接收使用该方法后返回的数组是一个独立的新数组,和以前的数组没有任何引用关系

字符结果=数组.join("连接的符号");返回的是一个字符串,把数组连接在一起
var str=arr.join("&");
        console.log(str);
        function join(arr,str) {
            if(!str){                                          
                str=",";
            }
            var s="";
            for(var i=0;i<arr.length;i++){
                if(i===arr.length-1){
                    s+=arr[i];
                }else{
                    s+=arr[i]+str;
                }
            }
            return s;

取出的结果=数组.slice(起始位置,结束位置)
从数组中取出数据,返回一个数组,即使是一个,也返回一个数组返回的数组与原有数组无引用关系,是新数组起始位置是,从这个下标位置开始取数据结束位置是到结束的下标位置的前一个数据果参数仅有一个时,这个参数就是起始位置,一直到数组结束为止全部截取起始位置参数也可以是负数,负数指从后向前数。-1就是最后一位,-2就是倒数第二位结束位置参数也可以是负数,负数指从后向前数,slice(-3,-1),倒数第三位和倒数第二位被截取出来
1、如果没有填第二个参数,是指到数组尾部
2、我们用得到的结果覆盖了原有数组,这样保持变量不会有添加,并且不需要清除多余的变量
结果(被删除数组)=数组.splice(起始位置,要删除的总数量,要添加的数据....)数组.splice(起始位置,0,要添加的数据);给数组从起始位置的下标开始插入要添加的数据数组.splice(起始位置,要删除的总数);把数组从起始位置的下标开始删除要删除数量的数据数组.splice(起始位置,要删除的总数,要添加的数据),当删除的总数,与添加的数据一样多时,我们认为这是在做替换
 1、起始位置可以给负数,表示从后向前数
2、如果不给第二个参数,表示从起始位置删除到数组的结尾处
  reverse()将原数组倒序,修改了原数组返回一个新的倒序后的数组
sort() 按照第一位数据来排序的
sort(function(a,b){}) 这个函数是一个比较函数
a和b分别表示上一个要比较的数据和下一个要比较的数据
return a-b  如果返回上一个减去下一个,就是从小到大排序
 return b-a 如果返回下一个减去上一个,就是从大到小排序
var shopping=[
            {id:"001",name:"电池",price:30},
            {id:"002",name:"电池1",price:31},
            {id:"003",name:"电池2",price:28},
            {id:"004",name:"电池3",price:35} ];
        shopping.sort(function (a,b) {
            return a.price-b.price;
        });
        console.log(shopping);
随机0-1之间任意小数,不包含1
        Math.random();

随机乱序
 arr.sort(function () {
return Math.random()-0.5;});
console.log(arr);
数组中删除多个元素时,可以先将不需要删除的内容添加在一个新数组中,然后覆盖原有数组最后删除新数组就可以了
arr=arr4.concat();
        arr4.length=0;
        arr4=null;
        console.log(arr)
  var arr=[1,12,23,34,48,60,87,58,49,11,21,12];
        var arr1=[];
        for(var i=0;i<arr.length;i++){
            if(arr[i]%2===1){
                arr1.push(arr[i])
            }
        }
        arr=arr1.concat();
        arr1.length=0;
        arr1=null;
        console.log(arr)

Var arr=[1,2,3,4,5];
Var arr1=arr.reverse();
arr=arr.concat(arr1);
arr.sort(function(){
    returnMath.random()-0.5;
});
Var arr2=[];
for(var i=0;i<arr.length;i++){
    if(arr2.indexOf(arr[i])<0){
        arr2.push(arr[i])
    }
}

### 如何在 HTML 中处理数组或实现类似数组的功能 HTML 本身并不直接支持数组的概念,因为它是一种标记语言而非编程语言。然而,在现代 Web 开发中,通常会结合 JavaScript 来扩展 HTML 的功能,从而实现在页面上创建、操作和展示类似于数组的对象。 #### 使用 JavaScript 处理数组 JavaScript 是一种强大的脚本语言,可以直接嵌入到 HTML 文件中来增强其交互性和功能性。通过 JavaScript 可以轻松定义并操作数组: ```javascript // 定义一个简单的数组 let fruits = ["Apple", "Banana", "Cherry"]; // 查找特定元素的位置 let index = fruits.indexOf("Banana"); // 返回索引位置 [^1] if (index !== -1) { console.log(`Element found at position ${index}`); } else { console.log('Element not found'); } ``` 上述代码展示了如何利用 `indexOf` 方法快速定位目标值所在的位置,无需显式遍历整个集合。 #### 利用 JSON 数据结构传递复杂信息 当涉及到更复杂的场景时,比如从后台获取动态数据并通过 AJAX 技术加载至前端,则可能需要用到 JSON 格式的字符串表示法。JSON(JavaScript Object Notation)本质上也是一种轻量级的数据交换格式,非常适合用来描述具有层次关系的信息单元。 假设服务器返回如下形式的结果: ```json [ {"id": 1, "name": "John"}, {"id": 2, "name": "Anna"} ] ``` 那么客户端就可以这样解析它: ```javascript fetch('/api/users') .then(response => response.json()) .then(data => { data.forEach(user => { document.body.innerHTML += `<p>${user.name}</p>`; }); }); ``` 这里采用了 Fetch API 发起请求,并将响应体转换为标准 JS 数组后再逐一渲染出来 [^4]。 另外值得注意的是某些特殊情况下可能会遇到兼容性问题,例如旧版浏览器对于 ES6 新增特性的支持力度有限等问题都需要提前做好预案准备才行哦! #### 关于表单序列化的小插曲 有时候为了简化开发流程人们喜欢借助 jQuery 库完成一些基础任务比如说把表单项自动组装成键值对的形式提交给后端接口调用的时候就碰到了一个小坑点即 $.param 函数并不能很好地适配纯数组类型的参数列表除非它们已经被封装进了某个对象内部之后才可以正常使用该函数来进行编码工作 [^2]. 最后补充一点关于 Cookie 的基础知识虽然严格意义上讲不属于本文讨论范围之内但是考虑到实际应用场景中的广泛程度还是稍微提一句比较好毕竟很多时候我们会依赖 Cookies 存储少量临时状态以便下次访问时候能记住之前的选择偏好之类的东⻄嘛😊
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值