JavaScript基本知识----操作符，流程控制，循环，字符串方法，数组方式，补充方法
操作符
算术运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
算数运算符（基础数字运算）
+ - * / %(求余数）
当不是数字之间的运算的时候
+号两边一旦有字符串（引号引起来的一坨），那么+号就不再是数学运算了,而是拼接，最终结果是字符串 *****
-/*% 尽量将字符串转换成数字（隐式类型转换）
NaN : Not a Number number
*/
var a = "5";
var b = "2";
console.log(a-b);//
</script>
</body>
</html>
赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
/*
赋值运算符
+= -= *= /= %=
++ -- 两个都存在隐式类型转换，会全部转换为数字
++x x++
*/
var oBox = document.getElementById("box");
oBox.innerHTML += "999"; //var x = 4;
//var y = ++x; // x = x + 1; y = x;
//console.log(x);//5
//console.log(y);//5 var x = 6;
var y = x++;// y = x ; x = x + 1;
console.log(x);
console.log(y);
</script>
</body>
</html>
比较运算符
逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
针对布尔值 true false
&& 与 两边都为真，结果才为真，其他为假
|| 或 两边都为假，结果才为假，其他都是真
! 非 取反，真变假，假变真 当逻辑运算符，两边不一定是布尔值的时候
&& 遇到假就停，但是不会进行类型转换
|| 遇到真就停，但是不会进行类型转换
！ 隐式类型转换，将后面的数据先转换为布尔值再取反
*/ var a = true && false && true;
// alert(a); var b = false || false || true;
// alert(b); var c = 1 && true && 6 && 1;
// alert(c); var d = false || false || 0;
// alert(d); var q = !"5";
alert(q);
</script>
</body>
</html>
流程控制
if else流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
if ==> 布尔值
判断符
> < >= <= == != !== ===
== 只判断值是否一样 "5"==5
=== 不仅仅判断值，还判断类型是否一样 "5" === 5
当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
哪些值，在转换为布尔值的时候为false
0 number
false boolean
"" string
null object/null
undefined undefined
NaN number NaN :Not a Number number类型
一般在非法运算的时候才会 出现NaN
isNaN(参数) 非常讨厌数字
首先尽量把参数转换成数字，然后
当参数是 数字，返回 false
当参数不是数字，返回 true 在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
在两个值比较的时候，能用三等判断的时候，就用三等判断
*/ // alert(5 === "5"); /*if(" "){
alert("true");//条件为真的时候执行
}else{
alert("false");//条件为假的时候执行
}*/ //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面
/*if(9>8){
alert("true");
} if(6>4)alert("zhen");*/ //真语句一行，假语句一行 三目运算
//9>20?alert("zhen"):alert("jia");//条件?真语句:假语句; //当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写 // a=9>20?9:20;
// alert(a); // var a;
// if(9>20){
// a = 9;
// }else{
// a = 20;
// }
// alert(a); var x = 10;
if(x > 20){
alert("x>20");
}else if(x > 15){
alert("x>15")
}else if(x>10){
alert("x>10")
}else{ }
</script>
</body>
</html>
switch case default流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*var name = "wjh";
if(name === "xiaopo"){
alert(name + "真阔爱");
}else if( name === "wjh"){
alert(name + "好帅");
}else{
alert(name+"你是谁");
}*/ //全等判断 break 来阻止代码自动地向下一个 case 运行
var name = "wmk";
switch(name){
case "xiaopo":
alert(name + "真阔爱");
break;
case "wmk":
alert(name + "好帅");
break;
default:
alert(name+"你是谁");
break;
}
</script>
</body>
</html>
循环
for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// for(var i = 0; i < 10 ; i ++){
// console.log(i);
// } // for(var i = 0 ; i < 5 ; i ++ ){
// for(var j = 0 ; j < 3 ; j ++){
// console.log(i+ ";" + j);
// }
// } for(var i = 0 ; i < 10 ; i ++ ){
if(i === 5){
//break;// 0 1 2 3 4中断循环，终止循环，结束循环，未执行的代码不执行
continue;//跳出本次循环 012346789
}
console.log(i);
} </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li{
list-style: none;
width: 50px;
height: 50px;
background: yellowgreen;
border-radius: 50%;
margin: 25px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul id="box">
<li>00</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<script>
var aLi = document.getElementsByTagName("li");
// console.log(aLi.length); /*aLi[0].onclick = function () {
alert(0);
};
aLi[1].onclick = function () {
alert(1);
};
aLi[2].onclick = function () {
alert(2);
};
aLi[3].onclick = function () {
alert(3);
};*/ for(var i = 0 , len = aLi.length ; i < len ; i++ ){ aLi[i].index = i;//index 自定义变量 a b c d
//aLi[0].index = 0;
//aLi[1].index = 1;
//aLi[2].index = 2;
//aLi[3].index = 3; aLi[i].onclick = function () {
alert(this.index);
} /*aLi[i].onclick = function () {
alert(i);//是循环结束的i
}*/ /*aLi[0].onclick = function () {
alert(i);
}
aLi[1].onclick = function () {
alert(i);
}
aLi[2].onclick = function () {
alert(i);
}
aLi[3].onclick = function () {
alert(i);
}
*/
} </script>
</body>
</html>
补充：let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li{
list-style: none;
width: 50px;
height: 50px;
background: yellowgreen;
border-radius: 50%;
margin: 25px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul id="box">
<li>00</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul> <script>
var aLi = document.getElementsByTagName("li"); for(let i = 0 ,len = aLi.length ; i < len ; i ++ ){
aLi[i].onclick = function () {
alert(i);
}
} // var a = 5;
// var a = 6;
// alert(a); //let 不能重复声明
//块级作用域
// let a = 5;
// let a = 6;
// alert(a); if(true){
let a = 12;
} alert(a);
</script> </body>
</html>
while do...while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*var i = 0;
for(; i < 4 ; ){
console.log(i);
i++;
}*/ var i = 100;
// while(i<10){
// console.log(i);
// i ++;
// } do{//至少执行一次
console.log(i);
}while(i<10);
</script>
</body>
</html>
字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
string 字符串
索引、下标、偏移量——从0开始
str[index];——通过索引取字符串
str.length;——获取长度 空格也算
value.toString();——转换字符串
str.substring();——截取字符串 会比较参数值的大小，小的参数在前面,负数变为0
str.slice()——切片,不会交换位置，负数从右到左数
str.split()——字符串切割，返回数组 ******
str.indexOf——查找字符串，成功返回索引，反之返回-1 ******
str.toUpperCase()——全部转换大写
str.toLowerCase()——全部到小写
*/ var str = "wo shi shui";
// alert(str.length);
// alert(str[4]);//可读性
str[0] = "W";//不可写
// console.log(str); var str1 = "wo zai na wo shi shui";
// console.log(str1.substring(2,5));//[2,5)
// console.log(str1.substring(5,1));
// console.log(str1.substring(-5,5));
// console.log(str1.slice(1,5));
// console.log(str1.slice(5,2));
// console.log(str1.slice(-4,-2));
console.log(str1.split("i")); alert(str1.indexOf("a"));//
alert(str1.indexOf("a",5));//
alert(str1.indexOf("q")); </script>
</body>
</html>
数组方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
数组 主要存放数据的
arr.length
查看数组的个数
arr[]
可以读可写
arr.push
在后面添加 能同时添加多个值
arr.unshift()
在前面添加 能同时添加多个值
arr.pop()
删除数组的最后一个
arr.shift()
删除数组的第一个
arr.splice() ******
(3) 数组的长度
(0, 1) 从第0位开始删除第一个 返回删除的那个
(2, 3, 'a') 从第二位开始后面三位全部替换成 a
(2, 0, 'a') 第二位开始前面插入 a
arr.sort()
顺序来排序
arr.reverse()
倒序排序
arr.join() *****
arr.join('a') 以`a`为界限拼接字符串
*/ var arr = ["wmk","wf","zx"];
console.log(arr.length);
// alert(arr[2]);//可读
arr[0] = "sqx";//可写
console.log(arr);
arr.push("bb","wmk");
console.log(arr);
arr.unshift("wjh","xiaopo");
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
//arr.splice(3);//数组的长度为3
//console.log(arr);
// arr.splice(1,2);//从小标1开始 删除两位
// console.log(arr);
arr.splice(1,0,"qq","ww");
console.log(arr); // var arr1 = new Array();
// arr1[0] = "xiaopo1";
// arr1[1] = "xiaopo2";
// arr1[2] = "xiaopo3";
// console.log(arr1); var arr2 = ["我","是","小泼"];
console.log(arr2.join("+")); var arr3 = [-2,-8,-5];
// console.log(arr3.sort());
arr3.sort(function (a,b) {
//return a-b;//从小到大
//return b-a;//从大到小
//return 1;//倒序
return 0;
});
console.log(arr3);
</script>
</body>
</html>
补充：
JavaScript基本知识----操作符，流程控制，循环，字符串方法，数组方式，补充方法的更多相关文章
- PHP丨PHP基础知识之流程控制WHILE循环「理论篇」
昨天讲完FOR循环今天来讲讲他的兄弟WHILE循环!进入正题: while是计算机的一种基本循环模式.当满足条件时进入循环,进入循环后,当条件不满足时,跳出循环.while语句的一般表达式为:whil ...
- python学习第七天流程控制循环while和循环for区别
流程控制循环是任何编程语言都有一种循环结构,在python while 和break continue 搭配使用,还一种while ....else ......,for循环有序列表和字符串 whil ...
- Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制
Unit04: JavaScript 概述 . JavaScript 基础语法 . 流程控制 my.js function f3() { alert("唐胜伟"); } demo1 ...
- 操作符&流程控制
运算符:算术运算符 赋值运算符 字符串运算符 递增(++)和递减(--)运算符 逻辑运算符 比较运算符 三元运算符 1.算术运算符 算术运算符,用于完成各种算术运 ...
- 高性能JavaScript（算法和流程控制）
在大多与编程语言中,代码的执行时间大部分消耗在循环中,是提升性能必须关注的要点之一 循环的类型 for循环(它由四部分组成:初始化.前测条件.后执行体.循环体.) for(var i = 0; i & ...
- PL/SQL笔记(1)-流程控制,循环,异常,块
流程控制 1.If,then,else,elsif(不是elseif) ' then null; endif; 2.Case 简单case表达式: 搜索型Case表达式: 3.goto语句 begin ...
- 《Java基础知识》流程控制
流程控制分类: 一.顺序结构如果没有流程控制(即没有分支结构和循环结构),Java方法里面的语句是一个顺序执行流,从上到下依次执行每条语句. 二.分支结构1.if语句if语句使用布尔表达式或者布尔值作 ...
- javascript笔记整理（流程控制）
流程:就是程序代码的执行顺序 流程控制:通过规定的语句让程序代码有条件的按照一定的方式执行 1.顺序结构(按照书写顺序来执行,是程序中最基本的流程结构) 2.选择结构(分支结构.条件结构):根据给定的 ...
- java 基础知识四 流程控制
java 基础知识四 流程控制 Java流程控制包括顺序控制.条件控制和循环控制 顺序控制就是逐条执行 有if和switch两个分支 循环控制就是 又称为回路控制,根据循环初始条件和终结要求,执行 ...
随机推荐
- E20170925-hm
arc n. 综合症状; 弧(度); 天穹; 电弧,弧光.; vi. 形成拱状物; 循弧线行进; wrap vt. 包; 缠绕; 用…包裹(或包扎.覆盖等); 掩护; n. ...
- Java数组去重（利用数组，不借助集合）
今天有个同学问我说老师,Java里边数组怎么去重,在不借助List集合的情况下,最后呢我整理了一下,打算发一篇博文,希望能帮助到有用的人,大佬绕过 public static void arrUniq ...
- golang——常用内建函数
(1)func len(v Type) int 返回长度,取决于具体类型:字符串返回字节数:channel返回缓存元素的个数: (2)func cap(v Type) int 返回容量,取决于具体类型 ...
- iOS动画——DynamicAnimate
力学动画 以dynamicAnimate为首的力学动画是苹果在iOS7加入的API,里面包含了很多力学行为,这套API是基于Box2d实现的.其中包含了重力.碰撞.推.甩.和自定义行为. 涉及到的类如 ...
- 研磨JavaScript系列
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作.它最初由网景公司 ...
- Linux+Apache+PHP+MySQL服务器环境配置(CentOS篇)
1.配置php.ini vi /etc/php.ini 2.配置apache 先给需要配置的文件做个备份 cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/h ...
- DataTable And DataRow
/// <summary> /// 将DataTable的字段名全部翻译为中文 /// </summary> /// <param name="table&qu ...
- 使用Jupter Notebook实现简单的神经网络
参考:http://python.jobbole.com/82208/ 注:1)# %matplotlib inline 注解可以使Jupyter中显示图片 2)注意包的导入方式 一.使用的Pytho ...
- JS——鼠标跟随
注意事项: 1.pageX.pageY的兼容问题 2.使目标移动鼠标中间位置还必须减去盒子宽度的一半 <!DOCTYPE html> <html lang="en" ...
- C# ADO.NET动态数据的增删改查（第五天）
一.插入登录框中用户输入的动态数据 /// <summary> /// 添加数据 /// </summary> /// <param name="sender& ...