目录
JS基础语法
JS组成
- ECMAscript 规定了js代码的书写规范------基础语法
- DOM 文档对象模型------js操作html标签和css样式
- BOM 浏览器对象模型------弹框，浏览器前进后退
输出语句
<script>
console.log('程序员调试用');
// 弹出框
alert('弹出框');
// 输入框
prompt('hello word!')
// 确认框
confirm('你确定要走！')
// document.write('可以把文字或者标签在浏览器输出')
document.write('<h1>哈哈哈哈,大舔狗</h1>')
</script>变量
先声明 后赋值
// 1.更新变量
// var myNC = '火影';
// myNC = '忍者';
// console.log(myNC);
// 2.声明多个变量
var age = 18,
address = '济南',
sex = 'woman';
// 声明变量的特殊情况（注意事项）
// var sex;
// console.log(sex);//只声明 不赋值，结果undefined
// 不声明 不赋值，打印变量结果会报错
// console.log(a); 报错
// 变量不声明，直接赋值，可以运行，但是有问题
// 不建议使用
ncing = 100;
console.log(ncing);变量命名规范
1.js里面变量名 --只能是 字母 数字 下划线_ $
2.严格区分大小写
3.推荐使用驼峰命名法
4.不能以纯数字开头
注意事项：尽量不要用name当成变量名，直接打印是一个空字符串。（尤其在谷歌浏览器）
数据类型
数值型number
// 数值型 【整数 小数 负数】
console.log(Number.MAX_VALUE); //最大值
console.log(Number.MIN_VALUE); //最小值
// console.log(Infinity); //无穷大
// console.log(-Infinity); //无穷小
console.log(NaN); //表示不是一个数字 但是NaN属于数字类型八进制
以数字0开头 var num = 067;
十六进制
以0x开头的 var num = 0xab；
isNaN()
这是一个方法：用来检测一个数据是不是数字，如果是数字返回false 如果不是数字 返回true
console.log(isNaN(10)); //false
console.log(isNaN('red')); //true
字符串string
引号嵌套----外单内双 或者 外双内单
字符串拼接
口诀：数值会相加运算，字符会相连
总结：字符串与任意数据类型使用 + 操作，都是在做字符串拼接，都会转为字符串数据类型。
布尔型Boolean
true（真0）
false（假0）
var flag1 = true; //当 1 来看
console.log(flag1 + 2); //3
var flag2 = false; //当0来看
console.log(flag2 + 3); //3
var flag3 = true;//当 1 来看
console.log(flag3 / 10);undefined类型
未定义型
var res = undefined;
// console.log(res + 'red'); //结果是字符串类型 undefinedred
console.log(res + 10); //NaN 注意：undefined型和数字相加，不能加，最后结果表示不是一个数字null类型
空类型
// null类型
var num = null;
// console.log(num); null
console.log(num + 7); //7
console.log(num + 'red'); //数据类型是string 结果nullred
// 注意：null 类型和数字做运算(+ - * /) 当零来看待。
console.log(num - 9); // -9
console.log(num * 6); //0
console.log(num / 6); //0数据类型转换
转换为字符串类型
1.变量.toString() 2.String() 3.隐式转换 + 拼接字符串
// 转换为字符串型
var num = 1;
console.log(num.toString()); /* 第一种 变量.toString */
console.log(String(num)); /* 第二种 String() */
console.log(num + ''); /* 利用 + 拼接字符串的方法实现转换效果 */转换为数字型number
parseInt() 转为整形
parseFloat() 转为浮点型
Number() 强制转换
利用 - * / % -----隐式转换
// 转换为数字型
var str = '3.1415926';
console.log(parseInt(str)); /* 第一种 parseInt() 转换为整数型*/
console.log(parseInt('110px'));/* 110 */
console.log(parseFloat(str));/* 第二种 parseFloat() 转换为浮点型 */
console.log(Number(str)); /* 第三种 强制转换 Number() */转换为布尔型Boolean
使用 Boolean()方法
为false的几种特殊情况： '' 0 NaN null undefined
运算符
前置后置自增自减运算符
前置递增递减运算符 ++ -- 写在变量的前面
先自加1 在返回值
var num = 10; ++num; /* ++num ===> num = 10 + 1 */ console.log(num);后置递增递减运算符 ++ -- 写在变量的后面
先返回原值 在自加1
var num1 = 10; num1++; /* num1++ ===> num1 = 10 -> num1+1 */ console.log(num1);
比较运算符
= 一个等号表示赋值
== 两个等号 只判断值是否相等
=== 三个等号 全等 值和数据类型都得相等
!= 只判断值不相等
!== 判断值和数据类型不相等
逻辑运算符
1.逻辑与 && and
全真为真 一假全假
2.逻辑或 || or
全假为假 一真全真
3.逻辑非 ！取反
真为假 假为真
// 注意： // NaN 表示不是一个数字 console.log(NaN == NaN);//false // var str = 'new day four'; // var num = str.length; //12 // console.log(num >= 10 && NaN === NaN); //false
逻辑中断(短路)
1.逻辑与的短路
左真返右，左假返左 (只认假的)
2.逻辑或的短路
左真返左，左假返右 (只认真的)
问题：什么时候用逻辑与/逻辑? 什么时候用逻辑中断？
答：如果涉及到两侧的布尔判断，用逻辑与/逻辑或
console.log(2 > 3 && 5 > 4);// false两侧结果都是布尔判断，用的是逻辑与，一假全假。答：如果两侧不是布尔的判断，而是固定值的判断，用逻辑中断
console.log(false || 123 || 99 || 10); //123 两侧都是固定值的判断，用逻辑或短路
分支语句
单分支
if(判断条件){
满足条件时 执行的代码
}
双分支
if(判断条件){
语句一
}else{
语句二
}
总结：二选一的过程
多分支
if(判断条件){
语句一
}else if(判断条件){
语句二
}
.......
总结：多选一的过程
三元表达式(三目运算)
if(条件判断){
语句1...
}else{
其他语句..
}
等同于如下：
表达式 ? 语句1 : 语句2；
//如果表达式成立（true） 执行返回语句1 ，如果不成立(false)执行返回语句2；
流程控制之 switch判断
var num = 1;
switch (表达式 num) {
case 1:
console.log('1');
break;
case 2:
console.log('2');
break;
case 3:
console.log('3');
break;
}
1. default 默认值是可以设置/也可以省略。
2.表达式 -- 一般设置为具体的值/或者变量。
3.switch 是全等判断 （匹配原则：全等匹配 ===三个等号）！
4.switch case里面期望设置break ,不设置会有穿透问题。
数组(复杂数据类型)
创建数组的方式
var arr = new Array(); var arr = [20,'10',null,true,undefined]; //字面量方式创建数组（常用）
数组遍历
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; arr.length -- 获取数组的长度 arr.length -1 -- 数组元素的最大下标var arr = ['小红','小强','小倩','小柳']; arr[1]=100; for(var i = 0; i < arr.length; i++){ console.log(arr[i]); }注意：数组长度永远比数组元素最大索引 大 1
新增数组元素
第一种方法(键值对的方式)
var arr = ['red','blue','green']; arr[3] = 'haha'; console.log(arr);必须得写索引号，只写数组名不可以
第二种方法(数组宽度的方法)
// 下一次即将要添加数组元素的索引，永远是上一次的数组的长度 var arr = ['red','blue','green']; arr[arr.length] = 'pink'; console.log(arr);
筛选数组
var arr = [1,5,7,9,12,24,57,98,21,33]; var newArr = []; for(var i = 0; i < arr.length; i++){ if(arr[i] >= 10){ newArr[newArr.length] = arr[i]; } } console.log(newArr);var arr = [1,5,7,9,12,24,57,98,21,33]; var newArr = []; var j = 0; for(var i = 0; i < arr.length; i++){ if(arr[i] >= 10){ newArr[j] = arr[i]; j++; } } console.log(newArr);只输出大于等于10的元素，两种方法实现
数组去重
var arr = [22,0,12,43,65,0,1,0,21,0,23]; var newArr = []; for(var i = 0; i < arr.length; i++){ if(arr[i] != 0){ newArr[newArr.length] = arr[i]; } } console.log(newArr);把不是0的元素输出
翻转数组
var arr = [1,2,3,4,5,6,7,8,9]; var newArr = []; for(var i = arr.length-1; i >= 0; i--){ newArr[newArr.length] = arr[i]; } console.log(newArr);var arr = [1,2,3,4,5,6,7,8,9]; var newArr = []; var j = 0; for(var i = arr.length-1; i >= 0; i--){ newArr[j] = arr[i]; j++; } console.log(newArr);
冒泡排序
是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。核心思想：for循环嵌套for循环，外层负责控制趟数，趟数=数组的宽度-1(假如有5个元素，则需要4趟)，里层循环控制元素之间的比较次数，次数=数组的宽度-次数(数组的宽度-i)，最后交换两个变量。
var temp; var arr = [32,67,9,12,45,66,84]; for(var i = 0; i < arr.length-1; i++){ for(var j = 0; j < arr.length-i-1; j++){ if(arr[j] < arr[j+1]){ temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } console.log(arr);var arr = [1,2,3,4,5]; for(var i = 1; i <= arr.length-1; i++){ for(j = 0; j < arr.length-i; j++){ if(arr[j] < arr[j+1]){ var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } console.log(arr);
数组操作(增删改查)
1.查询
let arr = ['马超','赵云','刘备','关羽','黄忠']; 1.查询 console.log(arr); //查询所有 console.log(arr[1]); //查询单个2.修改
数组[索引号] = 新值
arr[2] = '张飞'; console.log(arr);//['马超','赵云','张飞','关羽','黄忠']3.添加
数组名.push() 数组名.unshift()
arr.push('吕布','夏侯惇'); //在数组最后面添加一个或多个元素 返回数组的新长度 原数组改变 arr.unshift('貂蝉'); //在数组最前面添加一个或多个元素 返回数组的新长度 原数组改变4.删除
数组名.pop() 数组名.shift() ----没有参数 数组名.splice(起始位置(索引号),删除的个数)
let arr = ['马超','赵云','刘备','关羽','黄忠']; let del = arr.pop(); //删除最后一个元素 并返回该元素 原数组改变 let del = arr.shift(); //删除最前面一个元素 并返回该元素 原数组改变let arr = ['马超','赵云','刘备','关羽','黄忠']; // splice(起始位置(索引号),删除的个数) 删除个数为1时,删除本身;如果为2,删除本身和后面那个元 素,依次类推。如果只写一个值后面的全部删除。注意:返回一个新数组,原数组改变！ let del = arr.splice(1,2); //这句代码是,删除索引号为1的元素以及后面的一个元素。 console.log(del); // [赵云,刘备]; console.log(arr); // [马超,关羽,黄忠]
Function函数
为什么需要函数？------- 可以实现代码复用,提高开发效率
函数是什么？------ function执行特定任务的代码块
函数的使用
1.声明函数 function 函数名(){}
function sayHi(){ console.log('hi~ ~ ~'); }2.函数调用 函数名() ----函数不调用，自己不执行。
sayHi(); console.log(sayHi()); // hi~ ~ ~
函数的参数
函数传递参数的好处？------ 极大的提高了函数的灵活性
函数参数分为两类：形参和实参
函数声明时，小括号里面的是形参，形式上的参数，接收实参传来的参数
函数调用时，小括号里面的是实参，实际的参数
尽量保持形参和实参个数一致，参数之间用逗号隔开
function fn(x,y){ // x和y就是形参 console.log(x+y); // 3 } fn(1,2) // 1和2就是实参总结: 如果用户不输入实参，可以给 形参默认值，可以默认为 0, 这样程序更严谨;这个默认值只会在缺少实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined
函数的返回值 return
什么是函数的返回值? ------ 当调用某个函数，这个函数就会返回一个结果出来这就是有返回值的函数。
1.在函数体中使用 return能将内部的执行结果交给函数外部使用
function fn() { return 20; } let res = fn(); console.log(res); //202.调用者拿到了返回值（而且结果不一定一样，可以看求和案例）
function getSum(arrXc = []) { let sum = 0; for (let i = 0; i < arrXc.length; i++) { sum += arrXc[i] } return sum; } let res1 = getSum([1, 2, 3, 4, 5, 6]); let res2 = getSum([2, 3, 4, 5, 6, 7]); console.log(res1); //21 console.log(res2); //273. return 后面代码不会再被执行，会立即结束当前函数
function fn1(){ console.log('我是return上面的'); return 20; console.log('我是return下面的'); } console.log(fn1()); // '我是return上面的' 204.return 结果的时候不要换行写
function fn2(){ return 20; } console.log(fn2()); //undefined5. 函数可以不用 return，这种情况函数默认返回值为 undefined
function fn3(){ } console.log(fn3()); // undefinde6.如果函数有相同的名字，后面的覆盖前面
function fn4(){ console.log('我是fn4'); return 1111; } console.log(fn4()); // '我也是fn4' 2222 function fn4(){ console.log('我也是fn4'); return 2222; }
函数的作用域
全局作用域 --- 在script内部的就是全局作用域
局部作用域 --- for循环和函数的就是局部作用域
// 1.全局变量 全局拿不到局部的 let uname = 'zs'; function fn(){ // 2.局部变量 局部可以拿到全局的 let age = 18; console.log(uname); //zs } fn(); console.log(age); //报错变量的特殊情况
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐。
function fn(){ // 如果函数内部一个变量没声明直接赋值，当全局变量来看 num = 10; //全局变量来看 强烈不推荐 } fn(); console.log(num); // 10函数的形参也可以看做是函数局部变量
function fn1(x,y){ console.log(x); // 1 } fn1(1,2); console.log(x);// 报错变量的查找原则 --- 就近原则：先找当前作用域下的，如果没找到则依次向上寻找。
let num1 = 10; function fn2(){ let num1 = 20; console.log(num1); //20 } fn2();
匿名函数---函数表达式
函数表达式：let fn = function (参数1, 参数2) {}
具名函数和匿名函数的区别？
具名函数可以先使用后申明（因为函数不调用自己不会执行）
函数表达式必须先申明后使用
// 1. 函数表达式 fn(1, 2) //错误 let fn = function (x, y) { // console.log('我是函数表达式') console.log(x + y) } // 函数表达式和 具名函数的不同 function fn() {} // 1. 具名函数的调用可以写到任何位置 // 2. 函数表达式，必须先声明函数表达式，后调用 function fun() { console.log(1) } fun()
匿名函数---立即执行函数
为什么需要立即执行函数？------ 避免全局变量之间的污染
第一种写法 ( function (形参) {} ) (实参)
( function() {console.log('打我啊');} ) ();第二种写法 ( function (形参) {} (实参) );
( function() {console.log('别打我');} ());
对象的简介和使用
什么是对象
对象是一种数据类型
特点：无序的数据的集合，描述某个事物。
对象的使用
声明对象：
1.let 对象名字 = {}
2.let 对象名字 = new Object()
对象的操作
1.添加对象
对象名.属性名 = 属性值
对象名['属性名'] = 属性值
let zs = { uname:'张三', age:18, gender:'男' } zs.habby = '跳舞'; // zs['habby'] = '唱歌'; console.log(zs); //{uname: '张三', age: 18, gender: '男', habby: '跳舞'}2.修改对象
对象名.属性名 = 新的属性值
对象名['属性名'] = 新的属性值
// zs.age = 20; zs['age'] = 20; // console.log(zs); //{uname: '张三', age: 20, gender: '男'}3.查询对象
对象名 --- 查询全部
对象名.属性名 --- 查询单个
对象名['属性名'] --- 查询单个
console.log(zs); //查全部 // console.log(zs.uname); //查单个 // console.log(zs['uname']); //查单个4.删除对象
delete 对象名.属性名
delete zs.gender; // console.log(zs); //{uname: '张三', age: 18}
遍历对象
遍历对象的语法
for (let 属性名 in 对象名) {}
遍历对象的使用
for in 不推荐遍历数组
let arr = ['三国演义','西游记','红楼梦','水浒传'] for (let k in arr) { console.log(k) // 数组的下标 索引号 但是是字符串 '0' console.log(arr[k]) // arr[k] }遍历对象 for in(为什么不用for遍历对象，无需没有索引)
let obj = { uname: '张三', age: 18, gender: '男' } for (let k in obj) { console.log(k) // 属性名 'uname' 'age' 'gender' console.log(obj[k]) // 输出属性值 obj[k] }
数学内置对象
Math.ceil() 向上取整 --- 取比自身大的
Math.floor() 向下取整 --- 取比自身小的
Math.random() 生成0-1之间的随机数 [0,1)
随机数函数
生成0 ~ 10的随机数
Math.floor(Math.random() * (10 + 1)); 用Math.floor()是因为随机数生成的全是小数,所以要向下取整,加1是因为随机数的区间是左闭右开。
生成5 ~ 10的随机数
Math.floor(Math.random() * (5 + 1)) + 5;
生成N-M之间的随机数
Math.floor(Math.random()*(max - min + 1)) + min
function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min } console.log(getRandom(5, 20))随机数组中的元素
Math.floor(Match.random()*数组长度);
let arr = ['red', 'green', 'blue'] let random = Math.floor(Math.random() * arr.length) console.log(arr[random])
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
