小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • 什么是闭包?js闭包的2个最大用途以及注意事项

    什么是闭包?js闭包的2个最大用途以及注意事项

    各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。简单的说,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因……
    199人已经看过了
您的位置:首页 > 前端开发 > Javascript > 原生JS

8.第四阶段16 数组声明,访问,替换,新增,删除-数组的push和pop-数组正向队列-数组的合并-转字符串-颠倒数组-升序降序-寻找元素-循环迭代-字符串数组

分类: 原生JS70个赞

//数组
//数组声明的2种方式
let arr=new Array(); //数组是一个对象
let arr2=[1,2,3,4];

//访问数组
console.log(arr2[2]); //结果3,数组从0开始,基本js都是从0开始
//替换数组
arr2[3]=6;
console.log(arr2[3]); //结果6
//新增数组
arr2[4]=15;
console.log(arr2[4]); //结果15
/* arr2[7]=10;//不增加5 6会有问题吗?
console.log(arr2[5]);//结果undefined 未定义 56都是
console.log(arr2[arr2.length]) //如果跳着定义,会有问题,他们的总数也是undefined */
//一般新增数组的方法
arr2[arr2.length]=10;
console.log(arr2[arr2.length-1]) //结果

//数组什么都可以放,函数也可以调用
let arr3 = ["nihao",1,1.23,{name:"张三"},function(){console.log("nihao")},true];
arr3[4]();

//数组push 推入 ,在数组最后加入指定数量的元素 相当于arr[arr.length]="6",支持多参数
let arr4=[1,2,3,4,5]
arr4.push(6);
arr4.push(7);
arr4.push(8,9,10,11,12)
//console.log(arr4)
/* arr4.length = 0;//这句话相当于把数组清空了
console.log(arr4) */

//数组pop() 删除数组最后一个元素,并返回最后一个值 
console.log(arr4.pop())
console.log(arr4)

//push和pop的原理理解  数据结构必须要遵从它的法则
/* push相当于往栈里放东西,入栈从哪里入出站也从哪里出,这样进去的顺序是ABC,出来的时候只能是CBA,不能先出A,永远是最后进去的东西最先出来,想象水杯
pop相当于从最后拿出一个元素,所以push和pop是很形象的栈操作 */
let arr5=[];
arr5.push('a');
arr5.push('b');
arr5.push('c');
console.log(arr5.pop()) //结果c 后进先出
console.log(arr5.pop()) //结果b 后进先出
console.log(arr5.pop()) //结果a 后进先出
//栈常见作业
//{ ( ) [ ( ) ] }
let str="{ ( ) [ ( ) ] }";
let dic={")":"(","]":"[","}":"{"} //把相反括号先存起来,相当于字典一个键
let arr6=["{"," ","("," ",")"," "] //str数组用  split分割后
function isValid(s){
    let stk=[];
    // let arr6= str.split("") //split() 方法用于把一个字符串分割成字符串数组。相当于易语言的分割文本 ,分割后是arr6,也可以用for of迭代
    for (const char of s) {
       // if(!Number(char)) continue;  //方法1 Number(" ")控制符返回0,所以Number(char)取反!,给他过滤掉 
        if(/\s/.test(char)) continue; //方法2 用正则表达式 \s代表空字符 ,正则里面有个方法叫test匹配所以完整方法是/\s/.test(char)
        if(dic[char]){
            //如果为真是闭括号,需要匹配开括号是否如何栈后进先出原则
            if(stk[stk.length-1] === dic[char]) stk.pop();
            else return false;
        }else{
            stk.push(char);//如果未假为开括号
        }
    }
    return stk.length === 0;
}
console.log(isValid(str)) //结果为true,括号正确
let str2="{ ( ) [ [(] ) ] }";
console.log(isValid(str2)) //不符合栈后进先出原则,结果是false 

//删除数组 shift 取出数组的第一个元素删除并返回 unshift 在数组的最开始处插入一个或者多个元素
let arr7 =[1,2,3];
console.log(arr7.shift()); //结果为1,shift取出数组第一个元素
console.log(arr7);  //数组只有2,3了
arr7.unshift("one","two");
console.log(arr7.length)  //数组有4个了

//数组 正向队列 用shift和push   栈(杯子)只有一个口,后进先出  而正向队列(隧道)有一个进口和出口,先进先出 如 任务队列
let arr8=[];
let task1={
    work:'xxx1',
    times:'xxxxx'
}
let task2={
    work:'xxx2',
    times:'xxxxx'
}
arr8.push(task1); //任务加入队列;
arr8.push(task2);
let t = arr8.shift();
console.log(t.work) //结果是task1中的work中的,xxx1,因为他先进入



//数组的一些方法 合并,转换字符串,取出并删除数组,替换数组, 倒找数组 ,颠倒数组,排序,筛选

//合并 concat
let a=[1,2,3]
let b=[4,5,6]
let c=a.concat(b);  //concat方法 合并a,b数组
console.log(c)
console.log(c.join("--")) //join()把数组转换为字符串1--2--3--4--5--6,括号里的是分隔符

//转换字符串
let array = ['apple','huawei','xiaomi'] //现在想删除第三个小米
console.log(array.splice(1,1)) //splice 返回删除的数组,取出后并删除数组,有2个参数是删除,第一个是从哪个地方开始删除,第二个是删除几个
console.log(array) //结果['apple','xiaomi']

//取出并删除数组和替换数组 splice 
let array2=[1,2,3,4,5,6,7] //现在要从第三个元素开始替换几个元素
array2.splice(2,2,9,10) //splice 有3个参数是替换 第一个是从哪个地方开始替换,第二个参数是替换几个,第三个参数后是替换的数值
console.log(array2)
array2.splice(2,3,9) //结果[1,2,9,5,6,7]splice 有3个参数是替换 第一个是从哪个地方开始替换,第二个参数是替换几个,第三个参数后是替换的数值
console.log(array2)
array2.splice(-2,1,9) //结果[1,2,9,9,7] 注意:splice如果是负数的话是从尾部1开始的
console.log(array2)

//颠倒数组中元素的顺序 reverse
let array3=[1,2,3,4]
array3=array3.reverse()
console.log(array3) //结果[4,3,2,1]

//数组排序 升序降序  sort ()  默认的和我们和我们想的不一样
let array4=[1,2,3,4,5,6,7,25,11]
let sort = array4.sort();
console.log(sort); //结果{1,11,2,24,3,4,5,6,7}
let sort2 = array4.sort(function(a,b){return a-b}); //支持函数 从小到大  a-b<0;a排到b前面,如果a=b,则a与b的位置不变,如果a-b>0,a与b调换位置
console.log(sort2) 
let sort3 = array4.sort(function(a,b){return b-a}); //从大到小拍
console.log(sort3) 

//数组寻找元素 find和findIndex find查找到元素 返回第一个找到的元素  findIndex 查找元素 返回第一个找到的元素下表
let arr9=["zhangsan","lisi","wangwu"];
let name = arr9.find((item,index) => {
   return  item == "lisi"
});
console.log(name)  //结果lisi

let index= arr9.findIndex(c=>c == "wangwu")
console.log(index) //结果2,他的下标是2

console.log(arr9)

let myFind = function (arr9,callback){ //find原式 callback是回调函数的意思
    for(let i=0;i<arr9.length;i++){
        if(callback(arr9[i],i,)){
            return arr9[i];
        }
    }
   }

let myFindIndex = function (arr9,callback){ //findIndex原式 callback是回调函数的意思
    for(let i=0;i<arr9.length;i++){
        if(callback(arr9[i],i,)){
            return i;
        }
    }
   }

//按条件查找数组 filter() 筛选
let usersAges = [11,12,5,6,7,8,33,22,11,16,17,18]
let res = usersAges.filter(v=>v>10);
console.log(res) //结果[11,12,33,22,11,16,17,18]

//循环迭代 forEach, 异步的时候不可以用forEach 
usersAges.forEach((value1,index1,arr1)=>{//value1和index1和arr1三个参数可以随便写
    console.log("值="+value1,"编号="+index1,"数组="+arr1[index1+1])
})   

//map方法 让数组产生一个新的元素,数据库查询完很多不在前台显示的,删减字段,可以用map操作
let users=[
    {id:1,name:"John",age:17},
    {id:2,name:"Pete",age:18},
    {id:3,name:"Mary",age:19}
];

let newUsers= users.map((item,index)=>{
    return {
        name:item.name,
        age:item.age,
        编号:index
    }
});

console.log(newUsers);

let myMap=function(callback){ //map()函数的原生缩减版
    let newArray =[];
    for(let i=0;i<arr.length;i++){
        let obj=callback(arr[i],i);
    newArray.push(obj);
    }
    return newArray
} ;
//字符串数组
let names="a,b,c,d";
let arr10 = names.split(",") //分割文本
console.log(arr10) //结果[a,b,c,d]
let arr11 = names.split(",",2) //只要前两个数组
console.log(arr11) //结果[a,b]


小米技术社区