网页编程和设计 JavaScript语言(ES5)(三)

简介: 网页编程和设计 JavaScript语言(ES5)(三)

九、循环语句值for

循环语句用于重复执行某个操作

for语句就是循环命令,可以指定循环的起点、终点和终止条件。它的格式如下

for (初始化表达式; 条件; 迭代因子) {
 语句
}

for语句后面的括号里面,有三个表达式。

  1. 初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次。
  2. 布尔表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环。
  3. 迭代因子(increment):每轮循环的最后一个操作,通常用来递增循环变量。

var x = 3;
for (var i = 0; i < x; i++) {
 console.log(i);
}

for语句的三个表达式,可以省略任何一个,也可以全部省略。

for ( ; ; ){
 console.log('Hello World');
}

温馨提示

如果三个都省略,结果就导致了一个无限循环(死循环)

9.1 for循环语句实操

循环输出1~100之间数字的和

var sum=0;
for(var i=1;i<=100;i++){
  sum+=i;
}
console.log(sum);

循环输出1000以内的奇数

for(i = 0 ; i<1000; i ++){
  if( i % 2 ==1){
    console.log( i + " ");  
   }
}

打印九九乘法表

    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(j+"*"+i+"="+(i*j)+"    ")
        }
        document.write("<br>");
    }

十、while循环语句

While语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。

while (条件) {
 语句;
}

十一、break语句和continue语句

break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行

11.1 break

break语句用于跳出代码块或循环

for (var i = 0; i < 5; i++) {
  if (i === 3){
    break;
   }
  console.log(i);
}

11.2 continue

continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环

for (var i = 0; i < 5; i++) {
  if (i === 3){
    continue;
   }
  console.log(i);
}

十二、字符串

字符串就是零个或多个排在一起的字符,放在单引号或双引号之中.

单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号

如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此。

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"
"Did she say \"Hello\"?"
// "Did she say "Hello"?"

温馨提示

字符串默认只能写在一行内,分成多行将会报错

如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠

var longString = 'Long \
long \
string';
longString
// "Long long long string"

length 属性

length属性返回字符串的长度,该属性也是无法改变的

var s = 'Javascript';
s.length // 10

12.1 字符串方法_charAt

charAt方法返回指定位置的字符,参数是从0开始编号的

var s = new String('JavaScript');
s.charAt(1) // "J"
s.charAt(s.length - 1) // "t"

如果参数为负数,或大于等于字符串的长度,charAt返回空字符

'JavaScript'.charAt(-1) // ""
'JavaScript'.charAt(12) // ""

12.2 字符串方法_concat

concat方法用于连接两个字符串,返回一个新字符串,不改变原字符串

    var s1 = 'Java';
    var s2 = 'Script';
    s1.concat(s2) // "JavaScript"
    s1 // "Java"

该方法可以接受多个参数

'web前端'.concat('Java', 'Script') // "web前端JavaScript"

如果参数不是字符串,concat方法会将其先转为字符串,然后再连接

    var one = 1;
    var two = 2;
    var three = '3';
    ''.concat(one, two, three) // "123"

12.3 字符串方法_substring

substring方法用于从原字符串取出子字符串并返回,不改变原字符串。它的第一个参数表示子字符串的开始位置(从0开始),第二个位置表示结束位置(返回结果不含该位置)

'JavaScript'.substring(0, 4)//Java

如果省略第二个参数,则表示子字符串一直到原字符串的结束

'JavaScript'.substring(0) //JavaScript

如果第一个参数大于第二个参数,substring方法会自动更换两个参数的位置

'JavaScript'.substring(4,0) //Java

如果参数是负数,substring方法会自动将负数转为0

'JavaScript'.substring(-2,4) //Java

12.4 字符串方法_indexOf

indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置,返回结果是匹配开始的位置。如果返回-1,就表示不匹配.

'hello world'.indexOf('o') //4
'java'.indexOf('ava') //1

indexOf方法还可以接受第二个参数,表示从该位置开始向后匹配

'hello world'.indexOf('o',6) //7
'hello world'.indexOf('o',9) //-1

12.5 字符串方法_trim()

trim方法用于去除字符串两端的空格,返回一个新字符串,不改变原字符串

'  hello world  '.trim() //hello world

该方法去除的不仅是空格,还包括制表符(\t\v)、换行符(\n)和回车符(\r

'\r\nJavaScript \t'.trim() //JavaScript

12.6 字符串方法_split

split方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组

'web|java|python'.split('|') //["web", "java", "python"]

如果分割规则为空字符串,则返回数组的成员是原字符串的每一个字符。

'a|b|c'.split('') // ["a", "|",  "b","|", "c"]

如果省略参数,则返回数组的唯一成员就是原字符串

'web|java|python'.split();//["web|java|python"]

split方法还可以接受第二个参数,限定返回数组的最大成员数。

'web|java|python'.split("|",1);//["web"]
'web|java|python'.split("|",2);//["web","java"]

十三、数组

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。

var arr = ['web', 'java', 'python'];

除了在定义时赋值,数组也可以先定义后赋值。

    var arr = [];
    arr[0] = 'web';
    arr[1] = 'java';
    arr[2] = 'python';

任何类型的数据,都可以放入数组

var arr = [ 100, [1, 2, 3],false ];

如果数组的元素还是数组,就形成了多维数组

var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4

数组的length属性,返回数组的成员数量

  var arr = [];
    arr[0] = 'web';
    arr[1] = 'java';
    arr[2] = 'python';
    arr.length  //3

13.1 数组的遍历

数组的遍历可以考虑使用for循环或while循环

var arr = [];
    arr[0] = 'web';
    arr[1] = 'java';
    arr[2] = 'python';
    // for循环
    for(var i = 0; i < arr.length; i++) {
        document.write(arr[i]);
    }
    // while循环
    var i = 0;
    while (i < arr.length) {
        console.log(arr[i]);
        i++;
    }

for...in遍历数组

    var arr = [];
    arr[0] = 'web';
    arr[1] = 'java';
    arr[2] = 'python';
    for (var i in arr) {
        console.log(arr[i]);
    }



相关文章
|
6月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
11月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
370 56
|
10月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1503 58
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
638 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
2015 0
|
11月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
381 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
10月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
12月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
1753 2

热门文章

最新文章