熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记

Posted 请叫我阿ken

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记相关的知识,希望对你有一定的参考价值。

你好,我是阿ken🦁


版权声明:本文为CSDN博主「请叫我阿ken」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
另外,博文中某些图片或内容可能出自网络,如有侵权或问题,请及时私信我

有学妹想以后做前端,就会问到 javascript怎么学的问题,在多次百般盘问下,阿ken🦁 决定贡献出自己之前学习 JavaScript时的笔记。

目录传送门:

2.1_数据类型

2.1.1_变量的数据类型

2.1.2_数据类型分类

2.1.3_数字型

2.1.4_字符串型

2.1.5_布尔型

2.1.6_undefined 和 null

2.1.7_数据类型检测

2.1.8_字面量

2.2_数据类型转换

2.3_运算符

2.4_分支结构


2.1_数据类型

2.1.1_变量的数据类型

JavaScript 是一种弱类型语言,不用提前声明变量的数据类型。
相对于 C、JAVA,这二者就是强类型语言。

//强类型语言(Java)
int num = 10;  // 这里的变量num是int型(整数类型)
//弱类型语言(JavaScript)
var num = 10;  //这里的变量num一开始是一个数字型
num = 'abc';   //赋值一个字符串,现在num变成了字符串类型

2.1.2_数据类型分类

(1) 数字型(Number),包含整型值和浮点型值:

var num1 = 21;  // 整型值
var num2 = 0.21; // 浮点型值

(2) 布尔型 (Boolean),包含 true和 false两个布尔值:

var bool1 = true;  // 表示真、1、成立
var bool2 = false; // 表示假、0、不成立

(3) 字符串型(String),用单引号或双引号包裹:

var str1 = '';    // 空字符串
var str2 = 'abc';  // 单引号包裹的字符串
var str3 = "abc";  // 双引号包裹的字符串

(4) 未定义型(Undefined),只有一个值 undefined:

var a;                // 声明变量a、未赋值,此时a就是 undefined
var b = undefined;    // 变量b的值为 undefined

(5) 定型(Null),只有一个值 null:

var a = null;   // 变量a的值为 null

需要注意:代码中的值 true、false、undefined和 null全部都要写成小写字母。

2.1.3_数字型

1. 进制
(1)在数字开头加上0,表示八进制数

var num1 = 07;
console.log (num1);   // 输出结果:7

var num2 = 010;
console.log (num2);   // 输出结果:8


(2)在数字开头加上0x,表示十六进制数

var num1 = 0X9;
console.log (num1);   //输出结果:9

var num2 = 0Xa;
console.log (num2);   //输出结果:10
// 十六进制数中的"X"和"a~f"不区分大小写


2. 最值
数字型的最大值和最小值用如下代码来获取。

console.log (Number.MAX_VALUE);  //输出结果: 1.7976931348623157e+308

console.log (Number.MIN_VALUE) ;  //输出结果: 5e-324

在输出结果中,使用了科学计数法来表示,在 JavaScript 中可以使用科学计数法表示数字。

3. 特殊值

数字型有3个特殊值,分别是 Infinity(无穷大)、-Infinity( 无穷小) 和 NaN( Not a Number,非数字)

console.log (Number.MAX VALUE * 2);  // 输出结果: Infinity

console.log (-Number.MAX VALUE * 2) ; // 输出结果: -Infinity

console.log('abe' - 100);  // 输出结果: NaN

> NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

若要判断一个变量是否为非数字的类型,可以用 isNaN() 来进行判断,它会返回一个布尔值,返回 true 表示非数字,返回 false 表示是数字,示例代码如下。

console.log (isNaN(12));  // 输出结果: false

console.log (isNaN('abc')); // 输出结果: true

2.1.4_字符串型

字符串是指计算机中用于表示文本的一系列字符, 在 JavaScript 中使用单引号或双引号来包裹字符串。

var str1 = '单引号字符串';

var str2 = "双引号字符串";

1. 单、双引号嵌套

在单引号字符串中可以直接书写双引号,在双引号字符串中也可以直接书写单引号,示例代码如下。

//正确的语法

var strl = 'I am a "progranmer"';  // I am a"prograrmer";

var str2 = "I'm a 'prograrmer'";  // I'm a 'programmer';

//常见的错误语法

var str1 = 'I'm a programmer';  //单引号错误用法

var str2 = "I'm a "prograrmer""; //双引号错误用法

var str3 = 'I am a programmer"; //单双引号混用

 

2. 转义符

在字符串中使用换行、Tab等特殊符号时,可以用转义符来进行转义。转义符都是以“\\”开始的

转义符解释说明
\\ '单引号
\\n换行
\\ ''双引号

3. 字符串长度

var str1 = 'I\\'m a programmer';
console.log(str1.length);   //输出结果:16

 //上述输出语句为  I'm a programmer  加上空格字符串长度一共是16

var str2 = '我是程序员';
console.log(str2.length);  //输出结果:5

 

4. 访问字符串中的字符

字符串可以使用 " [index] " 语法按照 index(索引) 访问字符,index 从0开始,数值为字符串的长度减1,如果超过了index最大值,会返回 undefined。

var str = 'I\\'m a programmer' ;  //输出语句为  I'm a programmer

console.log(str[0]);  //输出结果:I

console.log(str[1]);  //输出结果: '

console.log(str[15]);  //输出结果: r

console.log(str[16]);  //输出结果: undefined

 

5. 案例:输出 年龄

// 弹出提示框,让用户输入年龄
var age = prompt('请输入您的年龄');
// 组合语句并输出
var msg = '您今年' + age + '岁了';
alert(msg);

2.1.5_布尔型

布尔型有两个值 true 和 false

当 布尔型(true false)与数字型相加的时候,会转化为(1 0)

2.1.6_undefined 和 null

如果一个变量声明后没有赋值,则变量的值就是 undefined。我们也可以给一个变量赋一个 null 值,null 一般用来表示空对象指针,具体会在后面的章节中讲解。

案例:演示 undefined 和 null 的使用。

var a;
console.log (a);       // 输出结果: undefined
console.log (a + '_'); // 输出结果: undefined_(字符串型)
console.log (a + 1);   // 输出结果: NaN
var b = null;
console.log (b + '_'); // 输出结果: null_(字符串型)
console.log(b + 1);    // 输出结果:1(b转换为0)
console.log(b + true); // 输出结果:1(b转换为0,true转换为1)

2.1.7_数据类型检测

在开发中,当不确定一个变量是什么数据类型的时候,可以利用 typeof 运算符进行数据类型检测

案例:

console.log (typeof 12);         // 输出结果:number
console.log (typeof '12');       // 输出结果:string
console.log (typeof true);       // 输出结果:boolean
console.log (typeof undefined);  // 输出结果:undefined
console.log (typeof null);       // 输出结果:object

2.1.8_字面量

字面量是指源代码中的固定值的表示法,简单来说,就是用字面量来表示如何在代码中表达这个值。

2.2_数据类型转换

1. 转换为字符串

var num = 3.14;

// 方式一 利用 + '' 拼接字符串
var str = num + '';
console.log(str, typeof str); // 3.14 string

// 方式二 利用 toString()转换成字符串
var str = num.toString();
console.log(str, typeof str); // 3.14 string

// 方式三 利用String()转换成字符串
var str = String(num);
console.log(str, typeof str); // 3.14 string

> 注意:
> null 和 undefined 无法使用 toString() 方式进行转换
> num = 5; num.toString(2) 表示将5转为二进制,结果为101

 

var num = 5; 
console.log ( num.toString(2) ); // 101

2. 转换为数字型 

// 方式一 使用 parseInt() 将字符串转为整数
console.log ( parsenInt('78') );  // 78

// 方式二 使用 parseFloat() 将字符串转为浮点数
console.log ( parseFloat('3.94') );  // 3.94


// 方式三 使用 Number() 将字符串转为数字型
console.log ( Number('3.94') ); // 3.94

// 方式四 利用算术运算符(-, *, \\)隐式转换
console.log ('12' - 1);  // 11

 

待转数据Number()和隐式转换parseInt()parseFloat()
纯数字字符串转成对应的数字转成对应的数字转成对应的数字
空字符串0NaNNaN
数字开头的字符串 NaN转成开头的数字转成开头的数字
非数字开头字符串NaNNaNNaN
null0NaNNaN
undefined0NaNNaN
false0NaNNaN
true1NaNNaN
console.log ( parseInt('F', 16) );  
// 代码表示将字符F转变为十六进制数,结果为15

3. 转换为布尔型

转换为布尔型使用 Boolean()

console.log ( Boolean('') ); // false
待转数据Boolean()
0false
NaNfalse
nullfalse
undefinedfalse
‘小白’true
12true

2.3_运算符

1. 算术运算符
+、 -、 *、 /、 %

2. 递增(++)和递减(--)运算符
_
递增和递减运算符既可以写在变量前面,也可以写在变量后面(num++、num--)。
当放在变量前面时,称为前置递增(递减)运算符
放在变量后面时,称为后置递增(递减)运算符
前置和后置的区别在于,前置返回的是计算后的结果,后置返回的是计算前的结果。

var a = 1, b = 1;
console.log (++a); // 2
console.log (a);   // 2
console.log (b++); // 1
console.log (b);   // 2
var a = 10;
var b = ++a + 2; // b = 11 + 2, a = 11
var c = b++ + 2; // c = 13 + 2, b = 14
var d = c++ + ++a; // d = 15 + 12, c = 16, a = 12

案例:演示,

// n , n1 = 10
var n = n1++; // n1 = 11 n1++ = 10
console.log ('n = ' + n); // n = 10
console.log ('n1 = ' + n1); // n1 = 11

n = ++n1; // n1 = 12 ++n1 = 12
console.log ('n = ' + n); // n = 12
console.log ('n1 = ' + n1); // n1 = 12

3. 比较运算符 

运算符name
< > >= <=小于、大于、大于等于、小于等于
==等于
!=不等于
===全等
!==不全等
console.log (6 == 6);    // true
console.log (6 == '6');  // true
console.log (6 === 6);   // true
console.log (6 === '6'); // false
console.log (5 !== '5'); // true


4. 位运算符 

 

运算符名称示例运算解析
&a&b如果两个二进制位都1才1,有0则0
|a|b如果两个二进制位上有一个值是1,则运算结果为1,无1才0
~~ a0取反为1,1取反为0
^异或a^b二进制位相同则0,不同才1
<<左移a<<b将a左移b位,运算时,左边的空位补0,左边移走的部分舍去
>>右移a>>b将a右移b位,运算时,左边的空位根据原数的符号位补0或者1,原来是负数就补1,正数就补0
>>>无符号右移a>>>b将a右移b位,丢弃被移出位,左边最高位用0填充,不考虑原数正负
// 1. 位运算符 ~
  var num = 7;
  var num2 = ~num;
  alert(num2);    // -8
  var num3 = -1;
  var num4 = ~num3;
  alert(num4);    // 0
 // 可以看出:~ 就是将原来的数值加1后取负,  即: ~x = -(x + 1)。
 // 底层原理: 

 // 先了解一下基本知识

   // 1、计算机里的数字是以补码的形式表示的。
   // 2、取反即:0变1,1变0。
   // 3、第一个数为符号位,0为正数,1为负数。
   // 4、正数的原码、反码、补码都一样。
   // 5、负数的反码:符号位不变,其余取反。补码:反码加1。
   // 6、0的反码补码都为0。
   // ~ 即对当前数取反所表示的值。计算机中数字以补码形式表示,7的取反正好是-8的补码,所以~7 == -8;

   // 用途:

  // 1)、取整数随机数
      ~~(Math.random()*7);    // 在0~6内取整数随机数,包括0和6
      ~(Math.random()*7);      // 在-7~-1内取整数随机数,包括-7和-1
      ~(Math.random()*7);      // 在1~7内取整数随机数,包括1和7

  // 2)、解决抽象渗漏
   //  抽象渗漏:在代码中暴露底层实现的细节。
   //  对于indexOf判断是否存在,像>-1、!=-1、>=0、<0之类细节就应该屏蔽掉
   //  那么用~就很好解决了



        var str = 'hello World';
      if(~str.indexOf('ell')) 
        return true;
      else
        return false;




// 2、按位与&
    var num1 = 25 & 7;

    var num2 = 25 & -7;

    var num3 = -25 & 7;

    var num4 = -25 & -7;

    alert(num1);    // 1

    alert(num2);    // 25

    alert(num3);    // 7

    alert(num4);    // -31

    原理:1&1=1、1&0=0、0&1=0、0&0=0。

    根据规则对补码处理:

    25 & 7

    

   // 25 & -7
   // -25 & 7
   // -25 & -7   
   // 红 & 红 == 绿    绿 == 最后一行的数的补码
    
// 3、按位或 | 
   // 原理:1|1=1、1|0=1、0|1=1、0|0=0。
   // 例子: 参考上面的。 

// 4、按位异 ^

  //  原理:1^1=0、1^0=1、0^1=1、0^0=0。
   //   例子: 参考上面的。

 

// 5、左移 <<   、右移 >>  、无符号右移 >>>
    
   // 简单记法:
    (a << b) === Math.ceil(a*(2**b));     
    (a >> b) === Math.floor(a/(2**b));

 

2.4_分支结构

1. if 语句

2. if...else 语句

3. if...else if 语句

4. switch 语句

switch(表达式){
case 值1
  代码段 1;
  break;
case 值2
  代码段 2;
  break;
 ......
default;
  代码段 n;
}


 

三连必回,谢谢支持!

以上是关于熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记的主要内容,如果未能解决你的问题,请参考以下文章

熬夜猛肝万字博文学妹问我怎么入门 Javascript,百般盘问下我终于决定贡献出自己的 JavaScript入门笔记

熬夜爆肝万字C#基础入门大总结建议收藏

熬夜爆肝万字C#基础入门大总结建议收藏

(大厂必备)厂长熬夜爆肝万字之多线程高并发JUC编程⭐学妹已收藏

(大厂必备)厂长熬夜爆肝万字之多线程高并发JUC编程⭐学妹已收藏

建议收藏|熬夜爆肝万字文带你了解DOM,文末有彩蛋嗷!!!!✨✨✨