es6在原生代码的用法_es6学习4: 原生js常用api

// 先定义一个简化的输出函数c

window.c = function(oper, result){

result ? console.log(oper, '=>', result) : console.log(oper);

}>>> 一、选择器

document.querySelector(selectors)//接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。

document.querySelectorAll(selectors) 　　　　 　　 //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。

document.getElementsByTagName(tagName) //返回所有指定HTML标签的元素

document.getElementsByClassName(className) //返回包括了所有class名字符合指定条件的元素

document.getElementsByName(name) 　　　　 //用于选择拥有name属性的HTML元素(比如

、、 、、和等)

document.getElementById(id) 　　　　　　　　 //返回匹配指定id属性的元素节点。

document.elementFromPoint(x,y) 　　　　　　 //返回位于页面指定位置最上层的Element子节点。

>>> 二、class操作

Element.classList.add(className);//添加类名

Element.classList.contains(className); //是否包含

Element.classList.remove(className); //移除类名

Element.classList.replace(); //添加一个类

Element.classList.toggle(className); //切换className的有无

>>> 三、元素属性操作

Element.getBoundingClientRect() //返回一个包含元素自身属性的对象 (包含 top,left,right,bottom,width,height)

Element.getAttribute() //读取指定属性

Element.setAttribute() //设置指定属性

Element.hasAttribute() //返回一个布尔值，表示当前元素节点是否有指定的属性

Element.removeAttribute() //移除指定属性

>>> 四、css操作

let style = document.querySelector('.test').style;

style.cssText="color:#fff;" 　　　　　　　　　　　　 //增

style.background = '#000'; //增2

style.removeProperty('background-color'); //删

style.cssText = 'background:pink;'; //改

style.background = 'pink'; //改2

style.getPropertyValue('background') //查

>>> 五、数组&集合

// '-------------------数组------------------------'

//增删改查

arrB.push('z'); //尾部添加

arrB.unshift('a'); //头部添加

arrB.shift(); //头部删除

arrB.splice(1,1); //中间完全删除

arrB.pop(); //尾部删除

arrB.splice(indexStart, indexEnd); //区间删除并返回删除的值

arrB.includes('a') //简单单个查询

arrB.find(item => item=2); //复杂单个查询

//多个查询

arrB = arrB.filter(item =>{return typeof item === 'number';

});

let arr= [1, 2, 3,2, 4]; let arrB = [5, 6];

arr.map(item=> item*item) 　　　　　　　　　 //过滤器, 深刻拷贝, 在框架里多用于接口数据转化

arr.find(item => item>2) 　　　　　　　　　　　//只找出第一个

arr.filter((item, index) => index>1) 　　 //过滤出数组1以后的元素

arr.filter((item, index) => item>3) 　　　　//过滤出>2的值, 如果是return true则返回数值

arr.sort((a, b) => b > a) 　　　　　　　　　　//排序与倒序

arr.sort()

arr.slice(0,2) 　　　　 　　　　　　　　　　　　//拷贝0到2 不会毁坏原数组

arr.slice().splice(0,2) 　　　　　　　　　　 //splice 分割0到2 会更改原数组, 将0,2区间内的删除 c('concat', arr.concat(arrB));

arr.map(item=>item).filter(item=>item>2) //可以在接口直接用filter过滤数据 满足条件的返回个

arr.fill(0) //多用例: let newArr = new Array(number).fill(0) => [0,0,0,0,0]

结果↓

// '-------------------set------------------------'

let set = newSet();

set.add('a');

set.add('c'); //增

set.delete('c'); //删

set.has('c'); //查

print('set', set);

set.forEach((item, index)=> print('item' + index, item)); //遍历

print('setValues', set.values())

// '-------------------map------------------------'

let map = newMap();

let arr= ['456'];

map.set(arr,'aaa'); //增

map.delete(arr); //删

map.set(arr, 'bb') //改

map.has(arr); //查

print('v', map.get(arr)) //查

map.forEach((value, key) => print(`key:${key}`, `value:${value}`)) //遍历

print('values', Array.from(map.values()));

>>> 七、字符串(string)

let str = 'string,string';

console.log('start', str.startsWith('s')); // 是否以xx开始

console.log('end', str.endsWith('s')); // 是否以xx结尾

console.log('include', str.includes('in')); // 是否包含

console.log('repeat', str.repeat(2)); // 返回一个重复两次的值

console.log('padEnd', '1'.padEnd(3, '0')); // 补白, padEnd(总位数, 补位字符)

console.log('padStart', '1'.padStart(3, '0')); // 补白, padEnd(总位数, 补位字符)

console.log('charAt', str.charAt(0));

console.log('indexOf', str.indexOf('t ')); // 没有时候显示-1

console.log('search', str.search(/i/)); // 可以使用正则, 返回index

console.log('slice', str.slice(3, 5)); // 截取字符串某个区间 效果同substr, 但可以操作数组

console.log('substr', str.substr(1, 2)); // 截取, 如果是str.substr(2) 就是从index2开始截取到最后

console.log('split', str.split('')); // 分割成数组 与charAt用法不同的是它可以分割完赋值一个变量然后多次提取

>>> 八、字符串

>>> 九、对象

>>> 十. window对象

>>> 十一. 键盘鼠标