js基础知识总结

JavaScript的组成

ECMAScript - JavaScript的核心

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

变量

什么是变量

• 什么是变量
  变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
• 为什么要使用变量
  使用变量可以方便的获取或者修改内存中的数据

如何使用变量

• var声明变量

var age;

• 变量的赋值

var age;
age = 18;

• 同时声明多个变量

var age, name, sex;
age = 10;
name = 'zs';

• 同时声明多个变量并赋值

var age = 10, name = 'zs';

变量在内存中的存储

var age = 18;

变量的命名规则和规范

• 规则 - 必须遵守的，不遵守会报错

• • 由字母、数字、下划线、$符号组成，不能以数字开头
  • 不能是关键字和保留字，例如：for、while。
  • 区分大小写

• 规范 - 建议遵守的，不遵守不会报错

• • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

数据类型转换

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

转换成字符串类型

• toString()

var num = 5;
console.log(num.toString());

• String()

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

• 拼接字符串方式
  num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

• Number()

Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

• parseInt()

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

• parseFloat()

parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似，不同之处在与
	parseFloat会解析第一个. 遇到第二个.或者非数字结束
	如果解析的内容里只有整数，解析成整数

• +，-0等运算

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成布尔类型

• Boolean()

0 ‘’(空字符串) null undefined NaN 会转换成false 其它都会转换成true

算术运算符

+ - * / %

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符 二元运算符

++ 自身加1

– 自身减1

• 前置++

var num1 = 5;
++ num1; 

var num2 = 6;
console.log(num1 + ++ num2);

• 后置++

var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++);

• 猜猜看

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

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相当于  num = num + 5;

运算符的优先级

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符

表达式和语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

语句

语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

流程控制

程序的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况，执行对应代码

循环结构

循环结构：重复做一件事情

什么是函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

函数的定义

• 函数声明

function 函数名() {
  // 函数体
}

• 函数表达式

var fn = function () {
  // 函数体
}

• 特点：
  函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。
  函数一般都用来干一件事情，函数名称一般使用动词

函数的调用

• 调用函数的语法：

函数名();

• 特点：
  函数体只有在调用的时候才会执行，调用需要()进行调用。
  可以调用多次(重复使用)

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值

Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

Array对象

• 创建数组对象的两种方式

• • 字面量方式
  • new Array()

// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);


// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];

// 获取数组中元素的个数
console.log(arr.length);

• 检测一个对象是否是数组

• • instanceof
  • Array.isArray() HTML5中提供的方法，有兼容性问题

函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断

• toString()/valueOf()

• • toString() 把数组转换成字符串，逗号分隔每一项
  • valueOf() 返回数组对象本身

• 数组常用方法
  演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 栈操作(先进后出)
push()
pop() 		//取出数组中的最后一项，修改length属性

// 2 队列操作(先进先出)
push()
shift()		//取出数组中的第一个元素，修改length属性
unshift() 	//在数组最前面插入项，返回数组的长度

// 3 排序方法
reverse()	//翻转数组
sort(); 	//即使是数组sort也是根据字符，从小到大排序

// 4 操作方法
concat()  	//把参数拼接到当前数组
slice() 	//从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()	//删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)

// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1

// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()

• 清空数组

// 方式1 推荐 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

String对象

• 字符串的不可变

let str = 'abc';
str = 'hello';
// 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

• 创建字符串对象

var str = new String('Hello World');

// 获取字符串中字符的个数
console.log(str.length);

• 字符串对象的常用方法
  字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

// 1 字符方法
charAt()    	//获取指定位置处字符
charCodeAt()  	//获取指定位置处字符的ASCII码
str[0]   		//HTML5，IE8+支持 和charAt()等效

// 2 字符串操作方法
concat()   		//拼接字符串，等效于+，+更常用
slice()    		//从start位置开始，截取到end位置，end取不到
substring() 	//从start位置开始，截取到end位置，end取不到
substr()   		//从start位置开始，截取length个字符

// 3 位置方法
indexOf()   	//返回指定内容在元字符串中的位置
lastIndexOf() 	//从后往前找，只找第一个匹配的

// 4 去除空白   
trim()  		//只能去除字符串前后的空白

// 5 大小写转换方法
to(Locale)UpperCase() 	//转换大写
to(Locale)LowerCase() 	//转换小写