JS基础知识（下）

js有三座大山

• 原型和原型链
• 作用域和闭包
• 异步和单线程

什么是异步

//异步示例
console.log(100);
setTimeout(function(){
  console.log(200);
},1000)
console.log(300);

//100
//300
//200

//同步示例
console.log(100);
alert(200);  // 必须点击弹出框后才会继续执行接下来的代码
console.log(300);

前端使用异步的场景

console.log('start');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    console.log(xhr.responseText);
  }
}
xhr.open('GET','https://www.baidu.com/',true);
xhr.send();
console.log('end');

// 在 AJAX 时代，进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。
// 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题
console.log('start');
fetch("https://www.baidu.com/").then(function(res){
  console.log(res.url);
})
console.log('end');

// start
// end
// https://www.baidu.com/

console.log('start');
var img = document.createElement('img');
img.onload = function(){
  console.log('loaded');
}
img.src = 'test.jpg';
console.log('end');

<button id="btn">test</button>

console.log('start');
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
  console.log('clicked');
})
console.log('end');

异步和单线程

单线程特点：不能同时干两件事

日期

Date.now();  // 获取当前时间毫秒数
var dt = new Date();
dt.getTime(); // 获取毫秒数
dt.getFullYear(); // 年
dt.getMonth(); // 月 （0-11）
dt.getDate(); // 日 （0-31）
dt.getHours(); // 小时 （0-23）
dt.getMinutes(); // 分钟 （0-59）
dt.getSeconds(); // 秒 （0-59）


function formatDate(dt){
  if(!dt){
   dt = new Date();
  }
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var day = dt.getDate();
  var _ = '-';
  if(month < 10){
    month = '0' + month;
  }
  if(day < 10){
    day = '0' + day;
  }
  return year+_+month+_+day;
}
formatDate();

Math

// 获取随机数
var random = Math.random() // 0-1 之间
random = random + '0000000000' // 后面加上 10 个零
random = random.slice(0,10);
console.log(random);

//生成1个随机数，范围在min到max之间。
Math.floor(Math.random() * (max - min + 1)) + min;

数组API

//push() 函数用来在数组的末尾添加元素
//pop() 函数用来移出数组中最后一个元素
//shift() 函数用来移出数组中第一个元素
//unshift() 函数用起来就像 .push() 函数一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。
var arr = [1,2,3,5,4];
arr.forEach(function(item,index){
  // 遍历数组的所有元素
  console.log(index,item);
});

var result = arr.every(function(item,index){
  // 用来判断所有的数组元素，都要满足一个条件只要有一个满足条件即可
  if( item < 3 ){
    return true;
  }
});
console.log("result:" + result)  // result:false

var result2 = arr.some(function(item,index){
  // 用来判断所有的数组元素，只要有一个满足条件即可
  if( item < 3 ){
    return true;
  }
});
console.log("result2:" + result2)  // result2:true

// 排序后会影响原来的数组
var arr2 = arr.sort(function(a,b){
  return a - b; // 从小到大排序
  // return b - a; // 从大到小排序
});
console.log("arr2:" + arr2); // arr2:1,2,3,4,5

var arr3 = arr.map(function(item,index){
  // 将元素重新组装，并返回
  return '<b>'+ item + '</b>';
});
console.log("arr3:" + arr3); // arr3:<b>1</b>,<b>2</b>,<b>3</b>,<b>4</b>,<b>5</b>

var arr4 = arr.filter(function(item,index){
  // 通过某一个条件过滤数组
  if(item >= 2){
    return true;
  }
});
console.log("arr4:" + arr4); //arr4:2,3,4,5

对象API

var obj = {
  x:100,
  y:200,
  z:300
}
var key;
for(key in obj){
  // 注意这里的 hasOwnProperty
  if(obj.hasOwnProperty(key)){
    console.log(key,obj[key]);
  }
}

能遍历对象和数组的通用 forEach 函数

function forEach(data,fn){
  if(data instanceof Array){
    data.forEach(function(item,index){
      fn(index,item);
    });
  }else{
    for(key in obj){
      if(obj.hasOwnProperty(key)){
        fn(key,obj[key]);
      }
    }
  }
}
var arr = ['a','b','c']
var obj = {
  x:100,
  y:200,
  z:300
}
forEach(arr,function(index,item){
  console.log(index,item);
});
forEach(obj,function(key,value){
  console.log(key,value);
});