JS 01 变量_数据类型_分支循环_数组
程序员文章站
2022-06-27 21:26:15
点击直通车↓↓↓ 数据类型及数据类型的手动转换 数组 一、概念 JavaScript（JS）是一种基于对象和事件驱动、且可以与HTML标记语言混合使用的脚本语言，其编写的程序可以直接在浏览器中解释执 二、与java的关系 从本质上来讲，Java和JS是两门语言，并没有本质上的联系。 三、如何写js代 ......
点击直通车↓↓↓
一、概念
javascript（js）是一种基于对象和事件驱动、且可以与html标记语言混合使用的脚本语言，其编写的程序可以直接在浏览器中解释执
二、与java的关系
从本质上来讲，java和js是两门语言，并没有本质上的联系。
三、如何写js代码
在html代码中写，三种方式
1.先写好一个*.js文件，通过script标签引入这个js文件 <script src="demo1.js"></script>
2.在script标签中直接书写js代码
<script type="text/javascript">
function hello(){
alert("hello world!");
}
</script>
3.直接在html代码中写
不推荐这样写
四、变量
全局变量
1.在方法外部定义的变量
2.在方法内部，不添加var关键字（仅限于非严格模式）
局部变量
在方法内部使用var关键字定义的变量
<script type="text/javascript">
"use strict"
var a = 10;
var date = new date();
//js的语言是抄袭java，注释和java一样
//js使用console.log(变量)
console.log(date)
function func(){
abc = 110;
console.log(abc)
console.log(a)
}
func();
//报错
console.log(abc)
</script>
一、创建数组
1.创建一个空数组
var arr = new array();
2.创建一个具有长度的空数组
var arr2 = new array(size)
3.创建一个具有元素的数组
var arr3 = new array(ele1,ele2, ... ,elen)
4.创建一个空数组或具有元素的数组
var arr4 = [ele1,...,elen]
二、数组属性
length 表示数组的长度，可以利用该属性清空数组（length = 0）
三、数组方法
push( ele )：向数组的尾部添加一个元素，返回数组的新长度
unshift( ele)： 向数组的头部添加一个元素，返回数组的新长度
pop()：从数组的尾部取出一个元素，返回该元素本身
shift()：从数组的头部取出一个元素，返回该元素本身
join( ele ) : 使用指定的ele字符连接数组中的每个元素，并将其作为一个字符串返回
concat( arr1,arr2,...,arrn )：拼接给定的数组元素，返回一个新数组
reverse()：反转数组
sort()：对数组的元素进行排序（自然顺序）
splice(start,count,newele)：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
参数：
start 开始索引
count 移除元素的数量
newele 要加入的新元素，该参数可以省略
slice(start，end)：截取数组的一段，返回一个新数组
参数：
start 开始索引
end结束索引（不包含），该参数可以省略（截取到数组末尾）
四、遍历数组
for (var i = 0 ; i< 数组的长度;i++)
for (var arrindex in 数组)
数据类型及数据类型手动转换
1 <script type="text/javascript">
2 /*
3 6种常用的数据类型，查看变量的数据类型使用typeof
4 1.undefined 声明一个变量并没有为其赋值
5 2.null 声明一个变量，并为其赋值为null
6 3.boolean 声明一个变量，为其赋值为ture或false
7 4.string 声明一个变量，为其赋值为字符串（单引号和双引号都可以）
8 5.number 数值型 1.整型 、 2.浮点型 、 3.正负无穷大 、 4.nan = not a number
9 6.object 对象型
10 */
11
12 function testdatatype() {
13 var a;
14 console.log(typeof a, a);
15
16 var b = null;
17 console.log(typeof b, b);
18
19 var c = true;
20 console.log(typeof c, c);
21
22 var d = '123';
23 console.log(typeof d, d);
24
25 var e1 = 123; //整型
26 console.log(typeof e1, e1);
27 var e2 = 123.45; //浮点型
28 console.log(typeof e2, e2);
29 var e3 = 1/0; //infinity无穷大
30 console.log(typeof e3, e3);
31 var e4 = number("haha"); //nan = not a number
32 console.log(typeof e4,e4)
33
34 var f = new array();
35 console.log(typeof f,f);
36 }
37 //testdatatype();
38
39 function transfernumber(){
40 var b1 = false;
41 var n1 = number(b1);
42 console.log(n1);
43
44 var c = null;
45 var n2 = number(c);
46 console.log(n2);
47
48 var e;
49 var n3 = number(e);
50 console.log(n3);
51
52 var f = "fadsf123123adfds";
53 var n4 = number(f);
54 console.log(n4);
55
56
57 var nullstr = "";
58 var n5 = number(nullstr);
59 console.log(n5);
60
61 }
62
63 transfernumber();
64
65 function transferstring(){
66 var a = null;
67 var b;
68 console.log(string(a));
69 console.log(string(b));
70
71 var c = true;
72 console.log(string(c));
73 }
74 // transferstring();
75
76 function transferboolean(){
77 var a = "";
78 var b;
79 var c = null;
80 var d = 0;
81 var e = number("haha");
82
83 console.log(boolean(a));
84 console.log(boolean(b));
85 console.log(boolean(c));
86 console.log(boolean(d));
87 console.log(boolean(e));
88
89 console.log(boolean("kjhasdkjfhs"));
90 console.log(boolean(123));
91
92 }
93
94 // transferboolean();
95
96 </script>
数据类型的自动转换
<script>
function test() {
//布尔型、字符串、数字的转化
var a = true;
var b = "888" + a;
var c = 99 + a;
console.log(b); // 888true
console.log(c); // 100
//数字和字符串转化
var d = 33;
var e = "44";
var f = d + e;
var g = 3 * "4";
console.log(f) // 3344
console.log(g) // 12
//null、布尔型、字符串、数字的转化
var h = null;
var h2 = h + 3;
console.log(h2) // 3
var h3 = "aa" + h;
console.log(h3) // aanull
if (!h) {
console.log("h自动转化为boolean值：false！")
}
}
// test();
function test2() {
var a;
var b = null;
console.log(typeof a + "----" + typeof b);
if (a == b) {
console.log("null和undefined可以互相转换！");
}
}
// test2();
function test3() {
//布尔型、数值型、字符串型 在进行相互==比较时，不为数字的那一方自动调用number()方法
var a = 1;
var b = true;
var c = "true";
var d = "1";
console.log(a==b); //true
console.log(a==c); //false
console.log(a==d); //true
console.log(b==c); //false
console.log(b==d); //true
}
// test3();
function test04() {
//null和undefined互相是相等，且自身也相等，除此之外和谁都不等
console.log("zzz" == undefined); //false
console.log("zzz" == null); //false
console.log(1 == undefined); //false
console.log(1 == null); //false
console.log(0 == undefined); //false
console.log(0 == null); //false
console.log(false == undefined); //false
console.log(false == null); //false
console.log(null == undefined); //true
console.log(undefined == undefined); //true
console.log(null == null); //true
}
// test04();
function test05() {
//nan比较特殊，他和自己都不相等
var a = number("haha");
var b = number("haha");
console.log(a == b);
console.log(nan == nan);
}
// test05();
// ()圆括号
// []方括号
// {}花括号
// <>尖括号
function test06() {
// var a = new array();
var a = []; //定义一个空数组
console.log(a.tostring()); // 什么都没有
}
// test06();
function test07() {
// var a = new object();
var a = {}; //定义一个对象
console.log(a.tostring()); // [object object]
}
// test07();
function test08(){
var a = {};
console.log(!a); //对象加! 得到一个布尔型的 false
}
// test08();
</script>
数据类型的自动转换2
<script type="application/javascript">
function test() {
console.log('' == '0') //类型相同，比较值，值不同，所以false
console.log(0 == '') //类型不同，string转number，空字符串转为0，变成0==0，所以true
console.log(0 == '0') //类型不同，string转number，'0'转成0，变成0==0，所以true
console.log(false == 'false') //类型不同，boolean转number，即0=='false'，然后'false'转number，为0==nan,所以false
console.log(false == '0') //类型不同，boolean转number，即0=='0'，就变成第3个例子，所以true
console.log(false == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
console.log(false == null) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
console.log(null == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以true
console.log(true == 2) //类型不同，boolen转number，即1==2，所以false
console.log(nan == nan) //nan非常特殊，和自身也不相等，所以false
console.log(' \t\r\n ' == 0) //类型不同，string转number，空string都将转成0，即0==0,所以true
console.log(0 == []) //对象类型[]调用tostring()转为""，即0==""，即0==0，所以true
console.log(0 == ['']) //对象类型['']调用tostring()转为""，即0==""，即0==0，所以true
console.log('0' == []) //对象类型[]调用tostring()转为""，即'0'==""，类型相同，值不同，所以false
console.log('0' == [0]) //对象类型[0]调用tostring()转为"0"，即'0'=="0"，类型相同，值也相同，所以true
console.log(true == [1]) //对象类型[1]调用tostring()转为"1"，即1=="1"，转1==1，所以true
console.log([] == []) //对象类型，比较引用地址，两个[]是不同的引用地址，所以false
console.log(![] == []) //加!强制转boolean，任何对象都是true，取反即false==[]，转为0==""，即0==0，所以true
console.log(!{} == {}) //即false=={}，转为false=="[object object]"，即0==nan，所以false
}
/**
* 1.==符号在判断左右两边数据是否相等时，如果数据类型一致，直接比较值即可
* 2.==符号左右数据类型不一致时，如果两方数据为布尔型、数值型、字符串型时，不为数字的那一方自动调用number()方法
* 3.undefined和null这两者互相相等，及自身也相等，除此之外和谁都不想等
* 4.nan比较特殊，他和自己都不相等
* 5.当数值型、字符串型、布尔型和对象进行比较时，对象调用tostring()方法得到一个字符串
* 6.对象和对象进行比较时，直接比较内存地址
* 7.任何对象加!强制转false
*/
test();
</script>
运算符
<script type="text/javascript">
// "=" 赋值运算符
// "==" 等值符，如果数据类型不一致，会先进行数据类型自动转换
// "===" 等同符，不会发生数据类型的自动转换
console.log(5 + 4);
console.log(5 - 4);
console.log(5 * 4);
console.log(5 / 4);
console.log(5 % 4);
var a = 10
console.log(a++); //10
console.log(++a); //12
console.log(a--); //12
console.log(--a); //10
a += 1;
console.log(a); // 11
a -= 1;
console.log(a); //10
var f1 = true;
var f2 = false;
var str1 = "aaa";
str1 += "bbb";
console.log(str1);
console.log(5 > 4 ? "是的" : "否")
</script>
分枝循环
<script type="text/javascript">
var age = 20;
/* if(age >= 18)
alert("做苦力！");
else
alert("未成年人，请保护。");
alert("hi")*/
var day = "11";
switch (day) {
case "monday":
console.log("星期一");
break;
case "tuesday":
console.log("星期二")
break;
case "wednesday":
console.log("星期三")
break;
default:
console.log("不上班")
}
/*循环语句*/
var num = 10;
while (num > 0) {
console.log(num);
num--;
}
var num2 = 10;
do {
console.log(num2)
num2--
} while (num2 > 0);
for (var i = 0; i <= 10; i++) {
console.log(i);
}
var arr = [123, 321, 11, 22, 33, "44", "55", "66", true, new date()]; //数组
/* for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}*/
for (var ele in arr) {
// ele是下标
console.log(arr[ele]);
}
//continue表示跳出当次循环，继续下次循环
for (var i = 1; i <= 10; i++){
if(i == 5){
continue
}
console.log(i);
}
//break表示跳出整个循环
for (var i = 1; i <= 10; i++){
if(i == 5){
break
}
console.log(i);
}
</script>
数组
<script type="text/javascript">
//一、创建数组
//1.创建空数组
var arr = new array();
console.log(arr.length);
//2.创建具有长度的数组
var arr2 = new array(10);
console.log(arr2)
//3.创建一个带元素的数组
var arr3 = new array(123, true, "hello", new date());
//4.创建一个带元素的数组2
var arr4 = [123];
console.log(arr4.length)
//二、属性
// length属性：表示数组的长度
console.log(arr3);
arr3.length = 0; //清空数组
console.log(arr3);
arr3.length = 4;
console.log(arr3);
//三、方法
var arrdemo = new array(123, true, "hello", new date(), 444333);
//join():指定一个字符，用该字符连接数组的每一个元素，并作为一个字符串返回
var result = arrdemo.join("-");
console.log(result);
//push():向数组的末尾添加一个元素，返回数组的新长度
result = arrdemo.push("world");
console.log(result)
console.log(arrdemo);
//pop():从数组末尾取出一个元素，并返回该元素本身
result = arrdemo.pop();
console.log(result);
console.log(arrdemo);
//shift()：从数组头部取出一个元素，并返回该元素本身
result = arrdemo.shift();
console.log(result);
console.log(arrdemo);
//unshift()：向数组的头部添加一个元素，返回数组的新长度
result = arrdemo.unshift("bbb");
console.log(result);
console.log(arrdemo);
//concat()：拼接数组，并作为一个新的数组返回
var a1 = [123, 234];
var a2 = ["aaa", "bbb"];
var a3 = [new date()];
var newarr = a1.concat(a2, a3);
console.log(newarr);
//reverse():反转数组
newarr.reverse();
console.log(newarr);
//sort():自然顺序
// var sortarr = [4534,22,66,88,123];
var sortarr = [4534, 22, 66, 88, 123, "a", "a", "ab", "ba", "abc", "bac"];
sortarr.sort()
console.log(sortarr);
//splice()：删除指定位置，指定长度的元素，并在该位置添加新的元素
var s1 = ["aa", 'kjsdhf', '123', 123, 123, 444, 555, 666];
s1.splice(0,0,"laowang");
console.log(s1);
//slice()；截取子数组
var s2 = s1.slice(3,5);
console.log(s2);
</script>