ES6基础

ES6基础

1.let和const的定义

let : 可变变量，与var相比可以防止穿透
const: 常量

2.模板字符串

// 以前都是使用 ‘’ 或者 “” 来把字符串套起来
// 现在： `` 【反引号】
${person.name}
//例如
console.log(`hello ${name}`)//输出你好英俊

3.函数的默认参数为undefined

4.箭头函数

var sum = function(a,b){   
    return a+b;
}

var sum = (a,b)=>a+b;

5.对象初始化的简写

var name = "英俊",age = 18;
let person = {
	name:name,
    age:age;
	run:function(){
		alert("person can run");
    }
}

简写：

• 如果key和value的值一致，可以只定义一次

• 如果value是一个函数，可以把function去掉，只保留括号

  var name = "英俊",age = 18;
  let person = {
  	name,
      age,
  	run(){
  		alert("person can run");
      }
  }
  

对象简写的实战应用:

//<button οnclick="login()">登录</button>
function login() {
   var username = $("#username").val();
   var password = $("#password").val();
   // 发送ajax
    $.ajax({
       type: "post",
       // 对象简写
       data: { username, password },
       		// 原始写法
       		//data:{username:username,password:password},
       success() { 成功后的事件 }
       });
    }

6.对象解构

​ 对象是以key:value的形式存在

​ 对象解构可快速获取对象中的属性方法

//方法一 通过.的方式
console.log(person.name);
person.run();

//方法二 通过[]的方式,key为数字和变量时候可以用
console.log(person["name"]);
person["run"]();

//方法三 通过es6对象解构出来
var {name,age,go} = person;
//其还原代码为
//var name = person.name;
//var age = person.age;

//解构出来之后就可以直接根据key值使用而不需要.或者["xx"]来获取
console.log(name,age);
run();

7.传播操作符

//...student可以把person中除name的剩余属性给到student对象
var {name,...student} = person;

8.数组map

传统的方式

//要对arr数组中的每一个数组元素*2
let arr = [1,2,3,4,5];
let newarr = [];
for(let i=0; i< arr.length; i++){
	newarr.push(arr[i]*2);//将旧的数组乘以2之后push进入新的数组
}
console.log(newarr)

map的方式 – 自带的循环，并会将处理的值回填的原来的位置

var newarr = arr.map(function(a){
    return a*2;
})

//改进:使用箭头函数
//var newarr = arr.map((a)=>a*2)
//由于参数只有一个，所以其小括号也可去掉
var newarr = arr.map(a=>a*2)

console.log(newarr)

map使用实例

//map处理对象的数据
//新的一年，每个都长了一岁
var uesrs = [{name:"小黑";age:18},{name:"小红";age:17}，{name:"小绿";age:19}];

//原型map方法
var newusers = users.map(function(a){
	a.age = a.age + 1;
    return a;
});

//使用箭头函数进行改进
var newusers = users.map(a=>{
	a.age = a.age + 1;
    a.weight = 100;//同时向每个人添加新的属性
    return a;
});

console.log(newusers);

9.reduce()方法

var arr = [1,2,3,4,5];
//原型方法
//a=1,b=2 得到3
//a=3,b=3 得到6，以此类推
var res = arr.reduce(function(a,b){
	return a + b;
});

//箭头函数进行改进
var res = arr.reduce((a,b)=>a+b);

console.log(res);

10.es6模块化规范

commons js 模块化规范 exports require

//commons js 模块化规范
//在一个 四则运算.js 的文件中
const sum = function(a,b){
	return a + b;
}
modules.exports = {
    sum
}


//在另一个需要引用的文件中
const m = require('./四则运算.js');
console.log(m.sum(1,2));//即可调用

es6模块化规范

//默认不支持es6,参考babel
//在一个 userTest.js 的文件中
export function getList(){
	//在真实业务中，异步获取数据
    console.log("获取数据列表")
}
export function save(){
    //在真实业务中，异步获取数据
    console.log("保存数据")
}

//在另外一个需要引入的文件中
import {getList，save} from './userTest.js'
getList();
save();


//或者
export default(){
	getList(){
    	console.log("获取数据列表")
	},
        
     save(){
   		 console.log("保存数据")
	}
}
//在另外一个需要引入的文件中
import user from './userTest.js'
user.getList();
user.save();