『笔记』JavaScript基础学习笔记 0
侧边栏壁纸
    love love love

  • 累计撰写 47 篇文章
  • 累计收到 939 条评论

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

六六丶
2021-08-16 / 0 评论 / 18 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年08月24日,已超过34天没有更新,若内容或图片失效,请留言反馈。

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

一、算数运算符

(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) && 与,可以对符号两侧的值进行 运算并返回结果

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

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

(1) && 与 运算:找false

(2) || 或 运算:找true

五、赋值运算符

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

六、关系运算符

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

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

九、运算符的优先级

ksl41nnk.png

最后

因为学习笔记较为详细,字数比较多,所以只好另开一篇继续( 再水一篇文章 表情

4

打赏

评论 (0)

取消