-
变量
var、let、const
var
- 可以重复声明
- 没有块级作用域
if (true) {
var a=12;
}
alert(a); //弹出12
let 声明变量
const 声明常量
- 禁止重复声明
- 支持块级作用域
if (true) {
let a=12;
}
alert(a); //不能输出undefined
let {a,b,c}={a: 12, b: 55, c: 99}; //相当于 let json={a: 12, b: 55, c: 99};
//let a=json.a; let b=json.b; let c=json.c
//或者 let{a,b,c}=json;
数量不同也行
let [a,b]=[12,5,8]; //a=12,b=5
let [a,b,c,d]=[12,5,8]; //d为undefined
-
箭头函数
function (参数){
} //普通函数
对应的箭头函数
(参数)=>{} //箭头函数
带有函数名的函数
function show(){
return {a: 12, b: 5};
}
等同于
let show=()=>({a: 12, b: 5});
注意以下几点
如果,有且仅有1个参数,()也可以省
如果,有且仅有1条语句-return,{}可以省(上面例2返回是json对象,‘{}’会被误认为函数代码块,所以要加一个‘()’)
- 参数展开
用三个点把内容给展开来
剩余参数——必须是最后一个
let arr=[12,5,8,99,27];
//...arr 等价于12,5,8,99,27
function sum(a,b,c,d,e){
return a+b+c+d+e;
}
//alert(sum(arr[0], arr[1],arr[2],arr[3],arr[4])); 常规写法
alert(sum(...arr));
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1, ...arr2];
//等价于let arr=[1,2,3, 4,5,6];
-
系统对象
Array
map 映射 1对1
let arr=[100, 98, 37, 28, 19, 96, 56, 67];
/*let res=arr.map(function (item){ //有item和index两个参数,index代表下标
if(item>=60){
return true;
}else{
return false;
}
});*/
let res=arr.map(item=>item>=60); //箭头函数简写
console.log(arr, res);
forEach 遍历 循环一遍
let arr=[12, 5, 8, 99];
arr.forEach((item, index)=>{ //index从0 开始
//alert('第'+index+'个:'+item);
alert(`第${index}个:${item}`); //反引号为模板字符串,${}里可以写入变量
});
例子里面的反单引号的扩展:模板字符串
filter 过滤
let arr=[12, 88, 19, 27, 82, 81, 100, 107];
let arr2=arr.filter(item=>item%2==0); //过滤出偶数
过滤后的arr2:arr2:[12, 88, 82, 100]
reduce 减少 多对1
let arr=[12, 66, 81, 92];
let res=arr.reduce(function (tmp, item, index){ //temp为中间结果
alert(`第${index}次,${tmp}+${item}`);
return tmp+item;
});
输出结果:
第1次,12+66
第2次,78+81
第3次,159+92
例子2:求平均数
let arr=[12, 66, 81, 92];
let res=arr.reduce((tmp, item, index)=>{
if(index<arr.length-1){
return tmp+item;
}else{
return (tmp+item)/arr.length;
}
});
String
字符串模板
startsWith("xxx") 以xxx开头
endsWith("xxx") 以xxx结尾
JSON
1.标准写法
{"key": "aaa", "key2": 12}
2.JSON对象
Stringify
let json={a: 12, b: 5, c: 'blue'};
let str=JSON.stringify(json); //转化为字符串
console.log(str);
parse
let str='{"a":12,"b":5,"c":"blue"}';
let json=JSON.parse(str); //把字符串转化为json对象
面向对象(ES6和ES5的比较)
ES5中类和继承的写法
function Person(name, age){ //声明对象、构造方法
this.name=name;
this.age=age;
}
Person.prototype.show=function (){ //对象的方法的写法
alert(this.name);
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('alan', 20, '码农');
w.show();
w.showJob();
ES6中类和继承的写法
class Person{
constructor(name, age){ //构造方法
this.name=name;
this.age=age;
}
show(){
alert(this.name);
alert(this.age);
}
}
class Worker extends Person{
constructor(name, age, job){
super(name, age);
this.job=job;
}
showJob(){
alert(this.job);
}
}
let w=new Worker('blue', 18, '打杂的');
w.show();
w.showJob();
发现ES6中的写法和java很相似
模块化
浏览器暂时不支持es6模块话,但是通过webpack处理后可以
导入与导出
export
export let a=xx; //导出变量
export const a=xx;
export function xxx(){ //导出函数
};
export class xxx{ //导出类
}
export {xxx, xxx, xxx, ...}; //导出json数据
export default xx;
//从另一个模块导出
export * from './m2';
export {x,x,x,x} from './m2';
export {default} from './m2';
Import
import * as mod from "./xxx";
import {a, b, c, ...} from "./xxx";
//引入默认成员
import xxx from './mod';
//模块的代码引入进来,不引入内部成员
import "./1.jpg";
import "./1.css";
//异步引入
let promise=import("./mod1");