JavaScript基础语法（3）

数组

代码示例：

var arr=[1,3,3,4,5,3,6,7,];
    var arr01=[];
    console.log(arr);
    for(var item of arr){//
        if(arr01.indexOf(item)==-1){//
            arr01.push(item);//
        }
    }
    console.log(arr01);

要点

for的of循环得到的item是数组中的每个元素。

indexof用来确定数组中是否存在item，若存在则返回在在数组中的索引位置，不存在则返回-1。

push用来在数组的后面添加元素。

若在该循环内对item进行修改，不会对原数组中的数据造成影响。

var arr=[1,3,3,4,5,3,6,7,];
    console.log(arr);
    for(var index in arr){//*****
        console.log(arr[index]);
        if(arr.indexOf(arr[index])!=-1){
            console.log(index);
            arr.splice(index,index);//*****
        }
        console.log(index);
    }
    console.log(arr);

要点

for的in循环得到的是index，是数组中各元素的索引。

splice(a,b)用来删除数组中的对应元素，其中a表示起始位置，b表示要删除的位数。

splice(a,b,"a","b","c","d")也可以用来替换数组中的元素。即将从a位起的b个数替换为“a”，“b”，“c”，“d”。

替换的数据位数可以不同于被替换的数据位数。

字符串

字符串的连接

通过连字符“+”连接。

var s3=s1+s2;

通过concat连接。

var s3=s1.concat(s2);

两者的效果相同

查找字符串的子串

通过indexOf方法

代码示例：

var s1='hello world,hello china';
var index=s1.indexOf('hello',3);
console.log(index);

结果：

12

要点：

"hello",表示要查找的子串，3表是从原字符串的第三位开始查找。

第一个字符的位置为0.

空格也算字符。

字符串的截取

代码示例：

var s1='hello world,hello china';
var new_s1=s1.substr(6,5);
console.log(new_s1);

结果：

world
要点：

6表示索引为6的字符开始截取，5表示截取5个字符。

第一个字符的索引为0.

字符串的截断

不同于字符串的截取，截断是指将数组在特定字符处截断。

var date='2018-07-01';
var arr=date.split('-');
console.log(arr);

结果：

["2018", "07", "01"]

字符串demo

代码示例：

//    判断字符串是否是邮箱
    var email='lzhan@163.com.cn'
    var index_at=email.indexOf('@');
    var index_point=email.lastIndexOf('.');//1
    if(index_at>0 && index_point-index_at>1 && index_point<email.length-2){//5
        alert('yes')
    }else{
        alert('no')
    }

代码分析：

index_point为最后一个‘.’的索引。

index_at>0说明字符串中有@存在并且不再第一位，index_point-index_at>1表示.在@后面并且两者不相连，index_point<email.length-2说明.不是该字符串的最后一位。

Json

json是js原生支持的，其他语言想要使用json要导入对应的包。

json格式示例

var user={"name":"tom","age":12};
console.log(user.name);
console.log(user.age);

运行结果：

tom
age

说明

:前面是key（即索引），可以说是属性名，：后面是属性的值。json里面的值可以直接通过.调用。

demo

//制作静态模板
<div id="back">
    <table id="goods">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>价格</td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    var goods=[
        {"id":"001","name":"iphone1","price":"1000"},
        {"id":"002","name":"iphone2","price":"2000"},
        {"id":"003","name":"iphone3","price":"3000"},
        {"id":"004","name":"iphone3G","price":"4000"},
        {"id":"005","name":"iphone4","price":"5000"},
        {"id":"006","name":"iphone4s","price":"5500"}
    ];

    //1. 取得容器
    var conn=document.querySelector('#goods');
    //2. 遍历数据
    //将json中的数据动态填充到前台模板中
    for(var item of goods){
        conn.innerHTML+=`//在原HTML代码中添加如下部分
        <tr onclick="show(${item.id})">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.price}</td>
        </tr>`
    }
    function show(id) {
        alert(id);
    }
</script>

效果：

demo效果json.PNG