JavaScript基础内容
关于js
js输出
//js输出：
// prompt('这是一个网页弹窗输入框');
// alert('弹出警示框');
// console.log('控制台输出打印信息，测试使用');
js变量
//变量
//1.声明变量并赋值，即变量初始化： var age=18; var name='name';自动分配内存空间
// 常用变量名：
// var name = prompt("请输入你的名字"); //prompt所取值是字符型
// alert(name);
//只声明不赋值则：未定义undefined
//不声明不赋值直接使用会报错
//变量命名规范：字母数字下划线美元符 首字母小写后面单词大写
// //
// var temp;
// var app1=1;
// var app2=2;
// temp=app1;
// app1=app2;
// app2=temp;
// js的变量数据类型由值确定，与变量名无关；
// js是动态语言，变量数据类型可变；
// 数据类型： 默认值
// Number 0
// （八进制（以0开头）；十六进制（以0x开头） 数字型最大值alert(Number.MAX_VALUE);最小值alert(Number.MIN_VALUE); 无穷大alert(Infinity);无穷小alert(-Infinity); NaN代表一个非数值；
// isNaN()是数字返回true，否则false）
// String
// 字符串转义；console.log(str.length);
// 字符串拼接：数值相加，字符相连；
// var age=prompt('请输入您的年龄');
// var str='您今年'+age+'岁';
// alert(str);
// 输出数据类型：conole.log(typeof str);
// 数据类型转换：toString()转成字符串 var num=2;alert(num.toString());
// String()强制转换 var num=1;alert(String(num));
// 加号拼接字符串
// conole.log(parseInt(age));字符型转换为数字型，取整
// 去掉单位parseInt('120px'); 120
// parseInt('rem120px'); NaN
// parseFloat('age'); 取小数
// 数字型强制转换Number(str);
// 例1：
// var year = prompt('请输入您的出生年份');
// alert('您今年' + (2020 - year) + '岁了');
// 例2：
// var num1 = prompt('请输入第一个数');
// var num2 = prompt('请输入第二个数');
// alert('您的结果是' + (Number(num1) + Number(num2)));
标识符及运算符
// 标识(zhi)符，关键字，保留字
// 运算符oprerator
// + 加 - 减 * 乘 / 除 % 取余
// 浮点数直接运算会出现误差，也不能进行等值比较，一般化为整数后运算
// num++;
// var e = 10;
// var f = e++ + ++e; //e++=10 e=1 e=12 ++e=12
// console.log(f); //22 e++遇到+使用e值后便自增，不用等到分号
// console.log(18 == '18'); //true 默认转换数据类型，会把字符串型转换为数字型
// console.log(18 === '18'); //false ===全等于 数据类型与数据要完全相同
// 逻辑与 &&
// 逻辑或 ||
// console.log(123 && 456); //456
// 存在逻辑中断
// 运算优先级 先 && 后 ||
分支和循环
// var age = prompt('请输入年龄：');
// if (age > 18) {
// alert('ok');
// }
// 三元表达式 ？ ：
// var time = prompt('0~59');
// result = time < 10 ? '0' + time : time;
// switch(num){
// case value1: ;break;
// case value2: ;break;
// default: ;
// // num===value1才匹配
// }
// for (var i = 1; i <= 100; i++) {
// console.log('1');
// }
// 断点调试
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// console.log(sum += i);
// }
// 打印几行几列星星
// var x = prompt('请输入打印星星的行数');
// var y = prompt('请输入打印星星的列数');
// var str = '';
// for (var i = 1; i <= x * y; i++) {
// str += '☆';
// if (i % y == 0) {
// str += '\n';
// }
// }
// console.log(str);
// var rows = prompt('请输入打印星星的行数');
// var cols = prompt('请输入打印星星的列数');
// var str = '';
// for (var i = 1; i <= rows; i++) {
// for (var j = 1; j <= cols; j++) {
// str += '☆';
// }
// str += '\n';
// }
// console.log(str);
//单循环打印倒三角形未实现
// var xin = prompt('请输入打印行数');
// var num = xin;
// var str = '';
// for (var i = 1; i <= xin * (xin + 1) / 2; i++) {
// str += '☆';
// if (i == num) {
// var j = i - num;
// str += '\n';
// num--;
// }
// }
// 双重循环打印倒三角形
// var xin = prompt('请输入打印行数');
// var str = '';
// for (var i = 1; i <= xin; i++) {
// for (var j = i; j <= xin; j++) {
// str += '☆';
// }
// str += '\n';
// }
// console.log(str);
// 九九乘法表
// var str = '';
// for (var i = 1; i <= 9; i++) {
// for (var j = 1; j <= i; j++) {
// str += j + '*' + i + '=' + i * j + ' ';
// }
// str += '\n';
// }
// console.log(str);
// var message = '我爱你';
// while (message !== '我爱你') { //当 为真则重复执行，为假退出
// prompt('你爱我吗');
// }
// do {
// prompt('你爱我吗');
// } while (message !== '我爱你') //直到 为真重复执行，为假退出
// continue 退出当前次循环，通常结合if使用
// break 退出整个循环，循环结束
数组
// 命名规范
// var arr = new Array();
// var arr = [];
// 遍历数组：
// var arr = [1, 2, 3, 4, 5];
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// 找出最大数
// var num = [2, 4, 1, 9, 5, 7];
// var max = num[0];
// for (var i = 0; i < num.length; i++) {
// if (max < num[i]) {
// max = num[i];
// }
// }
// console.log(max);
// 1.数组新增元素 修改length长度 arr.length+=s; 新增元素为empty空 undefined
// 2.直接追加 arr[4]='num';
// var arr = [1, 2];
// arr[arr.length] = 3;
// console.log(arr.length);
// console.log(arr);
// var arr = [];
// for (var i = 0; i < 10; i++) {
// arr[i] = i + 1;
// }
// 冒泡排序
// var num = [2, 4, 1, 9, 5, 7];
// for (var i = 0; i < num.length; i++) {
// for (var j = 0; j < num.length - i-1; j++) {
// if (num[j] > num[j + 1]) {
// var temp = num[j];
// num[j] = num[j + 1];
// num[j + 1] = temp;
// }
// }
// }
// console.log(num);
函数
//累加函数
// function getSum(start, end) { //形参，仅代表一个未知数，用来接收实参的数用于计算，不需声明
// var sum = 0;
// for (var i = start; i <= end; i++) {
// sum += i;
// }
// console.log(sum);
// }
// getSum(1, 100); //实参，给定值 多余舍弃取前面有效的，少于形参个数则定义为undefined，结果NaN
// var get = function () { //匿名函数
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// return sum; //return后面的语句不执行，且只能返回一个值，返回多个值用数组 没有return则返回undefined
// }
// console.log(get()); //这里犯了一个错误，之前get没有加括号，导致输出的是打印函数代码，这里的get此时已经作为函数对象而不是数，所以需要用调用函数的方法使用
// //求最大值
// function getArrMax(arr) {
// var max = arr[0];
// for (var i = 1; i < arr.length; i++) {
// if (arr[i] > max) {
// max = arr[i];
// }
// }
// return max;
// }
// var array = [5, 3, 6, 7];
// var re = getArrMax(array);
// console.log(re);
//arguments的使用
//arguments是一个伪数组，用于存储所有传递过来的实参
// 1. 具有数组的length属性
// 2. 按照索引的方式进行存储
// 3. 没有真正数组的pop(),push()等方法
// arguments 此时为数组的数据类型
// arguments.length
// arguments[2]
// 按照数组的方式遍历
// for(var i=0;i<arguments.length;i++){
// console.log(arguments[i]);
// }
//利用函数翻转任意数组 reverse 翻转
// function reverse(arr) {
// var newArr = [];
// for (var i = arr.length - 1; i >= 0; i--) {
// newArr[newArr.length] = arr[i];
// }
// return newArr;
// }
// var arr1 = [2, 6, 3, 8, 4];
// var re = reverse(arr1);
// console.log(re);
//求闰年
// function isRunYear(year) {
// var flag = false;
// if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
// flag = true;
// }
// return flag;
// }
// console.log(isRunYear(2000));
// function backDay(){
// var year=prompt('请输入年份');
// if(isRunYear(year)){
// console.log(29);
// }else{
// console.log(28);
// }
// }
作用域
//作用域
//var声明作用域
// 未声明时作为全局变量
// 执行效率：
// 1.全局变量只有浏览器关闭时才会销毁，比较占内存资源 任何地方都可使用
// 2.局部变量当我们程序执行完毕就会销毁，比较节约内存资源 只能在函数内部使用
// es6新增块级作用域{}
// 花括号外面的不能调用里面的
// 作用域链
// 内部函数可以访问外部函数的变量， 由内而外，就近原则
// 预解析 + 代码执行
// 预解析js引擎会把js里所有的 var 与 function 提升到当前作用域的最前面
// 变量预解析：只提升变量声明，不提升赋值操作；
// 函数预解析：同理
// var a = b = c = 9; 相当于var a = 9; b = 9; c = 9; 此时b和c是全局变量
对象
//对象
//包括属性和方法 ：用逗号
// var object = {
// uname: 'zzh',
// sex: '男',
// sayHi: function () {
// console.log(s); //s未定义 undefined
// console.log('hi'); //输出hi
// }
// }
// object.属性名 = "属性值"; //添加属性 属性名可以为汉字
// object['属性名'] = "属性值"; //添加属性
// console.log(object.sex); // 得到属性值
// console.log(object['sex']); //得到属性值
// console.log(object.属性名);
// console.log(object);
// object.sayHi();
//第二种创建对象的方法 =用分号
// var obj = new Object();
// obj.uname = 'zz';
// obj.age = 20;
// obj.sayHi = function () {
// }
// 构造函数 构造函数名首字母大写
// function Star(uname, age, sex) {
// this.name = uname;
// this.age = age;
// this.sex = sex;
// this.sing = function (song) {
// console.log(song);
// }
// }
// var ldh = new Star('刘德华', 18, '男'); //利用构造函数创建对象
// ldh.sing('ss');
// new关键字执行过程：
// 1.在内存中创建一个新的空对象；
// 2.this指向这个新对象；
// 3.执行构造函数里的代码，给新对象添加属性和方法；
// 4.返回新对象。
// 遍历对象
// for (k in obj) { //一般用k 或key
// console.log(k); //得到的是属性名
// console.log(obj[k]); //得到的是属性值
// }
内置对象
- Math数学对象
//内置对象
//三大对象：自定义对象，内置对象，浏览器对象
//前两个属于ECMAScript
// // Math数学对象 直接使用
// console.log(Math.PI); //圆周率
// console.log(Math.max(3, 5, 7)); // 7
// console.log(Math.max(3, 's')); //NaN
//自己封装数学对象
// var myMath = {
// PI: 3.141592653,
// max: function () {
// var max = arguments[0];
// for (var i = 1; i < arguments.length; i++) {
// if (arguments[i] > max) {
// max = arguments[i];
// }
// }
// return max;
// },
// min: function () {
// var min = arguments[0];
// for (var i = 1; i < arguments.length; i++) {
// if (arguments[i] > min) {
// min = arguments[i];
// }
// }
// return min;
// }
// }
// console.log(myMath.max(1, 5, 7));
// Math常用方法 含隐式转换
// Math.PI //圆周率
// Math.floor() //向下取整 1.1取1
// Math.ceil() //向上取整 1.1取2
// Math.round() //四舍五入，就近取整 -3.5得-3
// Math.abs() //绝对值
// Math.max() /Math.min() //最大最小值
// 随机数
// Math.random(); 返回一个随机小数 [0,1)
// 包含端点的随机整数
// Math.floor(Math.random() * (max - min + 1)) + min
// 随机数函数
// function getRandom(min, max) {
// return Math.floor(Math.random() * (max - min + 1)) + min;
// }
// console.log(getRandom(1, 10));
// 猜数字游戏
// var random = getRandom(1, 10);
// var i = 0;
// while (1) {
// var num = prompt('请输入一个数字');
// if (num > random) {
// alert('你猜大了,还有' + (2 - i) + '次机会');
// } else if (num < random) {
// alert('你猜小了,还有' + (2 - i) + '次机会');
// } else {
// alert('恭喜你，猜对了');
// break;
// }
// i++;
// if (i >= 3) {
// alert('游戏结束');
// break;
// }
// }
- Data日期对象
// Data()日期对象 是一个构造函数，必须使用new调用创建日期对象
// var date = new Date(); //有参数则返回参数时间 '2020-8-4'或'2020/8/4' 字符串形式
// var year = date.getFullYear();
// var month = date.getMonth() + 1; //返回月 0-11
// var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
// var day = date.getDay(); // 1-6 星期日为 0
// var oneday = arr[day];
// var hour = date.getHours();
// var h = hour < 10 ? '0' + hour : hour;
// var min = date.getMinutes();
// var s = date.getSeconds();
// console.log(date);
//返回当前时间函数
// function getTimer() {
// var hour = date.getHours();
// var hour = hour < 10 ? '0' + hour : hour;
// var min = date.getMinutes();
// var min = min < 10 ? '0' + min : min;
// var s = date.getSeconds();
// var s = s < 10 ? '0' + s : s;
// return hour + ':' + min + ':' + s;
// }
// console.log(getTimer());
//时间戳
// var date = new Date();
// //第一种方法
// console.log(date.valueOf()); //获取现在距离1970年1月1日过的毫秒数
// //第二种方法
// console.log(date.getTime()); //valueOf()与getTime效果相同
// //第三种方法
// var date1 = +new Date();
// //第四种方法 H5新增
// console.log(Date.now());
// 时分秒转换公式
// d = parseInt(总秒数 / 60 / 60 / 24); //计算天数
// h = parseInt(总秒数 / 60 / 60 % 24); //计算小时
// m = parseInt(总秒数 / 60 % 60); //计算分钟
// s = parseInt(总秒数 % 60); //计算当前秒数
//封装倒计时函数
// function countDown(time) {
// var nowTime = +new Date();
// var inputTime = +new Date(time);
// var times = (inputTime - nowTime) / 1000; //1秒=1000毫秒
// d = parseInt(times / 60 / 60 / 24); //计算天数 取整parseInt()
// d = d < 10 ? '0' + d : d;
// h = parseInt(times / 60 / 60 % 24); //计算小时
// h = h < 10 ? '0' + h : h;
// m = parseInt(times / 60 % 60); //计算分钟
// m = m < 10 ? '0' + m : m;
// s = parseInt(times % 60);
// s = s < 10 ? '0' + s : s;
// return d + '天' + h + '时' + m + '分' + s + '秒';
// }
// console.log(countDown('2020-12-1 14:00:00'));
- 数组对象
// 数组对象
// 1.字面量创建数组
// var srr=[1,2,3];
// 2.
// var arr1=new Array(2); 2表示数组长度为2，有两个空元素
// var arr2=new Array(2,4); 等价于[2,4]
//利用函数翻转任意数组 reverse 翻转
// function reverse(arr) {
// if(arr instanceof Array){
// var newArr = [];
// for (var i = arr.length - 1; i >= 0; i--) {
// newArr[newArr.length] = arr[i];
// }
// return newArr;
// }else{
// return 'error';
// }
// }
// var arr1 = [2, 6, 3, 8, 4];
// var re = reverse(arr1);
// console.log(re);
// 检测是否为数组
// 1.instanceof运算符
// console.log(arr instanceof Array);
// 2.Array.isArray() H5新增，ie9以上支持
// console.log(Array.isArray(arr));
//添加删除数组元素方法
//1.push() //推，在数组末尾添加数组元素
// var arr = [1, 2, 3, 4];
// arr.push(4, 5, 6);
// console.log(arr.push(4, 5, 6)); // push完毕后会返回新的数组长度 此例为7
// console.log(arr);
// // 2.unshift //在数组开头添加数组元素
// console.log(arr.unshift(0, 10)); //unshif也有返回值，同push
// //3.pop() //删除最后一个元素，不跟参数，一次只能一个
// console.log(arr.pop()); // pop完毕后会返回删除的元素
// //4.shift() 删除第一个元素 一次一个，有返回值，不带参数
// console.log(arr.shift());
// 数组排序
// var arr=[1,3,5,7];
// arr.reverse(); //翻转
// console.log(arr);
// var arr1=[3,6,13,2,4];
// arr1.sort(function(a,b){
// return a-b; //升序排列
// // return b-a; //降序排列
// });
// console.log(arr1);
//数组索引
// var arr=[1,2,3,4];
// console.log(arr.indexOf(2)); //返回该元素索引号，只返回第一个，找不到则返回-1
// console.log(arr.lastIndexOf(3)); //从后往前查找
//数组去重（重点）
// function unique(arr) {
// var newArr = [];
// for (var i = 0; i < arr.length; i++) {
// if (newArr.indexOf(arr[i]) === -1) {
// newArr.push(arr[i]);
// }
// }
// return newArr;
// }
// var arr = ['c', 'a', 'x', 'a', 'c', 'z'];
// console.log(unique(arr));
// //数组转换为字符串
// var arr = [2, 5, 4];
// console.log(arr.toString());
// console.log(String(arr));
// //可自定义分隔符的转换字符串
// console.log(arr.join('&'));
// //concat() 连接两个或多个数组，不影响原数组 返回新数组
// const array1 = ['a', 'b', 'c'];
// const array2 = ['d', 'e', 'f'];
// const array3 = array1.concat(array2); //连接多个数组 array2,array3,array4
// console.log(array3);
// //slice() 数组截取
// const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
// console.log(animals.slice(2)); //从索引号2起往后截取，包括2
// // expected output: Array ["camel", "duck", "elephant"]
// console.log(animals.slice(2, 4)); // 包括2不包括4
// // expected output: Array ["camel", "duck"]
// console.log(animals.slice(1, 5));
// // expected output: Array ["bison", "camel", "duck", "elephant"]
//splice() 数组删除
//待续
//
//p176
- 遍历操作基础
//基本包装类型：把简单数据类型包装成为复杂数据类型，复杂数据类型如对象 才有属性和方法；
// var str = 'str';
// console.log(str.length);
// //如同
// var temp = new String('str');
// str = temp;
// temp = null;
// //字符串的不可变
// var str = 'red';
// console.log(str);
// str = 'pink'; //此时是重新开辟了一个空间存放pink，然后让str指向pink，原来的red空间仍然存在
// console.log(str);
//字符串所有的方法都不会修改字符串本身，操作完成会返回一个新字符串
//str.indexOf('要查找的字符串',[起始位置])
//查找字符串中某个字符出现的次数
// var str = 'sidjfhffosjdf';
// var num = 0;
// var index = str.indexOf('f'); //从第一个开始找，得索引值
// while (index !== -1) { //找到了则执行
// console.log(index); //打印索引值
// num++;
// index = str.indexOf('f', index + 1); //索引值+1了继续找，找到又得到索引值
// }
// console.log('f出现的次数是：' + num);
//查找数组中值出现的次数
// var color = ['red', 'blue', 'red', 'green', 'pink', 'red'];
// var index = color.indexOf('red');
// var n = 0;
// while (index !== -1) {
// console.log(index);
// n++;
// index = color.indexOf('red', index + 1);
// }
// console.log('red出现的次数是：' + n);
// //根据索引号返回字符
// var str = 'pink';
// console.log(str.charAt(2));
// //遍历所有字符
// for (var i = 0; i < str.length; i++) {
// console.log(str.charAt(i));
// }
// //返回根据索引号返回字符的ASCII码
// console.log(str.charCodeAt(2));
// //获取索引号位置处字符 HTML5，IE8 + 支持 同charAt
// console.log(str[2]);
//统计出现最多的字符和次数
// var str = 'abskbdaadsf';
// var obj = {};
// for (var i = 0; i < str.length; i++) {
// var ss = str.charAt(i);
// if (obj[ss]) {
// obj[ss]++;
// } else {
// obj[ss] = 1;
// }
// }
// console.log(obj);
//console.log(obj);
//这里有一个关键点：
//首先两种添加属性的方法
// obj.属性名 = "属性值";
// obj['属性名'] = "属性值";
//下列是第二种写法，大同小异：
// var str = 'abskbdaadsf';
// var obj = {};
// for (var i = 0; i < str.length; i++) {
// var ss = str.charAt(i);
// if (obj[str.charAt(i)]) {
// obj[str.charAt(i)]++;
// } else {
// obj[str.charAt(i)] = 1;
// }
// }
// console.log(obj);
// console.log(obj[ss]); //1
// console.log(obj['ss']); //undefined
// console.log(obj.ss); //undefined
// 这里主要看下面三者的区别，三种都是输出属性值，但写法不同，使用也截然不同
// console.log(obj[ss]); 这里的ss是变量名，先返回他的值作为obj的属性值
// console.log(obj['ss']); 这里的ss是属性名，本身是变量也会直接将ss作为obj的属性值，不会考虑其变量值
// console.log(obj.ss); 这里ss也是直接属性名，不会考虑其是否为变量
// 因此，在利用属性名求其属性值时，
// 1.确定属性名时用上面三种均可；
// 2.当属性名是包含函数公式时，先赋值给变量，然后将变量使用obj[变量]
// 其他方法比如直接将表达式代入行不通，此时会把表达式当做直接属性名
遍历对象
//遍历对象
// var max = 0;
// var ch = '';
// for (var k in obj) {
// //k得到的是属性名
// //obj[k]得到的是属性值
// if (obj[k] > max) {
// max = obj[k];
// ch = k;
// }
// }
// console.log(max);
// console.log('最多的字符是' + ch);
// 字符串操作
// 字符串拼接
// concat(str1,str2,str3); +更常用
// 字符串截取
// str.substr('截取起始位置(包括起点)索引号','截取几个字符');
// 字符串替换
// var str='aeiou';
// console.log(str.replace('a','b')); //将a替换为b，替换一个后停止
// 替换多个
// var str1='asfghff';
// while(str1.indexOf('f')!==-1){
// str1=str1.replace('f','*');
// }
// console.log(str1);
// split字符转换为数组 join数组转换为字符串
// var str2='red,pink,blue';
// console.log(str2.split(',')); //逗号为分隔符，字符串必须有分隔符才能转换
// 转换大小写
// toUpperCase() //转换大写
// toLowerCase() //转换小写
// 简单类型和复杂类型
// 简单类型又叫基本数据类型或值类型，
// string,number,boolean,undefined,null null返回的是一个空对象object
// 复杂类型又叫引用类型
// Object,Array,Date
// 栈 类似于数据结构栈，存放简单数据类型
// 堆 存放复杂数据类型
// 数据传参是重点，具体见pink老师js基础语法最后一节内容，赞！
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
