『笔记』JavaScript基础学习笔记 0

JS简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向 对象、命令式、声明式、函数式 编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

JS基础语法

从上至下按行顺序执行

<script type="text/javascript">
  alert("警告"); //弹出警告框
  document.write("在文档输出内容"); //在body中输出内容    document：文档 
  console.log("控制台输出内容"); //向控制台中输出内容
</script>

JS编写的位置

1、可以直接编写到标签的onclick属性中

<!--可以直接编写到标签的onclick属性中
　-当点击该属性时，js代码才会执行
-->
<button onclick="alert('点击执行')">

<!--可以直接编写到超链接的href属性中
　-当点击该超链接时，js代码才会执行
-->
<a herf="javascript:alert('超链接内的JS代码');">可以点击的超链接</a>
<a herf="javascript:;">不可点击的超链接</a>

2、可以将JS编写到script标签中

<script>
  alert("script标签中的代码")
</script>

3、可以将js代码编写到外部js文件中，再通过script标签引入

<script type="text/javascript" src="js/script.js"></script>

注意： script标签一旦用于引入外部文件了，就不能再编写代码，即使写了浏览器也会忽略
　　　如果需要，可以再创建一个新的script标签用于编写内部代码

JS基本语法

<script type="text/javascript">
  /*
  多行注释：注释的内容不会被执行，但是在源代码中查看
  可以通过注释来对代码进行一些简单的调试
  */
  // 单行注释，只注释//后的内容，换行即无效
  
  /*
  1、JS中严格区分大小写
  2、JS中每一条语句以分号（;）结尾
      -如果不写分号，浏览器会自动补齐，但是会消耗系统资源
        而且有些时候会加错分号导致错误，所以在开发中分号必须写　　　　
  3、JS中会忽略多个空格和换行
  */
</script>

字面量和变量

字面量：都是一些不可改变的值
　　比如：1 2 3 4 等
　　字面量都是可以直接使用，但是一般不会直接使用字面量

变量：可以用来保存字面量，变量的值是可以改变的
　　　-变量更加方便使用，开发中通常通过变量保存一个字面量
　　　-可以通过变量对字面量进行描述，例如 var age = 18;

声明变量：在js中使用var关键字来声明一个变量

// 声明变量
  var a;
// 为变量赋值
  a = 123;
//声明与赋值同时进行
var a = 123;

标识符

在js中所有可以自主命名的都可以称为标识符
例如：变量名、函数名、属性名都属于标识符

命名一个标识符时需要遵守以下规则

  1、标识符中可以含有字母、数字、_、$
  2、标识符不能以数字开头
　3、标识符不能使用ES中的关键字或保留字
　4、一般使用驼峰命名法：首字母小写，每个单词开头字母大写，其他字母小写。 例如：xxxYyyZzz

JS底层保存标识符时是采用的Unicode编码，所以理论上所有utf-8中含有的内容都可以作为标识符

数据类型

数据类型指的就是字面量的类型

在JS中一共有六种数据类型

{alert type="success"}

String 字符串
Number 数字
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
{/alert}

其中String、Number、Boolean、Null、Undefine属于基本数据类型，而Object属于引用数据类型

一、String字符串

在JS中字符串需要使用引号引起来
使用单引号或者双引号都可以，但是不能混着用
引号不能嵌套：双引号内不能放双引号，单引号内不能放单引号
在字符串中可以使用作为转义字符

{alert type="info"}
当表示一些特殊符号时可以使用进行转义

" 表示 "
n 表示换行
t 制表符
\ 表示\
{/alert}

var str = "hello";
str = '我说："你好"';
alert(str); //输出变量值，值为  我说：“你好”
alert("str"); //输出字面量str，值为 str

二、Number数字

在JS中所有的数字都是Number类型，包括整数和浮点数（小数点后的数）

JS中可以便是数字的最大值：Number.MAX_VALUE

如果使用Number表示的数字超过了最大值，则会返回一个Infinity

{alert type="warning"}

Infinity表示正无穷
-Infinity表示负无穷
{/alert}
- 使用typeof检查Infinity会返回Number
- 大于0的最小值为：Number.Min_VALUE

NaN是一个特殊的数字，表示Not A Number

使用typeof检查NaN也会返回Number

//数字123
var a = 123;
//字符串123
var  b= "123";

可以使用typeof检查变量类型
  -语法：typeof 变量
  -检查字符串时会返回string
  -检查数值时会返回number

console.log(typeof a);
console.log(typeof b);

{callout color="#ff0000"}
在JS中整数的运算基本可以保证精确
如果使用JS进行浮点元素运算，可能得到一个不精确的结果
{/callout}

var a = 1;
var b = 2;
var c = a+b;
console.log(c);

三、Boolean布尔值

布尔值只有两个，主要用来做逻辑判断

{alert type="success"}

true -表示真
false -表示假
{/alert}

四、Null和Undefined

Null类型的值只有一个，就是Null
{alert type="success"}　

null这个值专门用来表示一个为空的对象
使用typeof检查null值时，会返回object
{/alert}

Undefined类型的值只有一个，就是undefined
{alert type="success"}　

当声明一个变量，但是不给变量赋值时，他的值就是undefined
使用typeof检查undefined值时，会返回undefined
{/alert}

强制类型转换

将一个数据类型强制转换为其他数据类型
类型转换主要指，将其他数据类型转换为String Number Boolean

一、将其他数值类型转换为String

{alert type="success"}　
1、调用被转换数据类型的toString()方法
　　- 该方法不会影响到原变量，它会将转换的结果返回
　　- Null和Undefined两个值没有toString方法，会报错　
{/alert}

var a = 123;　　　　
a.toString();
a = a.toString();
console.log(a);
console.log(typeof a);

{alert type="success"}　
2、调用String()函数，并将被转换的数据作为参数传递给函数
　　- 使用String()函数做强制类型转换时，
　　对于Number和Boolean实际上就是调用的toString()方法
　　对于null和undefined就不会调用toString()方法
　　　　会将null直接转换为"null",将undefined直接转换为"undefined"
{/alert}

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

二、将其他数值类型转换为Number

1、使用Number()函数
{alert type="success"}　

字符串转换为数字
① 如果是纯数字的字符串，直接转换为数字
② 如果字符串中有非数字内容，则转换为NaN
③ 如果是一个空串或者是一个全是空格的字符串，则转换为0
{/alert}

var a = "123";
var a = "abc";
var a = " ";
a = Number(a);
console.log(a);
console.log(typeof a);

{alert type="success"}　

布尔值转换为数字
① true 转为 1
② false 转为 0
{/alert}

var a = true;
var a = false;
a = Number(a);
console.log(a);
console.log(typeof a);

{alert type="success"}　

null转换为数字时为 0
undefined转换为数字时为 NaN
{/alert}

var a = null;
var b = undefined;
a = Number(a);
b = Number(b);
console.log(a);
console.log(typeof a);
console.log(b);
console.log(typeof b);

2、字符串专用转换方法
{alert type="success"}　

parseInt()将一个字符串转换为一个整数
parseInt()可以将一个字符串中的有效整数内容取出来，然后转换为Number
parseFloaf()将一个字符串转换为一个浮点数
parseFloaf()可以将一个字符串中的有效浮点数内容取出来，然后转换为Number
如果对非String使用parseInt()和parseFloaf()，会先将其转换为String再换为Number
{/alert}

var a = "123px";
var b = "123.321px";
a = parseInt(a);
b = parseFloaf(b);
console.log(a);
console.log(typeof a);
console.log(b);
console.log(typeof b);

其他进制数字

{card-describe title="在JS中"}

如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0开头
如果需要表示2进制的数字，则需要以0b开头（某些浏览器会不支持）
可以在parseInt()中传递一个第二个参数，用来指定数字的进制
{/card-describe}

var a = "070"; 
a = parseInt(a,8); // 制定解析为8进制
console.log(a);
console.log(typeof a);

三、将其他数值类型转换为Boolean

1、直接使用Boolean()函数

{alert type="success"}

数字转Boolean，除了0和NaN，其余都是true
字符串转Boolean，除了空字符串都是true
null和undefined转Boolean都为false
对象也会转换为true
{/alert}

var a = 0; 
var b = " "; 
var c = null; 
var c = undefined; 
a = Boolean(a); 
b = Boolean(b); 
c = Boolean(c); 
console.log(a);
console.log(b);
console.log(c);
console.log(typeof a);

2、可以为任意一个数据类型取两次反!!，将其转换为布尔值

var a = "hello"; 
var a = !!a;
console.log(a); // 输出为true
console.log(typeof a); //类型为Boolean布尔值

运算符

运算符也叫操作符，可以对一个或多个值进行运算，并获取运算结果

tpyeof就是运算符，可以用来获得一个值的类型
tpyeof会将该值的类型以字符串的形式返回，如number、string、boolean、undefined、object等

var a = 123; 
var result = typeof a;
console.log(result);
console.log(typeof a);

{nextPage/}

一、算数运算符

（1）当对非Number类型的值进行运算时，会将这些值转换为Number，然后再进行运算
（2）任何数和NaN进行运算都会输出NaN
（3）+ 可以对两个值进行加法运算，并将结果返回
{alert type="success"}
① 如果对两个字符串进行加法运算，会将两个字符串拼成一个字符串，然后再将结果返回
② 任何值和字符串做加法运算，都会现转换为字符串然后再和字符串做拼串操作
③ 为任意的数据类型加一个空字符串""即可将其转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际也是调用的String()
④ 加法从左向右运算，会根据数据类型进行转换后再运算
{/alert}

var a = 123; 
a + 1;
var result = a + true; // true会转换为1，输出为124
var result = a + NaN; // 输出为NaN
var result = "I" + "Love" + "You"; // 输出为ILoveYou
var result = 123 + "1"; // 输出为1231
console.log(result);
console.log(typeof result);
console.log("a=" + a); // 输出为a=124

(4) - 可以对两个值进行减法运算，并将结果返回
(5) * 可以对两个值进行乘法运算，并将结果返回
(6) / 可以对两个值进行除法运算，并将结果返回

任何值做 - * / 运算时都会自动转换为Number
可以通过为一个值 -0 *1 /1 将其转换为Number，原理和Number()函数一样

var a = "123"; 
var b = a - 0;
console.log(b);
console.log(typeof b);

(7) % 取模运算（取余数）

var a = 9; 
var b = a % 3;
var c = a % 4;
var d = a % 5;
console.log(b); // 输出9/3的余数为0
console.log(c); // 输出9/4的余数为1
console.log(d); // 输出9/5的余数为4
console.log(typeof b);

二、一元运算符

一元运算符，只需要一个操作数
(1) + 正号

正号不会对数字产生任何影响

(2) - 负号

负号可以对数字进行负号的取反

(3) 对于非Number类型的值
{alert type="success"}

会先将其转换为Number，然后再运算
可以对一个其他的数据类型使用 + 来将其转换为Number，原理和Number()函数一样
{/alert}

var a = true; 
var b = -a;
console.log(b); // true转换为1，输出为-1
console.log(typeof b);

三、自增和自减

(1) 自增 ++
{alert type="success"}

通过使用自增可以使变量在自身的基础上增加 1
一个变量自增以后，原变量的值会立即自增 1
自增分为两种： 后++ （a++）和 前++ （++a）
{/alert}

var a = 1; 
a++;
console.log(a); // 输出为2
console.log(typeof a);

无论是 前++ 还是 后++ ，都会立即使原变量的值自增1
不同的是a++和++a的值不一样
a++ 的值等于原变量的值（自增前的值）
++a 的值等于原变量的新值（自增后的值）

var a = 1; 
console.log(a++) ; // 输出为1
console.log(++a) ; // 输出为2
// a++为1，++a是在a++的基础上自增所以为3，a相当于原变量a已经在自身基础上自增两次所以也为3
var b = a++ + ++a +a ; 
console.log("b = "+b) ; // 输出为1+3+3=7

(1) 自减 --
{alert type="success"}

通过使用自减可以使变量在自身的基础上减少 1
一个变量自减以后，原变量的值会立即自减 1
自减分为两种： 后-- （a--）和 前-- （--a）
{/alert}

var a = 10; 
a--;
console.log(a); // 输出为9
console.log(typeof a);

无论是 前-- 还是 后-- ，都会立即使原变量的值自减 1
不同的是a--和--a的值不一样
a-- 的值等于原变量的值（自减前的值）
--a 的值等于原变量的新值（自减后的值）

var a = 10; 
console.log(a--) ; // 输出为10
console.log(--a) ; // 输出为9
// a--为10，--a是在a--的基础上自减所以为8，a相当于原变量a已经在自身基础上自减两次所以也为8
var b = a-- + --a +a ; 
console.log("b = "+b) ; // 输出为10+8+8=26

练习：

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

n = n2--; // n2 = 19     n2-- = 20
console.log('n='+n); // 20
console.log('n1='+n2); // 19
n = --n2; // n2 = 18     --n2 = 18
console.log('n='+n); // 18
console.log('n1='+n2); // 18

四、逻辑运算符

{callout color="#00fbff"}
布尔值的逻辑运算
{/callout}

JS中提供了三种运算符
(1) ! 非，可以用来对一个值进行 非 运算
{alert type="success"}

非运算就是对一个布尔值Boolean进行取反操作
true变false，false变true
{/alert}

var a = true;
a = !a;
console.log(a); // 输出为false

{alert type="success"}

如果对一个值进行两次取反，值不会变
如果对非布尔值进行非运算，会先将其转换为布尔值再进行取反
可以为任意一个数据类型取两次反!!将其转换为布尔值，可以用来将其他数据类型转换为布尔值

{/alert}

var a = "hello"; 
var a = !!a;
console.log(a); // 输出为true
console.log(typeof a); //类型为Boolean布尔值

(2) && 与，可以对符号两侧的值进行 与 运算并返回结果
{alert type="success"}

两个值中只要有一个值为false就会返回false
两个值都为true才会返回true
JS中如果第一个值为false，就不会检查第二个值，直接返回false

如果两端的值都为true，返回true
var a = true && true;
console.log(a); // 输出为true

只要有一个false，都返回false
var a = true && false;
console.log(a); // 输出为false

{/alert}

(3) || 或，可以对符号两侧的值进行 或 运算并返回结果
{alert type="success"}

两个值都是false，则返回false
两个值中只要有一个true，则返回true
JS中如果第一个值为true，就不会检查第二个值，直接返回true

如果两端的值都为false，返回false
var a = false || false;
console.log(a); // 输出为false

只要有一个true，都返回true
var a = true || false;
console.log(a); // 输出为true

{/alert}

{callout color="#00fbff"}
非布尔值的 与 、 或 运算
{/callout}

对非布尔值进行 与 、 或 运算时会先将其转换为布尔值，然后再运算，并且返回原值

(1) && 与运算：找false
{alert type="success"}

如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一个值

var a = 1 && 3;
console.log(a); // 输出为3

var a = NaN && 0;
console.log(a); // 输出为NaN

{/alert}

(2) || 或运算：找true
{alert type="success"}

如果第一个值为true，则直接返回第一个值
如果第一个值为false，则直接返回第二个值

var a = 1 || 3;
console.log(a); // 输出为1

var a = NaN || 0;
console.log(a); // 输出为0

{/alert}

五、赋值运算符

(1) = 可以将符号右侧的值赋值给左侧的变量

var a = 3;
console.log(a); // 输出为3

(2) += 可以将符号右侧的值相加后再赋值给左侧的变量
(3) -= 可以将符号右侧的值相减后再赋值给左侧的变量
(4) *= 可以将符号右侧的值相乘后再赋值给左侧的变量
(5) /= 可以将符号右侧的值相除后再赋值给左侧的变量
(6) %= 可以将符号右侧的值取模（取余数）后再赋值给左侧的变量

var a = 10;
a += 5; // 等价于a = a + 5    输出为15
a -= 5; // 等价于a = a - 5    输出为5
a *= 5; // 等价于a = a * 5    输出为50
a /= 5; // 等价于a = a / 5    输出为2
a %= 5; // 等价于a = a % 5    取模（取余数）输出为0
console.log(a);

六、关系运算符

通过关系运算符可以比较两个值之间的大小关系
{alert type="success"}

如果关系成立会返回true，如果关系不成立则返回false
对于非数字进行比较时，会将其转换为数字再进行比较
任何值和NaN比较都是false
如果符号两侧都是字符串时，不会将其转换为数字进行比较，而会比较两个字符串的Unicode编码
比较字符编码时会一位一位进行比较，如果两位一样则比较下一位，第一位与第一位比，第二位于第二位比，以此类推

console.log( "a" > "b");  // 输出false
console.log( "abc" > "aa");  // 输出true

{/alert}

（1） > 大于号
{alert type="info"}

判断符号左侧的值是否大于右侧的值
如果关系成立则返回true，如果关系不成立则返回false
{/alert}

var a = 10 > 5; //返回true
a = 5 > 5; //返回false
a = 5 > 10; //返回false
console.log(a);

（2） >= 大于等于号
{alert type="info"}

判断符号左侧的值是否小于 或 等于右侧的值
如果关系成立则返回true，如果关系不成立则返回false
{/alert}

var a = 10 >= 5; //返回true
a = 5 >= 5; //返回true
a = 5 >= 10; //返回false
console.log(a);

（3） < 小于号
{alert type="info"}

判断符号左侧的值是否大于右侧的值
如果关系成立则返回true，如果关系不成立则返回false
{/alert}

var a = 10 < 5; //返回false
a = 5 < 5; //返回false
a = 5 < 10; //返回true
console.log(a);

（4） <= 小于等于号
{alert type="info"}

判断符号左侧的值是否小于 或 等于右侧的值
如果关系成立则返回true，如果关系不成立则返回false
{/alert}

var a = 10 <= 5; //返回false
a = 5 <= 5; //返回true
a = 5 <= 10; //返回true
console.log(a);

Unicode编码

在JS中的字符串中使用转义字符输入Unicode编码

\u四位编码 数字为16进制

console.log( "\u2620");  // 输出 ☠

在网页中使用Unicode编码

&#编码 数字为10进制，必须先从16进制转换为10进制

<h1 style="font-size: 50px;">&#9760;</h1>  // 输出 ☠

七、相等运算符

(1) == 相等运算

相等运算符用来比较两个值是否相等，相等返回true，否则返回false
{alert type="success"}

当使用 == 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较
undefined 衍生自 null，所以这两个值比较时会返回true
NaN 不和任何值相等，包括它本身
可以通过isNaN()函数来判断一个值是否是NaN
如果该值是NaN则返回true，否则返回false

{/alert}

console.log( 1 == 1 );  // 输出true 
var a = 10
console.log( a == 4 );  // 输出false
console.log( "1" == 1 );  // 输出true
console.log( null == 0 );  // 输出false
console.log( undefined == null );  // 输出true
console.log( NaN == NaN );  // 输出false
var b = NaN;
console.log(isNaN(b));  // 输出true

(2) != 不相等运算

相等运算符用来比较两个值是否不相等，不相等返回true，否则返回false
{alert type="success"}

当使用 != 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较
{/alert}

console.log( 2 != 1 );  // 输出true 
var a = 4
console.log( a != 4 );  // 输出false
console.log( "1" != 1 );  // 输出false

(3) === 全等运算

相等运算符用来比较两个值是否全等，全等返回true，否则返回false
{alert type="success"}

当使用 === 比较两个值时，如果两个值类型不同，则直接返回false
{/alert}

console.log( 1 === 1 );  // 输出true 
console.log( "1" === 1 );  // 输出false

(4) !== 不全等运算

相等运算符用来比较两个值是否不全等，不全等返回true，否则返回false
{alert type="success"}

当使用 !== 比较两个值时，如果两个值类型不同，则直接返回true
{/alert}

console.log( 1 !== 1 );  // 输出false
console.log( "1" !== 1 );  // 输出true

八、条件运算符

条件运算符也叫三元运算符

语法： 条件表达式?语句1:语句2
条件运算符在执行时，首先对条件表达式进行求值
如果该值为true则执行语句1并返回执行结果，否则执行语句2并返回执行结果
如果条件表达式的求值结果是一个非布尔值，会先将其转换为布尔值再执行下一步

true?alert("语句1"):alert("语句1"); // 返回语句1
false?alert("语句1"):alert("语句1"); // 返回语句1
var a = 30;
var b = 20;
a > b ?alert("a大"):alert("b大"); // 返回a大
var a = 30;
var b = 20;
var c = 40;
var max = a > b ? a : b;
max = max > c ? max : c;
var max = a > b ? (a >c ? a :c) : (b > c ? b : c) // 不推荐，不易阅读
console.log( "最大值max = "+max);  // 谁大输出谁
"hello"?alert("语句1"):alert("语句1"); // hello转换为true然后执行输出语句1

，逗号运算符

使用 ， 可以分割多个语句，可以使用， 逗号运算符同时声明多个变量并进行赋值

var a , b , c;
var a=1 , b=2 , c=3;
alert(b);

九、运算符的优先级

{alert type="success"}

在JS中运算符也有优先级，比如：先乘除后加减
在JS中有一个运算符的优先级标准表，优先级越高越优先计算，如果优先级相同，则从左向右计算
{/alert}

最后

因为学习笔记较为详细，字数比较多，所以只好另开一篇继续（ ~~再水一篇文章~~ :@(装大款) ）

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »