js 数组

Posted h0000dh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 数组相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-1</title>
</head>
<body>
<h1>通过指定元素创建数组</h1>
<script language="javascript">
    var students = new Array( "Peter", "Tom", "Vicky", "Jet" );    // 通过指定元素创建数组
    for( n in students )
    {
        document.write( students[n] + " " );
    }
</script>
</body>
</html>
toString方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-2</title>
</head>
<body>
<h1>toString方法的使用</h1>
<script language="javascript">
    var names = ["Peter", "Vicky", "LuWang", "HuaLi"];  // 名字数组
    document.write( names.toString() );                 // 输出所有名字
</script>
</body>
</html>
join方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-3</title>
</head>
<body>
<h1>join方法的使用</h1>
<script language="javascript">
    var names = ["Peter", "Vicky", "LuWang", "HuaLi"];  // 名字数组
    document.write( names.join( "-" ) );                 // 输出所有名字
</script>
</body>
</html>
push方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-4</title>
</head>
<body>
<h1>push方法的使用</h1>
<script language="javascript">
var List = new Array();                     // 创建一个空数组作为名单
for( ; ; )
{
    var name = prompt("请输入名字","名字"); // 要求用户输入名字
    if( name==null )                            // 如果用户取消则退出循环
    {
        break;
    }
    List.push( name );                      // 将输入的数据作为数组元素添加到数组
}
var comList = List.join( " " );             // 使用空格将各元素格开，作为字串符输出
document.write( comList );
</script>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-5</title>
</head>
<body>
<script language="javascript">
    var appleBox = new Array();
    appleBox.push( "红苹果1", "红苹果2", "红苹果3", "红苹果4", "红苹果5", "红苹果6" );
    for( ;appleBox.length != 0; )
    {
        var handle = appleBox.pop();
        document.write( "<br>已发：" + handle );
    }
    alert( "苹果已经分光~！" );
</script>
</body>
</html>

 

售票窗口模拟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-6</title>
</head>
<body>
<h1>售票窗口模拟</h1>
<script language="javascript">
    var queue = new Array();                                                // 购票队列
    function client(name)                                                   // 顾客对象
    {
        this.name = name;                                                   // 顾客名字
        this.ticket = NaN;                                                  // 票号
    }
    queue.push( new client("Lily"), new client("Peter"), 
                new client("Vicky"), new client("Tom"), 
                new client("Jackson") );                                    // 将顾客排队
    tickets = 4;                                                            // 库存票数
    for( ;((queue.length!=0)&&(tickets!=0)) ; )                             // 一直发售直到队伍里没有人或票已经售完
    {
        var current = queue.shift();                                        // 队首已经买到票的人离开队伍
        current.ticket = tickets;
        document.write("<br>已售：" + current.name + "，流水号" + tickets );// 输出已买到票的顾客信息
        tickets --;                                                         // 卖出一张，库存减一
    }
    
    alert( "销售停止，目前队里有" + queue.length + "人，和" + tickets+"张票！" );   // 俏售停止通知
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-7</title>
</head>
<body>
<h1>unshift方法的使用</h1>
<script language="javascript">
    var queue = new Array( "A", "B", "C" );                        // 创建一个队列
    document.write( "<br>原数组：" + queue );                    // 输出原数组
    queue.unshift( "D", "E" );                                    // 前端插入两个元素
    document.write( "<br>在前端添加“D”“E”两元素后：" + queue );    // 输出新数组
</script>
</body>
</html>

 

 

concat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-8</title>
</head>
<body>
<h1>concat的使用示例</h1>
<script language="javascript">
    var queueA = new Array( "顾客1", "顾客2", "顾客3", "顾客4", "顾客5" );  // 窗口A前的队伍A
    var queueB = new Array( "顾客A", "顾客B", "顾客C", "顾客D", "顾客E" );  // 窗口B前的队伍B
    var qa = queueA.join( "-" );                                            // 组合队伍A的成员，使用“-”格开
    var qb = queueB.join( "-" );                                            // 组合队伍B的成员，使用“-”格开
    document.write( "窗口前的两个队伍：" );                                 
    document.write( "<br><li>" + qa );                                      // 输出队伍A的成员                                   
    document.write( "<br><li>" + qb );                                      // 输出队伍B的成员
    queueA = queueA.concat( queueB );                                       // 将队伍B接到队伍A的后面
    qa = queueA.join( "-" );                                                // 组合合并后的队伍，使用“-”格开
    document.write( "<br>将队伍B合并到队伍A：" );                           
    document.write( "<br><li>" + qa );                                      // 输出合并后的队伍成员
</script>
</body>
</html>

 

splice
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-9</title>
</head>
<body>
<h1>splice的使用示例</h1>
<script language="javascript">
    var queueA = new Array();           // 体操队列A
    queueA.push( "学生A", "学生B", "学生C", "学生D", "学生E", "学生F"); // 队员进队
    document.write( "<li>原来的队伍A：<br>" + queueA );                 // 输出队伍A的成员
    var queueB = queueA.splice( 2, 3 ); // 从A队中的第3位学生开始抽出3名学生按顺序组成一个新队
    document.write( "<br><li>调整后的队伍A：<br>" + queueA );           // 输出裁员后的队伍A
    document.write( "<br><li>新建的队伍B：<br>" + queueB );             // 输出从队伍A中切取成员形成的队伍B
    queueA.splice( 1,0, "学生1", "学生2" );                             // 从队伍A的第2个学生处起插入两名学生
    document.write( "<br><li>添加后的队伍A：<br>" + queueA );           // 输出插入学生后的队伍A
</script>
</body>
</html>

 

 

 

slice
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-10</title>
</head>
<body>
<h1>slice方法的作用</h1>
<script language="javascript">
    var queueA = new Array();                                           // 体操队列A
    queueA.push( "学生A", "学生B", "学生C", "学生D", "学生E", "学生F"); // 队员进队
    queueA = queueA.slice( 1, 4 );                                      // 切取第2个到第3个元素作为新数组
    alert( queueA );                                                    // 输出切取出来的数组
</script>
</body>
</html>

 

reverse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-11</title>
</head>
<body>
<h1>reverse方法的作用</h1>
<script language="javascript">
    var queue = new Array( "甲", "乙", "丙", "丁" );    // 创建数组
    var newQueue = queue.reverse();                     // 将queue的元素次序反转后形成的新对象内容输出
    document.write( "<li>翻转前：" + queue + "<br><li>翻转后：" + newQueue );
</script>
</body>
</html>

 

 

date.toLocaleString()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-12</title>
</head>
<body>
<h1>date.toLocaleString()</h1>
<script language="javascript">
    var date = new Date();
    alert( date.toLocaleString() );
</script>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>范例7-13</title>
</head>
<body>
<h1>toLocaleString方法的作用</h1>
<script language="javascript">
    var date = new Date();              // 创建一个日期对象
    alert( date.toLocaleString() );     // 将日期对象作为本地字符串输出
</script>
</body>
</html>

 

Stack（堆栈）对象的测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>综合练习7-1</title>
</head>
<body>
<h1>Stack（堆栈）对象的测试</h1>
<script language="javascript">
    function Stack()                    // 定义一个Stack（堆栈）对象的构造函数
    {
        var DateStorage = new Array();  // 创建一个数组作为数据仓库
        this.push = function( obj )     // push方法，压入数据对象
        {
            DateStorage.push( obj );    // 将数据存入仓库
        }
        this.pop = function()           // pop方法，从栈中弹出数据对象
        {
            return DateStorage.pop();   // 数据从仓库取出
        }
    }
    var cartridge_clip = new Stack();   // 测试Stack对象，模拟一个弹夹
    cartridge_clip.push( "子弹1" );     // 压入5颗子弹
    cartridge_clip.push( "子弹2" );
    cartridge_clip.push( "子弹3" );
    cartridge_clip.push( "子弹4" );
    cartridge_clip.push( "子弹5" );
    document.write( "<li>子弹入夹顺序：子弹1 子弹2 子弹3 子弹4 子弹5<br>" );    // 输出子弹入夹顺序
    document.write( "<li>子弹出夹顺序：" );
    for( ; ; )                          // 循环弹出夹中所有子弹
    {
        var cur = cartridge_clip.pop(); // 当前弹出的位于最顶端的子弹
        if( cur == null )               // 如果子弹弹尽时，跳出循环
        {
            break;
        }
        document.write( cur + " " );    // 输出当前子弹名称
    }
</script>
</body>
</html>

 

 

排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>练习7-1</title>
</head>
<body>
<h1</h1>
<script language="javascript">
    function mySort( )                              // 不定参数个数的排序函数
    {
        var args = new Array();                     // 使用数组作为参数存储容器
        for( n = 0; n < arguments.length; n++ )     // 提取各实参
        {
           args.push( arguments[n] );               // 将实参压入数组
        }
        for( i = 0; i < args.length; i ++ )         // 逐一比较，从小到大进行排序
        {
            for( j = 0; j < args.length; j ++ ) 
            {
                if( args[i] < args[j] ) 
                {
                    var tmp = args[i];              // 小的数换到大的数前面
                    args[i] = args[j];
                    args[j] = tmp;
                }
            }
        }
        return args;                                // 返回已经排序的数组
    }
    var result = mySort( 5, 1, 6, 3, 2, 9, 7 );     // 对题设中的数字进行排序
    alert( result );                                // 显示结果
</script>
</body>
</html>

 



以上是关于js 数组的主要内容，如果未能解决你的问题，请参考以下文章

几个关于js数组方法reduce的经典片段

JS常用代码片段-127个常用罗列-值得收藏

web代码片段

javascript js数组找到片段

JavaScript笔试题（js高级代码片段）

为什么我不能在此片段中生成唯一对象数组？