javascript重点概述

获取元素与创建元素

---

• querySelector(selectors)

var el = document.querySelector(".myclass");

• getElementById(id)

• getElementByClassName(class)

• getElementByName(name)

<form name="up"><input type="text"></form>
<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>

• getElementByTagName(tagname)
• createElement(‘div’)： 创建元素
• setAttribute(属性类型，属性值)： 创建属性
• appendChild(元素)：添加到html中

var panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);

• removeChild(元素变量)： 通过父亲除掉自己，哈哈

closeBtn.onclick = function() {
  panel.parentNode.removeChild(panel);
}
class A{
	constructor(name){this.name = name}
	greeting(){alter(this.name);}
}
class B extends A{
	consructor(name){super.constructor(name);}
}

• 获取文本： el.textContent = “Button”

字符串

---

• 数字变量有一个 toStirng() 方法
• 字符串类型的变量跟Java的定义差不多，可以用 String(string)、new String(string) 构造器进行初始化。而且也有Java中常用的方法。字符串常量也以当作对象用。

return 'cat'[0];//return a

• 字符串查询：str[0]
• 字符串长度：str.length
• 字符串索引查询：str.indexOf()
• 字符串截取：str.slice(0，3)，截取索引为0，1，2的字符；slice(2)截取2到最后。
• 大小写转换：str.toLowerCase()，str.toUpperCase();
• 字符串替换：str.replace(s，d);

数组

---

• 数组的声明和初始化：let a = [‘tree’, 2, [1,3,4]]

• 数组查询：a[0]

• 数组长度：a.length

• 字符串转数组：

  let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
  let myArray = myData.split(',');
  myArray;
  

• 数组转字符串：

  myArray = myArray.join(',');
  

• 尾部添加数组项：a.push(‘sadf’，‘asd’); a.push(‘hello’);

• 尾部删除项：a.pop();

• 头部添加：a.unshift(‘what’)

• 头部删除：a.shift()

函数

---

• 匿名函数：function(){…}
• 生成随机数：Math.random()*n，0-n中随机选择。
• 去小数部分：Math.floor(3.6)，得3

事件

---

具体可以查看文首的Document

• 点击： noclick
• 双击： nodbclick
• nochange
• noclose
• nofocus
• noload
• 提交表单： nosubmit
• adddEventListener(‘click’，functionA)
• removeEventListener(‘click’，functionB)
• 事件对象e

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);

类

---

ECMAScript2015中引入了javascript类，这实际上是基于原型的继承的语法糖。我想说的是像极了java，继承的关键字extends，super 都一毛一样。原型链那种是真的不方便，也不美观。还是类好。

对象

---

var person = {
  name : ['Bob', 'Smith'],
  age : 32,
  gender : 'male',
  interests : ['music', 'skiing'],
  bio : function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

• 访问：person.name，person.bio()
• 创建新成员：

person['eyes'] = 'hazel'
person.farewell = function(a,b,c) { alert(a+b+c); }

• 通过构建函数构建对象

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}
var person1 = new Person('Bob');
var person2 = new Person('Sarah');
person1.name
person1.greeting()
person2.name
person2.greeting()
//仍可添加成员
person1.say = function(mes){alter(mes);};

• Object()构造函数创建对象

//方法1
var person1 = new Object();
person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
};

//方法2
var person1 = new Object({
  name : 'Chris',
  age : 38,
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});

//方法3
var person2 = new Object(person1);
var person3 = new Object.create(person2);

原型

---

每个函数都有一个特殊的属性叫作原型（prototype）

function doSomething(){}
doSomething.prototype.foo = "bar"; // add a property onto the prototype
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value"; // add a property onto the object
console.log( doSomeInstancing );

{
prop: “some value”,
__ proto__: {
foo: “bar”,
constructor: ƒ doSomething(),
__ proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
}

当你访问 doSomeInstancing 的一个属性, 浏览器首先查找 doSomeInstancing 是否有这个属性. 如果 doSomeInstancing 没有这个属性, 然后浏览器就会在 doSomeInstancing 的 proto 中查找这个属性(也就是 doSomething.prototype). 如果 doSomeInstancing 的 proto 有这个属性, 那么 doSomeInstancing 的 proto 上的这个属性就会被使用. 否则, 如果 doSomeInstancing 的 proto 没有这个属性, 浏览器就会去查找 doSomeInstancing 的 proto 的 proto ，看它是否有这个属性]

• 修改原型

Person.prototype.farewell = function() {
  alert(this.name.first + ' has left the building. Bye for now!');
}
person1.farewell();

• 原型实现继承

//第一步
function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;q
  this.interests = interests;
};
//2
function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}

//3
Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

异步Promise

---

fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  products = json;
  initialize();
}).catch(function(err) {
  console.log('Fetch problem: ' + err.message);
});

这里fetch() 只需要一个参数— 资源的网络 URL — 返回一个 promise. promise 是表示异步操作完成或失败的对象。可以说，它代表了一种中间状态。 本质上，这是浏览器说“我保证尽快给您答复”的方式，因此得名“promise”。

• 两个 then() 块。两者都包含一个回调函数，如果前一个操作成功，该函数将运行，并且每个回调都接收前一个成功操作的结果作为输入，因此您可以继续对它执行其他操作。每个 .then()块返回另一个promise，这意味着可以将多个.then()块链接到另一个块上，这样就可以依次执行多个异步操作。

• 如果其中任何一个then()块失败，则在末尾运行catch()块——与同步try…catch类似，catch()提供了一个错误对象，可用来报告发生的错误类型。但是请注意，同步try…catch不能与promise一起工作，尽管它可以与async/await一起工作，稍后您将了解到这一点。

• 对比阻塞型：在第二个控制台输出被第二段代码阻塞，最后输出或无法输出。

console.log("registering click handler");

button.addEventListener('click', () => {
  console.log("get click");
});

console.log("all done");

• Promise.all

let a = fetch(url1);
let b = fetch(url2);
let c = fetch(url3);

Promise.all([a, b, c]).then(values => {
  ...
});

只有三个promises的状态成为resolved时then才会运行，传递的参数value将是一个数组，对应前面的promise的结果。

• .finally(): 无论最后的结果是fullfilled还是rejected，finally的内容都会被执行

myPromise
.then(response => {
  doSomething(response);
})
.catch(e => {
  returnError(e);
})
.finally(() => {
  runFinalCode();
});

• 自定义promise： 使用Promise()构造函数构建自己的promise。

function timeoutPromise(message, interval) {
  return new Promise((resolve, reject) => {
    if (message === '' || typeof message !== 'string') {
      reject('Message is empty or not a string');
    } else if (interval < 0 || typeof interval !== 'number') {
      reject('Interval is negative or not a number');
    } else {
      setTimeout(function(){
        resolve(message);
      }, interval);
    }
  });
};

异步async/await

---

• async

//返回一个promise对象
let hello = async function() { return "Hello" };
hello();
hello().then((value) => console.log(value));

• await与async重写promise

//原版
fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

//重写
async function myFetch() {
  let response = await fetch('coffee.jpg');
  return await response.blob();
}

myFetch().then((blob) => {
  let objectURL = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch((e) =>
  console.log(e)
);

• await与async的缺点
  大量的等待导致变慢

async function timeTest() {
  await timeoutPromise(3000);
  await timeoutPromise(3000);
  await timeoutPromise(3000);
}

改进方法

async function timeTest() {
  const timeoutPromise1 = timeoutPromise(3000);
  const timeoutPromise2 = timeoutPromise(3000);
  const timeoutPromise3 = timeoutPromise(3000);

  await timeoutPromise1;
  await timeoutPromise2;
  await timeoutPromise3;
}

超时和间隔(异步的)

---

• setTimeout

// With a named function
let myGreeting = setTimeout(function sayHi() {
  alert('Hello, Mr. Universe!');
}, 2000)

// With a function defined separately
function sayHi() {
  alert('Hello Mr. Universe!');
}
let myGreeting = setTimeout(sayHi, 2000);//2秒后执行

• 给setTimeout传递参数： 可以多个参数

function sayHi(who) {
  alert('Hello ' + who + '!');
}
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');

• clearTimeout

clearTimeout(myGreeting);

• setInterval()
  经过一定时间间隔运行一次代码，反复执行。

function display(a,b) {
   console.log(a+" "+b);
}

let myDisplay = setInterval(display, 1000,'asd','asdf');

//
clearInterval(myDisplay);

• requestAnimationFrame()
  现代版的setInterval()，也是一个循环函数，区别是requestAnimationFrame()使得适应帧率，setInterval可能会丢帧。

//对比
function draw() {
   // Drawing code goes here
   requestAnimationFrame(draw);
}
draw();


function draw() {
   // Drawing code goes here
}
setInterval(draw, 17);

---

附录

---

• Javascript教程
• Document