js操作以及es6小结

选择器以及操作类名：

document.getElementById("Id").classList.add("mystyle");

document.getElementById("Id").classList.remove("mystyle");

document.getElementById("Id").classList.contains("mystyle");

document.getElementsByName("Name");

document.getElementsByClassName(ClassName);

var btnObj= document.querySelector("#btn");

document.querySelectorAll(".cls");

//createElement创建元素：
var elem = document.createElement("div");  
elem.id = 'haorooms';  
elem.style = 'color: red';  
elem.innerHTML = '我是新创建的haorooms测试节点';  
document.body.appendChild(elem);  

 

事件绑定：

element.onclick = function () {}

element.addEventListener('click', function() { console.log(1) }, false)   //IE:attachEvent

document.addEventListener(type,listener,capture)  //注册事件
document.removeEventListener(type,listener,capture)  //注销事件
document.dispatchEvent(event)  //触发事件

尺寸属性

Element.clientHeight   //返回元素节点可见部分的高度
Element.clientWidth   //返回元素节点可见部分的宽度
Element.clientLeft   //返回元素节点左边框的宽度
Element.clientTop   //返回元素节点顶部边框的宽度
Element.scrollHeight  //返回元素节点的总高度
Element.scrollWidth  //返回元素节点的总宽度
Element.scrollLeft   //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop   //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight   //返回元素的垂直高度(包含border,padding)
Element.offsetWidth    //返回元素的水平宽度(包含border,padding)
Element.offsetLeft    //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop   //返回水平位移
Element.style  //返回元素节点的行内样式

属性方法

Element.getAttribute()：读取指定属性  
Element.setAttribute()：设置指定属性  
Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否有指定的属性  
Element.removeAttribute()：移除指定属性

JSON对象

JSON.stringify()   
//用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse方法还原。
//（JSON.stringify(obj, selectedProperties)）还可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。
//还可以接受第三个参数，用于增加返回的JSON字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。

JSON.parse()   //用于将JSON字符串转化成对象。

JavaScript获取两个数之间的任意随机数

Math.random() * (max - min) + min

base64 

let encoded = btoa('yo'); // "eW8="
let decoded = atob(encoded); // 'yo'
Unicode问题解法
有个小坑是它只支持ASCII. 如果你调用btoa("中文")会报错:

let encodedData = window.btoa("Hello, world"); // base64 编码
let decodedData = window.atob(encodedData); // 解码 成 ASCII


由于encodeURI不转义&, +, 和 =。所以URL参数的值是无法转义的，比如我们想把a=?传给服务器：
encodeURI('http://www.我.com?a=?')   // => "http://www.%E6%88%91.com?a=?"
服务器收到的a值为空，因为?是URL保留字符。此时我们需要用encodeURIComponent来编码！

支持汉字
var str = "China，中国";
window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="
window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China，中国"

apply和call

<script type="text/javascript">   
    function Person(name,age)  
    {  
        this.name=name;  
        this.age=age;  
    }   
    functionStudent(name,age,grade)  
    {  
        Person.apply(this,arguments);  
        this.grade=grade;  
    }  
    var student=new Student("zhangsan",21,"一年级");   
    alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  
    //大家可以看到测试结果name:zhangsan age:21  grade:一年级  
    //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.  
</script>  
Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];
也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
call示例
在Studen函数里面可以将apply中修改成如下:
Person.call(this,name,age);

IntersectionObserver 懒加载

 <script type="text/javascript">
        var imgs = document.querySelectorAll('img');
        window.onload = function () {
            io()
        }
        function io(){
            const io = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry && entry.isIntersecting) {
                        entry.target.src = entry.target.dataset.src
                        io.unobserve(entry.target)  //停止观察 接受一个element元素
                    }
                })
            })
            imgs.forEach(item => {
                io.observe(item)  //开始观察，接受一个DOM节点对象
            })
        }
    </script>

严格模式：  'use strict';

错误提醒：  try{ ... } catch(e){ ... } 

解构：

赋值：let [a, b, c] = [1, 2, 3];

交换值：[x, y] = [y, x];

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

import { A, B }  from module;

字符串模板：`Hello ${'World'}`

箭头函数：

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

点操作符：

常规：Math.max(1,2,3)

写法：Math.max(...[1,2,3])等同于上面的例子

ES6 prosime异步操作

 function getNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    return p;            
}
//相等于下面
getNumber()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(reason){
        console.log('rejected');
        console.log(reason);
    }
);
//相等于上面
getNumber()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    },
)
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

如果在 then 的第一个函数里抛出了异常，后面的 catch 能捕获到，而第二个函数捕获不到

Promise.all

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Prosime.race

类型prosime.all 不同的是结果是最快返回的那个结果，不管结果本身是成功状态还是失败状态。

Promise.reject  Promise.resolve
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

es6 async/await

也就是说async函数会返回一个Promise对象。

如果async函数中是return一个值，这个值就是Promise对象中resolve的值；

如果async函数中是throw一个值，这个值就是Promise对象中reject的值。

(async function () {

  console.log(1);

  await new Promise(resolve => {
    "use strict";
    setTimeout(() => {
      console.log(2);
      resolve();
    }, 1000);
  });

  console.log(3);

}())

“await会暂停当前async函数的执行，等待后面的Promise的计算结果返回以后再继续执行当前的async函数。”

所以 await 等待的不是所有的异步操作，等待的只是Promise。

回调地域 => prosime => async/await

ES6的Class

原生js

ES6 Calss

ES5可以先使用再定义,存在变量提升,class不存在变量提升
//ES5可以先使用再定义,存在变量提升
new A();
function A(){

}
//ES6不能先使用再定义,不存在变量提升 会报错
new B();//B is not defined
class B{

}