// 交换两个变量的值 var a = 10; var b = 20; console.log('交换前', a, b); // //方法一:借助第三个变量 // var temp = a; //a:10 b:20 // a = b; //a:20 b:20 // b = temp; //a:20 b:10 // console.log('交换后', a, b);
// //方法二:不允许使用第三个变量 // a = a + b; //a:30 b:20 // b = a - b; //a:30 b:10 // a = a - b; //a: 20 b:10 // console.log('交换后', a, b);
var name; console.log(name); //空字符串，因为name比较特殊，window上有一个默认的name:"" var message; console.log(message); //undefined
//可以这样，但是不推荐 var info = undefined; //一般初始化的时候 var num = 0; var str = ''; var obj = {};
Object 类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
//1.Object类型的基本使用 // var name = 'alex'; // var age = 18; // var height = 2.9; var person = { name: 'alex', age: 18, height: 2.9, isAdult: true, }; console.log(person); //2.对象类型中的某一个属性 console.log(person.name); var msg = 'hello world!'; console.log(msg.length); //包装成一个对象 .去拿到他的length属性值
Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型
语法:var 变量名={key:value,key:value...}
Null 类型
1 2 3 4 5 6 7 8 9 10
//1.其他类型的初始化 var age = 0; var str = ''; var isAdmin = false; var person = null; // 在初始化对象的时候，我们不建议初始化为{}，建议初始化为null //Null 存在的意义 就是对对象来初始化的，而且在转成布尔值的时候会转成false if (person) { console.log('分支语句不会执行'); }
Null 类型只有一个值 null 通常用来初始化对象/释放内存
数据类型的转换
隐式转换：大多数情况下，运算符和函数会自动转换类型 显示转换：我手动做一些操作来转换
字符串 String 的转换
1 2 3 4 5 6 7 8 9 10 11
var num1 = 123; var age = 18; var isAdmin = true; // 1.隐式 var num1Str = num1 + ''; var ageStr = age + ''; var isAdminStr = isAdmin + ''; console.log(typeof num1Str); //2.显示 var numStr2 = String(num1); console.log(numStr2, typeof numStr2);
隐式: 一个字符串和另一个进行+操作
显式: String(你要转换的变量) toString() 后续学
数字 Number 的转换
1 2 3 4 5 6 7 8 9 10 11 12 13 14
//隐式 var num1 = '8'; var num2 = '4'; var res = num1 + num2; console.log(typeof res); //string var res2 = num1 * num2; console.log(typeof res2); //number //显示 Number() console.log(Number(undefined)); //NaN console.log(Number(true), Number(false)); //1 ,0 console.log(Number(null)); //0 console.log(Number('abc123')); //NaN console.log(Number(' 123 ')); //234 console.log(Number('')); //0
隐式：在算数运算中 除开+运算以及一边有字符串 其他都是转数字
显式:Number()以及规则
Boolean 的转换
1 2 3 4 5 6 7 8
//隐式 //1.分支语句 //显示 Boolean() console.log(Boolean('')); //false console.log(Boolean('0')); //true //个人技巧 - 双取反转布尔 var info = 'hahahah'; console.log(!!info);
var result = condition ? value1 : value2; 计算结果，如果condition为真则返回value1，如果为假则返回value2
案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
// 案例一：比较两个数字 var num1 = 123; var num2 = 123212; //三元运算符 var result = num1 > num2 ? num1 : num2; console.log(result); //案例二：输入年龄判断是否成年 var age = prompt('请输入您的年龄'); age = age - 0; var message = age >= 18 ? '成年人' : '未成年'; alert(message); //案例三(了解) 给变量赋默认值 var info = { name: 'alex', }; var obj = info ? info : {};
逻辑运算符
认识逻辑运算符
主要是三个符号 ||(或) &&（与） !（非）
运算符
运算规则
范例
结果
&&
与:同时为真
true&&true
True
||
或:一个为真
true||false
True
!
非：取反
!false
True
有了逻辑运算符，我们就可以在判断语句中书写多个条件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
var chineseScore = 88; var mathScore = 99; //1.逻辑与：&& 并且 //条件1&&条件2&&条件3... if (chineseScore > 90 && mathScore > 90) { console.log('去长隆'); } //2.逻辑或 || 或者 if (chineseScore > 90 || mathScore > 90) { console.log('打一个小时游戏～'); } //3.逻辑非 ! 取反 var isLogin = true; if (!isLogin) { console.log('引导他跳去登陆页登陆'); } console.log('正常访问页面');
逻辑或的本质
||表示或运算符(短路或) res = a||b 从左到右计算操作数 处理每一个操作数的时候，都将其转化为布尔值 如果结果是 true，就停止计算，返回这个操作数的初始值 如果所有的操作数的结果都是 false，则返回最后一个操作数的初始值
//1～100内所有偶数 打印出来 // var n = 1; // while (n <= 100) { // if (n % 2 === 0) console.log(n); // n++; // } //优化 // var n = 2; // while (n <= 100) { // console.log(n); // n += 2; // }
do…while 循环
do…while 的特点是不管条件成立与否，do 循环体都会先执行一次
1 2 3 4 5 6 7 8 9
do { //循环体 } while (循环条件);
var num = 1000; do { console.log('我执行了一次'); num++; } while (num < 10);
练习
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
//打印10次hello world var n = 0; do { console.log('hello world'); n++; } while (n < 10); //计算0～10的数字和 var count = 0; var sum = 0; do { sum += count; count++; } while (count <= 10); console.log(sum); //1+...+10 55 /* count 0 1 2 ... 8 9 10 sum 0+0 0+0+1 1+2 ... 1+2+...+8 1+..+9 1+...+10 */
for 循环(重点)
for 循环看上去更加复杂，但是他是最常用的循环形式 语法for(初始变量;条件判断;步长){代码}
//我们在开发的时候，可能会要去挨个的拿到里面的每个key以及对应的value var person = { name: 'alex', age: 18, height: 2.88, }; // console.log(`key:${'name'},value:${person.name}`); // console.log(`key:${'age'},value:${person.age}`); //Object.keys(person)返回对象的自己的可枚举属性组成的数组 //Object.definePorperty Proxy console.log(Object.keys(person)); //对对象进行遍历 var personKeys = Object.keys(person); for (var i = 0; i < personKeys.length; i++) { //personKeys[i]通过索引去拿数组里面的东西 var key = personKeys[i]; //通过数组关联语法去拿对象的东西 var value = person[key]; console.log(`key:${key},value:${value}`); } //2.for...in遍历对象 for (var k in person) { console.log(k); //key是键名 // console.log(key); // console.log(`key:${key},value:${person[key]}`); } //对象无序 数组有序 //for...of... 默认是不能遍历对象的 for (var foo of person) { console.log(foo); }
js 的内存分配(!important)
程序是需要加载到内存中来执行的，内存就可以划分为两个区域:栈内存，堆内存
原始类型占据的空间是在栈内存中分配的
对象类型占据的空间是在堆内存中分配的
原始类型的保存方式:保存的是值本身
对象类型的保存方式:保存的是对象的”引用”
函数本身是放到堆内存的，但是函数的执行是放到栈里面的。
1 2 3 4 5 6 7 8 9 10 11 12
var name = 'jack'; var age = 18; var obj = { foo: 'foo', bar: 123, }; var message = 'hello' + name; var info = obj; info.bar = 456; //我们想要修改的是info的bar属性 //结果发现obj的bar也变了 console.log(obj);
思考如下现象
两个对象的比较
1 2 3 4 5 6 7 8 9
var num1 = 123; var num2 = 123; console.log(num1 === num2); //true //两个对象的比较 var obj1 = {}; var obj2 = {}; console.log(obj1 === obj2); //false console.log(obj1 == obj2); //false //从内存的角度去解释
引用传递的内存表现
1 2 3 4 5 6 7 8 9 10
//2.引用的赋值 var info = { name: 'jack', friend: { name: 'alex', }, }; var friend = info.friend; //{name:'alex'} friend.name = 'dog'; console.log(info.friend.name); //
值传递
1 2 3 4 5 6 7 8 9 10 11 12 13
//3.值传递 functionfoo(a) { a = 200; } var num = 100; foo(num); console.log(num); //100
// function sum(a, b) { // console.log(a + b); // } // sum(10, 20); // sum(100, 200);
var dogs = ['二哈', '边牧', '柯基']; //1. 普通的for遍历 for (var i = 0; i < dogs.length; i++) { //i索引 //dogs[i]元素 console.log(dogs[i]); } //2. for...in遍历 for (var index in dogs) { console.log(dogs[index]); } //3. for...of遍历 for (var item of dogs) { console.log(item); }
8 数组方法
8.1 slice
arr.slice 用于对数组进行截取(和字符串的类似) arr.slice(begin[,end]) 包含 begin 元素但是不包含 end
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
var dogs = ['二哈', '边牧', '柯基', 'alex', 'jack', 'tom']; //slice方法，不回修改原数组 //splice会修改原有的数组 //start从什么地方开始 //end结束为止 var res = dogs.slice(2, 4); console.log(res); console.log(dogs); //不传任何参数，把原数组复制一份给我们 var res1 = dogs.slice(); console.log(res1); //填负数 var res2 = dogs.slice(1, -2); console.log(res2); // ['边牧', '柯基', 'alex'] //故意找茬 var res3 = dogs.slice(1, 1); console.log(res3); // []
var arr = ['hello', 'world']; var res = arr.concat('新来的'); var res1 = arr.concat('又一个新来的', [100, 200]); console.log(res, res1); var name1 = ['abc', 'cba']; var name2 = ['alex', 'tom']; console.log(name1.concat(name2));
8.3 join
把数组的所有元素连接成一个字符串并返回这个字符串 arr.join([连接符])
功能相反的一个字符串方法str.split([连接符])
1 2 3 4 5 6 7 8 9 10 11 12 13
var arr = [10, 20, 30, 40]; console.log('原始数组', arr); //不传任何连接符，默认使用逗号 var res = arr.join(); console.log(res); var res1 = arr.join('-'); console.log(res1); var res2 = arr.join(''); console.log(res2); //10203040 var res3 = arr.join('^.^'); console.log(res3); var str = 'get-element-by-id'; console.log(str.split('-')); //['get', 'element', 'by', 'id']
//喇叭花数 100～999的一个数，abc = a!+b!+c! //我们首先需要一个阶乘器 functionjc(n) { var result = 1; for (var i = 1; i <= n; i++) { result *= i; } return result; } console.log(jc(0)); //穷举100～999的所有数字 for (var i = 100; i <= 999; i++) { var str = i.toString(); //转成字符串 var a = Number(str[0]); //第一位 var b = Number(str[1]); var c = Number(str[2]); if (jc(a) + jc(b) + jc(c) === i) { console.log(i); } }
字符串的遍历
方式一:for 循环 方式二:for…of
1 2 3 4 5 6 7 8 9 10 11
var msg = 'alex'; //for遍历 for (var i = 0; i < msg.length; i++) { console.log(msg[i]); } //for...of->可迭代 //两个可迭代：字符串 数组 //String对象内部是将字符串变成了一个可迭代的 for (var char of msg) { console.log(char); }
修改字符串
字符串的不可变
1 2 3 4 5 6 7 8
var msg = 'Alex'; console.log(msg[0]); //a //字符串的不可更改性 msg[0] = '1232131231231231'; console.log(msg); //blex //大小写转换 console.log(msg.toLowerCase()); //小写 console.log(msg.toUpperCase()); //大写 ALEX
查找字符串
方法一:indexOf indexOf(你要查找的字符,开始查找的位置) indexOf(searchString,position) position 是可选的，不写的时候，从索引为 0 的位置开始查找
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
//方法一 查找字符串的位置 /* str.indexOf(serachString,[position]) */ var msg = 'my name is alex,我喜欢ikun'; console.log(msg.indexOf('alex')); //11 返回的是索引 var name = 'alex'; console.log(msg.indexOf(name, 18)); //-1 console.log(msg.indexOf('dog')); //-1 找不到给你返回-1 var index = msg.indexOf(name); if (index !== -1) { console.log('变量msg中有变量name'); } else { console.log('没有找到'); }
//方法二 es6新增的 是否包含字符串 /* str.includes(searchString,position) position可以省略 */ var msg = 'my name is alex,我喜欢ikun'; var name = 'alex'; console.log(msg.includes(name)); //true console.log(msg.includes('alex.')); //false
开头和结尾
startsWith(你要的字符)
endsWith(你要的字符)
1 2 3 4 5 6 7 8 9
var msg = 'my name is alex,我喜欢ikun'; var name = 'alex'; if (msg.startsWith('my')) { console.log('msg是以my开头的'); } if (msg.endsWith('ikun')) { console.log('msg是以ikun结尾的'); } console.log(msg.startsWith(name)); //false
var msg = 'my name is alex'; console.log(msg.replace('alex', 'ikun')); msg = msg.replace('alex', 'ikun'); var name = 'tom'; //函数的情况 var msg2 = msg.replace('ikun', function () { return name.toUpperCase(); //TOM }); console.log(msg2);
截取字符串
slice(start,end) 从 start 到 end (不包含 end) 允许负值
substring(start,end) 从 start 到 end (不包含 end) 不允许负值(负值代表 0)
var arr = [10, 20, 30, 40, 50]; //1. 求数组内所有元素的和 var sum = 0; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); sum += arr[i]; } console.log(sum); //2. 求arr内的最大的数 //假设max是最大的 var max = arr[0]; for (var i = 0; i < arr.length; i++) { //一次和max进行比较，比他大就赋值给max，其他情况不变 if (arr[i] > max) { max = arr[i]; } //简写 // max = arr[i] > max ? arr[i] : max; } console.log(max); //3. 求arr1内最小的数字的索引 var arr1 = [100, 200, 1994, 1, 12, 23]; //设minIndex是最小数的索引 arr1[minIndex] var minIndex = 0; for (var i = 0; i < arr1.length; i++) { if (arr1[i] < arr1[minIndex]) { minIndex = i; } } console.log(minIndex); //4. 循环得到一个10～20的所有整数，并且放到数组里面 var newArr = []; for (var i = 10; i <= 20; i++) { //10 11 12 13 14 15...20 //0 1 2 3 //方法一:利用i和索引的关系 // newArr[i - 10] = i; //方法二:利用索引添加 newArr[newArr.length] = i; /* [] 0 10 [10] 1 11 newArr[1]=11 [10,11] */ } console.log(newArr); //5.把1000～2000之间的所有的闰年放到数组里面 var year = []; for (var i = 1000; i <= 2000; i++) { if ((i % 4 === 0 && i % 100 !== 0) || i % 400 === 0) { year[year.length] = i; } } console.log(year);
Date 日期
get 获取 year 年 month 月 day 日 date 日期 hour(s) 小时 minute(s) 分钟 second(s) 秒 millSeconds 毫秒 time 时间
new Date()
new Date()在不传递参数的情况下返回的是当前时间
1 2
var time = newDate(); console.log(time); //Tue Apr 18 2023 10:13:04 GMT+0800 (中国标准时间)
new Date 传递参数的多种情况
传递两个数字 第一个数字表示年份，第二个数字表示月份
1 2 3 4
var time = newDate(2023, 10); console.log(time); //Wed Nov 01 2023 00:00:00 GMT+0800 (中国标准时间)
//月份的范围0～11 0表示1月 11表示12月
传递三个 前两个不变，第三个表示该月的第几天 1~31
1 2
var time = newDate(2023, 3, 18); console.log(time); //今天
传递四个 前三个不变，最后一个是小时数 0~23
1 2
var time = newDate(2023, 3, 18, 20); console.log(time);
传递五个 前四个不变，最后一个表示分钟 0~59
传递六个 前五个不变，最后一个表示秒 0 ～ 59
传递字符串
1 2 3 4 5 6 7
var time = newDate('2023'); var time1 = newDate('2023-02'); var time2 = newDate('2023-02-18'); var time3 = newDate('2023-02-18 13:'); var time4 = newDate('2023-02-18 13:13'); var time5 = newDate('2023-02-18 13:13:13'); console.log(time, time1, time2, time3, time4, time5);
//格式化时间 //我们需要从时间中拿到 年 月 日... //月份 需要+1 //判断 上午/下午 //调整为12小时 //调整星期 0～6 //格式化的结果打印 var year = time.getFullYear(); var month = time.getMonth(); var date = time.getDate(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); var day = time.getDay(); //处理月份 month += 1; //上午/下午 var str = hours >= 12 ? '下午' : '上午'; //12小时 hours %= 12; //星期 var s = '日一二三四五六'; var week = `星期${s[day]}`; // m >10?m:0+m //拼起来 var res = `${year}年${month}月${date}日${str}--${hours}点${minutes}分${seconds}秒--${week}`; console.log(res);
