2018-07-10JavaScript(3)

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”。
  • 替换的数据位数可以不同于被替换的数据位数。

字符串

字符串的连接

  1. 通过连字符“+”连接。

var s3=s1+s2;

  1. 通过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')
    }

代码分析:

  1. index_point为最后一个‘.’的索引。
  2. 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,649评论 18 139
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,180评论 0 3
  • 三天课程的主要内容 一、 what:自律是什么 自律是一种,有意识的、尊重现实的、承担成长责任的、把痛苦转化为快乐...
    流光易阅读 752评论 8 3
  • “听”是每个小朋友探索世界的一个重要途径,听觉记忆也对孩子语言发展有着重要的作用,本次游戏可以让小朋友去发现一些声...
    沣郡梧桐阅读 748评论 0 0
  • 今天的天气很闷,预告有雨,这几天气预告上一直写着有雨但就是不下,这样的天气让我倍感憋闷。就像是别人已经告诉了你将要...
    夏林鹿阅读 205评论 0 1