javascript学习笔记(一)===JavaScript基础语法

引入方式

外链式 JS 代码（推荐） 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发 新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

 <script src="./01-demo.js"></script>

行内式 JS 代码（不推荐） 写在标签上的 js 代码需要依靠事件（行为）来触发

<!-- 写在 input 标签上 -->
<input type="button" value="点我" onclick="alert('helloworld')">

JS 注释

• 语法：注释更好的屡清楚你的业务逻辑；不会执行

// alert('hello world');  单行注释，一般就是简单的做个说明


/*
* 多行注释
* 一般把想要注释的内容写到这里面来，大段内容；不能 嵌套使用；
*/

输入输出

• 作用：交互的简单入口，可以给页面输入我们想要输入的信息，页面输出一定的信息；为了与你写的代码更好交流和调试；
• 输入：页面中弹出 输入框，需要输入内容后才能继续；开发不常用，我们只是为了配合学习；

  prompt：提示;
  

• 输出语法：

// 浏览器会有个弹窗，只要不点击弹窗，后面就不会执行；alert 警告
alert('要输出的内容')  

// 在控制台输出，不阻止下面的执行。调试常用 console控制台 log 日志；！！！
console.log('要输出的内容')；  
console.log('要输出的内容',1);   可逗号隔开，输出多个值；
console.dir() 可以显示一个对象的所有属性和方法

// 查看JS的执行情况：鼠标点击右键，或者键盘F12，看Console控制台；

// 在页面body中显示，把解析HTML结构；
document.write('<div>文字</div>')

变量

• 作用：语法的一部分，编程语言，得有一些数据；比如前面说的prompt("引导信息");，用户输入数据，变量接收；
• 本质：存数据的，放入数据；
• 变量：与之对应叫常量（一直不变的量）;
• 语法：
• 使用var这个关键字，告诉浏览器，我们要定义一个变量
• 使用=号告诉浏览器，我们要把右边的数据存储到变量（单词）里面；直接参加我们需要的计算；

// 过程：定义变量、变量赋值
// 变量声明 没有赋值
var a;
// 变量赋值
a = 10;
// 关键字var声明时 赋值
var num1 = 10;
var num2 = 20;
console.log(num1 + num2);//计算两个数字的和
// prompt 有返回值；
var pwd = prompt('请输入你的很行卡密码');
console.log(pwd);
// 声明时赋值，再次改变值；
var b = 100;
b = 200;
// 变量自己给自己 赋值 运算
var a = 10;
// 把右侧计算的结果，赋值 给左侧
a = a + 1;

变量的声明和赋值

• var a 是声明

• a = 1 是赋值

  • 找变量对应的声明:往上找全局也找不到,就变成赋值(就近原则)

命名

• 范围：字母、数字、下划线、$符号；
• 不能：变量名字不能用数字作为开头
• 变量名字不能使用JavaScript语法中的关键字和保留字
• 关键字：在JavaScript语法中，具有特殊意义的单词，比如我们学习过的用于声明变量的var；后面要学习的if else for wihle case break....

// 变量不能使用数字开头
var 15a = 10;
// 会在控制台中报错：Uncaught SyntaxError: Unexpected 
// Uncaught - 未捕获的
// SyntaxError - 语法错误
// Unexpected - 意料之外的
// number - 数字
// 翻译过来就是： 这行有一个语法错误，你的数字不符合语法要求
// 变量名字不能使用关键字
var var = 20;
// 会在控制台中报错： Uncaught SyntaxError: Unexpected token var
// token - 标记，记号，在编程中我们翻译成 '标识符'
// 意思是这行有一个语法错误，出现了一个意料之外的标识符 var
//1 变量可以一次性声明多个
var a,b,c,d;
// 2 还可以声明多个的同时进行赋值；
var a = 10;
var a = 10,b = 20,c = 30;
//3 变量也可以作为另一个变量的值
var a = 10;
// 赋值给b（复制了一份）,a再次变化时，b不受影响；
var b = a;

• 保留字：JavaScript是不断发展的，以前的功能用了以前的关键字，将来要加入新的功能的时候，可能要用到新的关键字，所有JavaScript在一开始的时候就保留了部分单词，以便将来把保留的单词作为关键字
• 变量名字是区分大小写的；

// 变量名字是区分大小写的
var a = 10;
console.log(a);// 正常输出

console.log(A);// 在控制台中报错：Uncaught ReferenceError: A is not defined
// ReferenceError - 引用错误
// not defined - 未定义
// 意思是 A 这个变量我们没有定义就使用了，可见a和A是不一样的，不是同一个变量

数据类型

• 变量：用于接受数据，数据的类型不同；
• 怎么区别不同？
  • 值的大小，比如：5 6区别
  • 类型：我 、1；
• 为什么不同？
  • 生活中需要不同的类型描述不同的事情，程序源于生活又高于生活；
  • 说明不同的情况；
• 基本类型：数字（Number）类型、 字符串(string)类型、布尔(Boolean)类型、Null（值）、undefined类型、symbol(创建一个独一无二的值)；
• 复杂类型：对象Object；

-基本数据类型

• 1、数值类型（number）
  • 一切数字都是数值类型（包括二进制，十进制，十六进制等） NaN（not a number），一个非数字
• 2、字符串类型（string）
  • 被引号包裹的所有内容（可以是单引号也可以是双引号）

  var a = 'abc';
  console.log(a);

• 程序中，默认把一对引号，认为就是字符串的结束；

  console.log("小明说:"小红明天真漂亮"");

• 此时会在控制台中报错： Uncaught SyntaxError: missing ) after argument list；在想要转义的字符前面加上一 \；

// 单双引号可以相互包着，能显示；
console.log('小明说:"小红明天真漂亮'");

• 转译字符：把特殊的字符转成 JS 可以读的字符；
• 特殊的字符："" '' \

console.log("小明说:\"小红明天真漂亮\"");

• 3、布尔类型（boolean）

  • 只有两个（true 或者 false）

    var a = 5>4; // 存在；
    console.log(a)  // 输出true,表示存在，成立；
    var b = false; // 不存在
  

• 4、null类型（null）

  • 值：null用来表示尚未存在的对象（复杂类型）；专门赋值为null；
  • 其实null不是简单类型，为复杂类型；这里把它归结为简单类型，只是因为它的值是单个的，为null，我们拿过来用，先有印象；

   var a = null;
  

• 5、undefined类型（undefined）

  • undefined类型：undefined值；
  • 变量没有赋值，也不知道是啥，不是空；默认赋值为undefined

   var a;
   console.log(a);  // 输出undefined
  

5种false值: 0， NaN， ''， undefined， null，

查看数据类型

• 作用：不同的数据类型，参与运算结果不同；需要判断数据是什么类型；

• 语法：反应判断当前值的类型的说明；

     typeof 数据;
     typeof(数据);
     console.log(typeof 123);// number
     console.log(typeof 'abc');//string
     console.log(typeof null); // Object
     console.log(typeof true); // boolean
     console.log(typeof undefined); // undefined 
  

判断一个变量是不是数字

• 可以使用 isNaN 这个方法来判断一个变量是不是数字
• isNaN ：is not a number

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

数据类型转换

• 目的：数据参与运算，保证数据类型一致，才能得到预期的结果；

• 数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

1、Number(变量)

• 语法：把需要转的值或者变量放入括号内部；
• 可以把一个变量强制转换成数值类型
• 可以转换小数，会保留小数
• 可以转换布尔值
• 遇到不可转换的都会返回 NaN

var res0 = Number('abc');
console.log(res0); // 输出数字NaN
var res1 = Number('123');
console.log(res1); // 输出数字123
console.log(typeof res1); // 输出 number
var res2 = Number(true);
console.log(res2);// 输出 1
console.log(typeof res2); // 输出number
var res3 = Number(null);
console.log(res3); // 输出0
console.log(typeof res3); // 输出number
var res4 = Number(undefined);
console.log(res4); // 输出 NaN  , NaN 就是 not a  number 的缩写，表示某个结果不是某个数字
console.log(typeof res4); // 输出 number

2、parseInt(变量)

• 将其他类型为数字整数

• 从第一位开始检查，是数字就转换，知道一个不是数字的内容

• 开头就不是数字，那么直接返回 NaN

• 不认识小数点，只能保留整数

• 如果字符串前面是数字，可以把前面的数字转化为数字类型；

• 如果字符串中前面不是数字，转NaN；

var res1 = parseInt('123');
console.log(res1); // 输出 123 
console.log(typeof res1); // 输出number
var res2 = parseInt('12a');
console.log(res2);// 输出 12
console.log(typeof res2);// 输出number
var res3 =parseInt('a123');
console.log(res3); // 输出 NaN
console.log(typeof res3); // 输出number
var res4 = parseInt('abc');  //其他 true null undefined
console.log(res4,typeof res4);  // 输出NaN

3、parseFloat(变量)

• parseFloat这个方法用于转换字符串转换成小数(在编程中，小数也称浮点数)
• 非数字类型只能接受字符串，纯字符串、true、null、undefined都是NaN；
  • 如果字符串前面是数字，可以把前面的数字转化为数字类型；
  • 如果字符串中前面不是数字，转NaN；

var res1 = parseInt('123.123');
console.log(res1); // 输出 123.123
console.log(typeof res1); // 输出number
var res2 = parseInt('12.12a');
console.log(res2);// 输出 12.12
console.log(typeof res2);// 输出number
var res3 =parseInt('a12.3');
console.log(res3); // 输出 NaN
console.log(typeof res3); // 输出number

4、除了加法以外的数学运算

• 运算符两边都是可运算数字才行
• 如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN
• 加法不可以用

转Number

① Number('1')

② parseInt('1',10)

③ parseFloat('1.23')

④ '1' - 0

⑤ + '1.23' = 1.23

GC 垃圾回收

如果一个对象没被引用就是垃圾,会被回收

其他数据类型转成字符串

1、String(变量)

• 转化特点：有引号就行了；

• 语法：转呗；反正最后就是用单双引号包起来了；

    var res1 = String(123);
    console.log(res1);  // 输出字符串的 123
    console.log(typeof res1); // 输出 string
    var res2 = String(true);
    console.log(res2); // 输出字符串的 true
    console.log(typeof res2); // 输出 string
    var res3 = String(undefined);
    console.log(res3); // 输出 字符串 undefined
    console.log(typeof res3);// 输出 string
    var res4 = String(null);
    console.log(res4); // 输出 字符串null
    console.log(typeof res4); // 输出 string
  

2、变量.toString()

• 语法：undefined和null不能使用这个方式变成字符串；
• 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

  var res1 = (123).toString();
  console.log(res1); // 输出字符串123
  console.log(typeof res1); // 输出string
  var res2 = true.toString();
  console.log(res2); // 输出字符串true
  console.log(typeof res2); // 输出string
  var res3 = undefined.toString();
  console.log(res3); // 报错：Cannot read property 'toString' of  undefined
  var res4 = null.toString();
  console.log(res4); //报错： Cannot read property 'toString' of null


**其他数据类型转成布尔**

1. `Boolean(变量)`

- 在 js 中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true
- 其他类型：字符串类型、数字类型、null（值）、undefined类型（值）
- 特点：返回一个布尔值；true、false；


```javascript
 var res1 = Boolean(123); 
 console.log(res1);// 输出true
 console.log(typeof res1); // 输出 boolean
 var res2 = Boolean('abc');
 console.log(res2);// 输出true
 console.log(typeof res2); // 输出 boolean
 var res3 = Boolean(undefined);
 console.log(res3);// 输出false
 console.log(typeof res3); // 输出 boolean
 var res4 = Boolean(null);
 console.log(res4);// 输出false
 console.log(typeof res4); // 输出 boolean

• 在js里面，我们在转换其它类型为布尔类型的时候，只有6个情况是false

   var res1 = Boolean(0);
   console.log(res1); //输出false
   var res3 = Boolean(NaN);
   console.log(res3); //输出false
   var res2 = Boolean('');// 空字符，里面啥没有，空格也没有；
   console.log(res2); //输出false
   var res6 = Boolean(false);
   console.log(res6); //输出false
   var res5 = Boolean(null);
   console.log(res5); //输出false
   var res4 = Boolean(undefined); 
   console.log(res4); //输出false
  
  

操作符

• 数据运算：数据参加比较、运算；
• 不同的数据类型参加运算，会有问题；比如上面的 字符串+数字；
• 学习关注：常规需要什么；返回什么；

算术操作符

1、+

• 只有符号两边都是数字的时候才会进行加法运算
• 只要符号任意一边是字符串类型，就会进行字符串拼接

2、-

• 会执行减法运算
• 会自动把两边都转换成数字进行运算

3、*

• 会执行乘法运算
• 会自动把两边都转换成数字进行运算

4、/

• 会执行除法运算
• 会自动把两边都转换成数字进行运算

5、%

• 会执行取余运算
• 会自动把两边都转换成数字进行运算

字符串+

• 字符串+：与字符串临近的类型，转为字符串；里面存在一个隐式转化；看不到的转化；
• 隐式转化：在字符串+情况下，数字隐转为字符串；
• 情况：
  • 字符串 + ；
  • +字符串；

// 字符串 +
// 从左到右执行，数字相加，字符串拼接
var res3 = 10+10+"abc"+"def";
console.log(res3);  //输出 20abcdef

字符串 其他

• 字符串遇见 * / - %；
• 隐式转化：字符串会隐式转化转为Number，再次参加运算；

var res3 = '456' - 123; 
console.log(res3); // 输出 数字 333
// 'abc' 隐式转化为NaN，所有输出NaN；
var res4 = 'abc' - 123;
console.log(res4); // 输出NaN

• 其实字符串遇见 * / % 一样的结果；
• 自己去试：
  • 其它的类型：null（值）、undefined、Boolean自己去体验；
  • 最终都是参与了隐式转化（只是我们看不见这个转化过程，但是实质还是这些数据被Number()；

赋值运算符

1、=

• 就是把 = 右边的赋值给等号左边的变量名
• var num = 100
• 就是把 100 赋值给 num 变量
• 那么 num 变量的值就是 100

2、+=

var a = 10;
a += 10;
console.log(a); //=> 20

• a += 10 等价于 a = a + 10

3、-=

var a = 10;
a -= 10;
console.log(a); //=> 0

• a -= 10 等价于 a = a - 10

4、*=

var a = 10;
a *= 10;
console.log(a); //=> 100

• a *= 10 等价于 a = a * 10

5、/+

var a = 10;
a /= 10;
console.log(a); //=> 1

• a /= 10 等价于 a = a / 10

6、%=

var a = 10;
a %= 10;
console.log(a); //=> 0

• a %= 10 等价于 a = a % 10

比较操作符

• 需要：常规：Number类型参与比较；
• 语法：比较两个值的大小，常规比较就是数字
• 返回：比较后的结果，对或错，Boolean值；标示状态成立与否；

1、==

• 比较符号两边的值是否相等，不管数据类型
• 1 == '1'
• 两个的值是一样的，所以得到 true

2、===

• 比较符号两边的值和数据类型是否都相等
• 1 === '1'
• 两个值虽然一样，但是因为数据类型不一样，所以得到 false

区别：

• ==
  • 同类型：比较值是否一样；特别NaN==NaN false
  • 不同类型：转为Number类型，看值是否一样；
• ===
  • 同类型：再看值；
  • 不同类型：false;

// 同类型：比值；返回都是true
console.log(11 == 11);
console.log("abc" == "abc");
console.log(null == null);
console.log(undefined == undefined);
// 同类型：特别的NaN，返回false
console.log(NaN==NaN)  
// 不同类型：非数字类转数字，
console.log("11" == 11);  // true，所以为true;

// 不同类型：特别的null 、undefined
// undefined和null与其他Number类型在进行相等判断时不进行类型转换。
console.log(null==0)         //false
console.log(0 == undefined); //false
// ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的;
console.log(null==undefined)  // true

3、!=

• 比较符号两边的值是否不等
• 1 != '1'
• 因为两边的值是相等的，所以比较他们不等的时候得到 false

4、!==

• 比较符号两边的数据类型和值是否不等
• 1 !== '1'
• 因为两边的数据类型确实不一样，所以得到 true

5、>=

• 比较左边的值是否 大于或等于 右边的值
• 1 >= 1 true
• 1 >= 0 true
• 1 >= 2 false

6、<=

• 比较左边的值是否 小于或等于 右边的值
• 1 <= 2 true
• 1 <= 1 true
• 1 <= 0 false

7、>

• 比较左边的值是否 大于 右边的值
• 1 > 0 true
• 1 > 1 false
• 1 > 2 false

8、<

• 比较左边的值是否 小于 右边的值
• 1 < 2 true
• 1 < 1 false
• 1 < 0 false

拓展：JS中Null与Undefined的区别

!= 和!== 是比较两个数据是否不相等的；

// 输出 false ,比较两个数据的值是否不相等, 此时两个数据的 值 都 4 ，相等，结果是 false
console.log('4'!= 4); 

// 输出 true ，比较两个数据的类型和值是否不相等，此时两个数据的类型不相等，结果是 true
console.log('4'!== 4); 

逻辑操作符

• 语法：&& || ！
• 需要：
  • 常规：左右两边需要 true 或 false进行比较，布尔类型的值进行逻辑判断，
  • 非常规：需要转Boolean值；
• 返回：用Boolean值进行逻辑判断后，把最后一个成立或不成立的结果返回；
• && 且：所有条件都要满足的情况下；

true&&true  //true;
true&&false    //false;
1&&2   // 2;
console.log("abc"&&1);  
console.log(null&&0);

• 特点：遇见有一个false，那么就直接返回false;

// 用户在登录的时候要用户名和密码同时正确才能登录
var userName = prompt('请输入用户名');
var password = prompt('请输出密码');
console.log(userName === 'admin' && password === '123456');
// 只有 && 两边的 结果都是 true ，最终结果返回最后一个成立的结果；

• || 或：只要你有满足的条件就行；
• 特点：只有有一个true，那么就直接返回是true的这个结果;

// 只要年龄小5岁 或者 身高小于120cm 就可以免费乘坐
var age = parseInt(prompt('请输入你的年龄'));
var height = parseFloat(prompt('请输入你的身高'));
console.log(age < 5 || height < 120);
// || 或者：两边的结果有一个是true，最终结果就是true

• ! ：取反；常规Boolean值取反；不要去玩非常规了，没有意义；

var res = true;
console.log(!res);

优先级

• 大致优先级：
  • 括号先算
  • 其次算算术：++a优先;
  • 再次算比较 > ==
  • 然后算逻辑 && ||
  • 最后算赋值 =

var a = 200 === (10 + 10) * 10 > 1;

// 先算括号
200===20*10>1

// 在算计算
200===200>1

// 算右侧；
200===true;

// false
console.log(a); 

• 具体计算优先级

1. 第一优先级： [] . ()
2. 第二优先级： ++ -- !
3. 第三优先级： *  /  %
4. 第四优先级： +  -
5. 第五优先级： >   >=   <   <=
6. 第六优先级： ==   !=    ===    !==  
7. 第七优先级： &&8. 第八优先级： || 9. 第九优先级： = += -= *= /= %=  

string(1)和 new string(1)

• 没有new 变成字符串 加new 变成字符串对象(不加new简单数据,加new复杂类型)

  • 复杂类型: 加不加new都返回对象

  • 简单类型: 加new变成对象