js各数据类型必知必会方法
String
==ES5的11个，ES6的6个==
ES5
除了replace，其他常用方法不会改变原字符串
一共11个方法。
- 三对方法：
- charAt():得到指定位置字符，如果超出范围则返回undefined
- charCodeAt():得到指定位置字符的ASCII码
- indexOf（）：检索字符在字符串中第一次出现的位置
- lastIndexOf():检索字符在字符串最后一次出现的位置
- toUpperCase()：将字符串全部转为大写
- toLowerCase():将字符串全部转为小写
- 三个截取子串方法：
- subString（）：提取子串
- substr（）：提取子串
- slice（）：提取子串
- 一个其他方法：
- replace():替换指定字符
- 一个类型转换方法：
- split("分隔符"):根据指定符号作为分割符将字符串分割成数组
ES6新增
字符串新增的常用方法有6个：
- .includes(“ab”,2):判断字符串中是否包含某些字符或连续字符串，返回布尔值
- 第一个参数：想判断的字符串
- 第二个参数：开始搜索的位置
- 字符串的引用：网址参数键值对拼接，判断是否已经存在问号
- .padStart(5,"ab")/.padEnd(5,"ab"):
- .padStart从开头/.padEnd从结尾，补全字符串长度，原字符串长度大于或等于目标长度，则不进行补位
- 第一个参数：补全以后字符串应该有的长度
- 第二个参数：想用什么字符进行补位
- 如果省略第二个参数，默认使用空格补全长度
- 常应用在规范显示日期格式
- .trimStart()/.trimEnd():清除字符串的首或尾空格，中间的空格不会清除
- .trim():首尾空格都清除
- trim常用于表单提交的数据格式验证
Array
==ES5有17个，ES6有7个==
ES517个
一共16个方法。
-
1个判断：
- Array.isArray()：判断变量是否为数组，返回布尔值
-
3小对：
- .push():数组尾部插入
- .pop():数组尾部弹出
- .unshift():数组头部插入
- .shift():数组头部弹出
- .indexof():获取指定值在数组中首次出现的下标，没有返回-1
- .lastIndexOf():获取数组中最后一次出现的数据下标
-
2个截取：
- .slice():截取子数组
- .splice():插入，替换，删除
-
2个转换类型：
- .toString():转为字符串
- .join():数组转字符串
-
3个其他
- .sort():排序
- .concat():多数组合并，需要新变量接收新数组，原数组不变
- .reverse():数组所有数组项置反
-
3个遍历
- .forEach():遍历数组项
- .map():遍历数组，可以返回一个新数组
- arr.filter(callback)：筛选，将条件符合的数据项放到一个数组中返回。
- 筛选条件：是你回调函数return 后面加的条件。
- 返回：新数组。
- 与arr.map相似。
- 如果符合条件的是基本类型，就复制值，如果是引用类型，则复制引用地址
ES6新增7个
-
arr.includes（“a”，3）:判断数组中是否有某个成员，判断标准是基本严格等于（===），但认为NaN全等于NaN
- 第一个参数：检测是否包含某个数据项
- 第二个参数：从第几项开始检测
- 应用：去重
-
Array.from():将其他数据类型转换成数组
- 第一个参数：要遍历的对象
- 第二个参数： 回调函数，作用类似于数组的map方法，用于对每个元素进行操作，将处理后的值放入返回的数组
- 第三个参数：修改this指向，箭头函数无法修改this指向
- 参数类型可以是：
- 所有可遍历的，但是可遍历的使用展开运算符更方便:[...str]
- 拥有length属性的任意对象，只会转换length值个数据项。对象不够length值个键值对，用undefined填充
-
arr.find()/findIndex():find找到某个值/findIndex找到某个值对应索引
-
find(10)：找到满足条件的某一个值，立即返回
-
findIndex：找到满足条件的某一个值，立即返回它的索引
-
第一个参数：回调函数，与forEach里的回到函数用法相同，函数体内写查找条件
-
第二个参数：改变this指向，如果不写第二个参数，默认指向window，箭头函数无法修改this
-
var a = [2, 3, 4, 5, 10, 12].find(function (value, index, arr) { //返回条件 return value > 9; },document);//this指向了document var b = [2, 3, 4, 5, 10, 12].findIndex(function (value, index, arr) { //返回条件 return value > 9; }) console.log(a);//10,返回的是属性值 console.log(b);//4,返回的是索引值 -
应用：数据的筛选
-
-
arr.keys():得到的是索引的可遍历对象，可以遍历索引值。
-
arr.values():得到的是数据项的可遍历对象,可以遍历数据项值。
-
arr.entries():得到的是数据项+索引组成的可遍历对象，遍历出索引，值组成的数组
- 可以用解构赋值的方式，单独获取索引或数据项：for(var [key,value] of arr){}
Object
ES5有1个
- Object.create(obj.prototype):方法创建一个新空对象，使用现有的对象来提供新创建的对象的__proto__。
- Object.create():里面必须跟参数，如果不跟参数的话，就会报错： Object prototype may only be an Object or null: undefined
- Object.create(null):当参数是null时，形成了一个连
__proto__属性都没有的对象。 - Object.create(Object.prototype):让创建的对象的
__proto__属性指向Object.prototype
ES6新增4个
Object没有实例的方法，都是对象类的静态方法
-
Object.assign(obj1，obj2):合并对象， 将obj2中的内容，合并到obj1对象中，不会生成新的对象，改变第一个传入的对象，
- 可以合并多个对象
- 剩余运算符，{...obj}的形式是生成一个新对象
- 如何用Object.assign（）合并出一个新对象，第一个参数传空对象
- 第一个参数叫目标对象**(Target)，第二个参数叫源对象（Source）**
- 基本数据作为源对象：与对象的展开相似，先转换成对象，再合并
- 同名属性的替换：后面的会覆盖前面的
- 应用：合并默认参数和用户输入的参数
- ==如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。==
-
Object.keys():获取对象的键组成的数组
-
Object.values():获取对象的值组成的数组
-
Object.entries():获取对象的键和值组成的二维数组
- 与数组类似方法的区别
- 数组是实例的公有方法，返回的是遍历对象
- Object是构造函数的静态方法，返回结果是数组
- keys是ES5的方法，values、entries是ES6新增的方法
- 与数组类似方法的区别
Math
ES5
==一共10个常用方法：==
-
两小对：
-
Math.ceil(1.2):2,向上取整
-
Math.floor(1.9)：1,向下取整
-
Math.min(1,2,3):求最大值
-
Math.max(1,2,3):求最小值
-
不能够求数组中的最大值，需要用展开运算符...转换一下
-
Math.min(...[1,2,3]);//结果为3 ...能够将数组展开为1,2,3 //两个数组拼接成一个数组，再加数据项，也可以用...展开运算符 var ary1=[1,2,3]; var ary2=[5,6,7]; var newary=[...ary1,...ary2,10];//结果就是拼接够的数组
-
-
-
2个求开平方和幂次方
- Math.sqrt(4):2，求开平方
- Math.pow(3,2):求幂次方，3的2次方
-
1个求随机数
-
Matn.random():随机数，获取包含0，但不包含1的随机小数
- 求n-m之间的随机小数：Math.random()*(m-n)+n;
- 求n-m之间的随机整数,包含m：Math.round(Math.random()*(m-n)+n);
-
-
1个求四舍五入
- Math.round(1.5):2，四舍五入
- Math.round(-1.5),-1，负数比较特殊，只要比-1.5小就是舍，只要比-1.5大一点点，比如-1.51得到的结果就是-2
-
2个求圆周率和绝对值的
- Math.abs(-1):求绝对值，abs就是absolute的缩写，绝对的意思
- Math.PI:得到圆周率
Map
ES6
==实例6中方法，1个属性==
方法：
let m=new Map();创建一个map实例
- m.set(键名：值)：向m集合实例中添加一个成员
- m.set(键名：值).set(键名：值)：可以使用链式写法，同时插入多个成员
- 使用set添加的新成员，键名如果已经存在了，后添加会覆盖新添加的
- m.get(键名)：获取指定键名的成员，如果键名不存在，返回undefined，键名不一定是字符串
- m.has(键名)：检查m实例中是否存在指定键成员，返回布尔值
- m.delete(键名)：删除指定键名的成员，如果不存在该成员，什么也不会发生
- m.clear()：无需参数，清除所有的成员
- m.forEach(function(val,key,map){},document):遍历所有成员,forEach中存在两个参数
- 第一个参数回调函数function存在三个参数
- val:属性值
- key：键名
- map：遍历的对象本身
- 第二个参数：改变this指向，如果没有写，则默认指向window
- 第一个参数回调函数function存在三个参数
属性：
- m.size:获取键值对的个数，比对象强，对象不存在大小
Set
==实例5个方法，1个属性==
方法：
- s.add(1):给s添加一个成员,每次只能添加一个数据项，如果s里本身就存在1，则添加不成功
- s.add(1).add(2).add(3)：同时给s添加三个数据项
- s.delete(3):删除s中的3成员，如果s本身没有3，则什么也不会发生，也不会报错
- s.clear():不用传参数，一键清除所有的成员
- s.has(1):判断s集合里面有没有1这个成员
- s.forEach(function(val,key,set){},document):- 遍历集合中所有的成员数据项
- Set类型数据不能找到指定的某个成员，只能用forEach遍历
- Set中的forEach方法里面可以传两个参数，一个回调函数，一个指定this指向对象
- val:是数据值项
- key：是键名，在这里无效，key的值与value值相同
- set：是遍历的集合本身
- 第二个参数：指定this指向对象，如果没有默认指向window
- forEach按照成员添加的顺序进行Set对象
- 遍历
- 属性：
- size：相当于数组中的length属性
Date
==日期对象：14个方法：==
- 八个,获取年月日时分秒毫秒星期等单个数据的方法：
- .getFullYear():得到年份
- .getMonth():得到月份0-11，获取的月份，比真实月份少1
- .getDate():得到日期1-31
- .getHours():得到小时数0-23
- .getMinutes():得到分钟数0-59
- .getSeconds():得到秒数0-59
- .getMilliSeconds():得到毫秒0-999
- .getDay():得到星期0-6，0代表星期日，1-6代表星期1-6
- 三个，获取日期时间字符串的方法：
- .toLocaleString():获取本地的日期时间字符串
- .toLocaleDateString():获取本地的日期字符串
- .toLocaleTimeString():获取本地的时间字符串
- 两个，将日期对象转为时间戳的方法：
- Date.prase():将日期对象转为时间戳，精确到秒
- .getTime():转为时间戳，精确到毫秒
- 日期对象*1:把日期对象类型转为值类型
- +日期对象：把日期对象类型转为值类型
- 一个：时间戳转为时间对象的方法：
- new Date(时间戳)：时间戳转为时间对象
DOM
==一共有31种：其中获取元素的方法有9种，增删改克隆元素的方法有9种，获取关系元素的属性有13种==
获取元素的方法有9种：
DOM的对象是document,可以通过document的内置方法，根据不同的方式获取元素
-
.getElementById("元素的id名")：根据id名获取元素，前面对象必须是document
- 特点：在测试时，在控制台中直接输入id名，就能够获取元素，可以直接把id名字当成变量直接去使用，不获取也可以，因为id是唯一的
-
.getElementsByName("name属性值")：根据name属性值获取元素，调用对象必须是document，name属性只能在表单元素中定义
-
.getElementsByTagName("标签名")：根据标签名获取元素，返回的结果是一个类数组对象
- .getElementsByTagName("*"):获取html文件中所有的标签，封装为一个类数组对象
-
.getElementsByClassName("类名")：根据类名获取元素，返回的结果是一个类数组对象
-
.documentElement:获取html元素
-
//获取一屏幕的宽 //body自带上下左右8像素的margin值，所以body获取的宽度会小于html document.documentElement.clientWidth||document.body.clientWidth; //获取一屏幕的高 document.documentElement.clientHeight||document.body.clientHeight;
-
-
.body:获取body元素
-
.head:获取head元素
元素节点的增删移动、克隆方法有9种：
-
创建及上树4种：
- document.createElement('标签名');
- document.createTextNode("文本内容")；
- 父节点.appendChild(‘孤儿节点’)；
- 父节点.insertBefore('孤儿节点')；
-
移动2种：
- 新父节点.appendChild(‘已经有父亲的节点’)；
- 新父节点.insertBefore(已经有父亲的节点')；
-
删除1种：
- 父节点.removeChild("要删除的子节点")；
-
克隆2种：
- var 孤儿节点=老节点.clone();//只克隆老节点，不可隆老节点里的后代节点
- var 孤儿节点=老节点.clone(true);//实现深克隆，不仅克隆老节点，还克隆后代节点
关系属性有13种：
-
父：
- ols.parentElement：获取父元素
- ols.parentNode:获取父节点，与parentElement作用相同，因为父节点必须是元素
-
子：
- ols.childNodes：获取ols节点的子节点数组
- ols.children:获取ols节点的子元素数组
-
第一个子：
- ols.firstChild:获取ols节点的第一个子节点，可能是文本节点，也有可能是元素节点
- ols.firstElementChild：获取ols的第一个元素子节点
-
最后一个子：
- ols.lastChild:获取ols节点的最后一个子节点，可能是文本节点，也有可能是元素节点
- ols.lastElementChild：获取ols的最后一个元素子节点
-
哥哥：
- ols.previousSibling：获取ols节点的前一个兄弟节点，可能是文本节点，也可能是元素节点
- ols.previousElementSibling：获取ols节点的前一个兄弟元素节点
-
弟弟：
- ols.nextSibling：获取ols节点的后一个兄弟节点，可能是文本节点，也可能是元素节点
- ols.nextElementSibling：获取ols节点的后一个兄弟元素节点
-
儿子元素的个数：
- ols.childElementCount：获取ols子节点的个数
