点击直通车↓↓↓

一、概念

JavaScript（JS）是一种基于对象和事件驱动、且可以与HTML标记语言混合使用的脚本语言，其编写的程序可以直接在浏览器中解释执

二、与java的关系

从本质上来讲，Java和JS是两门语言，并没有本质上的联系。

三、如何写js代码

在html代码中写，三种方式
1.先写好一个*.js文件，通过script标签引入这个js文件  <script src="demo1.js"></script>

2.在script标签中直接书写js代码

  1.  <script type="text/javascript">
  2.         function hello(){
  3.             alert("hello world!");
  4.         }
  5.     </script>

3.直接在html代码中写

　　不推荐这样写

四、变量

全局变量
1.在方法外部定义的变量
2.在方法内部，不添加var关键字（仅限于非严格模式）
局部变量
在方法内部使用var关键字定义的变量

  1.  <script type="text/javascript">
  2.         "use strict"
  3.  
  4.         var a = 10;
  5.         var date = new Date();
  6.  
  7.         //js的语言是抄袭java，注释和java一样
  8.         //js使用console.log(变量)
  9.         console.log(date)
  10.  
  11.         function func(){
  12.             abc = 110;
  13.             console.log(abc)
  14.             console.log(a)
  15.         }
  16.         func();

  17. 　　　　　//报错
  18.         console.log(abc)
  19.  
  20.     </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.              var nullstr = "";
  57.              var n5 = Number(nullstr);
  58.              console.log(n5);
  59.  
  60.          }
  61.  
  62.          transferNumber();
  63.  
  64.          function transferString(){
  65.              var a = null;
  66.              var b;
  67.              console.log(String(a));
  68.              console.log(String(b));
  69.  
  70.              var c = true;
  71.              console.log(String(c));
  72.          }
  73.  //        transferString();
  74.  
  75.          function transferBoolean(){
  76.              var a = "";
  77.              var b;
  78.              var c = null;
  79.              var d = 0;
  80.              var e = Number("haha");
  81.  
  82.              console.log(Boolean(a));
  83.              console.log(Boolean(b));
  84.              console.log(Boolean(c));
  85.              console.log(Boolean(d));
  86.              console.log(Boolean(e));
  87.  
  88.              console.log(Boolean("kjhasdkjfhs"));
  89.              console.log(Boolean(123));
  90.  
  91.          }
  92.  
  93.  //        transferBoolean();
  94.  
  95.      </script>

数据类型的自动转换

  1.   <script>
  2.         function test() {
  3.             //布尔型、字符串、数字的转化
  4.             var a = true;
  5.             var b = "888" + a;
  6.             var c = 99 + a;
  7.             console.log(b);  // 888true
  8.             console.log(c);  //
  9.  
  10.             //数字和字符串转化
  11.             var d = 33;
  12.             var e = "44";
  13.             var f = d + e;
  14.             var g = 3 * "4";
  15.             console.log(f)  //
  16.             console.log(g)  //
  17.  
  18.             //null、布尔型、字符串、数字的转化
  19.             var h = null;
  20.             var h2 = h + 3;
  21.             console.log(h2)  //
  22.             var h3 = "aa" + h;
  23.             console.log(h3)  // aanull
  24.             if (!h) {
  25.                 console.log("h自动转化为boolean值：false！")
  26.             }
  27.         }
  28. //                test();
  29.  
  30.         function test2() {
  31.             var a;
  32.             var b = null;
  33.             console.log(typeof a + "----" + typeof b);
  34.  
  35.             if (a == b) {
  36.                 console.log("null和undefined可以互相转换！");
  37.             }
  38.         }
  39. //                test2();
  40.  
  41.         function test3() {
  42.             //布尔型、数值型、字符串型 在进行相互==比较时，不为数字的那一方自动调用Number()方法
  43.             var a = 1;
  44.             var b = true;
  45.             var c = "true";
  46.             var d = "1";
  47.             console.log(a==b);  //true
  48.             console.log(a==c);  //false
  49.             console.log(a==d);  //true
  50.             console.log(b==c);  //false
  51.             console.log(b==d);  //true
  52.         }
  53. //        test3();
  54.  
  55.         function test04() {
  56.             //null和undefined互相是相等，且自身也相等，除此之外和谁都不等
  57.             console.log("zzz" == undefined); //false
  58.             console.log("zzz" == null);  //false
  59.             console.log(1 == undefined); //false
  60.             console.log(1 == null);  //false
  61.             console.log(0 == undefined);  //false
  62.             console.log(0 == null);  //false
  63.             console.log(false == undefined); //false
  64.             console.log(false == null); //false
  65.             console.log(null == undefined);   //true
  66.             console.log(undefined == undefined); //true
  67.             console.log(null == null);   //true
  68.         }
  69.  
  70. //        test04();
  71.  
  72.         function test05() {
  73.             //NaN比较特殊，他和自己都不相等
  74.             var a = Number("haha");
  75.             var b = Number("haha");
  76.  
  77.             console.log(a == b);
  78.             console.log(NaN == NaN);
  79.  
  80.         }
  81. //        test05();
  82.  
  83.         // ()圆括号
  84.         // []方括号
  85.         // {}花括号
  86.         // <>尖括号
  87.  
  88.         function test06() {
  89.             // var a = new Array();
  90.             var a = [];  //定义一个空数组
  91.             console.log(a.toString());  // 什么都没有
  92.         }
  93. //        test06();
  94.  
  95.         function test07() {
  96.             // var a = new Object();
  97.             var a = {};  //定义一个对象
  98.             console.log(a.toString());  // [object Object]
  99.         }
  100. //        test07();
  101.  
  102.         function test08(){
  103.             var a = {};
  104.             console.log(!a);  //对象加! 得到一个布尔型的 false
  105.         }
  106. //        test08();
  107.  
  108.     </script>

数据类型的自动转换2

  1.  <script type="application/javascript">
  2.         function test() {
  3.             console.log('' == '0') //类型相同，比较值，值不同，所以false
  4.             console.log(0 == '') //类型不同，String转Number，空字符串转为0，变成0==0，所以true
  5.             console.log(0 == '0') //类型不同，String转Number，'0'转成0，变成0==0，所以true
  6.             console.log(false == 'false')  //类型不同，Boolean转Number，即0=='false'，然后'false'转Number，为0==NaN,所以false
  7.             console.log(false == '0') //类型不同，Boolean转Number，即0=='0'，就变成第3个例子，所以true
  8.             console.log(false == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
  9.             console.log(false == null) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
  10.             console.log(null == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以true
  11.             console.log(true == 2) //类型不同，Boolen转Number，即1==2，所以false
  12.             console.log(NaN == NaN) //NaN非常特殊，和自身也不相等，所以false
  13.             console.log(' \t\r\n ' == 0) //类型不同，String转Number，空String都将转成0，即0==0,所以true
  14.             console.log(0 == []) //对象类型[]调用toString()转为""，即0==""，即0==0，所以true
  15.             console.log(0 == ['']) //对象类型['']调用toString()转为""，即0==""，即0==0，所以true
  16.             console.log('0' == []) //对象类型[]调用toString()转为""，即'0'==""，类型相同，值不同，所以false
  17.             console.log('0' == [0])  //对象类型[0]调用toString()转为"0"，即'0'=="0"，类型相同，值也相同，所以true
  18.             console.log(true == [1]) //对象类型[1]调用toString()转为"1"，即1=="1"，转1==1，所以true
  19.             console.log([] == []) //对象类型，比较引用地址，两个[]是不同的引用地址，所以false
  20.             console.log(![] == []) //加!强制转Boolean，任何对象都是true，取反即false==[]，转为0==""，即0==0，所以true
  21.             console.log(!{} == {}) //即false=={}，转为false=="[object Object]"，即0==NaN，所以false
  22.         }
  23.         /**
  24.          * 1.==符号在判断左右两边数据是否相等时，如果数据类型一致，直接比较值即可
  25.          * 2.==符号左右数据类型不一致时，如果两方数据为布尔型、数值型、字符串型时，不为数字的那一方自动调用Number()方法
  26.          * 3.undefined和null这两者互相相等，及自身也相等，除此之外和谁都不想等
  27.          * 4.NaN比较特殊，他和自己都不相等
  28.          * 5.当数值型、字符串型、布尔型和对象进行比较时，对象调用toString()方法得到一个字符串
  29.          * 6.对象和对象进行比较时，直接比较内存地址
  30.          * 7.任何对象加!强制转false
  31.          */
  32.  
  33.         test();
  34.     </script>

运算符

  1.     <script type="text/javascript">
  2.         // "=" 赋值运算符
  3.         // "==" 等值符，如果数据类型不一致，会先进行数据类型自动转换
  4.         // "===" 等同符，不会发生数据类型的自动转换
  5.  
  6.         console.log(5 + 4);
  7.         console.log(5 - 4);
  8.         console.log(5 * 4);
  9.         console.log(5 / 4);
  10.         console.log(5 % 4);
  11.         var a = 10
  12.         console.log(a++);  //
  13.         console.log(++a);  //
  14.         console.log(a--);  //
  15.         console.log(--a);  //
  16.         a += 1;
  17.         console.log(a); //
  18.         a -= 1;
  19.         console.log(a); //
  20.  
  21.         var f1 = true;
  22.  
  23.         var f2 = false;
  24.  
  25.         var str1 = "aaa";
  26.         str1 += "bbb";
  27.         console.log(str1);
  28.  
  29.         console.log(5 > 4 ? "是的" : "否")
  30.  
  31.     </script>

分枝循环

  1.   <script type="text/javascript">
  2.         var age = 20;
  3.         /* if(age >= 18)
  4.          alert("做苦力！");
  5.          else
  6.          alert("未成年人，请保护。");
  7.  
  8.          alert("hi")*/
  9.         var day = "11";
  10.         switch (day) {
  11.             case "monday":
  12.                 console.log("星期一");
  13.                 break;
  14.             case "tuesday":
  15.                 console.log("星期二")
  16.                 break;
  17.             case "wednesday":
  18.                 console.log("星期三")
  19.                 break;
  20.             default:
  21.                 console.log("不上班")
  22.         }
  23.  
  24.         /*循环语句*/
  25.         var num = 10;
  26.         while (num > 0) {
  27.             console.log(num);
  28.             num--;
  29.         }
  30.  
  31.         var num2 = 10;
  32.         do {
  33.             console.log(num2)
  34.             num2--
  35.         } while (num2 > 0);
  36.  
  37.         for (var i = 0; i <= 10; i++) {
  38.             console.log(i);
  39.         }
  40.  
  41.         var arr = [123, 321, 11, 22, 33, "44", "55", "66", true, new Date()];  //数组
  42.         /* for (var i = 0; i < arr.length; i++) {
  43.          console.log(arr[i]);
  44.          }*/
  45.         for (var ele in arr) {
  46.             // ele是下标
  47.             console.log(arr[ele]);
  48.         }
  49.  
  50.         //continue表示跳出当次循环，继续下次循环
  51.         for (var i = 1; i <= 10; i++){
  52.             if(i == 5){
  53.                 continue
  54.             }
  55.             console.log(i);
  56.         }
  57.  
  58.         //break表示跳出整个循环
  59.         for (var i = 1; i <= 10; i++){
  60.             if(i == 5){
  61.                 break
  62.             }
  63.             console.log(i);
  64.         }
  65.  
  66.     </script>

数组

  1.   <script type="text/javascript">
  2.         //一、创建数组
  3.         //1.创建空数组
  4.         var arr = new Array();
  5.         console.log(arr.length);
  6.         //2.创建具有长度的数组
  7.         var arr2 = new Array(10);
  8.         console.log(arr2)
  9.         //3.创建一个带元素的数组
  10.         var arr3 = new Array(123, true, "hello", new Date());
  11.         //4.创建一个带元素的数组2
  12.         var arr4 = [123];
  13.         console.log(arr4.length)
  14.  
  15.         //二、属性
  16.         // length属性：表示数组的长度
  17.         console.log(arr3);
  18.         arr3.length = 0; //清空数组
  19.         console.log(arr3);
  20.         arr3.length = 4;
  21.         console.log(arr3);
  22.  
  23.         //三、方法
  24.         var arrdemo = new Array(123, true, "hello", new Date(), 444333);
  25.         //join():指定一个字符，用该字符连接数组的每一个元素，并作为一个字符串返回
  26.         var result = arrdemo.join("-");
  27.         console.log(result);
  28.  
  29.         //push():向数组的末尾添加一个元素，返回数组的新长度
  30.         result = arrdemo.push("world");
  31.         console.log(result)
  32.         console.log(arrdemo);
  33.  
  34.         //pop():从数组末尾取出一个元素，并返回该元素本身
  35.         result = arrdemo.pop();
  36.         console.log(result);
  37.         console.log(arrdemo);
  38.  
  39.         //shift()：从数组头部取出一个元素，并返回该元素本身
  40.         result = arrdemo.shift();
  41.         console.log(result);
  42.         console.log(arrdemo);
  43.  
  44.         //unshift()：向数组的头部添加一个元素，返回数组的新长度
  45.         result = arrdemo.unshift("bbb");
  46.         console.log(result);
  47.         console.log(arrdemo);
  48.  
  49.         //concat()：拼接数组，并作为一个新的数组返回
  50.         var a1 = [123, 234];
  51.         var a2 = ["aaa", "bbb"];
  52.         var a3 = [new Date()];
  53.         var newarr = a1.concat(a2, a3);
  54.         console.log(newarr);
  55.  
  56.         //reverse():反转数组
  57.         newarr.reverse();
  58.         console.log(newarr);
  59.  
  60.         //sort():自然顺序
  61.         //        var sortarr = [4534,22,66,88,123];
  62.         var sortarr = [4534, 22, 66, 88, 123, "A", "a", "ab", "ba", "abc", "bac"];
  63.         sortarr.sort()
  64.         console.log(sortarr);
  65.  
  66.         //splice()：删除指定位置，指定长度的元素，并在该位置添加新的元素
  67.         var s1 = ["aa", 'kjsdhf', '123', 123, 123, 444, 555, 666];
  68.         s1.splice(0,0,"laowang");
  69.         console.log(s1);
  70.  
  71.         //slice()；截取子数组
  72.         var s2 = s1.slice(3,5);
  73.         console.log(s2);
  74.  
  75.     </script>

JS 01 变量_数据类型_分支循环_数组的更多相关文章

  1. js之变量与数据类型

    变量 声明 一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准. var age = 18; age = 81; // 最后的结果就是81因为18 被覆盖掉了 同时声明多个变量 ...

  2. JS 引入方式 基本数据类型 运算符 控制语句 循环 异常

    一.JS引入方式 什么是JavaScript? JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览 ...

  3. Java基础学习（一） -- Java环境搭建、数据类型、分支循环等控制结构、简单一维数组详解

    一:java概述: 1982年,SUN公司诞生于美国斯坦福大学校园,并于1986年上市,在NASDAQ(纳斯达克:是全美证券商协会自动报价系统)的标识为SUNW,2007年改为JAVA. 2009年4 ...

  4. Scala基础篇-01变量，数据类型

    一.Scala变量 共有3种变量修饰符: val: 可变 var: 不可变 lazy val: 第一次应用时才计算 二.Scala的数据类型 1)类型不匹配:高精度数值赋给低精度数据类型. 2)Uni ...

  5. 如何判断js的变量的数据类型

    文章首发: http://www.cnblogs.com/sprying/p/4349426.html 本文罗列了一般的Js中类型检测的方法,实际上是每个新手在构建Js知识体系时,都要知晓的,而我只是 ...

  6. (52)Wangdao.com第七天_字面量/变量_标识符_数据类型_数据的存储

    JavaScript 字面量 和 变量 字面量:就是那些不可变的值,如1,2,100,2000,Infinity,NaN 变量: 变量,代表的当前随机分配的内存地址. 变量的值,是可变的,可以用来保存 ...

  7. Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)

    一.Js简介和入门 继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button onclick="javas ...

  8. 正经学C#_变量与其数据类型：《c#入门经典》

    这一篇总结以下变量与其数据类型. 变量:在c#中指 某一个值或者数据存储在变量中,并且可以取出或者查看.变量不仅仅是一种,也有很多种,细分而言就是类型.泛指就是变量.如果是要是使用变量就要 声明变量, ...

  9. Python--前端基础之JavaScript（JS的引入方式，JS的变量、常量和标识符，JS的数据类型，运算符，流程控制，JavaScript的对象）

    JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...

随机推荐

  1. ubantu 16.4 Hadoop 完全分布式搭建

    一个虚拟机 1.以  NAT网卡模式   装载虚拟机 2.最好将几个用到的虚拟机修改主机名,静态IP     /etc/network/interface,这里 是 s101 s102  s103 三 ...

  2. iOS 开发之环形倒计时进度条（虚线／实线）

    代码很简单,一看便知.这里为顺时针,若想要逆时针,clockwise改为0,还需更改起始角度和终点角度. 源码地址:https://github.com/LfyDragon/CountDown 直接上 ...

  3. gulp学习。

    安装gulp 安装gulp之前必须先安装node.js,然后在命令行里输入 $ npm install gulp-cli -g (-g 表示全局安装)然后在输入$ gulp -v ,验证,安装完成后再 ...

  4. [SQLSERVER] 把TransactionLog截断

    注意:以下语句非常危险 --BACKUP LOG MyDb TO DISK=’NUL:’

  5. 购物商城学习--第二讲(maven工程介绍)

    接下来第二讲介绍整体工程如何使用maven搭建的. 使用maven管理工程的好处: jar包的管理: 工程之间的依赖管理: 自动打包 maven常见打包方式:jar.war和pom三种.jar工程,是 ...

  6. The current identity ( XXXX) does not have write access to ‘C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files’.解决办法

    环境windows 2008+IIS 7 找到 C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET FilesTempora ...

  7. 搞定pycharm专业版的安装

    学习python也有一段时间了,装了python2,也装了python3.对于IDE当然首选了人人拍掌叫好的pycharm.其实作为小白,一开始的时候并不知道什么是IDE,什么是pychram,以为装 ...

  8. 直播内容不合规怎么办？智能AI为您解决审核难题

    背景 近些年来,视频直播快速发展,大量的直播平台如雨后春笋一般出现,但是这同样给直播内容的监管带来了巨大的挑战,一方面国家对于直播内容监管的要求日益严格,另一方面相对于文字内容的审核,多媒体内容的审核 ...

  9. pam_frpintd.so 错误修复

    PAM unable to dlopen(/lib64/security/pam_fprintd.so): /lib64/security/pam_fprintd.so: cannot open sh ...

  10. 3.3 线程---Handler消息传递机制浅析

    Handler的执行流程图: 当我们的子线程想修改Activity中的UI组件时,我们可以新建一个Handler对象,通过这个对象向主线程发送信息;而我们发送的信息会先到主线程的MessageQueu ...