第一周 Web开发入门（中）

四.JavaScript数组

JavaScript数组是指将多个数据对象编码存储、提供一致的数据存取方式集合。

数组元素：是指存储在数组中并赋予唯一索引号的数据段。

与其他程序语言不通，JavaScript的数组元素数据类型可以不相同。

各元素的数据类型可以是任意有效的JavaScript数据类型，元素按添加进数组的顺序存储于数组中。

1.数组定义

//方法1
var myphones=new array[4];
myphones[0]=1;
myphones[1]=2;
myphones[2]=3;
myphones[3]=4;


//方法2
var myphones[1,2,3,4];

//方法3
var myphones=new array(1,2,3,4);

2.数组遍历方法

//方法1 for循环实现
var phones["小米","三星","苹果","华为"];

for(var i=0;i<phones.length;i++)
{
    document.write(myphones[i]);
    document.write("<br/>");
}

//方法2 for in循环
var phones["小米","三星","苹果","华为"];
for(key in phones)
{
    document.write(myphones[key]);
}

3.数组操作----插入、删除

    ✓从队尾插入删除元素

    push() 方法（在数组结尾处）向数组添加一个新的元素；

    pop() 方法从数组结尾处中删除最后一个元素。 

    ✓ 从头部插入删除元素

    unshift() 方法（在开头）向数组添加新元素

    shift() 方法会删除开头的元素。 

    ✓ 在任意位置插入删除元素

    splice() 方法既可以在数组的任意位置插入元素，也可以在数组的任意位置删除元素。

var mycars=["Saab","Volvo","BWM"];
//删除元素
var car=mycars.splice(1,2);//从索引的位置删除两个元素
document.write("被删除的元素是："+car);//打印删除的元素
document.write("<br/>");
document.write("删除操作后的新数组元素是："+mycars);
document.write("<br/>");
//splice 从指定位置插入元素
mycars.splice(1,0,"Volvo","BWM","宝马","奔驰");
document.write("插入操作后的新数组元素是："+mycars);

4.数组操作----排序

    sort()方法以字母顺序对数组进行排序。

    reverse()方法反转数组的元素。

5.数组操作----合并

    var arr=[1,3,5];

    var arr1=[2,4,6];

    var arr2=[7,8,9];

    var newArr=arr.concat(arr1,arr2);//合并三个数组

6.数组转字符串

var mycars = ['宝马','奔驰','奇瑞','标致','捷达'];
var cars = mycars.join("|"); // 用|连接的字符串
//数组转换为字符串 ，分隔
var cars1=mycars.toString();
document.write(cars);
document.write("<br/>");
document.write(cars1);

    7.对象数组

<script>
    function user(name,age,sex);
    user1=new user("何涛","19","男");
    user2=new user("张旺","20","男");
    array1=new array(user1,user2,user3);

    for(var I=0;i<arr.length;i++)
    {
        console.log(array1[i].name);
    }
</script>

五.javaScript字符串

用于存储和操作文本。JavaScript字符串引号的零个或多个字符。

1.字符串搜索

    -indexOf()方法

       返回字符串中指定文本首次出现的索引(位置)；

    -lastindexOf()方法

       返回指定文本在字符串中最后一次出现的索引；

    如果未找到文本，则均返回-1

var str = 'abcdeabcde'; //indexof(搜索词,起始索引位置) 
起始索引位置开始，检索顺序 从前往后
console.log(str.indexOf('a')); // 首次出现的位置 返回0 
console.log(str.indexOf('a', 3)); // 返回5 
console.log(str.indexOf('bc')); // 返回1 
//lastIndexOf(搜索词,起始索引位置) 检索顺序 从后往前
var str = 'abcdeabcde'; 
console.log(str.lastIndexOf('a')); // 返回5 
console.log(str.lastIndexOf('a', 3)); // 返回0，从索引3的位
置往前检索

      -search()方法

         用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回相匹配的String对象起始位置。

      -match()方法

         返回一个数组，其中存放了与他找到匹配文本有关的信息。

var str = 'abcDEF'; 
//search(搜索词) search(正则表达式) 检索搜索词子字符串 返回子字符串在串
的位置
console.log(str.search('c')); //返回2
console.log(str.search('d')); //无匹配，返回-1
console.log(str.search(/d/i)); //返回3，正则语法/i表示忽视大小写
var str = '1a2b3c4d5e';
//match(搜索词) match(正则表达式) 检索搜索词子字符串 返回初识索引位置
返回数组
console.log(str.match('h')); //返回null
console.log(str.match('b')); //返回["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/d/i)); //返回["d", index: 7, input: "1a2b3c4d5e"]

2.字符串替换

    replace()方法用另一个值替换在字符串中指定的值

    字符串.replace(正则表达式/要被替换的字符，要替换成为的子字符串)

//replace（）两个参数
//第一个参数是字符串或没有进行全局匹配的正则表达式，只进
行一次替换，替换最前面的
document.write(str.replace('a', 'A')); 
document.write("<br/>");
document.write(str.replace(/a/i, 'A')); //正则表达式 /i忽略大
小写
document.write("<br/>");
document.write(str.replace(/a/g, 'A')); // /g全局匹配

3.字符串切割

    可以通过split()将字符串转换为数组。

var str = 'h|e|l|l|o'; 
console.log(str.split('|')); //返回["h", "e", "l", "l", "o"]
console.log(str.split('|', 3)); //返回["h", "e", "l"]
console.log(str.split('')); //返回["h", "|", "e", "|", "l", "|", "l", "|", "o"]

六.JavaScript函数

设计为指定任务的代码块，函数会在某代码调用它被执行

Function 函数名（[参数1]）

{

     [语句组]、[return表达式];

}

1.函数声明三种方式：

   -通过函数名声明

   -通过将匿名函数赋值给变量

   -通过new Function方式声明

其中前两种只有在调用函数时，才可以执行，第三种，直接执行，不需要调用。

//通过函数名声明
function fun1(){
    document.write("我是函数fun1");  //函数体
    document.write('br/');
}
fun1();

//匿名函数赋值给变量
var fun2=function(){
    document.write("我是函数fun1");  //函数体
    document.write('br/');
}
fun2();

//直接调用无需执行
var fun3=new Function(document.write('我是函数fun3'));

2.函数调用

除了使用Function对象的构造函数创建的函数不需要调用，其他函数均需调用才能执行。

(1)传值调用

(2)传址调用

(3)传函数调用

(4)链接调用、事件触发调用

//传值调用
function1 fun1(str){
    str='你好';
}
var a='hello';
fun1(a);
document.write(a);     //输出值为hello，形参的值不会改变实参的值

//传址调用
function2 fun2(person){
    person.name='何涛';
}
var b={name:'李四';}   //对象类型 引用类型
fun2(b);    //传地址调用
document.write(b);     //输出值为何涛

//传函数调用
function add(a,b)
{
    return a+b;
}

function times(a,b)
{
    return a*b;
}

function operation(a,b,fun)
{
    return fun(a,b);
}

var test1=operation(3,5,add);
document.write(test1);


//链接调用 TAT没看懂

3.内置函数----定时器函数

使用定时器可以为web页面制作出移动端的景物、变幻的色彩等动画效果，这些都需要定时器将页面元素分帧改变其属性。

JavaScript 定时器有两个方法： 

✓ setInterval(): 

✓ setTimeout( ):

<body onload="f1()">
<font id='fTime'></font>
<button onclick="stop()">单击停止时间走动</button>
    <script>
        var ftime;//类似全部变量
        var timeId;
        window.onload=function()
        {
            ftime=document.getElementById("fTime");//初始化    
            timeMove();//调用函数
        }
        function timeMove(){
        var date=new Date();//当前日期对象                                         fTime.innerHTML=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
         }//往ftime填数据
        timeId=setInterval(timeMove,1000); //每秒调用一次
        function stop(){
        clearInterval(timeId); //
    }
    </script>
</body>