javaScript基础

javaScript语法

1.常用输出语句

/*弹窗*/
alert("hi");
/*控制台输出语句*/
console.log('猜猜我在哪？'); 
/*html内部*/
document.write("<h1>人没有梦想 和咸鱼有啥区别</h1>");

2.变量

标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

**提示：**JavaScript 标识符对大小写敏感。

// 定义变量 并且赋值 变量的本质是存储数据的容器
var $ = 10;
$ = 12.5;
//alert($);
var stuName = 'zs';
var stuAge = 20;
var sex = '男';

3.数据类型

数据类型 typeof

var num = 10.4;
console.log(typeof num);//number
console.log(num); // 输出num变量的值

number、string、boolean、undefined、null、symbol 引用数据类型(object)

var num2;
console.log(num2); // 没有赋值 默认值是undefined
console.log('num'); // 输出字符串num
var obj2 = {};
console.log(typeof obj2);//引用(object)

4.运算符

加、减、乘、除、取余或求模、前后置自增（减）运算符

一般用法

var num = 1 + 2;
var num1= 11 % 2;//1
var num2 = 10;
var num3;
num3 = num2++; // num2++作为整体赋值 用的是num2之前的值
num3 = ++num2; // ++num2作为整体赋值 用的是num2加1之后的值
//--同理

数据类型之间的转化规则：

console.log(typeof('1' + 2)); 		// '1'+'2'  =>  '12'
console.log('3' - '4'); 			// 3-4  =>  -1
console.log(typeof('3' - '5ad')); 	// NaN(Not a Number无法表示的数字)  类型还是number
console.log('3' - false); 			// 3-0 false等价于0，底层C++实现
console.log('3' - true); 			// true当作1，底层C++实现
console.log('10' + 0 - 10); 		// '100'-10 => 90
console.log('10' * 3); 				//类型转化10*3=>30
console.log('10' / 3);				//3.333333

复合运算符

大于 >、小于 <、大于等于 >=、小于等于 <=、判断等于（严格判断 ===、非严格判断 ）、判断不等于（严格判断 !、非严格判断 !=）

console.log(5 == '5'); 	// true == 不严格相等 只要内容相同即可 数据类型可以不同
console.log(5 === '5'); // false === 严格相等 内容和类型都需要一样
console.log(5 != '5');	// false  != 是对== 的否定
console.log(5 !== '5'); // true !== 是对===的否定

逻辑运算符（表达式|| 表达式 、表达式&&表达式、！表达式）短路现象

//逻辑运算符 && || !
// 表达式1 && 表达式2 首先计算表达式1的真假(0,空字符串，NaN,false,undefined,null这些都看成假，其余全是真)假如表1为真 最终直接返回表达式2的值 假如表1为假 结果就是表1的值，表2此时不会执行
// 这种现象叫短路现象，||和&&都有这种性质
//(!true)=>false
console.log(!!5); // 把5变成布尔值true

条件运算符（表达式？表达式：表达式）

console.log(10 % 2 === 0 ? '偶数' : '奇数');

5.数据类型转换

parseFloat() 把其他值转成小数 从左到右直到遇到第一个非数字且非小数点的字符为止

parseInt() 把其他值转成整数 从左到右直到遇到第一个非数字字符为止

Number() 把其他值转成数字，值当中只要有字母或其他符号 结果就是NaN

Boolean() 把其他值转成布尔值

num + ‘’; 数字转字符串

num.toString(2)输出二进制对应的字符序列

• “23.23”----->23.23

var str = "23.23";
console.log(typeof(str - 0));//number 23.23
var res = parseFloat(str);
console.log(res, typeof res);//23.23  

• parseFloat() 把其他值转成小数 从左到右直到遇到第一个非数字且非小数点的字符为止

console.log(parseFloat('23.12a')); // 23.12
console.log(parseFloat('23.b12a')); // 23
console.log(parseFloat('z23.b12a')); // NaN

• parseInt() 把其他值转成整数 从左到右直到遇到第一个非数字字符为止

console.log(parseInt('23.12a')); // 23
console.log(parseInt('23.b12a')); // 23
console.log(parseInt('z23.b12a')); // NaN

• Number() 把其他值转成数字，值当中只要有字母或其他符号 结果就是NaN

console.log(Number('23.12a')); // NaN
console.log(Number('a23.12')); // NaN
console.log(Number('23.12')); // 23.12
console.log(Number('123'));//123
console.log(Number(true)); // 1
console.log(Number(false)); // 0

• Boolean() 把其他值转成布尔值

console.log(Boolean(-1)); // true
console.log(Boolean(0)); // false
console.log(Boolean('')); // false
console.log(Boolean(undefined));//false
console.log(Boolean(NaN));//false

• 数字转字符串

var num = 10;
console.log(typeof(num + '')); // '10'
console.log(typeof num.toString());
console.log(num.toString(2)); // 输出二进制对应的字符序列 1010

6.if-else if-else结构

if(条件表达式){
代码块
}else if(条件表达式){
代码块
}else{
代码块
}

7.switch-case结构

var num = 12;
switch (num) {
	case 0:
		alert('星期日');
		break; // 跳出switch结构
	case 1:
		alert('星期一');
		break;
	case 2:
		alert('星期二');
		break;
	case 3:
		alert('星期三');
		break;
	case 4:
		alert('星期四');
		break;
	case 5:
		alert('星期五');
		break;
	case 6:
		alert('星期六');
		break;
	default:
		alert('出错啦');
		break;
}

8.选择嵌套

让用户输入一个年龄（1～100）

数字 >=18 “可以***” 1-18 继续上学 负数、0、>100 、不是数字 提示有误

// 先拿到用户输入的值
var age = parseInt(prompt("请输入你的年龄")); // 输入提示框 
//alert(typeof age);
// age NaN 整数
if (isNaN(age)) { // age是NaN 条件成立
	alert('输入有误，年龄不能是非数字的其他特殊符号');
} else {
	if (age >= 1 && age <= 100) {
		if (age >= 18) {
			alert('可以***');
		} else {
			alert('继续上学');
		}
} else {
	alert('输入范围不正确');
	}
}

9.while循环

var i = 1; // i次数
while (i <= 50) {
	console.log('我要***!!!');
	i++;
}
console.log(i); // 51

10.do-while循环

var i = 1;
do {
	console.log(i);
	i += 2;
} while (i <= 100)

11.for循环

执行过程

1 先执行表达式1

2 执行表达式2 表达式2为假for循环结束 表达式2为真 执行第3步

3 执行循环体

4 执行表达式3

5 回到第二步

for(表达式1;表达式2;表达式3) {

​ 循环体

}

• 表达式1一般用于变量初始化 表达式2一般放循环条件 表达式3放变量的变化

• 表达式之间用分号隔开,三个表达式都可以省略，但是分号不能省

var i = 10;
for (; i >= 1;) {
	console.log(i);
	i--;
}
alert(i);

12.break,continue

// break break用在循环 一旦执行整个循环结束
// continue 继续 
// 打印1-20的数 遇到7的倍数后就不输出了
// 跳过7 其他全部打印
var num = 1;
while (num <= 20) {
	if (num === 7) {
		// break 让循环结束
		num++;
		continue;
	}
	console.log(num);
	num++;
}

13.循环嵌套

// 外循环
for (var i = 1; i <= 4; i++) {
	//console.log('*****');
	//document.write('*****'); 一次输出很多星 显得比较麻烦
	// 内循环
	for (var j = 1; j <= 15; j++) {
		document.write('*');
	}
	document.write('<br />');
}

14.函数

函数解决代码的复用

• 定义

function 函数名(参数) {

​ // 具体功能代码实现-函数体

}

• 调用

函数名();

​ 函数打印金字塔

function printStar() {
	for (var x = 0; x < 5; x++) {
	// x看作行数 
	// 先输出若干个空格(4-x)
		for (var y = 0; y < 4 - x; y++) {
			document.write('&ensp;'); // &ensp; 一个空格和一个普通符号占的宽度一样
		}
		// 再输出若干个星星(2*x+1)
		for (var z = 0; z < 2 * x + 1; z++) {
			document.write('*');
		}
		// 最后换行
		document.write('<br />');
	}
}

15.arguments

arguments是函数内置的一个对象 存储了所有传递过来的实参，该对象有个length属性表示实参长度 语法 arguments.length

• 判断形参和实参的个数是否匹配

function fn(a, b) {
	console.log(arguments.length); // 实参长度 
	console.log(fn.length); // 函数名.length 表示形参个数
	if (arguments.length === fn.length) {
		return a + b;
	} else {
		alert('实参和形参个数不匹配');
	}
}

• 求任意数的和

function getSum() {
	// {0:***,1:****,2:***}
	var sum = 0;
for (var i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
}

16.递归

• 递归实现斐波那切数列 1 1 2 3 5 8 13 。。。 第n项的值

function fib(n) {
	if (n === 1 || n === 2) return 1;
	return fib(n - 1) + fib(n - 2);
}
for (var i = 1; i <= 10; i++) {
	console.log(fib(i));
}

• 求1+2+…+100 getSum(n) 求前n之和 === n+前n-1个数的和

function getSum(n) {
	if (n === 1) return 1;
	return n + getSum(n - 1);
}

17.作用域

• 全局作用域和局部作用域

在函数之外定义的变量叫全局变量 ,函数外不加var直接使用的变量隐式全局变量

函数内部通过var定义的变量 叫局部变量

类比C、C++的局部变量和全局变量

• 作用域链

function fn() {
	//var a = 1;
	function fn2() {
		//var a = 2;
		function fn3() {
			//var a = 3;
			console.log(a);
		}
		fn3();
	}
	fn2();
}
fn();

18.对象

• 对象 静态特征(属性)+动态行为（函数）

var zs = {
	pname: 'zhangsan',
	age: 30,
	sex: '男',
	eat: function() {
	console.log('吃货！！！');
	}
}

• 对象、函数可以动态添加属性，基本数据不能动态添加属性

//对象、函数可以动态添加属性
zs.coding = function() {
	console.log('crazy coding');
}
function fn() {
}
fn.a = 1;
console.log(fn.a);


var num = 10;//基本数据
num.a = 'hello'; // 基本数据不能动态添加属性
console.log(num.a); // undefined

• 对象 无序的属性集合，属性名和属性值用冒号隔开，属性和属性之间用逗号隔开

// 访问对象的成员 对象.成员
console.log(zs.pname);
console.log(zs.age);
zs.eat();
// 对象['属性名']
console.log(zs['pname']);
console.log(zs['sex']);
zs['eat']();
// 对象[变量] 变量存储的是对象的属性名
var attr = 'pname';
console.log(zs[attr]); // zhangsan
console.log(zs.attr); //undefined 相当于访问zs对象的attr属性
console.log(zs['attr']); // undefined 相当于访问zs对象的attr属性

19.数组

1.定义

（1）数组直接量

var arr2 = [1, 2, 3, 4];

（2）通过new创建数组对象

var arr3 = new Array(); // []

2.数组的长度 数组元素的个数 通过数组名.length获取数组元素个数

console.log(arr3.length);

3.数组相关操作 获取数组元素 数组名[下标] 下标0～arr.length-1

4.添加元素、修改

未赋值的元素默认值为undefined

5.API

1.push()
功能	在数组末尾添加一个或多个元素
参数	添加的元素序列
返回值	返回的是原数组增加元素后的长度
特点	会改变原数组

2.unshift() 用法基本与push()一样，只是在数组前面添加元素

3.pop()
功能	在数组末尾删除一个元素
参数	无参数
返回值	返回的是删除的那个元素
特点	会改变原数组

4.shift() 用法基本与pop()一样，只是在数组前面删除元素

5.splice()
功能	对数组进行截取
参数	第一个参数表示从什么位置开始 第二个参数表示到什么位置结束(不包含)
返回值	返回的是截取的元素组成的新数组
特点	不会改变原数组

6.concat()
功能	合并数组
参数	放需要合并的数组或值
返回值	返回的是合并后的新数组
特点	不会改变原数组

7.Join()
功能	以指定的符号连接数组的每个元素
参数	指定的符号或者为空(不传参数 默认以逗号)
返回值	返回的是连接后的字符串
特点	不会改变原数组

8.reverse()
功能	以数组元素进行翻转
参数	无参数
返回值	返回的是翻转后的数组
特点	会改变原数组

9.toString() 把数组转成字符串

10.forEach()
功能	对数组进行循环 和for作用类似
参数	接受一个函数
返回值	undefined
特点	会改变原数组

11.indexOf()
功能	在数组中查找元素
参数	需要查找的元素
返回值	数字，-1代表没有找到，或者找到的序号
特点	不会改变原数组, 找到第一个满足条件为止

12.filter()
功能	在数组中过滤元素
参数	接受一个函数
返回值	满足条件的元素组成的数组
特点	不会改变原数组

13.map()
功能	对原数组进行映射，新数组的元素值是每次循环函数的返回值决定
参数	接受一个函数
返回值	与原数组对应的新数组
特点	不会改变原数组

14.some()
功能	在数组中找有没有满足条件的元素
参数	接受一个函数
返回值	布尔值 找到满足条件返回true 否则返回false
特点	不会改变原数组 只要找到第一个满足条件的元素终止循环 则返回true

15.every()
功能	看数组中元素是否都满足条件
参数	接受一个函数
返回值	布尔值 只要找到一个不满足返回false，全部满足返回true
特点	不会改变原数组 只要找到第一个不满足条件的元素终止循环 则返回false

16.isArray()

console.log(Array.isArray({})); // false
console.log(Array.isArray([])); // true
console.log(Array.isArray(123)); // false

17.sort()

var ary3 = [10, 3, 4, 12, 32, 11];
ary3.sort(function(a, b) {
	return b - a; // 降序 假如a-b就是升序
});

20.数组案例

数组去重

// 判断val是否在数组arr中
function has(arr, val) {
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] === val) {
			return true;
		}
	}
	return false;
}
// 数组去重
function noRepeat(arr) {
	var newArr = [];
	var index = 0;
	// 对arr进行循环
	for (var i = 0; i < arr.length; i++) {
		if (!has(newArr, arr[i])) {
			newArr.push(arr[i]);
		}
	}
	return newArr;
}
var res = noRepeat([10, 2, 3, 4, 2, 2, 11]);
console.log(res);

21.字符串

charAt()
功能	求指定位置的字符
参数	表示位置的整数 从0开始
返回值	对应位置的字符
特点	用法基本与数组的indexOf类似

indexof() 从前往后找字符串，找到返回字符串首尾字符的下标，否则返回-1

lastIndexOf() 从后往前找字符串，找到返回字符串首尾字符的下标，否则返回-1

• substr()

• substring()

• slice()

console.log(str2.substr(2)); // 从序号为2开始截取到末尾
console.log(str2.substr(2, 5)); // 从序号为2开始截取5个字符

console.log(str2.substring(2)); // 从序号为2开始截取到末尾
console.log(str2.substring(2, 5)); // 从序号为2开始截取到序号5为止不包含结束位置
console.log(str2.substring(5, 2)); // 内部会把2和5对调

console.log(str2.slice(2)); //  从序号为2开始截取到末尾
console.log(str2.slice(2, 5)); // 从序号为2开始截取到序号5为止不包含结束位置
console.log(str2.slice(5, 2)); // 数字大的不能放第一个参数 否则不会出结果

变成首字符大写

// 'hello' 如何变成首字母大写
var str2='hello';
console.log(str2.toUpperCase()); 	// 全部转成大写
console.log(str2.toLowerCase());	// 全部转成小写
console.log(str2.charAt(0).toUpperCase() + str2.substr(1));

• split()

var str3 = "http://www.baidu.com?a=1";
var arr = str3.split('?');
var arr2 = str3.split(''); //参数为空字符串 拿到所有单个字符组成的数组

• replace()

//替换全部的两种写法
var str4 = '大家好,sb,我是sb';
var newStr2 = str4.split('sb').join('**')

var str4 = '大家好,sb,我是sb';
while ((index = str4.indexOf('sb')) !== -1) {
	str4 = str4.replace('sb', '**');
}

22.Math对象

//ceil() 向上取整 floor() 向下取整
// round() 四舍五入 往数大的去靠
// max,min
// pow(a,b)
// random() [0,1)

随机产出0-10的整数 1-10 5-15 m-n

function getRandom(m, n) {
	return Math.floor(Math.random() * (n - m + 1) + m);
}

for (var i = 0; i < 50; i++) {
//console.log(Math.floor(Math.random() * 11)); 0-10
//console.log(Math.floor(Math.random() * 10 + 1));
console.log(getRandom(5, 15));
}

23.日期对象

//产生一个日期对象  new Array()  new Date()
var d = new Date();
console.log(d.toLocaleString()); // 2020/7/19 下午2:37:50

parse()

console.log(Date.parse(str)); // parse() 解析出一个数字 从1970年1月1日到该时间经历的毫秒数

getTime()

var endTime = new Date("2021-10-1");
var now = new Date();
console.log(endTime.getTime() - now.getTime());
//返回值  从1970年1月1日到该时间经历的毫秒数