大前端系列之ES6_jdk1.6 前端let

一、什么是ES6？

简而言之，ES6就是一个语法规范，就像jdk一样，jdk1.6、jdk1.8 。

二、let、const、var

var是js常用的一个变量接收的类型，而let以及const是es6的语法，二者存在作用域以及变量穿透的问题。

//变量穿透问题，i可以在for循环之外取到
for(var i=0;i<5;i++){
    console.log(i)
}
console.log(i)


//用let就不会有这个问题
for(let j=0;j<5;j++){
    console.log(j)
}
//直接报错
console.log(j)

//const和var的区别：var可以不初始化以及，可以修改，const必须初始化而且不能修改
var PI=Math.PI;
//下面可以对PI进行修改，不会报错
PI=PI+1;
console.log(PI);

const PI1=Math.PI;
//下面对const修饰的常量进行改变就会报错
PI1=PI1+1;
console.log(PI1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、String 模板字符串

//模板字符串
var book={
    bookName:"富爸爸穷爸爸",
    price:"48.8",
}
let word=`我最近在${book.bookName},这本书我买了${book.price}元`;
console.log(word)
1
2
3
4
5
6
7

四、函数默认参数

ES6里面支持我们给函数传入默认的参数，以防止参数传递缺失出现结果异常。

function test(a="",b=""){
return a+b;
}

function add(a,b){
    return a+b;
}
function add1(a=100,b=100){
    return a+b;
}
//由于没有传入b的值，结果为NaN
console.log(add(100))
//此出b没有传入值，所以出现默认值，结果200
console.log(add1(100))
let a=test("沪市","A股");
 console.log(a)


console.log(test("深市"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

五、ES6之箭头语法

1、去掉function
2、参数括号外面加箭头
3、如果方法体只有一个return，去掉return以及{}
4、如果参数只有一个、参数括号也可以省略

function one(a,b){
    return a+b;
}


console.log(one(1,2))

var two=(a,b)=>a+b;
console.log(two(4,5));


var three=a=>a+1;

console.log(three(6))
1
2
3
4
5
6
7
8
9
10
11
12
13
14

六、ES6之对象简写

let person={
name:"张三",
age:12
}

//1、如果key和变量名字一直，写一个key即可
//2、如果value是一个方法，直接去掉function
let name="李四";
let age=18;
let person1={
    name,
    age,
    get(){
        console.log(`我是${this.name},今年${age}岁`)
    }
}
person1.get()

$("#loginbtn").on("click",function(){

    var account=$("#account").val();
    var password=$("#password").var();

    //直接对象简写  let params={account:account,password:password}
    let params={account,password};
    //执行异步
    $.ajax({
        type:"post",
        url:"XXX",
        data:params,
        success:function(){
            
        }
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

七、对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

	let obj={
    name:"周三",
    age:79,
    get(){
        return `我是${this.name},今年${this.age}`
    }
}

//传统获取
console.log(obj.name)
console.log(obj.get())
console.log("--------------")
//es6对象结构，就是快速获取对象属性和方法的一种方式，但是属性命名必须一致
let {name,age}=obj

console.log(name)
console.log(age)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

八、ES6之对象传播符

//对象传播操作符
let obj={
    name:"张三",
    age:42,
    address:"啊广州",
    phone:1326,
    level:2
}

//结构对象
let {name,age,...ohter}=obj

console.log(name)
console.log(age)
console.log(ohter)

let userPage={pages:10,pageNo:2,pageSize:100,total:1000,users:[{name:"湛山",age:15},{name:"lisi",age:12}]}
let  {users,...userPage2}=userPage;
console.log(users);
console.log(userPage2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

九、ES6之map

map和java8的新特性中的stream中提供的map类似，能对集合中每一个元素进行操作

//需求：数组每个元素进行乘2操作
let arr=[1,2,3,4]
//传统
let newArr=[];
for(let a=0;a<arr.length;a++){
    newArr.push(arr[a]*2)
}

console.log(newArr)
//es6
let newArr2=arr.map(a=>a*2);
console.log(newArr2)
1
2
3
4
5
6
7
8
9
10
11
12

十、ES6之reduce

reduce(function(),初始值（可选）) ：

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

let arr=[1,2,3,4,5,6,7,8,9,10]


console.log(arr.reduce((a,b)=>a+b))
1
2
3
4