js方法总结

1.输出

 /* 1.输出 */
         alert("Hello js!");//弹出警告框
         document.write("hello js!");//将内容写到HTML文档中
         document.getElementById("header1").innerHTML = "真标题";//写入HTML元素
         console.log("这是控制台！");//写入浏览器控制台

2.函数

 function name(传参) {
             //函数体
             return 返回值;
         }

3.js语句标识符(关键字)

 while (1) {
             break;//跳出循环
             continue;//跳过循环的一次迭代
         }
         try {
         } catch {
             //语句块，在try语句块执行出错时执行
         }

4.数字

 // 生成0-1之间的随机数，不包括1
         console.log(Math.random());
         // 生成0-5之间的随机数，不包括5
         console.log(Math.random() * 5);
         // 生成5-10之间的随机数，不包括10
         console.log((Math.random() * 5) + 5);
         // 取整 向上取整
         console.log(Math.ceil(0.2));
         // 向下取整
         console.log(Math.floor(0.2));
         // 四舍五入
         console.log(Math.round(1.4));
         // 生成一个0-5的随机整数
         console.log(Math.ceil(Math.random() * 5));//取到0的概率极小
 ​
         console.log(Math.floor(Math.random() * 6));//可以
 ​
         // 生成一个4-12之间的随机整数
         console.log(Math.floor(Math.random() * 9 + 4));
 ​
         // 生成一个A到B之间的随机整数
         //console.log(Math.floor(Math.random()*(b-a+1)+a));
 ​
         // 圆周率:3.1415926
         console.log(Math.PI);
 ​
         // 计算一个半径为5的圆的面积
         console.log(3.14 * 5 * 5);
 ​
         // toFixed()保留小数，括号中传入几位就保留几位，不传入就四舍五入
         console.log(Math.PI.toFixed(2));//3.14
         console.log(12.58.toFixed());//13
 ​
 ​
         // 幂，几次方；第一个就是数，第二个就是几次幂
         console.log(Math.pow(2, 10));
         console.log(Math.pow(3));//NaN不是一个数字
 ​
         // 平方根，9->3
         console.log((Math.sqrt(9)));//3
 ​
         // 四舍五入
         console.log(Math.round(1.8));//2
         console.log((Math.round(1.4)));//1
 ​
         // abs绝对值
         console.log(Math.abs(-0.9));//0.9
 ​
         // 取最大值
         var arr = [1, 2, 3, 4, 5, 6];
         console.log(Math.max(1, 2, 3, 4, 5, 6));
         // ...扩展运算符
         console.log(Math.max(...arr));
         console.log(...arr);
         console.log(arr);
 ​
         // 取最小值
         console.log(Math.min(...arr));

5.日期

 // 创建一个日期对象
         var date = new Date();
         document.write(date);
         document.write(`<hr>`);
         // 获取年份
         var year = date.getFullYear();
         document.write(year);
         document.write(`<hr>`);
         // 获取月份，返回的0-11之间的数,0-11 1-12
         var month = date.getMonth() + 1;
         document.write(month);
         document.write(`<hr>`);
         //获取日
         var day = date.getDate();
         document.write(day);
         document.write(`<hr>`);
         // 获取星期 0代表星期一
 ​
         var week = date.getDay();
         document.write(week);
         document.write(`<hr>`);
         document.write(year, month, day);
         document.write(`<hr>`);
         // 获取小时数，0-23
         var hour = date.getHours();
         document.write(hour);
         document.write(`<hr>`);
         // 获取分钟数，0-59
         var minute = date.getMinutes();
         document.write(minute);
         document.write(`<hr>`);
         // 获取秒数
         var seconds = date.getSeconds();
         document.write(seconds);
         document.write(`<hr>`);
         //获取毫秒
         var milliseconds = date.getMilliseconds();
         document.write(milliseconds);
         document.write(`<hr>`);
 ​
         // 设置日期对象
         var date = new Date();
 ​
         // 设置年 设置月0-11，设置日1-31
         date.setFullYear(2008, 7, 8)
         console.log(date);
         // 可单独设置年份
         // date.setFullYear(2000);
 ​
         // 设置月
         date.setMonth(9, 1);
         console.log(date);
         // 可单独设置月份
         // date.setFullYear(9);
 ​
         // 设置日
         date.setDate(8);
         console.log(date);
 ​
         // 设置时分秒毫秒
         date.setHours(20, 0, 0, 0);
         console.log(date);
 ​
         // 设置分秒毫秒
         date.getMinutes(50, 59, 999);
         console.log(date);
 ​
         // 设置秒毫秒
         date.setSeconds(30, 999);
 ​
         // 设置毫秒
         date.setMilliseconds(666);
 ​
         // 传入字符串2021-01-01 如果不写时分秒，默认为00：00：00
         console.log(new Date(`2021-01-01 12:00:00`));
 ​
         // 除了-连接的，如果不写时分秒，默认是00：00：00
         console.log(new Date(`2021-01-01`));
         console.log(new Date(`2021-01-01`));
         console.log(new Date(`2021/01/01 00:00:00`));
         // 为了保证浏览器兼容问题，不建议用以下日期格式
         console.log(new Date(`2021.01.01 00:00:00`));
         console.log(new Date(`2021,01,01 00:00:00`));
         console.log(new Date(`2021*01*01 00:00:00`));
         console.log(new Date(`2021 01 01 00:00:00`));
 ​
         // 不识别汉字
         console.log(new Date(`2021年1月1日 08:00:00`))
 ​
         var date = new Date();
 ​
         // 时间戳：指当前时间距离1970年1月1日的毫秒数
         // 
         console.log(Date.now());
 ​
         // 获取设置时间的时间戳
         var date1 = new Date(`2008-8-8 08:00:00`);
         console.log(date1, date.getTime(), date1.getTime());
 ​
         // 时间戳差 当前时间距离2008-8-8日的毫秒数
         var time = date.getTime() - date1.getTime();
         console.log(time);
 ​
         // 将时间戳转换为标准时间
         var date2 = new Date(1218153600000);
         console.log(date2);
 ​

6.数组

 // 1.合并数组concat 有返回值
         var arr1 = [1, 2];
         var arr2 = [3, 4];
         //result
         var res = arr1.concat(arr2);//返回合并后数组
         console.log(res, arr1, arr2);
 ​
         // 2.push 向数组的尾部添加项 有返回值 返回添加后的数组长度，或改变原数组，如果想添加多个项，逗号隔开即可
         var arr3 = [1, 2, 3, 4];
         var res1 = arr3.push(5, 6, 7, 8, 10);//返回数组长度
         console.log(res1, arr3);
 ​
         // 3.pop 删除数组中的最后一个， 有返回删除的哪一项值，会改变原数组
         var res2 = arr3.pop();//返回删除的那一项的值
         console.log(res2, arr3);
 ​
         // 4.unshift 向数组头部添加 返回添加后数组长度，会改变原数组
         var res3 = arr3.unshift(11, 21, 31);
         console.log(res3, arr3);
 ​
         // 5.shift 删除数组中第一个 返回删除的项 改变原数组
         var res4 = arr3.shift();
         console.log(res4, arr3);
 ​
         var arr4 = [1, 2, 3, 4];
         var arr5 = [5, 6, 7, 8];
         // 将arr4和arr5进行合并,并将合并的数组首尾交换
         // 【1，2，3，4，5，6，7，8】-》[8,2,3,4,5,6,7,1]
         res5 = arr4.concat(arr5);//返回合并数组
         res6 = res5.shift();//删除第一个
         res7 = res5.pop();//删除最后一个
         res8 = res5.unshift(res7);//往头部添加
         res8 = res5.push(res6);//往尾部添加
         console.log(res5);
 ​
         // 6.toString() 将数组转换为字符串
         var arr6 = [1, 2, 3, 4, 5, 6];
         var res9 = arr6.toString();
         console.log(res9, arr6);
 ​
         // 7.join 将数组改变为字符串
         // 如果join()括号中不添加值，默认就是英文逗号隔开，原数组不变
         var res10 = arr6.join();
         console.log(res10, arr6);
 ​
         // 如果在join()括号中添加值--分隔符，每两项之间就会用此分隔符隔开
         var res11 = arr6.join("|");
         console.log(res11, arr6);
 ​
         // 8.reverse 反转数组 返回反转后的数据 改变原数组
         console.log(arr6.reverse(), arr6);
 ​
         // indexOf 获取首个指定元素在数组中的索引位置，如果指定的值在数组中不存在，则返回-1，如果存在，则返回该元素第一次出现的索引值
         var arr = [1, 1, 2, 2, 3, 3, 4, 4];
         var res = arr.indexOf(3);
         var res1 = arr.indexOf(5);
         console.log(res, res1);
 ​
         // lastIndexOf();从后往前去查找
         console.log(arr.lastIndexOf(3));
 ​
 ​
         // slice(start,end)截取,返回是截留下来的数组部分，对原数组无影响
         //start 开始截取索引值，end结束截取索引值
 ​
         var res = arr1.slice(0, 10);
         console.log(res);
         // 只写一个值 则截取从这个索引值开始的之后所有数组部分
         var res1 = arr1.slice(50);
         console.log(res1);
 ​
         // splice() 删除数组中的某些项 返回删除的数据，改变原数组
         var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
         /* 
         start 开始删除的索引位置
         count 要删除几个， 非必填，如果为零，则不删除
         第三个参数往后 newItem  从开始删除的位置添加新的项
          */
         //  var res2= arr2.splice(5);
         // var res2 = arr2.splice(5,2);
         var res2 = arr2.splice(5, 2, 10, 11);
         console.log(res2, arr2);
 ​
         //  delete 删除某项 但位置会保留，长度不会改变
         delete arr2[0];
         console.log(arr2);
 ​
          /* sort()方法对数组的项目进行排序。
          语法：array.sort(compareFunction)
          返回值：排序后数组，sort() 方法会改变原始数组
 ​
          排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。
          默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。
          这适用于字符串（"Apple" 出现在 "Banana" 之前）。但是，如果数字按字符串排序，则 "25" 大于 "100" ，因为 "2" 大于 "1"。正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。
          您可以通过提供“比较函数”来解决此问题
          可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数，例如：
 ​
          function(a, b){return a-b}
          sort() 方法比较两个值时，将值发送给比较函数，根据返回的（负、零、正）值对值进行排序。
          */
         var arr = [11,2,3,5,4];
         var res = arr.sort();
         console.log(res);//排序后看到[11, 2, 3, 4, 5]
         // 可通过函数获取正确排序
         var res = arr.sort(function (a,b) {
             return a-b;//按升序
             // return b-a;//按降序
         });
         console.log(res);//排序后看到[2, 3, 4, 5, 11]
 ​
         // includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
         // arr.includes(searchElement, fromIndex),searchElement必须。需要查找的元素值;fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
         [1, 2, 3].includes(2);     // true
         [1, 2, 3].includes(4);     // false
         [1, 2, 3].includes(3, 3);  // false
         [1, 2, 3].includes(3, -1); // true
         [1, 2, NaN].includes(NaN); // true
         // 如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索:
         // 如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
         var arr = ['a', 'b', 'c'];
         arr.includes('c', 3);   //false
         arr.includes('c', 100); // false
 ​
         // 数组长度是3
         // fromIndex 是 -100
         // computed index 是 3 + (-100) = -97
         var arr = ['a', 'b', 'c'];
 ​
         arr.includes('a', -100); // true
         arr.includes('b', -100); // true
         arr.includes('c', -100); // true
 ​
 ​
         // NaN:not is number 不是一个数字
         // isNaN:判断它是否不是一个数字,true:不是一个数字；false:是一个数字
         // NaN不等于任何一个值，包括它本身
         var a = 'a' * 1;//NAN属于number类型
         var b = '123' * 1;
         console.log(a, typeof a);
         console.log(b);
         console.log(isNaN(1));//false
         console.log(isNaN(a));//ture
 ​
         var num = prompt('请输入一串数字');
         console.log(num * 1, isNaN(num * 1))
         /*
             arr.filter()
             作用：过滤数据，返回满足过滤条件的新数据
             参数：函数
             回参1：表示数组的元素
             回参2：数组索引
             return 过滤条件
             返回值：满足条件的元素的新数组
             */
         var res = arr.filter(function (item, index) {
             console.log(item, index);
             return item.age > 13;
         })
         console.log(res);
 ​
         /*
         arr.forEach()
         arr.forEach(callback(currentValue [, index] [, array])[, thisArg])
         作用：对数组的每个元素执行一次给定的函数
         参数：函数
         currentValue
         数组中正在处理的当前元素。
         index 可选
         数组中正在处理的当前元素的索引。
         array 可选
         forEach() 方法正在操作的数组。
         thisArg 可选
         可选参数。当执行回调函数 callback 时，用作 this 的值。
         返回值：undefined
         */
         // arr.forEach(function (item,index) {
         //     // item表示数组元素
         //     // index表示索引
         //     // 注意 item index为局部作用域
         //     console.log(item)
         //     console.log(index);;
         // })
 ​
         /* 
             some
             array
             作用：检查数组中是否存在满足某个条件的元素
             参数：回调函数
             返回值：true 存在 false 不存在
             注意：与验证是否存在某个元素不同
     
             */
         var arr = [1, 2, 3, 4, 5];
         var even = function (element) {
             // 注意：一旦存在满足条件的元素就不会继续往下执行
             console.log(element);
             return element % 2 === 0;//验证的条件
         }
         //
         var res = arr.some(even);
         console.log(res);
 ​
         /* 
             map
             array
             作用：创建新数组
             参数：回调函数
             返回值：新数组map  map.length = array.length,新数组中元素来自回调函数return
             用于：数组重组，数据处理
             */
         var array = [1, 2, 3, 5];
         var map = array.map(function (element) {
             return element * 2;
         })
         console.log(map);
 ​
         /* 
             reduce 一般用于数学运算，累加，累乘
             参数一：回调函数
             参数二：是回参一的初始值
             回参一：pre 上一次回调函数执行的return返回结果
             回参二current：是arr数组的元素
             // 返回值：运算结果，一个单一的数
             */
         var arr = [1, 2, 3, 4];
         var initailValue = 0;
         var sumWithInitail = arr.reduce(function (pre, current) {
             console.log(pre, '=========');
             console.log(current, '-------------');
             return pre + current;
         }, initailValue)
         console.log(sumWithInitail);

7.字符串

         var str = '12364546467568';
         //取长度
         console.log(str.length);
         //取字符
         console.log(str[0], str[1]);
         //遍历
         for (let i = 0; i < str.length; i++) {
             console.log(str[i]);
         }
         // 字符串的拼接
         var str1 = '黄', str2 = '赌', str3 = '毒';
         console.log(str1 + str2 + str3);
 ​
         //concat 拼接,连接字符串
         var res = '拒绝'.concat(str1, str2, str3);
         console.log(res);
 ​
         // indexOf和lastIndexOF 跟数组中用法一样
 ​
         var str = '撒娇女人最好命';
         console.log(str.indexOf("女人"));
         console.log(str.lastIndexOf("女人"));
 ​
         // replace()替代，替换，返回替换之后字符串，不会改变原来字符串，替换多个相同字符的字符串话只能替换第一个
         var str = '男人要有钱钱钱钱钱钱钱钱钱钱钱钱钱';
         var res = str.replace('钱', '￥');
         console.log(res);//替换多个相同字符的字符串话只能替换第一个
 ​
         // replaceALL()存在兼容问题他
         //var res = str.replaceALL('钱', '￥');
         // console.log(res);
 ​
         // 建议使用for循环来一个个替换，或者使用正则表达式来替换
         //    /要匹配的字符/加g代表的是全部匹配
         var res = str.replace(/钱/g, '￥');
         console.log(res);
 ​
         // split(); 将字符串分隔为数组,不会改变原字符串，返回分割之后数组
         var str = 'abcdefg';
         var res = str.split();
         var res = str.split('c');//可以添加参数，以该字符为分割线分割数组各项
         console.log(res, str);
 ​
         // var arr = [1, 2, 3, 4, 5, 6];
         // console.log(arr.join('-'));
 ​
         // slice(start,end)截取字符串 包括start不包括end,返回截取下来的字符串
 ​
         res = str.slice(2, 4);
         console.log(res);
 ​
         // substr(from,count) 截取，from从哪里开始，count截取几个，返回截取下来的字符串，不影响原字符
         res = str.substr(1, 4);
         console.log(res, str);
 ​
         // 大小写转换
         var str = 'asdfafdahkjdfahgfhafAFAGAHFGFAWEGVA';
         // 讲英文字符转换为大写
         console.log(str.toUpperCase(), str);
         // 将英文字符转换为小写，
         console.log(str.toLowerCase(), str);
 ​
         // trim(),去除字符中的空白符，不影响原字符串
         var str = '               今    天   是  周 三           ';
         console.log(str);
         console.log(str.trim());//去除字符串两边的空格
         console.log(str.trimRight());//去除字符串右边空格
         console.log(str.trimLeft());//去除字符串左边空格
         console.log(str.replace(/ /g, ''));//去除全部空格
 ​
         // es6 includes();搜索字符是否存在，返回ture,false
         console.log(str.includes('周三'));
 ​
         // substr(from,count);///截取，截取几个
         // slice(start,end);//截取，不包括end
         // substring(start,end);//截取，不包括end，两个参数中较小一个作为起始位置，较大的参数作为结束位置。
         var str = 'hello word';
         var res = str.substring(1, 4);
         var res1 = str.slice(1, 4);
         console.log(res, res1, str);
 ​
         //substr,slice和substring的区别：substring的start如果为负数，是从0开始，slice的start如果为负数，是从后往前查,substr则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数
         var str = 'hello word';
         var res = str.substring(-2);
         var res1 = str.slice(-2);
         console.log(res, res1, str);
 ​
         // charAt(index) 通过索引值，找到指定位置的字符
         console.log(str.charAt(2));
 ​
         //startsWith() 和 endsWith()判断字符串是否是以某个字符开头和结尾，返回true和false
         /* startsWith(val, num) 判断字符串是否以XXX开头, 它有俩参数，第一个是判断的参考字符串，第二个是判断开始的下标，默认为0。它有返回值，如果符合条件就返回true, 反之就返回false
         endsWith(val, num) 判断字符串是否以XXX结尾, 它有俩参数，第一个是判断的参考字符串，第二个意思是截取字符串前n位，然后再开始判断。默认为str.length。它有返回值，如果符合条件就返回true, 反之就返回false */
         var str = 'abcdefg';
         console.log(str.startsWith("c",2), str.endsWith("d",4));

8.对象

 // 声明一个对象
         var obj = {
             name: "老王"
         };
 ​
         // 取属性值
         console.log(obj.name, obj["name"]);
 ​
         // 添加属性值
         obj.age = 20;
         obj.isSingle = true;
         obj['hair'] = "black";
         console.log(obj);
 ​
         // 删除属性
         delete obj.hair;
         console.log(obj);
 ​
         // 更改属性值
         obj.age = 30;
         console.log(obj);
 ​
         // 可扩展性
         Object.isExtensible(obj);//默认可扩展
         console.log(Object.isExtensible(obj));
 ​
         // 阻止扩展，禁止给对象添加新属性，但可以修改和删除属性
         Object.preventExtensions(obj);
 ​
         obj.sex = '女';//无法添加
         obj.age = 25;//可以添加
         delete obj.isSingle;//可以删除
         console.log(obj);
 ​
         // 冻结：freeze();冻结之后变成一个不可以改变的
         Object.freeze(obj);
         obj.sex = '女';//无法添加
         obj.age = 28;//可以添加
         delete obj.isSingle;//可以删除
         console.log(obj);