本文仅记录自己的学习笔记，欢迎大家评论与指正！
js的输出方式
-
alert 弹窗
-
console.log 控制台输出
-
prompt 提示用户输入
-
document.write('')在页面写入
模板字符串
-
语法：`` 内容拼接时，用${}包住变量
数据类型
基本数据类型： Number，String，Boolean，undefined，null，symbol
引用数据类型： object(数组，对象，函数）
null开发中的使用场景：将来有个变量里面存放的是一个对象，但对象还没创建好，可以先给个null。
// undefined 表示没有赋值，未定义
// null 空 表示赋值了，但是内容为空
// 官方解释：把 null 作为尚未创建的对象
console.log(undefined + undefined); //NaN
console.log(undefined + 1); //NaN
console.log(undefined + "undefined"); //undefinedundefined
console.log(undefined + null); //NaN
console.log(null + null); //0
console.log(null + 1); //1
console.log(null + "null"); //nullnull
console.log(NaN + 1);检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法格式：
-
作为运算符：typeof x （常用的写法）
-
函数形式：typeof(x)
转换数据类型
隐式转换
规则：
-
+号两边只要有一个是字符串，都会把另外一个转成字符串。
-
除了+以外的算术运算符 比如 - * / 等都会把数据转成数据类型。
显式转换
概念：写代码时告诉系统该转成什么类型
转换成数字型
-
Number(数据)
-
转成数字类型
-
如果字符串内容里有非数字，转换失败时结果为NaN（Not a Number）即不是一个数字
-
NaN也是number类型的数据，代表非数字
-
-
parselnt(数据)
-
只保留整数
-
若数据是字符串，从该数据第一个字符（该字符必须为数字）到第二个非数字字符为止，提取整数。
-
-
parseFloat(数据)
-
可以保留小数
-
转换成字符型
-
String(数据)
-
变量.toString(进制)
转换成布尔值
-
Boolean(数据)
-
来了都是true或false
switch语句
switch (数据) {
case 值1：
代码1
break
case 值2：
代码2
break
<!-- 可以连写共同使用一个代码体 -->
case 值3
case 值4
代码3
default：
代码n
break // 这个break可以不写
}
switch case 语句一般用于等值判断，不适合于区间判断
switch case 一般需要配合break关键字使用 没有break会造成case穿透。
for 循环的基本使用
-
语法
for (let i = 0; i <= 10; i++) {
// 循环体
console.log(i)
}循环中断
-
break 中断 在循环里面遇到
break关键字 就中断整个循环 -
continue 继续 在循环里遇到
continue关键字 就中断本次循环
for循环和while循环
-
在未知循环次数的时候 使用 while 循环
-
在已知循环次数的时候 使用 for 循环
操作数组的方法
1. push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。此方法修改原有数组。
var arr = ['a','b','c'];
var ele = arr.push('d');
// ele结果为: 4;
// arr数组被修改: ['a','b','c','d'];2. pop()，从数组中删除最后一个元素，并返回该元素的值。如果数组为空，则返回undefined。此方法修改原有数组。
var arr = ['a','b','c','d'];
var ele = arr.pop();
// ele结果为: 'd';
// arr数组被修改: ['a','b','c'];3. shift()，从数组中删除第一个元素，并返回该元素的值。此方法修改原有数组。
var arr = ['a','b','c','d'];
var ele = arr.shift();
// ele结果为: 1;
// arr数组被修改: ['b''c','d'];4. unshift()，将一个或多个元素添加到数组的开头，并返回该数组的新长度。此方法修改原有数组。
var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];5. slice(begin?,end?)，返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
begin 可选 提取起始处的索引（从0开始），从该索引开始提取原数组元素 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取， 例：slice(-2) >表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。 如果省略 begin，则 slice 从索引 0 开始。 如果 begin 超出原数组的索引范围，则会返回空数组。
end 可选 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。 例：slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice>(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一>个元素，也就是只有倒数第二个元素）。 如果 end 被省略，则 slice 会一直提取到原数组末尾。 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。
var arr = ['a','b','c','d'];
var res = arr.slice(0,2);
// arr数组未被修改: ['a', 'b', 'c', 'd'];
// res数组为: ['a', 'b'];6. splice(start,deleteCount?,item1?) ，通过删除或替换现有元素或者原地添加新的元素来修改数组, 并以数组形式返回被修改的内容 （如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组）。此方法修改原数组。
start： 指定修改的开始位置（从0计数）在该位置修改数组。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于 array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
deleteCount (可选)： 整数，表示要移除的数组元素的个数。 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于 start之 后的所有元素的数量)，那么 start 之后数组的所有元素都会被删除。 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
item1, item2, … （可选）： 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素，插入"e"
var insertOnce = arr.splice(2,0,'e');
insertOnce = []
arr = ['a', 'b', 'e', 'c', 'd']
// 从索引3的位置开始删除一个元素
var delOnce = arr.splice(3,1);
// delOnce数组为: ['c']
// arr数组被修改: ['a', 'b', 'e', 'd']7. concat()，于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
var arr1 = ['a', 'b', 'c', 'd'];
var arr2 = ['e','f']
var arr3 = arr1.concat(arr2);
// arr3数组为: ['a', 'b', 'c', 'd','e','f']8. join()，将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符(默认使用’,'分隔，如果使用""，则所有元素之间都没有任何字符)。
var arr = ['a','b','c','d'];
var str = arr.join("-")
// str结果为: "a-b-c-d"9. sort()，对数组的元素进行排序。此方法修改原数组。
var arr = [1,2,3,4,5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]10. reverse()，将数组中元素的位置颠倒，并返回该数组。该方法修改原数组。
var arr = [1,2,3,4,5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]11. forEach(function(currentValue，index?,array?),thisValue?)，对数组的每个元素执行一次给定的函数。
currentValue 必选 当前元素的值
index 可选 当前元素的索引值
array 可选 当前元素属于的数组对象
thisValue 可选 执行callback函数时值被用作 this。如果省略或传入null,undefined那么callback函数的this为全局对象
function logArrayElements(element, index, array) {
console.log('a[' + index + '] = ' + element);
}
// 注意索引 2 被跳过了，因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 912. map(function(currentValue，index?,array?),thisValue?)，创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
// 使用 map 重新格式化数组中的对象
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}],
// kvArray 数组未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]13. filter(function(currentValue,index,arr), thisValue)，创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 筛选出字符串数组中长度大于6的字符串
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// log: ["exuberant", "destruction", "present"]14. every(function(currentValue,index,arr), thisValue)，测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值(若收到一个空数组，此方法在一切情况下都会返回 true)。
// 检查是否数组中的所有数字都小于40
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// log: true15. some(function(currentValue,index,arr), thisValue)，测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值(如果用一个空数组进行测试，在任何情况下它返回的都是false)。
// 检测数组中是否至少有一个数字大于 18:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}16. find(function(currentValue,index,arr), thisValue)，返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
// 获取数组中第一个大于10的值
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 1217. flat(depth?)，按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。此方法不会改变原数组。
depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// log: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// log: [0, 1, 2, [3, 4]]函数
形参、实参
// str 是形参 只是为了定义函数中使用的变量
function sayHi(str) {
document.write(`${str}`);
}
// 调用函数时 传递的参数叫做 实参
sayHi("Hello World!");如果有多个形参 其中有形参有默认值 将有默认值的形参放到 最后面
函数返回值
在函数体中 尽量少使用 输出语句 如果需要将计算结果 给到调用者 给函数添加一个返回值
return
return后面的代码不会被执行，会立即结束当前函数，所以 return 后面的数据不要换行写函数没有
retur时 ，函数默认返回值为undefined
补充
-
console.dir可以打印 函数内部的信息function fn(n, m) { return n + m; } console.dir(fn);
-
两个相同的 函数 后面的函数会 覆盖前面的 函数
-
当 实参 和 形参 个数不一致时
-
当 形参 过多 会自动添加
undefined补充 -
当 实参 过多 多余的实参会被忽略，函数内部有一个 argument 里面装着所有的 实参
Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。
arguments.length为函数实参个数，arguments.callee引用函数自身。
-
作用域
-
全局作用域 在 整个script 标签
-
块级作用域 比如 if 语句 循环语句中 使用 let 与const 定义的变量在 {} 里面的就是块级
-
局部作用域 在函数内部
作用域链
在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
立即执行函数
立即执行函数 就是 声明一个匿名函数，并且马上调用这个匿名函数
作用：避免全局变量之间的污染
// 方式一：函数后的小括号在外面
(function () {
const sum = 1; // 跟其他的sum没有关联
console.log(sum);
})();
// 方式二: 都包住
(function () {
const sum = 0;
console.log(sum);
}());两个立即执行函数之间需要用
;隔开
短路运算（逻辑中断）
&&（且运算符）：表示二者都为true才为true；
短路原则：例如 ： a && b; 当a为true时，程序无论如何都会走b，而不管b为true或者false ,直0 接返回b ，当a为fasle时，程序会走a,直接返回a。
|| (或运算符)：
“||”运算遇到true就返回。例如：a || b ,如果 a 为false，直接返回b，而不管b为true或者false 。如果 a 为true，直接返回a，而不会继续往下执行。
console.log(undefined == null); //false
console.log(undefined === null); //false
console.log(undefined == 0); // false
console.log(null == 0); // false
console.log(null < 1); // true
// 短路运算（逻辑中断）
console.log(undefined && null); //undefined
console.log(true && "abc"); // abc
console.log("abc" && true); // true
// null 参与数值运算时其值会自动转换为 0。
console.log(null === 0); // false
console.log(Number(NaN)); // NaN
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0
console.log(typeof NaN); // number逻辑与和逻辑或中的短路运算 并不是得到 true 或者 false 而是为了取值
对象
-
查询对象 对象.属性 对象['属性']
-
更改对象属性 对象.属性 = 值
-
增加对象属性 对象.新属性 = 值
-
删除对象元素 delete 对象.属性
const person = {
name: `zhangsan`,
"user-name": "skyblue",
age: 18,
song() {
alert(`唱歌`);
},
};
// 查询对象 对象.属性 对象['属性']
console.log(person.name);
// 对象['属性'] 当属性名包含非法字符时，需要定义字符串来代替对象的键名 就使用[]查询对象 []里面存入对应键名的字符串
console.log(person["user-name"]);
// 更改对象属性 对象.属性 = 值
person.age = 20;
// 增加对象属性 对象.新属性 = 值
person.ple = 15837577955;
// 删除对象元素
delete person.song;
console.log(person);遍历对象 for...in
k 表示 对象的属性名(键值)
for (const key in obj) {
console.log(key); // 打印对象的属性名
console.log(obj[key]); // 打印对象的值
}for in 遍历数组的一些缺陷:
索引是字符串型的数字，因而不能直接进行几何运算
遍历顺序可能不是实际的内部顺序
for in会遍历数组所有的可枚举属性，包括原型。例如的原型方法method和name属性
记住，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。遍历对象不能使用for of
for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name
内置对象Math
Math 对象 内置对象之一 其他内置对象有 document console
-
Math.abs() 取绝对值
-
Math.PI 圆周率pai
-
Math.ceil() 向上取整 得到比当前数字要小的 其中的最大整数
console.log(Math.ceil(10.5)); // 11 向上取整 得到比当前数字要小的 其中的最大整数
console.log(Math.ceil(-10.5)); // -10-
Math.floor() 向下取整 得到比当前数字要小的 其中的最大整数
console.log(Math.floor(10.5)); // 10 向下取整 得到比当前数字要小的 其中的最大整数
console.log(Math.floor(-10.5)); // -11-
Math.max() 找最大值 如果有非数字 就转换为数字 无法转换就返回 NaN
console.log(Math.max(2, 3, 4, "1")); // 找最大值 如果有非数字 就转换为数字 无法转换就返回 NaN-
Math.min() 找最小值 如果有非数字 就转换为数字 无法转换就返回 NaN
console.log(Math.min(2, 3, 4, "1")); // 找最小值 如果有非数字 就转换为数字 无法转换就返回 NaN-
Math.random() 在0-1之间随机取出一个数 包含 0 不包含 1 [0,1)
function getRandom(min, max) {
// return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
3468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
