前端js基础总结
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(' '); //   一个空格和一个普通符号占的宽度一样
}
// 再输出若干个星星(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日到该时间经历的毫秒数