JS基础和数据类型

JS基础

概念

JavaScript是用于实现用户交互、动态控制文档的外观和内容,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言 js文档：https://zh.javascript.info/#tab-1

JS的组成

ECMAScript （Javascript的核心基础）

DOM(Document Object Model)

BOM(Browser Object Model)

引入方式

1在head标签中，使用script标签引入，src写js的路径地址

2.在body的结束标签后引入   好处：先加载html最后加载js

3.放在任意一个标签中，需要使用onclick添加点击事件

  <div onclick="alert('hello world')"></div>

4添加在a标签中

<a href="javascript:alert('hello world');"></a>

输出语句

弹窗输出

alert（"这是我的输出页面"）

alert('hello world') ;

在页面中输出（html页面）

  在页面中输出  html页面
    document.write("javascript");

控制台输出（测试，给开发人员看）

  控制台输出 
  console.log("hello word");

标识符

1.组成：标识符可以由字母、数字、下划线（_）和美元符号（$）组成

2.不能以数字开头：标识符的第一个字符必须是字母、下划线或美元符号，不能以数字开头

3.标识符不能使用JavaScript的关键字，如if、for、while，true、false和null等。这些词被JavaScript语言内部使用，具有特定的用途，用户不能自定义同名的标识符。

数据类型

变量名的命名规则

1.第一个字符必须为字母，_或$，其后的字符还可以是数字

2.严格区分大小写，要有一定的含义 建议使用小驼峰规则来命名变量。

3.redApple 不能使用关键词，保留字作为变量名

变量三部分组成：变量名称，变量值，变量的数据类型

声明变量的方式

方法一:  var name;

             name ='张三'；

方法二：var 变量名  = 值；

方法三：变量名 = 值；

方法四：var 变量1=值1，变量2=值2，变量3=值3；

JavaScript的数据类型

分为两种：基本数据类型和引用数据类型

js常用的基本数据类型（5种）：undefind(未定义)，null(空的)，number(数字类型)，string(字符串)，boolean(布尔类型)

js的引用数据类型（2种）：array(数组)和object（对象）

String类型【重要】

1. 字符串用单引号或双引号包括起来

2. 单双引号均不能解析变量

3. 变量与字符串，变量与变量之间可以使用运算符‘+’来链接

     4单引号和双引号可以互相嵌套，如果单引号中要嵌套单引号，需要使用转义字符

                eg:'I\'m student'

转义字符

number数字类型

按照进制划分：二进制、八进制、十进制、十六进制 按照其他划分：整形、浮点型、NaN（not a number）

tofixed的用法

0.375+0.248.toFixed(2)=>保留两位小数（四舍五入）
console.log(1.0-0.9==0.1)//false
console.log(1.0+0.9==1.9)//true

NaN（not a number）： NaN是一个特殊的number值，not a number表示非数字，当程序由于某种原因计算错误时，将产生一个无意义的数字NaN NaN与任何值都不想等，包括NaN本身 任何涉及NaN的操作，结果都为NaN

boolean布尔类型

1.值只有true和false。

2.分别代表逻辑真与假布尔值通常用来表示比较所得的结果

3.true和false是严格区分大小写的

var n=10;
if(n>8){
    alert('我是true');
}else{
    alert('我是false');
}

undefind(未定义)

1. 定义了一个变量但没有为该变量赋值，使用了一个并未赋值的变量

2. 使用了一个不存在的对象的属性时

3. var n;
   alert(n);

   var people=new Object; // 创建一个object对象
   people.height =162;  // 添加属性height
   alert(people.height);  // 输出属性height
   people.show=function(){  // 添加方法show
     alert(this.color);   // 调用属性color
     alert(this.height);  // 调用属性 height
   }
   people.show()  // 调用方法show

   null空

                null表示一个空值

                null不等于空字符串"",或0

                null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该               变量尚未被赋值

console.log(null==null) // true

Array数组【重要】

数组中可以存放多个值

创建数组

方法一：

var 数组名=new Array();

方法二：

var cars=new Array("Audi","BMW","BYD");

方法三：

var cars=["Audi","BMW","BYD"];

获取数组中的值

数组下标从0开始

var arr = ['河南','上海','杭州'];
    console.log(arr[1]);
输出结果为上海

 多维数组
    var arr = [
                ['北京','上海','深圳'],
                ['合肥','石家庄','昆明'],
                ['少林寺','龙门石窟','二七塔','华谊电影小镇']
            ];
            console.log(arr[0]); ['北京','上海','深圳']
            console.log(arr[1]);['合肥','石家庄','昆明']
            console.log(arr[2]);['少林寺','龙门石窟','二七塔','华谊电影小镇']

从多个嵌套数组中取出一个值

var arr1 = ['张三',180,['打球','打游戏',['篮球','羽毛球'],['LOL',黑神话悟空]]];
        console.log(arr1[2][2][0]);
        输出结果为篮球

object 对象

创建对象

方法一: var 对象名称=new Object;

方法二:var 对象名称={'键'：’值‘，'键'：’值‘，'键'：’值‘，'键'：’值‘}

var car = new Object();
    // 属性
    car.color = 'red';
    car.brand = 'BMW';
    car.price = 28.5;
    // 方法
    car.run = function(){
        console.log('我能跑');
    }
    car.stop = function(){
        console.log('我能停止');
    }
    car.setSpeed = function(){
        console.log('我能定速巡航');
    }

获取对象的方法
//调用整个对象
console.log(car);
//调用对象中的某个属性
console.log(car.price);

数据类型的检测

typeof用于数据类型的检测

数据类型的转换

数字类型的转换

强制转换 Number()

按照自动转换规则转换 parseInt(string) 、parseFloat(string)

布尔类型的转换

自动转换

类型	转换布尔型后的结果
""或''	FALSE
0或0.0	FALSE
NaN	FALSE
undefined	FALSE
null	FALSE
其它	TRUE（除上述情况外，其他值都为true）

强制转换 Boolean(), !!

eg:console.log(!!'123');/true

字符串的转换

自动转换

类型	转换字符串型后的结果
number	NaN、0、或数值对应的字符串
null	"null"
boolean	"true"、"false"
undefined	"undefined"
object	若对象存在为其toString()方法的值，若对象不存在为"undefined"

强制转换： String（），object.toString()

类型不一样的转换规则：

1. null == undefined true，但是换成 === 结果是false（因为类型不一致），剩下null/undefined和其他任何数据类型值都不相等

2. 字符串 == 对象，要把对象转为字符串

3. 剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较

如果类型都是字符串，就会按照ASCII编码的进行对比

运算符

1.算术运算符（+，-， *，/，%，++，--）

先乘除后加减

++在前先算++；++在后后算++；--同理

var i=1;
n=--i;
此时n=0
var a=1;
n=a--;
此时n=1

2.比较运算符（>,<,>=,<=,==,!=不等于,!==不全等于）

console.log(1.2+1.1==2.3) //true
console.log(1.2-1.1==0.1) //false

3.赋值运算符（=，+=，-=，*=，/=，%=）

4 逻辑运算符（！，&&，||）【两边均为表达式】

运算符	解释
!	逻辑取反
&&	逻辑且；只有两个操作数都为 true 时，才返回 true，否则返回 false。
??（了解）	空值合并运算符，如果左侧的表达式为 null或者 undefined 时，返回其右侧表达式，否则返回左侧表达式。

&&：（逻辑且）

如果前面表达式为真，返回后面的内容

如果前面表达式为假，返回前面的内容

&&断点问题：前面为假，后面表达式不再运算

||：（逻辑或）

如果前面表达式为真，返回前面的内容

如果前面表达式为假，返回后面的内容

||的断点问题：前面表达式为假，后面表达式不再运算

5.三元运算符

结构

条件表达式？真的结果：假的结果

eg

var   res  10<5?'真':'假';
console.log(res);

运算符的优先级

从高到低，具有相同优先级的运算符按从左至右的顺序

小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符