js基础笔记
其他类型 转 Number（三种方法）;
-
parseInt() 作用：转化为整数； 返回：整数 或 NaN
规律：从第一个字符开始转换，如果不是数字，直接输出NaN；如果是数字则依次往后，直到碰到不是数字的，直接输出已经转换好 的数字。 -
parseFloat() 作用：转化为小数，或叫浮点数； 返回：小数 或 NaN
规律：和parseInt()类似 -
Number() 用法、功能和parseFloat()类似 但也有不同的地方
parseFloat(true); -
Number(true);
-
Number(false);
其他类型 转 字符串（三种方法）;
1…toString() 注意：undefined和null不能使用这种方式变成字符串
2.String()
3.+ 例子 1 + ‘’; //1（是字符串 ‘1’）
其他类型 转 Boolean
-
Boolean()
Boolean(1) // true// 特别注意：只有6种情况会返回false，别的都返回true // false、null、undefined、""（空字符串）、0、NaN
操作符
三元表达式;
语法： 表达式1 ? 表达式2 : 表达式3;
var num1 = 10;
var num2 = 9;
var max;
// if (num1 > num2) {
// max = num1;
// }
// else {
// max = num2;
// }
// 三元表达式：结果返回；
max = num1 > num2 ? num1 : num2;
alert(max);
switch-case 语句
-
case的判断等价于===
-
执行的代码里的break不是必须的，但是如果没有break,会继续往下执行；直到遇到下一个break;
-
switch-case的使用场景
-
判断逻辑比较简单分支比较多 例如:
var xq = prompt(“输入星期：”);
switch (xq) {
case “一”:
alert(“逛街”)
break;
case “二”:
alert(“再逛街”)
break;
case “三”:
alert(“学习”)
break;
case “四”:
alert(“睡觉”)
break;
case “五”:
alert(“约会”)
break;
case “六”:
alert(“电影”)
break;
case “日”:
alert(“下棋”)
break;
default:
alert(“输入不是星期”);
break;
}
流程控制-循环
while 循环
//语法;
while (条件表达式) {
// 循环体 就是重复执行的代码
}
//示例;
var num = 1;
while (num <= 3) {
console.log(num);
num++;
}
break
- 作用：彻底跳出循环
- 针对：所有循环（while、for、do-while）
continue
- 作用：跳出这一次的循环
- 针对：所有循环（while、for、do-while）
数组去重
var arr = [1, 3, 5, 6, 7, 3, 5, 7, 2, 4, 2];
var arr_new = [];
for (var i = 0; i < arr.length; i++) {
var isRepeat = false;
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
isRepeat = true;
break;
}
}
if (isRepeat === false) {
arr_new[arr_new.length] = arr[i];
}
}
console.log(arr_new);
冒泡排序
//冒泡排序
var arr = [5, 4, 3, 2, 1, ];
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]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
字符串转数组
//语法:
字符串.split(指定分隔符)
//示例
var str = '12,88,72,6';
var arr = str.split(',');
console.log(arr); // 输出 ['12','88','72','6']
获得一个随机数
//语法:
Math.random();
//示例:
// 获取随机数
var r = Math.random();
// 输出一个在 [0,1) 之间的浮点数，可以得到0，但是无法得到1
console.log(r);
//拓展：输出0-78的一个随机数
var r = Math.random(); // [0, 1)
r = r * 79; // [0, 79)
r = Math.floor(r); // [0, 78]
arguments
- 是什么？arguments是一个获取了所有实参的伪数组，它是函数内部的变量（不是我们声明的，也不需要我们声明）
- 有什么用？上面我们多传的一个参数 “1元” 在函数体内无法获取到，但是通过arguments就可以获取到了
- arguments 这个东西看起来像数组，但是其实不是一个数组，我们管它叫 伪数组。它具有数组的长度和顺序等特征。本质为对象
作用域
作用域分为：
- 全局作用域（函数的外面）：变量能在JS代码里的任何位置都可以访问
- 局部作用域（函数的里面）：变量只能在局部的范围内才能进行访问，出了这个范围就访问不到了
- 作用：避免相同的变量名的冲突
作用域链
- 是什么？内部函数访问外部变量时，采用的是链式查找方式，一层一层往外部找
- 就近原则
预解析
- 是什么？JS代码不是一下子就在浏览器内执行，而是先对JS代码进行预解析。其实就是把你写的js代码先看一遍，顺便做一些小操作
- 做了什么小操作？把变量声明和函数声明提升到当前作用域的最顶端，只提升声明，不提升赋值
内置对象
Math对象
- Math.random(x)；这个方法的作用是生成一个 [0,1) 之间的随机浮点数
var r = Math.random();
// 每次执行等到的数字都不一样
console.log®; - Math.floor(x) 把一个浮点数进行向下取整
console.log(Math.floor(3.1)); // 3
console.log(Math.floor(3.9)); // 3
console.log(Math.floor(-3.1)); // -4
console.log(Math.floor(-3.9)); // -4 - Math.round(x) 把一个浮点数进行四舍五入取整
console.log(Math.round(3.1)); // 3
console.log(Math.round(3.9)); // 4
console.log(Math.round(-3.1)); // -3
console.log(Math.round(-3.9)); // -4 - Math.ceil(x) 把一个浮点数进行向上取整
console.log(Math.ceil(3.1)); // 4
console.log(Math.ceil(3.9)); // 4
console.log(Math.ceil(-3.1)); // -3
console.log(Math.ceil(-3.9)); // -3 - Math.abs(x) 求一个数的绝对值（正数）
console.log(Math.abs(3)); // 3
console.log(Math.abs(-3)); // 3 - Math.max(x,y…) 求多个数字中的最大值
console.log(Math.max(10,20)); // 20
console.log(Math.max(8,4,5,7,3)); // 8 - Math.min(x,y…) 求多个数字中的最小值
console.log(Math.min(10,20)); // 10
console.log(Math.min(8,4,5,7,3)); // 3
练习一：点击页面，随机改变颜色
-
生成0-255之间的随机数，变为整数，封装为函数；
-
生成三个0-255之间的随机整数，调用三次；
-
组成 rgb(随机红色,随机绿色,随机蓝色) 的格式，也封装为函数；
function getRandom() { return Math.floor(Math.random() * (255 + 1)); } function getRandomColor() { var r = getRandom(); var g = getRandom(); var b = getRandom(); var color = 'rgb(' + r + ',' + g + ',' + b + ')'; return color; } // 这个在后期会学，现在不用理解 document.onclick = function () { var color = getRandomColor(); document.body.style.backgroundColor = color; }
随机取整
Date（它是一个构造函数，需要通过new来创建对象）
创建Date对象的语法：
var date = new Date(); // 得到的是你的计算机当前的时间对象
-
获取年月日时分秒
console.log(date.getFullYear()); // 年份
console.log(date.getMonth()+1); // 月份，注意：从0开始// 当前日 为什么不是getDay() 英语：日期date，day某天；
console.log(date.getDate());console.log(date.getHours()); // 小时，0-23
console.log(date.getMinutes()); // 分钟 ， 0-59
console.log(date.getSeconds()); // 秒数 ， 0-59
console.log(date.getMilliseconds()); // 毫秒 0-999 ， 1秒 = 1000毫秒 -
创建一个指定日期的对象
// 给一个日期格式字符串
var date = new Date(‘2019-01-01’);// 分别传入年月日时分秒。注意传入的月份是从0开始算的
var date = new Date(2019,0,1,12,33,12); -
获取从1970年1月1日到现在的总毫秒数，常说的时间戳
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
console.log(1*date);
console.log(Date.now());
倒计时案例 重点
数组判断
方法1--------instanceof 运算符 它可以用来检测是否为数组
方法2--------Array.isArray(参数) 它可以用来检测是否为数组 H5新增的方法 ie9以上才支持!
注意 Array.isArray要优先于instanceof
添加删除数组元素的方法
翻转数组
1.reverse() 是翻转数组的
2.sort() 是实现冒泡排序的 但是这个方法有小问题, ()里面需要跟个函数 如图下
数组索引的方法 根据元素或者条件查找索引
1.indexOf：根据元素查找索引，返回值为：
- 如果这个元素在数组中，返回索引
- 否则返回-1
- 如果有多个相同元素 它只返回第一个满足条件的索引号
-
lastindexOf 是从后查找(了解)var arr = [10,20,30] console.log(arr.indexOf(30)); // 2 console.log(arr.indexOf(40)); // -1
去重新方法
去重
2.findIndex： 根据条件查找索引，返回值为：
- 满足条件的第一个元素的索引
- 如果没有，则返回-1
-
// findIndex的参数为一个函数 // 形参为每一个数组的元素 数组.findIndex(function (形参) { return 条件表达式； }) var arr = [10, 20, 30]; var res1 = arr.findIndex(function (item) { return item >= 20; }); console.log(res1); var res2 = arr.findIndex(function (item) { return item >= 50; }); console.log(res2);
数组转化为字符串
数组转化为字符串
join分隔符 用什么符号都可以分割
拼接-concat
作用：拼接数组（不改变原来数组）
返回值：一个新的数组
示例：
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var res = arr1.concat(arr2,arr3);
console.log(res);
// 复制一个数组
var arr_1 = arr.concat();
截取-slice
作用：截取数组（不改变原来数组）
返回值：一个新的数组
示例：
var arr = ['a','b','c','d','e'];
// 表示 从下标1（包括），截取到下表为4(不包括),
var res = arr.slice(1, 4);
// 如果不给第二个参数，默认就是把从start开始，到length结束的所有的元素截取
var arr_1 = arr_2.slice(1);
// 复制数组：如果省略两个参数，start默认是0，end默认是length
var arr_1 = arr_2.slice();
复制
var arr = [10,20,30,40,50];
var new_arr = arr; // 直接给，可以么？
var new_arr = [];
arr.forEach(function(item,index,arr){
new_arr.push(item)
});
var new_arr = arr.filter(function(item,index,arr){
return item;
});
var new_arr = arr.concat();
var new_arr = arr.slice();
字符串 的内置对象 方法
查找
-
indexOf
-
str[index] H5新增的 有兼容性问题 和indexOf功能一样!
// 这个方法用于查找某个字符串是否包含于另一个字符串
var str = ‘我爱中华人民共和国’;
console.log(str.indexOf(‘中华’)); -
lastIndexOf 用法和indexOf一样，只不过是从后面开始找
-
charAt： 根据位置返回字符
// 这个方法用于获取字符串中位于指定位置的字符
var str = ‘我爱中华人民共和国’;
console.log(str.charAt(2)); -
charCodeAt 作用: 返回ASCII码判断用户按的哪个键
// 这个方法用于获取字符串中位于指定位置的字符的ASCII码
var str = ‘abcdef’
console.log(str.charCodeAt(0));
转为数组-split
// 这个方法用于将一个字符串以指定的符号分割成数组
var str = '刘备|关羽|张飞';
var arr = str.split('|');
console.log(arr);
var arr = str.split('');
console.log(arr);
拼接
-
-
concat 拼接（不改变原来数组）
// 这个方法用于连接多个字符串，其作用相当于 + 操作符
var res = “abc”.concat(‘def’,‘ghi’);
console.log(res);
截取
-
substring()
var str = ‘我爱中华人民共和国’;
// 从索引2开始，到索引4结束，得到之间的字符，不包含索引4的字符
var res = str.substring(2,4);
console.log(res); -
slice（参数可以为负数）
// 这个方法用于获取字符串中的部分字符
var str = ‘我爱中华人民共和国’;
var res = str.slice(2,4);// 从索引2开始，到索引4结束，得到之间的字符，不包含索引4的字符
console.log(res);// 看起来和substring 没有啥区别，
// slice()可以设置参数为负数，slice()方法在遇到负的参数的时候，会将这个负值与字符串的长度相加。
console.log(str.slice(-6,7));
console.log(str.slice(2,-5));
console.log(str.slice(-9,-7)); -
substr （第二个参数代码要截取的字符串的长度）
var str = ‘我爱中华人民共和国’;
var res = str.substr(2,2);
替换
replace(被替换的字符, 替换的字符)
注意 只会替换第一个字符
分割字符串 转为数组
split(分隔符)
文档
- MDN - https://developer.mozilla.org/zh-CN/ （官方、比较权威、新且全）
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
