文章目录

  • JS的编写位置
  • 输入输出语句
  • 字面量和变量
  • 字面量
  • 变量
  • 标识符
  • 数据类型
  • Number数值
  • Boolean布尔值
  • Null空值
  • Undefined未定义
  • String字符串
  • 引用数据类型
  • 数据类型转换
  • 转化为String
  • 转化为Number
  • 转换为布尔值
  • 运算符
  • `typeof`运算符
  • 算数运算符
  • 自增自减运算符
  • 赋值运算符
  • 关系（比较）运算符
  • 三元运算符
  • 相等运算符
  • 逻辑运算符
  • 运算符优先级
  • 流程控制语句
  • 对象（Object）
  • 创建对象的三种方式
  • 遍历对象属性
  • 对象的分类
  • 内置对象
  • Math对象
  • 日期对象
  • 数组对象
  • 字符串对象
  • 函数（Function）
  • 函数声明
  • return语句
  • arguments的使用
  • 函数可以调用另一个函数
  • 作用域
  • 作用域链
  • 预解析
  • 预解析

JS的编写位置

1.行内

<button onclick="alert('hello');">我是按钮</button>  
<a href="javascript:alert('aaa');">超链接</a>

2.内嵌

<script type="text/javascript">  
   //编写js代码  
</script>

3.外部引用

注意:script标签引入外部文件了，该标签就不能再编写代码

<script type="text/javascript" src="文件路径"></script>

输入输出语句

  • 浏览器弹出警告框
alert("输出的内容");
  • 浏览器控制台打印输出信息
console.log("输出内容");
  • 写在body标签中，并在页面中显示
document.write("要输出的内容");
  • 浏览器弹出输入框
prompt("输入内容");

字面量和变量

字面量

字面量是一些固定的值，如 1 2 3 true false null NaN “hello”

字面量都是不可以改变的。

字面量不是很方便使用，所以在JS中很少直接使用字面量

变量

变量可以用来保存字面量，并且可以保存任意的字面量

一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述

var = age;//1.声明变量
age = 10；//2.赋值

var age = 18//变量初始化

更新变量

一个变量重新赋值后，变量值将以最后一次赋值为准。

标识符

所有的可以自主命名的内容，都可以认为是一个标识符

规范:

  1. 由字母，数字，下划线（_），美元符号（$）组成
  2. 变量区分大小写，app 和App是两个变量
  3. 不能数字开头
  4. 有意义且驼峰命名

数据类型

JS中分六种数据类型 5个基本数据类型 +object

简单数据类型又叫值类型，复杂类型又叫做引用类型

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

1.数字型进制

0b 开头表示二进制，但是 不是所有的浏览器都支持
0 开头表示八进制
0x 开头表示十六进制

//八进制数字序列范围：0-7
var num1 =07;//对应十进制的7
var num1 =019;//对应十进制的19
//十六进制数字序列范围 ：0-9以及A-F
var num = 0xA;

2.特殊值

Infinity 正无穷 a = Infinity ,能赋值
-Infinity 负无穷
NaN 非法数字（Not A Number）

alert(Number.MAX_VALUE);//最大能表示的值 1.7976931348623157e+308  
alert(Number.MIN_VALUE);//

isNaN() 判断一个变量是否为非数字类型，返回布尔值

Boolean布尔值

使用typeof检查一个布尔值时，会返回boolean

console.log(true + 1);//true参与加法运算当 1 看待
console.log(true + 1);//false参与加法运算当 0 看待
Null空值

使用typeof检查一个Null类型的值时会返回"object"

var a = null;
console.log(a + 1);// 1
Undefined未定义

undefined与数字相加最后结果是NaN

声明一个变量但没有赋值时

var a；
console.log(a);//undefined

使用typeof检查一个Undefined类型的值时，会返回"undefined"

String字符串

字符串拼接：字符串相加的任何数据类型转换为字符串，再拼接成新字符串

alert（‘11’ + 12）;  //  1122

字符串转义符

\'  ==> ' 
\"  ==> " 
\n  ==> 换行 
\t  ==> 制表符 
\\  ==> \	  
\b  ==> 空格

字符串引号嵌套：单引号嵌套双引号，或者双引号嵌套单引号

var strMsg = "我是'帅哥' 吧 ";
var strMsg = '我是 "帅哥" ';
引用数据类型

Object对象

数据类型转换

使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加减运算

此时需要数据类型转换

转化为String

方式一（强制类型转换）

调用toString方法

var a = 10; 
var b = a.toString();
//注意该方法不适用于 null 和 undefined，由于这两个类型的数据中没有方法，
//所以调用toString（）会报错

方式二（强制类型转换）

调用 String() 函数

var b = 123;
b = String(b)

方法三(隐式类型转换)

利用 + 拼接字符串方法 实现转换

转化为Number

方式一（强转）

调用 Number() 函数

var s = "123";
s = Number(s);

非法数字字符串或者undefined，转换为NaN

空串，纯空格的字符串或者是null转换为0

true转换为1 false转换为0

方式二（强转）

调用parseInt() 或者parseFloat()

console.log(parseInt('3,14'));//3 取整
console.log(parseFloat('3.14'));//3.14
console.log(parseInt('3,94'));//3 取整
console.log(parseInt('120px'));//120  会去掉px
console.log(parseInt('r120px'));//NaN

对于非String调用，会先将其转化为String然后操作

方式三（隐式转换）

利用算数运算（除了 +）

console.log('12' - 0);//12
var a = "123";

a = + a;
转换为布尔值

方式一（强制类型转换）

使用Boolean（）函数

var s = "fa";
s = Boolean(s);//true

代表空、否定的值 会被转换成false ，如 ’ ’ (空串) 、0、NaN、 null、undefined

其余值都会转换为true

方式二（隐式类型转换）

为任意的数据类型做两次非运算，即可将其转换为布尔值

var a = "hello";
a = !!a;//true

运算符

注意：与java，c语言差不多的不详写

typeof运算符

语法： typeof 变量

算数运算符
自增自减运算符
赋值运算符
关系（比较）运算符

如果比较的两个值是非数值，会将其转换为Number然后再比较。
如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。

三元运算符

条件表达式？语句1 ：语句2;

相等运算符

== !=

相等和不等

会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型然后再比较

===
全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换，如果两个值的类型不同，则直接返回false

!==
不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，它会直接返回true

特殊的值：
null和undefined
由于undefined衍生自null，所以null == undefined 会返回true。
但是 null === undefined 会返回false。
NaN
NaN不与任何值相等， NaN == NaN //false

逻辑运算符

!
非运算可以对一个布尔值进行取反，true变false false边true
当对非布尔值使用!时，会先将其转换为布尔值然后再取反
我们可以利用!来将其他的数据类型转换为布尔值

&&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时，才会返回true。只要有一个false就会返回false。
与是一个短路的与，如果第一个值是false，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
1.如果第一个值为false，则返回第一个值
2.如果第一个值为true，则返回第二个值

||
||可以对符号两侧的值进行或运算
只有两端都是false时，才会返回false。只要有一个true，就会返回true。
或是一个短路的或，如果第一个值是true，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
1.如果第一个值为true，则返回第一个值
2.如果第一个值为false，则返回第二个值

运算符优先级

未看

流程控制语句

条件判断语句if

if(条件表达式){  
 	语句...  
 }
if(条件表达式){  
	语句...  
}else{  
	语句...  
}
if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else{  
	语句...  
}

条件分支语句switch

switch(条件表达式){  
	case 表达式:  
		语句...  
		break;  
	case 表达式:  
		语句...  
		break;  
	case 表达式:  
		语句...  
		break;  
	default:  
		语句...  
		break;  
}

while循环

while(条件表达式){  
    语句...  
}

do…while循环

do{  
语句...  
}while(条件表达式)

for循环

for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){  
    ③语句...  
}

死循环

while(true){  

}  

for(;;){  

}

对象（Object）

JS中，对象是一组无序的相关属性和方法的集合，所有事物都是对象如字符串，数值，函数…

对象是JS中的引用数据类型

使用typeof检查一个对象时，会返回object

创建对象的三种方式

利用字面量创建

var obj {
    uname:'黄帅哥',
    age: 18,
    sayHi:function(){
        console.log('hi~');
    }
}//方法冒号后面跟的是一个匿名函数

利用new Object创建对象

var obj = new Object();
obj.uname = '黄帅哥';
obj.sayname = function(){
    console.log(obj.uname);//也可以用  对象["属性名"]
}

new关键字执行流程

  1. new构造函数可以在内存中创建一个空的对象
  2. this就会指向刚创建的空对象
  3. 执行构造函数里面的代码 给这个空对象添加属性和方法
  4. 返回这个对象

利用构造函数创建对象

前两种方法一次只能创建一个函数

而构造函数 就是把不同对象里面一些相同的属性和方法封装到函数里

利用构造函数创建对象的过程 也称为对象的实例化

function 构造函数名(){
    this.属性名 = 值;
    this.方法名 = function(){
    }
}
  new 构造函数名();//调用函数返回的是一个对象
  //构造函数名首字母要大写
  //构造函数不需要return  就可以返回结果

删除对象中的属性

delete 对象.属性名  
delete 对象["属性名"]

遍历对象属性

for …in语句用于对数组或者对象的属性进行操作

var obj = {'0':'a','1':'b','2':'c'};  
  
for(var i in obj) {  
     console.log(i,":",obj[i]);  
}  
//0 : a
//1 : b      输出 i 得到的是属性名
//2 : c		 输出 obj[i]得到的是属性值

对象的分类

  1. 自定义对象
  2. 浏览器（宿主）对象
  • 由JS运行环境提供的对象，目前来讲主要是指浏览器提供的对象
  • 比如 BOM DOM

内置对象

JS语言自带的一些对象如 Math，Date，Array，String等

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法

Math.PI					//圆周率
Math.floor()			//向下取整
Math.ceil()				//向上取整
Math.round()			//四舍五入取整 3.5->3
Math.abs()              //绝对值
Math.max()/Math.min		//求最大最小值

随机数方法random()

这个方法里面不跟参数

random()返回 0—9随机小数

//1.想要两个数之间的随机整数  并且包含这两个整数
function getRandom(min, max){
    return Math.floor(Math.random() * (max -min + 1)) + min;
}
console.log(getRandom(1,10));
//2.不包含这两个整数
日期对象

Date()日期对象 是一个构造函数 必须使用new 来调用创建的日期对象

var date = new Date();
console.log(date);//没有参数 返回当前系统的时间

name

return

getDate()

当前日期对象是几日（1-31）

getDay()

返回当前日期对象时周几（0-6）

0 周日

1 周一 。。。

getMonth()

返回当前日期对象的月份（0-11）

0 一月 1 二月 。。。

getFullYear()

从 Date 对象以四位数字返回年份。

getHours()

返回 Date 对象的小时 (0 ~ 23)。

getMinutes()

返回 Date 对象的分钟 (0 ~ 59)。

getSeconds()

返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds()

返回 Date 对象的毫秒(0 ~ 999)。

getTime()

返回当前日期对象的时间戳

时间戳，指的是从1970年月1日 0时0分0秒，到现在时间的毫秒数

计算机底层保存时间都是以时间戳的形式保存的。

Date.now()

可以获取当前代码执行时的时间戳

参数常用写法

数字型 2019, 10, 01 字符串型 ‘2019-10-1’

var date1 = new Date(2019, 10, 1);
console.log(date1);//返回的是11月  不是10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);//这个不会

未完

数组对象

创建数组

//1.利用数组字面量
var arr = [1,2,3];
//2.利用new Array()
var arr1 = new Array(); //创建了空数组
var arr2 = new Array(2); //创建了长度为2的数组
var arr3 = new Array(2,3);//创建了[2,3]数组

检测是否为数组

//1.instanceof运算符
var arr = [1, 2, 3];
console.log(arr instanceof Array);//true
//2.Array.isArray(参数);  H5新增方法   ie9以上版本支持
console.log(Array.isArray(arr));

增加删除数组元素的方法

方法名

说明

返回值

push(参数1…)

末尾添加一个或多个元素

返回新长度

pop() 没有参数

删除数组最后一个元素

返回删除的函数的值

unshift(参数1…)

向数组开头添加一个或者多个元素

返回新的长度

shift() 没有参数

删除第一个元素

返回第一个元素的值

var arr = [1, 2, 3];
arr.push(4);
arr.pop();

数组排列方法

方法名

说明

返回值

reverse()

颠倒数组中元素的顺序，无参数

返回新数组

sort()

对数组的元素进行排序（冒泡排序）

返回新数组

concat()

连接两个或多个数组，它不会影响原数组

返回新数组

slice(begin,[end])

从一个数组中截取指定的元素 该方法不会影响原数

1.截取开始位置的索引（包括开始位置）

2.截取结束位置的索引（不包括结束位置）

第二个参数省略不写则一直截取到最后

参数可以传递一个负值，如果是负值则从后往前数

返回截取的新数组

splice()

用来删除数组中指定元素,并用新元素替换（改变原数组）

1.删除开始位置的索引

2.删除的个数

3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边

返回删除的元素封装到新数组

翻转数组

var arr = ['pink', 'red', 'blue'];
arr.reverse();

数组排序

var arr = [3, 4, 7, 1];
arr.sort();//如果数组元素是含有两位数的会因只识别第一个数错排
//解决
var arr = [3, 34, 17, 1];
arr.sort(function(a,b){
    //return a - b;升序的顺序排列
    return b - a;//降序
})
字符串对象
//基本包装类型
var str = 'andy';
console.log(str.length);
//对象才有属性方法    复杂数据类型才有属性和方法
//那么简单数据String为什么会有length属性呢？

//简单包装类型： 就是吧简单数据类型  包装成为了  复杂数据类型
//(1)把简单数据类型包装成复杂数据类型
var temp = new String('andy');
//(2)把临时变量的值  给 str
str = temp;
//(3)销毁这个临时变量
temp = null;

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中开辟了一个内存空间

因为字符串的不可变 所以不要大量的拼接字符串

根据位置返回字符

方法

说明

使用

charAt（index)

返回指定位置的字符

判断用户按下哪个键

charCodeAt(index)

获取指定位置处的ASCII码

str[index]

获取指定位置处字符

H5新增与charAt()等效

console.log(str.charCodeAt(0));//97
c0nsole.log(str[0]);//a
//遍历所有的字符
for (var i = 0; i < str.lengthl;i++){
    console.log(str.charAt(i));
}

字符串操作方法

concat（str1,str2,str3…)

用于连接两个或多个字符串。等于 +

substr(start,length)

从start位置开始（索引号），length取的个数

slice(satrt,end)

从start位置开始，截取到end位置，end取不到（索引号）

substring(start,end)

基本与slice相同 但不接受负值

//1.替换字符  replace（'被替换的字符','替换字符') 它只会替换第一个字符
var str = 'andyandyandy';
//可以通过循环 替换所有'a'
while(str.indexOf('a') !== -1){
    str = str.replace('a','p');
}
//2.字符转换为数组 split('分隔符')  
var str1 = 'red, pink, blue';
console.log(str1.split('&'));
var str = '是的春天，春天来了';
console.log(str.indexOf('春'，3))//从索引 3 的位置开始往后查找

函数（Function）

函数也是一个对象，也具有普通对象的功能（能有属性）

使用typeof检查一个函数时会返回function

函数声明
//1.声明函数
function 函数名([形参1...]){
    //函数体
}
//2.调用函数
函数名([形参1...]);

//函数表达式(匿名函数)
var 函数名 = function([形参1,形参2...形参N]){  
	语句...  
};

立即执行函数

函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次

(function(a,b){  
    console.log("a = "+a);  
    console.log("b = "+b);  
})(123,456);

函数的封装

把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

形参和实参

形参是接受实参的，形参在被调用时才会被赋值

形参可以看做是一个不用声明的变量

形参实参个数匹配

function getSum(n1, n2){
    console.log(n1 + n2);
}
//1.如果实参形参个数相等 ，则正常输出结果
getSum(1, 2);
//2.如果实参 > 形参 ，会取形参的个数
//3.如果形参 < 实参 , 多余的形参定义为undefined，最终结果是NaN
return语句

返回值&终止函数

function getSum(num1, num2){
    return num1 ， num2;//只会返回一个值，若逗号隔开返最后一个值
    alert('我不会被执行')//return后面的代码不会被执行
}


//return [num1 + num2,num1 - num2]
//var a = getSum(1, 2);//返回的是数组

如果return后不跟值，或者是不写return则函数默认返回undefined

break、continue和return

break
退出循环
continue
跳过当次循环
return
退出函数

方法（method）

可以将一个函数设置为一个对象的属性，
当一个对象的属性是一个函数时，
我们称这个函数是该对象的方法。

arguments的使用

当我们不确定有多少参数传递的时候，可以使用arguments来获取。

arguments和this类似，都是函数中的隐含的参数（函数内置对象，只有函数有）
arguments是一个类数组元素，它用来封装函数执行过程中的实参

所以即使不定义形参，也可以通过arguments来使用实参

function fn(){
    console.log(arguments);// arguments = [1,2,3]
    //类数组，所以可进行遍历
    for (var i = 0; i < arguments[i]; i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);
函数可以调用另一个函数
function fn1(){
    console.log(111);
    fn2();                 
    console.log('fn1');
}

function fn2(){
    console.log(222);
    console.log('fn2');
}
fn1();//   111 222 fn2 fn1
作用域

JS作用域 : 就是代码名字（变量）在某个范围内起作用的效果

var num = 10;//全局作用域  整个script标签 或者是一个单独的js文件
function fn(){
    //局部作用域  在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用   
}
  1. 全局变量：在如何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存 。注意：如果在函数内部 没有声明直接赋值的额变量也属于全局变量
  2. 局部变量 ： 只在函数内部使用，当其所在代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此更节省空间 。 注意：函数的形参也可以看做是局部变量
JS现阶段没有块级作用域
js也是在es6的时候新增的块级作用域
块级作用域 {}  if{} for{}
作用域链

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

var num = 10;
function fn(){//外部函数      
    var num = 20;
    	function fun(){//内部函数
            console.log(num);
        }
}//一层一层的找函数里的函数可以调用的变量

在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域。

预解析

我们JS引擎运行js分两步：预解析 代码执行

  • 预解析：js引擎会把js里面所有的var和function 提升到当前作用域的最前面
  • 代码执行：安装顺序上到下执行

预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）

  • 变量提升:就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
  • 函数提升:就是把所有的函数声明提升到当前的作用域最前面 不调用函数
console.log(num);// undefined 坑1
var num = 10;
 
fun();//报错  坑2   放下面才可以（此时fun变量赋值完）
var fun = function(){
    console.log(22);
}

数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
}

1. 全局变量：在如何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存 。**注意：如果在函数内部  没有声明直接赋值的额变量也属于全局变量**
2. 局部变量 ：  只在函数内部使用，当其所在代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此更节省空间  。 **注意：函数的形参也可以看做是局部变量**

JS现阶段没有块级作用域
js也是在es6的时候新增的块级作用域
块级作用域 {} if{} for{}

##### 作用域链

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

```js
var num = 10;
function fn(){//外部函数      
    var num = 20;
    	function fun(){//内部函数
            console.log(num);
        }
}//一层一层的找函数里的函数可以调用的变量

在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域。

预解析

我们JS引擎运行js分两步：预解析 代码执行

  • 预解析：js引擎会把js里面所有的var和function 提升到当前作用域的最前面
  • 代码执行：安装顺序上到下执行

预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）

  • 变量提升:就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
  • 函数提升:就是把所有的函数声明提升到当前的作用域最前面 不调用函数
console.log(num);// undefined 坑1
var num = 10;
 
fun();//报错  坑2   放下面才可以（此时fun变量赋值完）
var fun = function(){
    console.log(22);
}