js数组的常见属性和方法

2023-05-16

属性

length 是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标,不只是可读。

Array.prototype  属性表示 Array 构造函数的原型,并允许您向所有Array对象添加新的属性和方法。

检查数组

Array.isArray():最终判断这个值是不是数组

转换方法

valueof():返回的还是数组本身

toString():返回的由每个值的字符串形式拼接而成的一个以逗号分隔的字符串

join(),通过使用这个方法则可以使用不同的分隔符来构造这个字符串

alert():输出数组的时候会自动的调用toString();

栈方法(对数组的本身的修改)

push:代表后进,后面再添加是所以叫后进

push(),把参数渐渐添加的末尾,并且返回添加后的数值长度

pop(),从数组末尾移除最后一项,返回移除的项

从而待到了先进后出,后进push先出pop

队列方法(对数组的修改)

push(),把参数渐渐添加的末尾,并且返回添加后的数值长度

shift(),从数组的前端移除一项,返回移除的项

从而达到了后进push后出也就是前面的先出shift()

外加
unshift()可以在数组前端添加任意个项,并返回数组的长度

重排序方法

reverse():反转

sort():应为这个得到的是toString后的数组的值全是字符串的比较,所以字符串的比较(字符编码值)而不是数值的字面量

所以有了给sort()添加一个比较函数的方法

操作方法

concat():在没有参数的情况下复制一个原来的数组,如果有参数,则会吧参数(字符串)添加到数组中,就算参数是一个数组也是一项,一项的加载末尾,对原数组无印象

slice(指定的开始位置,结束的位置):这里面的位置代表的是数组项所在的位置从0开始,该方法会返回一个在这个区间之间的项,不包括最后一项,这个方法不印象原数组

splice(要删除或插入第一项的位置,要删除的项数,和插入任意数量的项)

从而可以达到删除,插入,替换的能力

位置方法

indexOf(要查找的项(全等比较),查找的启始的位置)

在没找的情况下返回-1,如果有就返回找到项所在的位置

迭代和归并的方法

下面是具体是案例操作

创建数组的基本方式有两种
            1.使用Array()构造函数       

            var colors = new Array(20);
            console.log(colors.length);//20
            创建3个字符串
            var colors = new Array("z","q","x");
            当Array的参数为一个数,为数值和为其他是不同的
            var colors = new Array(3);
            console.log(colors.length);//3
            var colors  =new Array("zqx");
            console.log(colors.length);//1这里也说明了数组不等同于变量不会提前编译;


            2.数组字变量表示法(与对象一样,在使用数值字面量表示法时,也不会调用Array构造函数)

            var colors = ["z","q","x"];//创建一个3个字符串的数组
            console.log(colors);//3
            与对象一样,在使用数组字面量的表示法时,也不会调用Array构造函数
            var colors = [];//创建以个空数组
            console.log(colors);//0
            var colors = [1,2,]//不可以这样!这样会创建一个包含2或3项的数组,chrome浏览器是显示3;
            console.log(colors);//2
            在读取和设置数组的值时,用[key]可以显示,修改,新增
            var colors = ["red","blue","green"];
            console.log(colors[0])//显示第一项"red"
            colors[2] = "black";  //修改
            console.log(colors[2])//"black"
            colors[3] = "brown";  //新增
            console.log(colors[3])//"brown"
            注:length并不是只读的可以从数组的末尾或向数组中添加新项
            var colors = ["red","blue","green"];
            colors.length = 2;    //去除
            console.log(colors[2]); //undefined;
            var colors = ["red","blue","green"];
            colors.length = 4;    //添加
            console.log(colors[4]); //undefined;
            给数组最后一项添加一个值
            var colors = ["red","blue","green"];
            colors.length = 4;    //添加
            colors[colors.length] = "black"//给数组最后一项添加值


        检查数组
            Array.isArray()
            if(Array.isArry(value)){}//IE9以上支持
        转换方法
            每个对象都具有 toLocaleString(),toString(),valueOf();
            其中调用valueOf()返回的还是数组的本身,
                    toString()方法会返回由数组中每个值的字符串形式(就算原来的是数值)拼接而的一个以逗号分隔的字符串;

            var colors = ["red","blue","green",5];
            console.log(colors.toString());//""red","blue","gree","5""
            console.log(colors.valueOf());//(4) ["red", "blue", "green", 5]返回数组本身
            插曲:由于alert()要接受字符串参数所以他会在后台调用toString()方法


        join():数组的链接符
            如果使用join()方法,则使用不同的分隔符来构造这个字符串

            var colors = ["red","blue","green",];
            console.log(colors.join(","));//"red,blue,green"
            console.log(colors.join("||"));//"red||blue||green"
            这里用的是toString()方式输出


        栈方法:是一种可以限制插入和删除的数据结构(后进先出),栈的方法走插入和移除只发生在一个位置——栈的顶部
        push()和pop()
        push():方法可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后数组的长度;
        pop():方法则从末尾移除最后一项(不管怎么样就是最后一项),减少数组的length,返回移除的值;

        var colors = ["red","green"]
        var cd = colors.push("brown");//返回数值最新长度
        console.log(colors[colors.length-1]);//brown
        console.log(colors[cd-1]);//brown 这里说明了push()返回的是数值的长度
        var move = colors.pop();//返回移除的值
        console.log(move);//brown


        队列方法(先进先出):

        shift(),他能够移除数值中的第一个项,同时将数组长度减1,返回移除的第一项
        var colors  = new Array();
        var count = colors.push("red","green");//返回修改后的长度
        console.log(count);//2
        count = colors.push("black");
        var item = colors.shift();//返回移除的第一项
        console.log(item);//"red"


        外加
        unshift()可以在数组前端添加任意个项,并返回数组的长度
        总结:
        添加的都是返回添加后的数组长度;移除的都是返回移除的项
        重新排序的方法
        1.reverse()方法会反转数值项的顺序;

        var values = [1,2,3,4,5];
        console.log(values.reverse());//(5) [5, 4, 3, 2, 1]


        2.sort()方法按升序排列数组项-即最小的在最前面会调用toString()转型的方法,然后比较得到的字符串,
        以确定如何排序

        var values = [2,3,14,141,5];
        console.log(values.sort());//返回升序[14, 141, 2, 3, 5]
        但sort()可以添加参数:一个比较函数compare();//具体怎么用还没搞明白
        function compare(value1 , value2){
            if(value1 < value2){
                return -1;
            } else if(value1 > value2){
                return 1;
            } else{
                return 0;
            }
        }
        var value = [8,0,1,5,10];
        value.sort(compare); //其实就是要移动是时候给sort函数返回一个为正的参数值,的这样一个机理
        console.log(value);//[0, 1, 5, 8, 10]
        reverse()和sort()返回的都是经过了排序后的数组


        数组的操作方法
        1.concat():返回基于当前数组所复制的一个新数组,当方法有参数的时候是向新数组的某位添加数组项,而push()是返回原数组添加后的长度,因为实际他就是在复制一个数值的同时,判断他是否要在末尾添加一些项

        var values = [1,2,3,4,5];
        console.log(values.push("1213",12,"zqx"));//8
        
        var values = [1,2,3,4,5];
        console.log(values.concat("1213",12,"zqx"));
        //0: 1
        //1: 2
        //2: 3
        //3: 4
        //4: 5
        //5: "1213"
        //6: 12
        //7: "zqx"
        //length: 8


        2.slice():他能基于当前数组中的一个或多个来创建一个新的数值,并不影响原来的数组
        参数是数值在数组中的位置,该方法返回包含起始项,但不包含结尾项的新数组

                        0      1      2       3        4
        var colors = ["red","green","blue","yellow","purple"];
        var colors3 = colors.slice(1,4);
        console.log(colors3);//["green", "blue", "yellow"]有第1项没第4项


        
        3.splice():他可以向数组中部插入项,但使用这种方式有3中情况,
        返回的值是删除的项的数组,如果没有删除项,那么返回一个空数值,所以对实际的数组有影响
        参数3个:第一要删除的插入的(数组项所在的)位置,第二要删除的项数,第三和要查入的项

        删除:splice(0,1),从第一项开始删除一项
        var colors = ["red","green","blue"]
        console.log(colors.splice(0,1));//["red"]
        console.log(colors);// ["green", "blue"]
        插入:splice(0,0,"red","blue"),从第一项开始删除零项,在第一项后面插入"red","blue";
        var colors = ["red","green","blue"]
        console.log(colors.splice(0,0,"reg","red"));//[]因为没有删除项
        console.log(colors);//["reg", "red", "red", "green", "blue"]
        替换:splice(0,2,"red","blue"),从第一项开始删除二项,在第一项后面插入"red","blue",相当于替换;
        var colors = ["red","green","blue"]
        console.log(colors.splice(0,2,"reg","red"));// ["red", "green"]
        console.log(colors);//["reg", "red", "blue"]


        数组的位置方法
        indexOf()和lastIndexOf()都接收俩个参数:要查找的项和表示查找位置的索引,索引代表从什么位置开始找
        返回项所在数组中的位置,当搜索不到的时候返回-1
        

        删除:splice(0,1),从第一项开始删除一项
        var colors = ["red","green","blue"]
        console.log(colors.splice(0,1));//["red"]
        console.log(colors);// ["green", "blue"]
        插入:splice(0,0,"red","blue"),从第一项开始删除零项,在第一项后面插入"red","blue";
        var colors = ["red","green","blue"]
        console.log(colors.splice(0,0,"reg","red"));//[]因为没有删除项
        console.log(colors);//["reg", "red", "red", "green", "blue"]
        替换:splice(0,2,"red","blue"),从第一项开始删除二项,在第一项后面插入"red","blue",相当于替换;
        var colors = ["red","green","blue"]
        console.log(colors.splice(0,2,"reg","red"));// ["red", "green"]
        console.log(colors);//["reg", "red", "blue"]


        关键(引用类型的位置值的比较)

       :在比较第一个参数的时候与数值中的每一项的时候,会使用全等符号
        关于引用类型的比较,查找,因为为全等所以,不但值要相同,而且值所在的位置也要相同

    var person = { name: "Nicholas" };
    var people = [{ name: "Nicholas" }];
    var morePeople = [person];
    console.log(people.indexOf(person))//-1找不到返回-1
    console.log(morePeople.indexOf(person))//0,第0位


        为什么会找不到返回-1呢?因为值一样但不是同一个对象,相当于person的值在另一个对象的里面,但people对象中有一个一样的值,但二者不相同对象不一样所以===比较的时候就会返回flast;


补充ES6 2019.4.16

扩展运算符

扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下:

let arr = [1, 2, 3];
console.log(...arr);  //打印结果 1 2 3
//等价于
console.log(1,2,3);

本质:他可以吧数组以join(",")的形式分开

作用1:可以用这个扩展运算符把数组里面的元素展开,分别传给函数的形参

let arr = [4, 5, 6];
function Fn(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
    return a + b + c;
}
result = Fn(...arr);
console.log(result);

其实这个也没必要我们可以用解析赋值,其实在这个情况下会更简单

扩展运算符可以和正常参数结合起来使用,非常的灵活(根据K值一一对应)

let arr = [4, 5, 6];
function Fn(a, b, c, d, e, f) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d, e, f)
}
Fn(1,...arr, 2, 3);  //注意一一对应关系:1->a;...arr->b,c,d;2->e; 3->f

 但是需要注意的是:在解析赋值的时候扩展运算符只可以放最后

作用2:复制数组

如果把一个数组直接赋值给另一个数组,那么会产生引用,相互影响,在es5中,只能通过变通的方式复制数组,但在es6中,我们可以通过扩展运算符来实现数组复制

//直接赋值 产生引用
let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr)  // [1, 2, 3, 4]

//es5 中复制数组
let arr3 = arr.concat();
console.log(arr3)

//es6中复制数组
let arr4 = [...arr];
arr4.push(5);
console.log("arr4",arr4);  //[1,2,3,5]
console.log("arr",arr)   //[1,2,3]  和arr4并不会相互影响

作用3:合并数组

let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr,...arr2])  // [1, 2, 3, 4, 5, 6]

作用4:和解构赋值结合,用于生成数组,但是这里的数组必须放在最后

let [a, b, ...rest] = [1, 2, 4, 5, 6, 7]
console.log(rest);  //[4, 5, 6, 7]

Array.from

本质:Array.from可以把类数组转成真正的数组

<ul>
    <li>nodeing_1</li>
    <li>nodeing_2</li>
    <li>nodeing_3</li>
    <li>nodeing_4</li>
    <li>nodeing_5</li>
    <li>nodeing_6</li>
</ul>
<script>
    let aLi = document.getElementsByTagName('li')
    for(let i in aLi){
        aLi[i].style.color = "red"  //执行报错
    }
</script>

这里的aLi并不是真正的数组他只是包含了0,1,2....但是他还有length属性,也就是因为他有length属性所以i就会有可能等于length就会报错,也同时当我们用遍历的时候虽然他不是数组但是也可以返回length的长度,所以也说明了不是说可以返回length长度的值就说明有是一个数组

我们就可以使用.from()方法

let aLi = document.getElementsByTagName('li')
for(let i in Array.from(aLi)){
    aLi[i].style.color = "red"
}

Array.of

本质:这个方法可以将一组数值转换成数组

let arr = Array.of(1, 2, 3,4)
console.log(arr) // [1,2,3,4]

题外话:不知道大家这里有没有注意到这里的Array没有new 为什么没有nwe呢?其实就是因为他其实就已经是返回了一个对象了,那个对象是会根据我们的参数返回一个数组给我们,new(工厂模式)其实效果是一样的,没有什么区别

当构造函数自己有return的时候:当构造函数中自身的retuen的是数值那么只是会结束函数执行,但是返回值还是那个定义的{},如果自带的return是一个函数,那么返回的是那个自带的函数

但是这里我们直接用Array()不就好了吗?为什么还要of?其实这里只是为了解决一个冲突,只有在Array的参数大于2个的时候,才是返回数组的,当参数为1个的时候是返回length为多少的数组,而of就完美的解决了这个冲突

//Array的行为不统一,根据参数的不同返回的结果不一样
let arr = Array(4)
let arr2 = Array(1, 3)
let arr3 = Array(1,3,4,5);
console.log(arr, arr2, arr3)      // [empty × 4] 、[1, 3]、 [1, 3, 4, 5]
let arr = Array.of(4)
let arr2 = Array.of(1, 3)
let arr3 = Array.of(1,3,4,5)
console.log(arr, arr2, arr3) // [4]  [1, 3]  [1, 3, 4, 5]

copyWithin

本质:将数组内部指定位置的元素复制,在替换掉指定的目标

let arr = [1, 2, 3, 4, 5]
//第一个参数为目标起始位置 第二个参数为被复制元素的开始位置,第三个参数为被复制元素的结束位置
//将下标3到4的元素 复制到下标为1的位置 原来位置的元素被覆盖
arr.copyWithin(0, 3, 4)  //[4,2,3,4,5]
console.log(arr)

find和findIndex

find方法用来查找数组中符合条件的第一个元素,接收一个回调函数,返回那个值

findIndex的用法和find类似,返回的是索引位置,而不是具体的值

let arr = [1, 2, 3, 4, 5]
    let num = arr.find(function (v,i,a) {
        return v > 3
    })
    console.log(num)  //4
let arr = [1, 2, 3, 4, 5]
    let num = arr.findIndex(function (v,i,a) {
        return v > 3
    })
    console.log(num)  //3

 fill

本质:填充吧数组中是全部项都改为fill中参数的值

let arr = [1,2,8,8,8]
arr.fill(1)
console.log("arr",arr)

 .entries、keys和values

let arr = [1, 2, 3, 4, 5];
//遍历键名
for(let index of arr.keys()){
    console.log(index)
}

//遍历值
for(let v of arr.values()){
    console.log(v)
}
//遍历键/值对
let arr = [1, 2, 3, 4, 5];
for(let index of arr.keys()){
    console.log(index)
}

解释:这个也就是for in 与 for of 的区别   这里大家打印一下就知道3种的区别了

includes

本质:判断是否含有某一个值,返回boolear

区别:比indexOf好,至少再语义化上

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(7)) //false
console.log(arr.includes(1)) //true

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js数组的常见属性和方法 的相关文章

  • padding属性详细分析

    lt p gt 1 padding会增加元素的尺寸 lt p gt lt p gt 2 padding对内联元素的影响 xff0c 对内联元素的垂直方向的影响是有的但视觉是没有 lt p gt lt a href 61 34 javasvr
  • 利用margin来实现两端对起

    为什么会对齐一般我们给li标签设置margin left最后一个总是会有一个不需要的left那为什么如何去除呢 xff1f 答案是 xff1a margin xff1a 负值 如果ul右边多了20px xff0c 那么给ul设置个margi
  • 裸机通过u盘以hostengine的方式成功安装ovirt4.5

    本次安装是在两台服务器上进行 xff0c 采用hostengine的方式安装 xff0c 也就是一台机上先安装oVirt node xff0c 再安装oVirt engine xff0c 另外一台机安装oVirt node xff0c 并加
  • 关于paddin-bottom的中的未定义的问题

    css世界的学习后 xff1a padding的兼容问题一般遇不到 xff0c 滚轮什么时候出现 xff1a Chrome浏览器的滚轮是在子元素超过content box的时候显示 xff1b IE Firefox是在超过padding b
  • 流动性的深入学习

    何为 34 流 34 流 61 文档流 xff1b 当我们在一个容器中倒入足量的水时 xff0c 水一定会均匀平铺整个容器 所以流动性也就是100 自适应 但width 61 100 xff01 61 流动性自适应100 原因 xff1a
  • 如何用border来画三角形

    学习总结 HTML lt div class 61 34 son 34 gt lt div gt CSS son width 0px border 20px solid border color black transparent tran
  • window和document的区别

    window对象 它是一个顶层对象 而不是另一个对象的属性 xff0c 即浏览器的窗口 document 当前显示的文档 该属性本身也是一个对象
  • JS距离的理解

    偏移量 offsetWidth 元素在水平方向上占用的空间大 xff0c 包括元素的宽度 可见的垂直滚动条宽度 左边框高度和右边框高度 offsetWidth 61 width 43 padding 43 border offsetHeig
  • 汉堡按钮的制作以及其中的问题

    第一种自己写的 xff0c 下面的第二种是网上的用一个span使用做出来的 HTML lt div class 61 34 box 34 gt lt chang用来判断是否变换 gt lt span class 61 34 s1 34 gt
  • 对js动画和时间控制的使用

    JavaScript Document 打算移动的元素ID xff1b elementID 该元素的目的地的 34 左 34 位置 xff1b final x 该元素的目的地的 34 上 34 位置 xff1b final y 停顿时间 x
  • css动画小结

    一 转换 transform IE9 43 1 旋转rotate transform rotate 30deg ms transform rotate 30deg IE 9 webkit transform rotate 30deg Saf
  • Django 判断访问来源是PC端还是手机端

    pc or mobile py 判断访问来源是pc端还是手机端 import re def judge pc or mobile ua 34 34 34 param ua 访问来源头信息中的User Agent字段内容 return 34
  • 圆形进度条是学习

    学习网站 xff1a http www cnblogs com jr1993 p 4677921 html CSS margin 0px padding 0px box margin 50px auto 0 width 300px heig
  • 定位插件

    写了个等位插件 xff0c 点击nav中的LI xff0c 位移 xff08 与href有视觉效果 xff09 到达相应板块 xff08 这里的类比li中的类中多了个H字母 xff09 的位置 lt li class 61 34 wz 34
  • JQ复习

    一选择器 1 基本选择器 2 层级选择器 3 过滤选择器 first 选取第一个元素 last 选择最后一个元素 not 去除所有与给定选择器匹配的元素 39 input not first 39 even选取索引是偶数的元素 xff0c
  • 第7章艺术编程Ajax的学习

    终于学到Ajax以前一直没接触到一直以为很NB xff0c 对这些内容我基本上是个小白中的小白哎 xff0c 继续加油 Ajax可以做到只更新页面的一下部分 xff0c 其他部分不需要重新加载 下面就是根据书上的内容所写 HTML lt d
  • 函数是否加括号的问题

    lt a onclick 61 34 fun 34 gt lt a gt 这里有括号 document getElementById 34 ID 34 onclick 61 fun 这里不可以有括号 为什么会有这样的不同 首先加上括号是执行
  • this的详细分析加案例

    this对象是在函数运行时候基于函数的执行环境 xff08 上下文 xff09 绑定的 方法调用模式函数调用模式改造器调用模式apply call bind调用模式 1 方法调用模式 函数有所属对象 xff0c 也就是这个函数是myObje
  • 构造函数与原型链和面向对象的学习(一)

    什么是构造函数 构造函数就是一个普通的函数 xff0c 里面可以写任何语句 逻辑语句或DOM操作 xff0c 可以new出新的实例 xff0c 使其实例可以共享构造函数的原型 第一个例子 function Fun this name 61

随机推荐

  • 构造函数与原型链和面向对象的学习(二)

    原型链 proto proto 也就是对象的 prototype 属性 每一个函数都有一个属性叫做prototype 指向一个对象 不是函数就没有这个属性 这个对象叫原型对象 当这个构造函数被new的时候 xff0c 他的每一个实例对象的
  • 构造函数与原型链和面向对象的学习(三)

    小案例 xff08 红绿灯 xff09 下面对面向对象写个小案例 xff08 红绿灯 xff09 上面是原图 用来来实现点击图片 xff0c 红绿灯的颜色改变 xff0c 控制背景图片的定位来改变 点击一下 就是要完成上面的效果 如果只要实
  • js中的预编译和作用域链

    预编译目的 1 定义作用域中的初始化词法环境 xff0c 而词法环境中有定于作用域 xff0c 从而规定了变量的作用域 2 先是在为undefined xff0c 减少运行时报错 形参去实参的区别 1 形参变量只有在被调用时才分配内存单元
  • ffmpeg视频处理神器学习基础笔记

    FFmpeg文档汇总 xff1a https ffmpeg org documentation html FFmpeg filters文档 xff1a https ffmpeg org ffmpeg filters html 视频处理 视频
  • Vue.js动画和过渡

    vue中的过渡与动画 过滤 把需要添加动画效果的DIV放到transition标签 之后就会发生以下3个步骤 自动嗅探目标元素是否应用了 CSS 过渡或动画 xff0c 如果是 xff0c 在恰当的时机添加 删除 CSS 类名 等下要写的6
  • Vue.js使用keyframes动画

    lt DOCTYPE html gt lt html gt lt head gt lt meta charset 61 34 utf 8 34 gt lt title gt Vue中css动画的原理 lt title gt lt scrip
  • Vue.js使用animate.css框架

    1 如何使用animate框架 lt DOCTYPE html gt lt html gt lt head gt lt meta charset 61 34 utf 8 34 gt lt title gt Vue中css动画的原理 lt t
  • vue.js中添加动画

    通过触发事件 xff0c 改变data中的值 xff0c 或者改变点击标签元素上的属性值 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 6
  • 多个元素和列表的过渡

    多个元素 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title gt 多个元素的组件的过渡动
  • flex弹性布局的学习

    布局的传统解决方案是基于盒状模型 xff0c 依赖 display 43 position 43 float 方式来实现 xff0c 灵活性较差 2009年 xff0c W3C提出了一种新的方案 Flex xff0c Flex是Flexib
  • 震惊!Ajax项目中的使用

    啊啊 xff01 实习第一天写了个移动端的分享列表 就在第三天我们的技术大佬亲自教我们如何对接后台 当然用的是我写的移动端的分享列表 虽然这次应用不是很深入 xff0c 但还是比较广泛 用到了Ajax xff0c sui框架 zepto x
  • 关于viewport视口的学习

    简单来说 lt meta name 61 34 viewport 34 content 61 34 width 61 device width initial scale 61 1 0 34 gt content属性值 width 可视区域
  • 淘宝的H5布局

    利用viewport和rem布局实现的淘宝布局 下面先看看em布局的原理 em作为font size的单位时 xff0c 其代表父元素的字体大小 xff0c em作为其他属性单位时 xff0c 代表自身字体大小 MDN em作为字体单位 x
  • css的优先级

    优先级 浏览器通过优先级来判断哪些属性值与一个元素最为相关 xff0c 从而在该元素上应用这些属性值 优先级是基于不同种类选择器组成的匹配规则 优先级是如何计算的 优先级就是分配给指定的 CSS 声明的一个权重 xff0c 它由 匹配的选择
  • Django设置分享到微信好友和朋友圈时的标题、摘要、链接和图片

    主要参考官方文档 1 前端分享给好友和朋友圈的js代码 share html lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta
  • 孙其功陪你学之——如何将shell命令的返回值赋值给应用程序的变量

    如何将shell命令的返回值赋值给应用程序的变量 博主最近做了个路由器的项目 xff0c 需要得到路由器现在网络状态和参数 xff0c 使用UCI get 获得 xff0c 但是使用了system xff08 UCI get xff09 之
  • shell编程2条件语句

    文章目录 shell编程之条件语句1 条件测试1 1 返回值1 2 test 2 文件测试3 整数值比较4 逻辑测试5 if语句5 1 单分支 if 语句5 2 双分支 if 语句5 3 多分支 if 语句 6 case 语句7 实验7 1
  • html和css的hack的学习

    在整理基础的时候总结 html和css的hack的学习 hack是什么 xff1f 就是针对不同的浏览器写不同的css样式让各浏览器能达到一致的渲染效果 xff0c hack分为HTML和CSS HTML hack lt if lte IE
  • 数组的迭代与归并的方法

    迭代的作用 xff1a 减少代码量 xff1a 例如因为map xff0c filter方法会自动生产数组不用自己在for创建 xff0c 有利于性能优化 xff1b 和无需知道对象的长度 补充19 6 11 xff1a 迭代的方法是表达式
  • js数组的常见属性和方法

    属性 strong length strong 是Array的实例属性 返回或设置一个数组中的元素个数 该值是一个无符号 32 bit 整数 xff0c 并且总是大于数组最高项的下标 xff0c 不只是可读 Array prototype