ES6(一)
2019-02-17 本文已影响0人
红笔黑字
JavaScript是EMCAScript的一种,它只是一种标准——但是,完全实现它的,暂时只有JavaScript。
ES6新语法:
1.变量/赋值
var:可以重复定义、不能修改限制、没有块级作用域
let:不能重复定义、变量、块级作用域
const:不能重复定义、常量、块级作用域
解构赋值:
1.左右两边必须一样,右边内容需有意义
2.定义和赋值必须同时完成
window.onload = function (ev) {
let aBtn = document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick = function () {
alert(i)
}
}
}
点击为:0,1,2
for内的let改为i,点击为:3,3,3
Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量,常用解决办法(闭包,常用来防止全局变量污染):
window.onload = function (ev) {
let aBtn = document.getElementsByTagName('input');
for(var n=0;n<aBtn.length;n++){
(function (n) {
aBtn[n].onclick = function () {
alert(n)
}
})(n)
}
}
解构赋值:let [a,b,c]=[1,{a:2,b:"w",c:""},14];
2.函数
2.1箭头函数:
function(参数,参数){函数体}
(参数,参数)=>{函数体}
示例:
let show=(a,b)=>{
return a+b
}
1.如果参数只有一个,()可以省略
2.如果函数体只有一句,且是return,{}可以省略
示例:
let a=n=>n*2;
2.2默认参数:
(a,b,c=12)
2.3参数展开(剩余参数,参数数组):
1.接收剩余参数:
function show(a, b, ...名字)
剩余参数必须在参数列表的最后
2.展开一个数组:
let arr=["a","b","c"];
let arr2=[1,2,...arr,3,4];
console.log(arr2)
// [1, 2, "a", "b", "c", 3, 4]
3.数组 /json
数组新增了几种方法
1.map:映射,一一对应
arr.map(function(){})
2.filter: 过滤
3.forEach: 遍历(以前就有了)
2.reduce:汇总
5.Array.from([array-like])=>[x,x,x]
json的改变
1.简写:名字和值一样的,可以省
let a=1;
let b=2;
let json={a,b}
2.function可以不写
let json={
a:1,
b:2,
show(){
alert(this.a+this.b)
}
};
3.1 map的使用
let arr=[1,2,3,4,5,6];
let arr2=arr.map(function (item,index) {
if(item>3){
return true
}else{
return false
}
});
console.log(arr2)
简写(index没有用到):
let arr2=arr.map(item=> item>3);
3.2 filter的使用
let arr=[1,2,3,4,5,6];
let arr2=arr.filter(item=>item%2);
//过滤偶数,只剩奇数
3.3 forEach的使用
let arr=[1,2,3];
let sum=0;
arr.forEach(item=>{sum+=item});
alert(sum)
//6
3.4 reduce的使用
let arr=[1,10,100,1000,10000,100000];
let sum=arr.reduce((tmp,item,index)=>{
console.log(tmp,item,index);
return tmp+item
});
console.log(sum)
// sum求出的是综合,tmp是起始数,第一个item是10,第一个index也是1
//
3.5 Array.from([array-like])=>[x,x,x]
使不是数组的集合,可以用数组的方法
4.字符串
1.字符串模板(要用到反单引号:``):
console.log(`这是一个$(a),那是一个$(b)`)
单引号内,可以任意换行
2.startswith/endswith
5.面向对象
5.1有了真正的类(和python越来越像了...):
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
showName(){
alert(this.name)
}
showAge(){
alert(this.age)
}
}
let p=new Person("红笔黑字",10);
p.showName();
p.showAge();
5.2继承
class Worker extends Person{
constructor(name,age,job){
super(name,age);//继承父亲的这两个属性
this.job=job;
}
showJob(){
alert(this.job)
}
}
//属性靠的super,方法靠的extends
5.3this
普通函数:根据调用我的人 this老变
箭头函数:根据所在的环境 this恒定(无论谁调,找所在环境,一般是上级)
bind——给函数定死一个this
oBtn.onclick=a.bind(a);
箭头函数优先级高于bind