『笔记』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中一共有六种数据类型

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

一、String字符串

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

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

二、Number数字

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

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

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

• 使用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);

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

三、Boolean布尔值

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

四、Null和Undefined

Null类型的值只有一个，就是Null

Undefined类型的值只有一个，就是undefined

强制类型转换

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

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

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

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

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

1、使用Number()函数

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

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

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、字符串专用转换方法

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);

其他进制数字

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

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

1、 直接使用Boolean()函数

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）+ 可以对两个值进行加法运算，并将结果返回

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类型的值

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

三、自增和自减

(1) 自增 ++

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) 自减 --

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

四、逻辑运算符

JS中提供了三种运算符
(1) ! 非，可以用来对一个值进行 非 运算

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

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

(2) && 与，可以对符号两侧的值进行 与 运算并返回结果

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

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

(3) || 或，可以对符号两侧的值进行 或 运算并返回结果

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

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

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

(1) && 与 运算：找false

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

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

(2) || 或 运算：找true

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

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

五、赋值运算符

(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); 

六、关系运算符

通过关系运算符可以比较两个值之间的大小关系

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

（1） > 大于号

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

（2） >= 大于等于号

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

（3） < 小于号

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

（4） <= 小于等于号

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

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

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

(3) === 全等运算

相等运算符用来比较两个值是否全等，全等返回true，否则返回false

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

(4) !== 不全等运算

相等运算符用来比较两个值是否不全等，不全等返回true，否则返回false

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);

九、运算符的优先级

最后

因为学习笔记较为详细，字数比较多，所以只好另开一篇继续（ 再水一篇文章 ）