Javascript数组函数unshift,shift,push,pop对比解释

尝试使用其他容易理解的同名来替代这些函数的命名。

js, array

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1851
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background-size: 100px;
}
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
body:after {
    content: '';
    display: table;
    clear: both;
}
.container,
.block {
    display: block;
    width: 100%;
    float: left;
}
.container:after,
.block:after {
    content: '';
    display: table;
    clear: both;
}
display: block;
width: 100%;
float: left;
:after {
    content: '';
    display: table;
    clear: both;
}
.block-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.block-list li {
    display: block;
    width: 100%;
    float: left;
}
.block-list li:after {
    content: '';
    display: table;
    clear: both;
}
.inner-w {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.inner-w:after {
    content: '';
    display: table;
    clear: both;
}
.image-w img,
.image-w svg,
.image-w iframe,
.image-w video {
    display: block;
    width: 100%;
    height: auto;
}
body {
    margin: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
a:hover {
    cursor: pointer;
}
html,
body {
    cursor: default;
}
input[type="text"],
textarea,
code {
    cursor: text;
}
a,
label,
button,
input[type="radio"],
input[type="submit"],
input[type="checkbox"] {
    cursor: pointer;
}
button[disabled],
input[disabled] {
    cursor: default;
}
/*
break-points

base these on when things get ugly
and not any 'ipad' device specific stuff...

.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}
body:hover .visually-hidden a,
body:hover .visually-hidden input,
body:hover .visually-hidden button {
    display: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
    margin: 0;
    padding: 0;
    font-weight: 400;
}
::-moz-selection {
    background: transparent;
    color: #447790;
}
::selection {
    background: transparent;
    color: #447790;
}
.article h1 {
    font-family: $heading-font;
    font-size: 34px;
    line-height: 1.4;
    color: #f66;
    color: #222;
    margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
    .article h1 {
        font-size: 38px;
    }
}
.article h2 {
    font-size: 24px;
    line-height: 1.4;
    color: #ff6;
    color: #6cf;
    margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
    .article h2 {
        font-size: 26px;
    }
}
.article p + h2 {
    margin-top: 1.8rem;
}
.article h3 {
    font-size: 19px;
    line-height: 1.4;
    color: #6cf;
    font-weight: bold;
    color: #f66;
    margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
    .article h3 {
        font-size: 20px;
    }
}
.article p + h3 {
    margin-top: 1.8rem;
}
.article h4 {
    font-size: 19px;
    line-height: 1.4;
    color: #6cf;
    font-weight: bold;
    margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
    .article h4 {
        font-size: 20px;
    }
}
.article p + h4 {
    margin-top: 1.8rem;
}
.article h5 {
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 1.4;
    color: #222;
    font-weight: bold;
    margin-bottom: 0.6rem;
    font-style: italic;
}
@media screen and (min-width: 700px) {
    .article h5 {
        font-size: 17px;
    }
}
.article p + h5 {
    margin-top: 1.8rem;
}
.article p {
    font-family: 'Georgia', serif;
    font-size: 16px;
    line-height: 1.4;
    color: #222;
    margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
    .article p {
        font-size: 17px;
    }
}
.article ul,
.article ol {
    padding: 0.6rem 0 0.6rem 1.02rem;
}
.article ul li,
.article ol li {
    margin-bottom: 0.3rem;
}
[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    fill: currentColor;
}
.icon-x {
    width: 25px;
    height: 25px;
}
.button {
    display: inline-block;
    background: #f66;
    color: #b14e4e;
    border: 0;
    border-radius: 5px;
    padding: 0 1.2rem;
    line-height: 44px;
    min-width: 44px;
    min-width: 180px;
    text-align: center;
}
.button min-height $tap:hover {
    cursor: pointer;
}
.button > * {
    float: none;
    display: inline-block;
    vertical-align: middle;
}
.button:hover {
    cursor: pointer;
}
.button.light {
    background: #b7b7b7;
    color: #808080;
}
.button.dark {
    background: #808080;
    color: #515151;
}
.button.color {
    background: #6cf;
    color: #447790;
}
.button.highlight {
    background: #f66;
    color: #b14e4e;
}
.button.alternate {
    background: #ff6;
    color: #b1b14e;
}
h1:after,
h2:after,
h3:after,
h4:after,
h5:after,
h6:after,
p:after {
    color: inherit;
    opacity: 0.2;
}
h1:after {
    content: 'h1';
}
h2:after {
    content: 'h2';
}
h3:after {
    content: 'h3';
}
h4:after {
    content: 'h4';
}
h5:after {
    content: 'h5';
}
h6:after {
    content: 'h6';
}
p:after {
    content: 'p';
}
.media-size-helper {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent rgba(20, 20, 20, 0.1) transparent;
}
.media-size-helper:after {
    position: fixed;
    right: 0.6rem;
    bottom: 0.3rem;
    content: '0';
    color: #222;
}
@media screen and (min-width: 400px) {
    .media-size-helper:after {
        content: '1';
    }
}
@media screen and (min-width: 700px) {
    .media-size-helper:after {
        content: '2';
    }
}
@media screen and (min-width: 1000px) {
    .media-size-helper:after {
        content: '3';
    }
}
@media screen and (min-width: 1300px) {
    .media-size-helper:after {
        content: '4';
    }
}
@media screen and (min-width: 1700px) {
    .media-size-helper:after {
        content: '5';
    }
}
@media screen and (min-width: 2100px) {
    .media-size-helper:after {
        content: '6';
    }
}
@media screen and (min-width: 2400px) {
    .media-size-helper:after {
        content: '7';
    }
}
@media screen and (min-width: 2700px) {
    .media-size-helper:after {
        content: '8';
    }
}
@media screen and (min-width: 3000px) {
    .media-size-helper:after {
        content: '9';
    }
}
@media screen and (min-width: 400px) {
    .media-size-helper:after {
        content: '1';
    }
}
@media screen and (min-width: 700px) {
    .media-size-helper:after {
        content: '2';
    }
}
@media screen and (min-width: 1000px) {
    .media-size-helper:after {
        content: '3';
    }
}
@media screen and (min-width: 1300px) {
    .media-size-helper:after {
        content: '4';
    }
}
@media screen and (min-width: 1700px) {
    .media-size-helper:after {
        content: '5';
    }
}
@media screen and (min-width: 2100px) {
    .media-size-helper:after {
        content: '6';
    }
}
@media screen and (min-width: 2400px) {
    .media-size-helper:after {
        content: '7';
    }
}
@media screen and (min-width: 2700px) {
    .media-size-helper:after {
        content: '8';
    }
}
@media screen and (min-width: 3000px) {
    .media-size-helper:after {
        content: '9';
    }
}
.inner-w {
    padding: 0.6rem;
    max-width: 900px;
}
.basic-title * {
    float: none;
    display: inline-block;
    vertical-align: middle;
}
.container.basic-example {
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid #6cf;
}
.container.basic-example span {
    display: inline-block;
    -webkit-transform: translate(0.3rem, -83%);
    transform: translate(0.3rem, -83%);
    background: #e3e3e3;
    border: 2px solid #6cf;
    color: #6cf;
    font-size: 12px;
    padding: 0.5rem;
}
.container.basic-example .inner-w {
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    margin-bottom: 1.2rem;
    border: 2px solid #f66;
}
.container.basic-example .inner-w > span {
    border: 2px solid #f66;
    color: #f66;
}
.container.basic-example .block-list {
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid #222;
}
.container.basic-example .block-list span {
    border: 2px solid #222;
    color: #222;
}
.container.basic-example .block {
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    margin-bottom: 3rem;
    border: 2px solid #ff6;
}
.container.basic-example .block > span {
    border: 2px solid #ff6;
    color: #ff6;
}
.container.basic-example .image-w {
    position: relative;
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    padding: 0;
    margin-bottom: 1.2rem;
    border: 2px solid #6cf;
}
.container.basic-example .image-w > span {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 0;
    left: 0.3rem;
    -webkit-transform: translate(0.6rem, -50%);
    transform: translate(0.6rem, -50%);
    border: 2px solid #6cf;
    color: #6cf;
}
.container.basic-example .text-w {
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid #6cf;
}
.container.basic-example .text-w > span {
    border: 2px solid #6cf;
    color: #6cf;
}
.basic-swatches {
    padding-bottom: 30px;
}
.basic-swatches .swatch-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.basic-swatches .swatch-list li {
    padding: 0.3rem;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    -webkit-transition: 0.3s padding ease-in;
    transition: 0.3s padding ease-in;
}
@media screen and (min-width: 400px) {
    .basic-swatches .swatch-list li {
        margin-bottom: 0.6rem;
        padding: 0.6rem;
        border-radius: 0.3rem;
    }
}
.basic-swatches .swatch-list li.black {
    background: #222;
}
.basic-swatches .swatch-list li.white {
    background: #efefef;
}
.basic-swatches .swatch-list li.gray-dark {
    background: #515151;
}
.basic-swatches .swatch-list li.gray {
    background: #808080;
}
.basic-swatches .swatch-list li.gray-light {
    background: #b7b7b7;
}
.basic-swatches .swatch-list li.gray-lighter {
    background: #e3e3e3;
}
.basic-swatches .swatch-list li.color-light {
    background: #aaddf7;
}
.basic-swatches .swatch-list li.color {
    background: #6cf;
}
.basic-swatches .swatch-list li.color-dark {
    background: #447790;
}
.basic-swatches .swatch-list li.highlight-light {
    background: #f7aaaa;
}
.basic-swatches .swatch-list li.highlight {
    background: #f66;
}
.basic-swatches .swatch-list li.highlight-dark {
    background: #b14e4e;
}
.basic-swatches .swatch-list li.alternate-light {
    background: #f7f7aa;
}
.basic-swatches .swatch-list li.alternate {
    background: #ff6;
}
.basic-swatches .swatch-list li.alternate-dark {
    background: #b1b14e;
}
@media screen and (min-width: 400px) and (max-width: 1299px) {
    .basic-swatches .swatch-list {
        padding: 0.6rem;
    }
    .basic-swatches .swatch-list > * {
        float: left;
        width: 32%;
        margin-right: 2%;
    }
    .basic-swatches .swatch-list > *:nth-of-type(3n + 3) {
        margin-right: 0;
    }
}
@media screen and (min-width: 1300px) {
    .basic-swatches .swatch-list {
        padding: 0.6rem;
    }
    .basic-swatches .swatch-list > * {
        float: left;
        width: 16.166666666666668%;
        margin-right: 0.6%;
    }
    .basic-swatches .swatch-list > *:nth-of-type(6n + 6) {
        margin-right: 0;
    }
}
.basic body {
    font-family: monospace;
}
.basic body .article p {
    color: #447790;
}
.basic .inner-w {
    padding: 0.6rem;
    max-width: 800px;
}
.basic #nothing {
    background: #6cf;
    color: #447790;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4543/noise.png");
    background-size: 100px;
    background-color: #6cf;
    border-color: #447790;
    float: none;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    float: none;
    display: inline-block;
    vertical-align: middle;
}
.basic #nothing:hover {
    cursor: pointer;
}
.basic .hidden {
    display: none;
}
.basic header.masthead {
    background: #f66;
    color: #b14e4e;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4543/noise.png");
    background-size: 100px;
    background-color: #f66;
    border-color: #b14e4e;
}
.basic header.masthead h2 {
    padding-bottom: 1.8rem;
    text-indent: 2.5rem;
}
.basic .understated {
    opacity: 0.5;
}
.basic .container.dark-theme {
    background: #222;
}
.basic .container.dark-theme span {
    background: #222;
}
.basic .container.dark-theme img {
    opacity: 0;
}
.basic .container.dark-theme .block {
    background: #1b1b1b;
}
@media screen and (min-width: 1000px) {
    .basic .container.dark-theme .block .image-w,
    .basic .container.dark-theme .block .text-w {
        width: 49%;
        float: left;
    }
}
.basic .container.dark-theme .block .image-w {
    max-width: 500px;
}
@media screen and (min-width: 1000px) {
    .basic .container.dark-theme .block .image-w {
        margin-right: 2%;
    }
}
@media screen and (min-width: 1300px) {
    .basic .container.dark-theme .block:nth-of-type(1) {
        position: relative;
        right: 6rem;
    }
}
@media screen and (min-width: 1700px) {
    .basic .container.dark-theme .block:nth-of-type(1) {
        top: 2.4rem;
        right: 9rem;
    }
}
@media screen and (min-width: 1300px) {
    .basic .container.dark-theme .block:nth-of-type(2) {
        -webkit-transform: translate(6rem, 0);
        transform: translate(6rem, 0);
    }
}
@media screen and (min-width: 1700px) {
    .basic .container.dark-theme .block:nth-of-type(2) {
        -webkit-transform: translate(18rem, 7.8rem);
        transform: translate(18rem, 7.8rem);
    }
}
.basic p {
    color: #efefef;
    font-family: monospace;
}
.basic .button {
    text-transform: uppercase;
}
p {
    max-width: 700px;
}
p:not(:last-of-type) {
    margin-bottom: 0.6rem;
}
body {
    padding: 1.2rem;
}
p {
    padding: 0.6rem 0;
}
p span {
    color: #f66;
}
p .return {
    color: #6cf;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    margin-bottom: 1.8rem;
}
li h3 span {
    color: #ff6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-family: monospace;
}
.credit {
    padding: 1.8rem;
}
.credit a {
    color: #6cf;
}

HTML

<li>
        <h2>Javascript Array: Unshift() Method</h2>
        <p>The unshift() method is like the push() method, only it works at the beginning of the array. The unshift() method can prepend one or more elements to the beginning of an array. This <span>alters the array</span> on which the method was called.
        </p>
        <h3>Ideas: <span>addFirst() addToFront() pushFirst()</span></h3>
    </li>

<li>
        <h2>Javascript Array: Push() Method</h2>
        <p>The push() method can append one or more elements to the end of an array. This <span>alters the array</span> on which the method was called.</p>
        <h3>Ideas: <span>addLast() addToEnd() pushLast()</span></h3>
    </li>

<li>
        <h2>Javascript Array: Shift() Method</h2>
        <p>The shift() method is like the pop() method, only it works at the beginning of the array. The shift() method pulls the first element off of the given array and <span class='return'>returns it</span>. This <span>alters the array</span> on which
            the method was called. </p>
        <h3>Ideas: <span>grabFirst() popFirst() pullFirst()</span></h3>
    </li>

<li>
        <h2>Javascript Array: Pop() Method</h2>
        <p>The pop() method pulls the last element off of the given array and <span class='return'>returns it</span>. This <span>alters the array</span> on which the method was called.</p>
        <h3>Ideas: <span>grabLast() popLast() pullLast()</span></h3>
    </li>

</ul>

<p class='credit'>
    descriptions pulled from <a href='https://www.bennadel.com/blog/1796-javascript-array-methods-unshift-shift-push-and-pop.htm' target='_ben'>Ben Nadel</a>
</p>

尝试使用其他容易理解的同名来替代这些函数的命名。

js, array

编辑器支持Emmet

快捷键

尝试使用其他容易理解的同名来替代这些函数的命名。

js, array

Daterangepicker.js和Moment.js实现日期时间范围选择器代码示例

Simpleweather.js 简单的天气预报组件 [Deprecated]

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：