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两个分支 循环控制就是 又称为回路控制,根据循环初始条件和终结要求,执行 ...
随机推荐
- 2017iOS开发最新的打包测试步骤（亲测）
最近也是忙着修改项目,今天把最近遇到的问题和知识给大家分享一下. 有时候我们需要将我们的项目发给测试组进行bug测试,这时候我们就需要把自己的项目打包,生成一个二维码或者链接的形式,给测试组,接下来就 ...
- XAML实例教程系列 - 命名空间(NameSpace) 三
XAML实例教程系列 - 命名空间(NameSpace) 2012-05-28 14:14 by jv9, 2205 阅读, 10 评论, 收藏, 编辑 上一篇曾提及XAML中,每个对象元素的声明是对 ...
- JAVA基础(多线程Thread和Runnable的使用区别（转载）
转自:http://jinguo.iteye.com/blog/286772 Runnable是Thread的接口,在大多数情况下“推荐用接口的方式”生成线程,因为接口可以实现多继承,况且Runnab ...
- 0606-工厂模式、单例模式、DBDA的单例和完整功能
工厂模式:只要指定类名,就可以据此获取一个该类的对象. 单例模式:某个类,只允许其“创建”出一个对象. 单例的方法:三私一公(一个私有化对象,一个私有化构造方法,一个私有化克隆方法,一个公共方法返回对 ...
- 9.23 NOIP模拟题(数学专练)
数论基础 专题测试 命题人:清华大学 王赢绪 /* 水题 答案为C(n-k,m-1) 预处理阶乘和逆元,O(1)算答案 开始读错题了!!!朱一乐!!! */ #include<iostream ...
- Lambda表达式怎么写SQL中的in？
ambda表达式查询没有IN这个方法,可以变通一下,in查询的数组是否包含在映射对象里面的集合里 直接贴代码吧,一看就懂了 class Program { static void Main(strin ...
- 题解报告：hdu 1863 畅通工程
Problem Description 省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).经过调查评估,得到的统计表中列出了有可 ...
- day03_12/13/2016_bean属性的设置之setter方法注入
- 318 Maximum Product of Word Lengths 最大单词长度乘积
给定一个字符串数组words,找到length(word[i]) * length(word[j])的最大值,并且两个单词不含公共的字母.你可以认为每个单词只包含小写字母.如果不存在这样的两个单词,返 ...
- 学习Objective-C入门教程（分享）
原百度文库连接:http://wenku.baidu.com/view/6786064fe518964bcf847c63.html PS:需要原文档的可以留邮箱发送! (我叫雷锋,不要谢我) 学习Ob ...