JavaScript Base
一 概述
1 什么是JavaScript
简称JS,是一种运行于JS解释器或执行引擎中的脚本代码,是一种浏览器解释型的语言,主要用来实现页面的交互与动态效果。
2 JS的组成
-
核心语法 -ECMAScript 规范了JS的基本语法
-
浏览器对象模型 -BOM
Browser Object Model,提供了一系列操作浏览器的方法 -
文档对象模型 -DOM
Document Object Model ,提供了一系列操作的文档的方法
二 JS使用方式
1 绑定在元素标签中,主要指JS事件
事件 :用户在元素上所激发的行为操作(单击)
语法 :
<div onclick="alter('hello javascript!')">click me</div>
JS 操作如果涉及代码非常多,一般会抽离出来单独写在JS文件中,如果是简单的代码,可以以属性值字符串的形式书写
2 文档中,使用标签
语法 :
<script>
JS代码
</script>
注意 :标签可以书写在文档的任意位置,书写多次,但是不同的位置会影响代码最终的执行效果。
3 外部链接
语法 :
<script src="'https://cdn.bootcss.com/jquery/3.2.1/core.js'"></script>
src 引入的外部资源是网页加载所必须的一部分,网页在加载src文件时,会等待文件加载完毕再执行后面的代码
href 网页在加载href文件时,不会等待加载完毕,边加载边向后执行
常用操作 :
三 基础语法
1 JS 是由语句组成的
-
JS语句可以由运算符,关键字,表达式组成
-
JS语句必须以英文分号结束;
-
JS中严格区分大小写
console.log(); 正确写法
Console.log(); 错误写法 -
所有涉及的标点符号,必须使用英文的
2 JS中的注释
-
单行注释 //
-
多行注释 /* 注释文本 */
四 JS的变量与常量
1 变量
-
创建变量
-
先声明,后赋值,使用关键字 var 进行声明
声明 :var 变量名;
赋值 :变量名 = 值; -
声明的同时赋值
var 变量名 = 值;var name = "monkey"; console.log(name); document.write(name); alter(name);
-
-
使用注意
- 声明变量时,关键字var可以省略,不建议省略,容易出问题
- 变量如果只声明,未赋值,var a; 变量默认值为 undefined
-
变量名的命名规范
-
不能与JS中的关键字和保留字冲突(var default break class function for while do...name)
-
自定义的变量名可以由数字,字母,下划线,$组成,不能使用数字开头
var $ = 20;
-
变量名称严格区分大小写
var name = 'monkey'; var Name = 'Monkey';
-
命名尽量有意义一些,做到见名知意
-
多个单词组成变量名,采用小驼峰标识
var userName = 'monkey';
-
-
变量的使用方式
-
赋值
赋值符号 =
作用 :将赋值符号右边的值赋给左边的变量var name = 'monkey'
-
访问
-
直接输出
console.log(name);
-
变量出现在赋值符号右边,表示访问变量的值
var name = 'monkey'; var myStr = 'My name is '+name; //myStr: My name is monkey
-
-
2 常量
-
一经声明就不允许再被修改的数据就是常量
-
语法 :
const 常量名 = 值;
注意 :
-
常量在声明的同时必须赋值
-
为了与变量名区分,常量名一般采用全大写的方式
const PI = 3.14159;
-
-
操作小数位
保留小数点后 n 位toFixed(n); var num = 3.1415926; var res = num.toFixed(2); // 3.14
五 数据类型
1 基本数据类型(简单数据类型)
(1) number 类型
数字类型,表示32位的整数或者是64位的浮点数
1 字节 = 8 位
整数占4字节 浮点数占8字节
-
整数
常用的:十进制表示方法
八进制:以数字0开头
以8为基数,采用0-7八个数字来表示,逢8进1//0*8(0) + 1*8(1) var num = 010; var num2 = 011;
-
十进制转八进制,需要先将十进制转换为二进制,再将二进制转换为八进制
十六进制:以 0x 为前缀
var num3 = 0x35;
注意 :
使用console.log()输出整数时,不管用哪一种进制表示,都会转成十进制输出
-
小数
-
小数点计数法 3.14
-
指数计数法 1.5e3
e表示以10为底
e后面的数字表示10的次方数
1.5e3 = 1.5 * 10(3)
(2) string 类型
可以由 Unicode 的字符,数字或标点来组成
注意 :字符串在使用时必须使用''或""引起来
-
每个字符都有对应的Unicode码
-
查看字符的Unicode码
var s1 = '张';
方法 :charCodeAt(index)
作用 : 用来查看指定位置的字符对应的Unicode编码
注意 : -
字符串中的字符都对应有一个下标,参考数组的存储方式,下标从0开始
var s = "hello"; s.charCodeAt(2);
-
Unicode 编码中前128位与ASCII码值一致
-
可以查看中文字符对应的Unicode码,如果想把中文的Unicode码值转换成字符,需要先将码值转换为16进制,再进行汉字字符的转换
转换16进制:
toString(16);var s = "张"; var r = s.charCodeAt(0); r = r.toString(16);
16进制字符串转换汉字字符
"5f20" 添加u转义 var s = "u5f20"; 注意 : 不能写 var s = "u"+"5f20"; 语法错误
- 中文范围
"u4e00" ~ "u9fa5" - 转义字符
n :换行
t : 制表符
" : "
' : '
:
- 中文范围
(3) boolean 布尔类型
用来表示真或假
注意 :
布尔类型表示真或假,是可以参与数学运算的,true = 1 / false = 0
(4) undefined 类型
- 变量声明未赋值时,为undefined
- 如果访问对象不存在的属性时,也为undefined
(5) null 类型
空类型
2 判断数据类型
typeof
使用 :
var n = "asda";
console.log(typeof n);
console.log(typeof(n));
3 引用数据类型(复杂数据类型)
数组 函数 对象
六 数据类型转换
相同数据类型的变量进行运算时,保持数据类型一致
1 隐式类型转换(自动转换)
-
number + string
当字符串与其他数据类型相加时, + 表示字符串的拼接,不再是数学运算
转换规则 :将非字符串类型的数据转换成字符串之后进行拼接,最终结果为字符串var num = 15; var str = "18"; var r1 = num + str; // "1518" var r2 = 15 + 18 + "18"; // "3318" var r3 = "18" + 15 + 18; //"181518" var r4 = 15 + "18" + 15; //"151815"
-
boolean + string
将布尔类型转换为字符串进行拼接var n = true; var r = n + "你好"; // "true你好"
-
number + Boolean
将布尔类型转换为数字进行数学运算
true = 1;
false = 0;var n = true + 15; // 16 var n1 = false + 20; //20
2 强制类型转换
-
toString()
将任意非字符串类型的数据转换为字符串类型,并返回转换后的结果var n = 100; var r = n.toString(); console.log(typeof n,typeof r);
-
Number()
将数字字符串或者是布尔值转换成number类型,如果字符串中包含非数字字符,转换失败,会返回NaN (Not a Number)var r = Number("35.5"); //35.5 var r2 = Number(true); // 1 var r3 = Number("18a"); //NaN
-
parseInt()
解析字符串中的数字,只解析字符串开头中的数字,如果字符串不是以数字开头的,都返回NaN,并且只解析整数
var r = parseInt("18.2a"); //18
var r2 = parseInt("a18"); //NaN
var r3 = parseInt(35.5); //35
如果parseInt方法的参数不是字符串,会自动先使用toString()转换成字符串,之后再进行解析
- parseFloat()
作用等同于parseInt(),解析结果包含小数部分
var r = parseFloat("35.5"); //35.5
注意 :如果字符串中出现指数计数法表示的小数
"1.5e3",都视为是小数
七运算符
1 赋值运算符
=
将右边的值赋给左边变量
2 算数运算符
-
-
- / % //加 减 乘 除 取余
-
2. ++ -- 自增或自减运算符
变量的自增和自减指的是在自身基础上进行 +1或-1 的操作
```js
var n = 5;
n ++; // n = n + 1;
console.log(n); // 6
++ n;
console.log(n); // 7
注意:
1. 自增或自减运算符在单独与变量结合时,放前和放后没有区别
2. 如果自增或自减运算符与其他运算符结合使用,要区分前缀和后缀,做前缀,那就先++/--,再进行赋值或其他运算,如果做后缀,就先结合其他运算符,再进行++ / --
```js
var num = 5;
var res = num ++;
console.log(num,res); // 6 5
```
如果是 var res = num ++;
```js
var num = 5;
var res = ++ num;
console.log(num,res); // 6
```
*先找变量 ,从变量位置从右向左结合运算符*
3 关系运算符(比较运算符)
> 大于
>= 大于等于
< 小于
<= 小于等于
== 相等
!= 不等
=== 恒等
!== 不恒等
注意 :关系运算的结果为布尔类型
-
数字与字符串进行比较
首先会自动将字符串转换为数字再进行比较,如果转换成功,按照数字之间的比较进行运算;如果转换失败,会变成数字与 NaN之间的比较,结果永远都为False
"10" > 5; // true "10a" > 5; //false "你好" > 5; //fasle
-
字符串之间的比较,进行每位字符Unicode码的比较,
当前位如果相同,就后移至下一位再次进行比较,
当前位如果不同,直接出结果"10" > "5"; // false "ab" > "ac"; //false "张三丰" > "张无忌"; //false
-
== === / != !==
-
相等 :== 用于判断两个值是否相等,在比较时,会自动转换数据类型,只要值相等,结果就为True
-
恒等 :=== 用于判断两个变量的数据类型和值是否完全相等,不会进行数据类型转换,只有当操作数的数据类型保持一致,值相等,才为True
"10" == 10; //true "10" === 10; // false
-
不等 :!= 在两端值不相等的情况下,返回True
不恒等 :!== 两个操作数中,数据类型与值只要有一个不相等,就返回True,否则是False
"10" != 10; //false "10" != "10"; //false "10" !== 10; //true "10" !== "10"; //false
-
4 逻辑运算符
进行多项比较,并将结果组合为单一的布尔值
&& :逻辑与 等同于 python and,左右为表达式,只有两个表达式的结果都为真,逻辑与的结果才为真
|| :逻辑或 等同于 python or ,只要有一个条件为真,结果就为真
! :逻辑非 等同于 python not ,对现有条件的结果进行取反操作
- 条件1 && 条件2
条件1 条件2 结果
取值 true true true
true false false
false true false
结果 false false false
-
条件1 || 条件2
条件1 条件2 结果
取值 true true true
true false true
false true true
结果 false false false
- !条件
直接取反
非真即假,非假即真
5 位运算符
程序中所有的数据在计算机中都是以二进制存储的,位运算,就是对二进制位进行操作
-
按位与 :&
将整数转换为二进制形式,每一位都进行与操作011 & 101 et : 0 1 1 & 1 0 1 ------------- 0 0 1
-
注意 : 任何数字与 1 进行位与操作,结果为1时,表明操作数为奇数,结果为0,操作数为偶数,所以可以用来判断数字奇偶
3 & 1 -> 011 & 001 -> 001
2 & 1 -> 010 & 001 -> 000
-
按位或 :|
3 | 5 011 | 101
111
-
按位异或 :^
两个数字的二进制位进行比较,相同则为0,不同则为13 | 5 011 | 101
111
注意 :^ 操作可以在不借助第三方变量的情况下,交换两个变量的值
var a = 3,b = 5;
1. 普通做法
var c = a;
a = b;
b = c;
2. ^
a = a ^ b; -> a = 6;
b = a ^ b; -> 6 ^ 5 ->110 ^ 101 ->011
a = a ^ b; -> 6 ^ 3 ->110 ^ 011 ->101
6 三目运算符
三目运算符,有三个操作数
类似:
单目运算符(一元运算符)++ -- !typeof,只有一个操作数的运算符;
双目运算符(二元运算符)+ - * / % && || >...有两个操作数的运算符
语法 :
条件表达式 ?表达式1 :表达式2;
先判断条件表达式的结果,为真,执行表达式1;为假,执行表达式2
var a = 150;
var res = a > 120? "偏胖,该减肥了" :"正好,不胖不瘦";
consoole.log(res);
八 流程控制语句
控制当前代码的执行顺序
流程语句结构 :
1 顺序结构
按照代码书写顺序,从上到下执行
2 分支(选择)结构
根据条件选择某一段代码执行
(1)if 结构
语法 :
if (条件){
//待执行的语句
//只有条件为真,才执行{}里的语句
}
-
if()后面的{}可以省略,省略之后,只控制该结构下的第一条语句
-
条件尽可能是布尔类型的
-
任何非0值都为真,0为假,以下情况,条件的结果都为假
if(0) {}
if(0.0) {}
if("") {}
if(NaN) {}
if(undefined) {}
if(null) {}
(2)多重分支结构
if(条件1){
//条件为真时执行
} else if(条件2){
//条件1为假,并且条件2为真时执行
} else if(条件3){
//条件2为假,条件3为真时执行
}
...
else{}
(3)switch 语句
switch (变量) {
case 值1 :
//如果变量的值与case给出的值相等,就会执行 :后面的代码段
代码块;
break; //跳出switch语句,不再向后进行匹配,可以省略
case 值2 :
代码块;
break;
case 值3 :
代码块;
break;
...
default :
代码块; // 所有case都匹配失败之后执行的默认语句
}
-
变量与case 值的匹配,是用===恒等判断的,只有数据类型与值都相等才能匹配成功
var a = 10; switch (a) { case '10': 代码块 }
-
break 表示跳出switch判断,后面的判断语句不执行
-
default关键字用于在表达式不匹配前面给出的任何一种情形时,最终执行的操作
3 循环结构
-
作用
重复执行某段代码 -
循环三要素
循环变量
循环条件
循环体
(1)while 循环
-
语法:
while (循环条件){ 循环体 }
-
执行流程
- 定义循环变量
- 执行循环体
- 更新循环变量
- 判断循环条件,条件成立,重复2-3-4,条件不成立,结束循环
(2)do-while循环
-
语法
do{ 循环体 }while(循环条件);
(3)while 与 do-while区别:
while循环先判断循环条件,为真才执行循环体;
do-while循环不管条件是否成立,先执行循环体,后判断循环条件。即使循环条件不成立,也会执行一遍循环体
(4)for循环
- 语法
for(1.定义循环变量; 2.判断循环条件; 3.更新循环变量)
{
循环体
}
-
循环流程
- 定义循环变量
- 判断循环条件
- 条件成立,执行循环体
- 更新循环变量
-
for 循环与 while循环的区别
- 相同点 :执行流程相同
- 不同点 :
while 循环常用于不确定循环次数的场合
for 循环常用于确定循环次数的场合
-
循环控制
- break
break用在循环体中,表示跳出循环,结束整个循环,并且循环体中break后面的代码都不执行 - continue
continue用在循环体中,表示跳出本次循环,开始下一次循环
- break
-
循环的嵌套
允许在一个循环中嵌套另一个循环
语法 :
for(var i = 1; i <= 9; i ++){ //行for(var j = 1; j <= 9; j ++){ //列 }
九 函数和作用域
函数定义
就是一段待执行的代码块
函数作用
实现多条语句的封装
实现代码复用
函数使用
- 函数的声明
- 函数的调用
注意 :函数先声明后调用(JS中非强制)
函数语法
(1) 函数声明
- 语法
function 函数名 (参数列表) {
函数体;
返回值
}
-
JS中函数声明使用function关键字
-
函数名自定义,遵照变量命名规范,见名知意
-
参数列表,参数表示函数体执行所需要的数据,可以为空,为空时()不能省略;多个参数之间使用,隔开
function sum (a,b){
return a + b;
}
- 返回值 使用return关键字,将函数体内部执行的结果传递给外界使用,只能返回一个值,返回值不需要的话,可以省略return
function showFn(){
console.log("hello");
}
注意 :return一定要写在函数体的末尾,return关键字后面的代码都不执行
- 匿名函数
var fn = function (){
函数体
};
(2) 函数调用
-
语法
函数名(10,20); var res = 函数名(10,20);
-
函数参数分为形参和实参,函数声明时,使用形参,函数调用时,传递实参
形参 :代号
实参 :具体的数据
传参的过程,就是给函数中形参变量赋值的过程 -
函数如果有返回值,在调用时,需要定义变量接收返回值
变量的作用域
(1)含义
变量的作用域指的是变量起作用的范围
(2)分类 :
-
全局作用域
处在全局作用域中的变量就是全局变量
2. 在function之外通过var声明的变量都是全局变量,在任何地方都可以访问
3. 声明变量时,省略var关键字,一律是全局变量,推荐使用var关键字,不要省略 -
局部作用域 (JS中局部作用域指的是函数作用域)
局部作用域中的变量就叫局部变量
5. 在函数内部使用var关键字声明的变量都是局部变量,只在当前函数作用域中可以访问,外界无法访问
6. 局部变量出了函数就不能访问了注意 :
在函数中访问变量,1. 如果当前函数中没有该变量,就访问全局作用域中的变量 2. 如果当前函数中定义了该变量,全局中也有相同的变量名,函数就近访问变量
十 数组及API
定义
Array 数组是一个有序的元素序列,数组中的元素会自动分配下标,从0开始,方便读写
数组创建
-
创建空数组
var arry_name = []; // var 数组名 = new Array(); //
-
创建数组的同时初始化元素
var arry_name = [elem1,elem2,...]; var arry_name = new Array(elem1,elem2,...); // 只包含一个参数时表述创建的数组长度 var arr = new Array(5); // 创建长度为 5 的数组
数组使用
-
获取数组的长度
属性 : length
使用 :数组名.length; //获取数组长度 -
访问数组元素
数组中每一个元素都有对应的下标
元素的下标范围 0 -> length-1
语法 :数组名[下标]; -
设置数组元素
语法 :数组名[下标] = value; -
清空数组中元素
arr.length = 0; -
循环遍历数组
for(var i = 0; i < arr.length; i ++){ arr[i]; }
数组的API
-
toString()
作用 :将数组中的元素转换为字符串返回
返回值 :字符串var arr = [1,2,3]; var s = arr.toString(); console.log(s); //"1,2,3"
-
join()
作用 :将数组中的元素连接成一个字符串并返回
返回值 :字符串
参数 :可选,如果省略参数,默认元素之间使用,连接。
可以给参数,指定元素之间的连接符 -
reverse()
作用 :反转数组元素
返回值 :数组,会改变数组的原有结构var arr = [10,20,30]; //[30,20,10] console.log(arr.reverse());
-
sort()
作用 :对数组中元素进行排序
返回值 :数组,会改变数组原有结构
参数 :可选,自定义排序函数,
默认按照元素的Unicode码升序排列-
升序的排序函数
function sortAsc(a,b){ return a-b; } arr.sort(sortAsc);
解释 :
- sortAsc函数接收两个参数,
会自动将数组中相邻的两个元素传递给参数 - 如果返回值>0,交换两个元素的位置,否则不变
- sortAsc函数接收两个参数,
-
匿名函数作为排序函数,直接写在()中
arr.sort(function (a,b){ return b-a;});
-
数组的进出栈操作
栈结构 :遵循先进后出原则
栈操作可以快速操作数组中的头尾元素
1. push(data)
入栈操作,向数组的尾部添加元素,可以是一个或多个
返回值 :返回新数组的长度
```js
arr[arr.length] = 'hello';
arr.push("Hi");
arr.push(10,20); //多个数据之间只用,隔开
```
- pop()
出栈操作,删除数组尾部元素
返回值 :返回被删除的元素 - unshift()
向数组头部添加一个或多个元素
返回最终数组的长度 - shift()
删除数组中头部元素
返回被删除的元素
二维数组
数组中每个元素又是一个数组
var arr = [[10,9,8],[2,3,4],[3,0,3]];
console.log(arr.length); //3
//向二维数组中添加元素
arr[1][2] = 50;
//访问二维数组中元素
console.log(arr[2][0]); //30
文章来源: 博客园
- 还没有人评论,欢迎说说您的想法!