前言
ES6:
EMCAScript(ECMA、ES)标准
JavaScript是EMCAScript的一种
--------------------------------------------------------------------------------
JS特别特别烂
--------------------------------------------------------------------------------
ES6新语法:
1.变量/赋值
var 可以重复定义、不能限制修改、没有块级作用域
let 不能重复定义、变量、块级作用域
const 不能重复定义、常量、块级作用域
------------------------------------------------
解构赋值:
1.左右两边必须一样;右边得是个东西
2.必须定义和赋值同步完成
2.函数
箭头函数
function (参数,参数){
函数体
}
(参数,参数)=>{
函数体
}
1.如果有且仅有1个参数,()可以省
2.如果函数体只有一句话,而且是return,{}可以省
*关于this
默认参数
(a=xx, b=xx, c=xx)
参数展开(剩余参数、数组展开)
1.“三个点”的第1个用途:接收剩余参数
function show(a, b, ...名字)
剩余参数必须在参数列表的最后
2.“三个点”的第2个用途:展开一个数组
3.数组/json
数组——5种
map 映射:一个对一个
[18, 67, 98, 25, 17, 96] => [false, true, true, false, false, true]
reduce 汇总:一堆->一个
filter 过滤:
[12,5,88,37,21,91,17,24]
forEach 遍历:
Array.from([array-like])=>[x,x,x]
json——2变化
1.简写:名字和值一样的,可以省
2.function可以不写
4.字符串
字符串模板:植入变量、任意折行
if(sNum.startsWith('135')){
alert('移动');
}else{
alert('联通');
}
if(filename.endsWith('.txt')){
alert('文本文件');
}else{
alert('图片文件');
}
5.面向对象
class/constructor
extends/super
普通函数:根据调用我的人 this老变
箭头函数:根据所在的环境 this恒定
bind——给函数定死一个this
function show(a,b,...args){
}
def show(a,b,*args,c,d):
pass
--------------------------------------------------------------------------------
6.Promise
Promise——异步、同步化
7.generator
生成器
ES7
8.async/await
--------------------------------------------------------------------------------
9.模块化 ES6
打包、编译
ES6 -> ES5编译 babel
打包 browserify
--------------------------------------------------------------------------------
ajax/jsonp
websocket
--------------------------------------------------------------------------------
变量预解析
0.变量提升
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a=12;
function show(){
alert(a);
var a=5;
}
show();
</script>
</head>
<body>
</body>
</html>
1.变量定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
const a=12;
a=55;
alert(a);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
if(3<5){
let a=12;
}
alert(a);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let aBtn=document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function (){
alert(i);
};
}
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
</body>
</html>
2.参数展开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(a, b=5, c=12){
console.log(a,b,c);
}
show(12, 37, 88);
</script>
</head>
<body>
</body>
</html>
2.1处理DIV
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
</style>
<script>
window.onload=function (){
let aDiv=document.getElementsByTagName('div');
Array.from(aDiv).forEach(div=>{
div.style.background='yellow';
});
};
</script>
</head>
<body>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</body>
</html>
3.传统JS对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function (){
alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};
let p=new Person('blue', 18);
p.showName();
p.showAge();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function (){
alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};
//------------------------------------------------
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
alert('我是做:'+this.job);
};
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function (){
alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};*/
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
let p=new Person('blue', 18);
p.showName();
p.showAge();
//------------------------------------------------
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
alert('我是做:'+this.job);
};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function (){
alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};*/
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
/*let p=new Person('blue', 18);
p.showName();
p.showAge();*/
//------------------------------------------------
/*function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
alert('我是做:'+this.job);
};*/
class Worker extends Person{
constructor(name, age, job){
//super-超类(父类)
super(name, age);
this.job=job;
}
showJob(){
alert('我是做:'+this.job);
}
}
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert(this);
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
let p=new Person('blue', 18);
document.onclick=p.showName.bind(p);
</script>
</head>
<body>
</body>
</html>
4.箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let show=(a,b)=>{
return a+b;
};
alert(show(12, 5));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=()=>{
alert('abc');
};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,34,32,19];
/*arr.sort(function (n1, n2){
return n1-n2;
});*/
arr.sort((n1, n2)=>{
return n1-n2;
});
alert(arr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,34,32,19];
arr.sort((n1, n2)=>n1-n2);
alert(arr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*let show=function (a){
return a*3;
};*/
let show=a=>a*3;
alert(show(13));
</script>
</head>
<body>
</body>
</html>
4.1箭头函数的this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[1,2,3];
arr.a=()=>{
alert(this);
};
arr.a();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
document.onclick=function (){
let arr=[1,2,3];
arr.a=()=>{
alert(this);
};
arr.a();
};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
document.onclick=function (){
let a=()=>{
alert(this);
};
let oBtn=document.getElementById('btn1');
oBtn.onclick=a.bind(12);
};
</script>
</head>
<body>
<input type="button" value="aaa" id="btn1">
</body>
</html>
5.解构赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//let [a,b,c]=[12,5,8];
//let {a,b,c}={a: 12, b: 88, c: 95};
//粒度
let [n1, {a, b, c}, n2]=[12, {a: {n1: 5, n2: 8}, b: 12, c: 88}, 55];
console.log(n1,a,b,c,n2);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//let [a,b]={a: 12, b: 5};
let {a,b}={12,5};
console.log(a, b);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let {a,b};
{a,b}={a: 12, b: 5};
alert(a+','+b);
</script>
</head>
<body>
</body>
</html>
6.、默认参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(a, b, c){
b=b||5;
c=c||12;
console.log(a,b,c);
}
show(12, 37);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,8,99];
//...arr => 12,5,8,99
let arr2=[1,2,...arr,7,8];
alert(arr2);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,8,99];
let arr2=[...arr, ...arr];
alert(arr2);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[1,2,3];
let arr2=[4,5,6,7];
arr.push(...arr2);
alert(arr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show1(...args){
show2(...args);
}
function show2(a, b){
alert(a+','+b);
}
show1(12, 5);
</script>
</head>
<body>
</body>
</html>
7展开数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(a, b, ...args){
console.log(a,b,args);
}
show(12, 37, 88, 99, 123, 56);
</script>
</head>
<body>
</body>
</html>
8字符串模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let json={name: 'blue', age: 18};
//alert('我叫:'+json.name+',我今年'+json.age+'岁');
alert(`我叫:${json.name},我今年${json.age}岁`);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
const a=12;
console.log(`${a?a:'1'}`);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*alert('ab\
c');*/
alert(`ab
cde
f
d`);
</script>
</head>
<body>
</body>
</html>
9.filter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,37,21,91,17,24];
let arr2=arr.filter(item=>item%2);
alert(arr2);
</script>
</head>
<body>
</body>
</html>
10.forEach
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,37,21,91,17,24];
let sum=0;
arr.forEach(item=>{
sum+=item;
});
alert(sum);
</script>
</head>
<body>
</body>
</html>
11.function的bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(){
alert(`this是:${this}`);
}
document.onclick=show.bind('abc');
</script>
</head>
<body>
</body>
</html>
12.json-简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let a=12;
let b=5;
let json={a, b};
console.log(json);
</script>
</head>
<body>
</body>
</html>
12.1.json-省略function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*let json={
a: 12,
b: 5,
show: function (){
alert(this.a+this.b);
}
};*/
let json={
a: 12,
b: 5,
show(){
alert(this.a+this.b);
}
};
json.show();
</script>
</head>
<body>
</body>
</html>
13.map
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[62, 55, 82, 37, 26];
let arr2=arr.map(function (item){
if(item>=60){
return true;
}else{
return false;
}
});
alert(arr2);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[62, 55, 82, 37, 26];
let arr2=arr.map((item)=>{
if(item>=60){
return true;
}else{
return false;
}
});
alert(arr2);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[62, 55, 82, 37, 26];
let arr2=arr.map(item=>{
if(item>=60){
return true;
}else{
return false;
}
});
alert(arr2);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[62, 55, 82, 37, 26];
let arr2=arr.map(item=>item>=60);
alert(arr2);
</script>
</head>
<body>
</body>
</html>
14.reduce
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,37,21,91,17,24];
let sum=arr.reduce((tmp,item,index)=>{
console.log(tmp, item, index);
return tmp+item;
});
console.log(sum);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,37,21,91,17,24];
let sum=arr.reduce((tmp,item,index)=>{
return tmp+item;
});
console.log(sum/arr.length);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let arr=[12,5,88,37,21,91,17,24];
let ave=arr.reduce((tmp,item,index)=>{
if(index<arr.length-1){
return tmp+item;
}else{ //最后一次迭代
return (tmp+item)/arr.length;
}
});
console.log(ave);
</script>
</head>
<body>
</body>
</html>