var 与 let,const的区别
var
- 可以重复声明
- 无法限制修改
- 没有块级作用域
let 不能重复声明，变量-可以修改，块级作用域
const 不能重复声明，常量-不能修改，块级作用域
函数
箭头函数——只是一种简写
function 去掉 ，加=>
#es5
function () {
}
#es6
()=>{
}- 如果只有一个参数，（）可以省
- 如果只有一个return,return和花括号{}可以省
window.onload = function() {
alert('abc);
};
#es6
window.onload = ()=> {
alert('abc');
};函数的参数
- 参数的扩展/展开
- 默认参数
参数扩展
- 搜集剩余的参数(Rest Parameter)，但必须是最后一个
function show(a,b,...args) {
alert(a);
alert(b);
alert(args);//args = [3,4,5,6]
}
show(1,2,3,4,5,6);展开数组
- 展开后的效果，跟直接把数组的内容写在这儿
let arr=[1,2,3];
show(...arr); //==show(1,2,3)
function(a,b,c){
}默认参数
- 可传可不传，传递就听你的，不传递就按默认的。
function show(a,b=1,c=2){//b=1,c=2默认参数
console.log(a,b,c);
}
show(7,8,9);//result: 7,8,9解构赋值
解构=“拆”
- 左右两边结构必须一样
- 右边必须是个东西
- 声明和赋值不能分开，必须在一句话里面
let arr=[1,2,3];
#解构赋值
let [a,b,c]=[1,2,3];//左右两边必须一样let {a,b,c}={a:1,b:2,c:3};//json
let [{a,b,c},[n1,n2,n3],num,str]=[{a:1,b:2},[1,2,3],1,'abc'];
# 等同
let [json,arr,num,str][{a:1,b:2},[1,2,3],1,'abc'];
console.log(json,arr,num,str);数组
四个新方法
- map 映射：一个对一个
- reduce 汇总：一堆出来一个
- filter 过滤器
- forEach 循环（迭代）
map
let arr = [1,2,3];
let result = arr.map(function(item){
return item*2;
});
alert(result);
# 箭头函数改写
let result = arr.map(item=>item*2);reduce
# 求和
let arr = [1,2,3,4,5,6];
let result = arr.reduce(function(tmp,item,index){
return tmp+item;
//tmp：中间结果
//item:arr中的元素，index:下标
});
alert(result);# 求平均数
let arr = [1,2,3,4,5,6];
let result = arr.reduce(function(tmp,item,index){
if(index!=arr.length-1){//不是最后一个
return tmp+item;
}else {//是最后一个数
return (tmp+item)/arr.length;
}
});
alert(result);filter
let arr = [1,2,3,4,5,6];
let result = filter(item=>item%3==0);
alert(result); let arr = [
{title:'a',price:10002},
{title:'b',price:999},
{title:'c',price:789},
{title:'d',price:10090},
{title:'e',price:11122},
];
let result=arr.filter(json=>json.price>=10000);
console.log(result);forEach
let arr = [1,2,3];
arr.forEach((item,index)=。{
alert(index+':'+item);
})；字符串
- 多两个新方法
startsWith //以…开头
endsWith //以…结尾 - 字符串模板
两个新方法
let str= 'http://abc.com';
if(str.startsWith('http://')){
}else if(){
}let str = 'a.txt';
if(str.endsWith('.txt'){
alert('文本文件');
})字符串模板
1、直接把东西塞到字符串里面 ${东西}
2、可以折行
反单引号`
let a=12;
let str = `a${a}c`;//str = a12c
# 字符串拼接
let title = '标题';
let content = '内容';
let str = '<div>\
<h1>'+title+'</h1>\
<p>'+content+'</p>\
</div>';
#改写
let str2 = `<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;ES6的面向对象
新旧对比
1、class关键字，构造器和类分开
2、class中直接加方法
特点
- 继承
旧版
function User(name,pass){
this.name = name;
this.pass = pass;
}
User.prototype.showName = function() {
alert(this.name);
}
User.prototype.showPass = function() {
alert(this.pass);
}
var user = new User('blue','123');
user.showName();
user.showPass();
新版
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName() {
alert(this.name);
}
showPass() {
alert(this.pass);
}
}
var user = new User('blue','123');
user.showName();
user.showPass();继承
class vipUser extends User{
constructor(name,pass,level){
super(name,pass); //super关键字，超类(父类)
this.level = level;
}
showLevel(){
alert(this.level);
}
}
var v1 = new vipUser('blue','123');
v1.showName();
v1.showPass();
v1.showLevel();应用 React
- 组件化——class
- JSX (JSX==babel==browser.js),JS扩展版本
class Test extends React.Component {
constructor(...args) {
super(...args);
}
render(){
return <span>123</span>;
}
}
window.onload = function() {
let oDiv = document.getElementById('div1');
ReactDOM.render(
<Test></Test>,
oDiv
);
};
JSON
- JSON对象
JSON.stringify;
JSON.parse; - JSON简写(名字一样;方法)
let json = {a:1,b:2};
let str = 'http://abc.com?data='+encodeURIComponent(JSON.stringify(json)); //stringify字符串化json 标准写法
1、只能用双引号
2、所有的名字都必须用引号包起来
let str = '{"a":12,"b":5，"c":"abc"}';
let json = JSON.parse(str);简写
1、名字与值一样的时候，可保留一个
let a =1;
let b =5;
let json = {a:a,c:b};//等价于let json = {a,c:b};2、方法简写
let json = {
a:1,
show(){
alert(this.a);
}
}
json.show();