第51天学习打卡（JavaScript基本语法入门 数据类型 ）

2.2 基本语法入门

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    JavaScript严格区分大小写-->
     <script>
         //java里面定义变量  变量类型  变量名 = 变量值;
         // 1.javascript里面一切的变量都是var
         var score = 72;
        // alert(num);
         // 2.条件控制
         if (score>60 && score<70){
             alert("60~70");
         }else if (score>70 && score<80){
             alert("70~80");
         }else{
             alert("other");
         }
         //console.log(score) 在浏览器的控制台打印变量！相当于System.out.println();
         /*
         *
         *
         * */
 ​
 ​
     </script>
 ​
 </head>
 <body>
 ​
 </body>
 </html>

必备调试须知：

image-20210228080417602

2.3数据类型

数值，文本，图形，音频，视频....

变量

 var

 

number

js不区分小数和整数，Number

 123//整数123
 123.1//浮点数123.1
 1.123e3//科学计数法
 -99//负数
 NaN //not a number
 Infinity //表示无限大
 ​

字符串

'abc' "abc"

布尔值

true false

逻辑运算

 &&   与   两个都为真，结果为真
 ||   或   一个为真，结果为真
 !    非   真即假  假即真

比较运算符!!!!! 重要

 = 赋值符号
 == 等于   （类型不一样，值一样，也会判断为true）
 === 绝对等于 (类型一样，值一样，结果为true)

这是一个JS的缺陷，坚持不要使用==比较

须知：

image-20210228082232900

NaN这个与所有的数值都不相等，包括自己

浮点数问题：

 console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

可以使用这个方法进行判断：

 console.log( Math.abs(1/3 - (1 - 2/3))< 0.000000001);

null 和undefined:

null: 空

undefined:未定义

数组

Java的数组必须是相同类型的对象，JS中不需要这样。

  var arr = [1,2,3,4,'hello',null,true];
 ​
    new Array(1,12,3,4,5,null);
 ​

取数组下标：如果越界了，就会报undefined

对象

对象是用大括号

数组用中括号

每个属性之间使用逗号隔开，最后一个不需要使用逗号

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script>
       //Java写法    Person person = new Person(1,2,3,4,5,);
       var person ={
           name:"qinjiang",
           age:3,
           tags:['js','java','web','...']
 ​
       }
 ​
       
     </script>
 ​
     
 </head>
 <body>
 ​
 </body>
 </html>

取对象的值，在控制台操作：

image-20210228094309078

 

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
 <!--
       前提：IDEA需要设置支持ES6
       'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
       局部变量建议使用let去定义
       必须写在JavaScript的第一行
 ​
          -->
     <script>
         'use strict';
         //变量
       let  i = 1;
       //ES6 局部变量用let定义
 ​
 ​
     </script>
 ​
 </head>
 <body>
 ​
 </body>
 </html>

image-20210228095918758

3 数据类型

3.1 字符串

1.正常字符串我们使用单引号，或者双引号包裹。

2.注意转义字符\

image-20210228100954143

 \':  字符串
 \n:   换行
 \t :  table
 \u4e2d:  中      \u#### unicode字符
 "\x41"    Ascll字符

3.多行字符串编写

 //tab键上面 esc键下面
         var msg = `hello
         world
         nihaoya
         haohaoxuexio `

 

4.模板字符串

  //tab键上面 esc键下面
         let name = "qinjiang";
         let age = 3;
         let msg = `你好呀,${name}`
         console.log(msg);
 ​

5.字符串长度

 console.log(str.length)

6.字符串的可变性：不可变

image-20210228103005779

 

7.大小写转换

 //注意这里是方法，不是属性
 console.log(student.toUpperCase())//大写
 console.log(student.toLowerCase())//小写

image-20210228103259858

8.indexOf

 console.log(student.indexOf('t'))//获取字符串指定的下标

9.substring

 console.log(student.substring(2))//从第2个字符串截取到最后一个
 student.substring(1,3)//包含第一个不包含第3个

image-20210228104319188

3.2数组

Array可以包含任意的数据类型

 var arr = [1,2,3,4,5,6]
 arr[0] 取值
 arr[0] = 1 //按下标赋值

1.长度

 arr.length

注意：假如给arr.length赋值，数组大小就会发生变化 ，如果赋值过小，元素就会丢失。

image-20210228105338959

 

image-20210228105647594

2.indexOf:通过元素获得当前元素所在的下标索引

image-20210228105837775

字符串的"1"和数字1是不一样的

image-20210228110318475

3.slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

image-20210228110527610

4.方法 push(),pop()

 push:压入到尾部
 pop:弹出尾部的一个元素
 ​

image-20210228111007062

  1. unshift(), shift()头部压入与弹出

     unshift:压入到头部
     shift:弹出头部的一个元素
     ​

    image-20210228111356415

6.排序sort()

 arr = ['B','C','A']
 (3) ["B", "C", "A"]0: "B"1: "C"2: "A"length: 3__proto__: Array(0)
 arr.push('D')
 4
 arr
 (4) ["B", "C", "A", "D"]
 arr.sort()
 (4) ["A", "B", "C", "D"]

7.元素反转

 arr
 (4) ["B", "C", "A", "D"]
 arr.sort()
 (4) ["A", "B", "C", "D"]
 arr.reverse()
 (4) ["D", "C", "B", "A"]

8.concat()拼接

 (4) ["D", "C", "B", "A"]
 arr.concat([1,2,3,4])
 (8) ["D", "C", "B", "A", 1, 2, 3, 4]
 arr
 (4) ["D", "C", "B", "A"]

注意：contact()并没有修改数组，只是会返回一个新的数组

9.连接符join

打印拼接数组，使用特定的字符串连接

 arr
 (4) ["D", "C", "B", "A"]
 arr.join('-')
 "D-C-B-A"

10.多维数组

 arr = [[1,2],[3,4],["5","6"]]
 arr[1][1]
 4

数组：存储数据（如何存，如何取）

3.3对象

若干个键值对

  var 对象名 = {
      属性名: 属性值,
      属性名: 属性值,
      属性名: 属性值
             
         }
  //定义了一个person对象，其有四个属性
   var person = {
             name:"kuangshen",
             age:3,
             email:"24736743@qq.com",
             score:90
 ​
 ​
 ​
         }
 ​

JS中对象，以{....}表示一个对象，键值对描述属性xxxxx:xxxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号。

JavaScript中的所有的键都是字符串，值是任意对象。

1.对象赋值

 person.name
 "kuangshen"
 person.age
 3
 person.name = "qinjiang"
 "qinjian

2.使用一个不存在的对象属性，不会报错.undefined

 person.hhhhhh
 undefined

3.动态的删减属性,通过delete删除对象的属性

 delete person.name
 true
 person
 {age: 3, email: "24736743@qq.com", score: 90}

4.动态的添加,直接给新的属性添加值即可

 person
 {age: 3, email: "24736743@qq.com", score: 90}
 person.haha = "haha"
 "haha"
 person
 {age: 3, email: "24736743@qq.com", score: 90, haha: "haha"}

5.判断属性值是否在这个对象中！ xxx in xxx

 age'in person
 true
 //集成 in可以找到父类的方法
 ​
 'toString' in person
 true

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

 person.hasOwnProperty('toString')
 false
 person.hasOwnProperty('age')
 true

 

 

posted @ 2021-02-28 22:24  豆豆tj  阅读(62)  评论(0)    收藏  举报