ES5和6的一些新特性
ES5和6的一些新特性
更详细的大家参考：阮一峰的ES6教程
1. 直接挂window下面
c=0
1.1.let 和 const 命令
var之前，js定义变量只有一个关键字：var
var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。变量声明自动提前
例如这样的一段代码：
for(var i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外：" + i)
你猜下打印的结果是什么？
let所声明的变量，只在let命令所在的代码块内有效。
我们把刚才的var改成let试试：
//let 定义的局部变量
for(let i=1;i<=5;i++){
console.log(i);
}
//let定义的是局部变量，所以在循环体外就无法获取该变量，系统就会报错
console.log(i);
const
const声明的变量是常量，不能被修改
面试题：请你说说var、let、const的区别？
答：var是比较老的版本的es中定义变量的关键字，他会将变量串为全局变量
let是es6中新增的关键字，定义局部变量
const是定义常量
1.2.字符串扩展
string的原始的方法有哪些？
-
indexOf:返回字符串的索引
-
lastIndexOf:返回字符串的最后的索引
-
length：获取字符串长度
-
substr(i,v):从第i个索引开始截取v个长度的字符
-
substring(i,v):从第i个位置截取到第v个位置(不包含v)
-
charAt（i）:获取第i个位置的字符
-
concat:字符串连接
新的API
ES6为字符串扩展了几个新的API：
includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
实验一下：
字符串模板 --代码得写到页面中
ES6中提供了`来作为字符串模板标记。我们可以这么玩：
最终效果
在两个`之间的部分都会被作为字符串的值，不管你任意换行，甚至加入js脚本
1.3.解构表达式
数组解构
比如有一个数组：
let arr = [1,2,3]
我想获取其中的值，只能通过角标。ES6可以这样：
const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
// 然后打印
console.log(x,y,z);
例如有个person对象：
const person = {
name:"jack",
age:21,
language: ['java','js','css']
}
我们可以这么做：
// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);
{name:n}：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。
1.4.函数优化-函数的简写方式
函数参数默认值
在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
写法一：
function add(a,b) {
if(!b){
b=1
}
return a+b;
}
console.log(add(10))
写法二：
function add(a , b) {
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
现在可以这么写：
function add(a , b = 1) {
return a + b;
}
// 传一个参数
console.log(add(10));
// 定义一个加法的方法，传入两个参数a,b，计算a+b的结果，并返回 ；如果b为空，则给b赋默认值1
//传统做法
function add1(a,b) {
if(b==null){
b=1;
}
return a+b;
}
//传统改进写法一
function add2(a,b) {
// 当b的值为null或者undefined的时候，返回结果为false
if(!b){
b=1;
}
return a+b;
}
// 传统改进写法二
function add3(a,b) {
b = b || 1;//当b不为空的时候，就直接参加计算，当为空的时候，赋值为1
return a+b;
}
// 改进写法
function add4(a, b = 4) {
return a+b;
}
箭头函数
ES6中定义函数的简写方式：
一个参数时：
var print = function (a) {
console.log(a);
}
// 简写为：
var print = a => console.log(a);
// 等号后面的称为 匿名函数
var print1 = function (a) {
return a+10;
}
// 采用箭头函数如何表示
var print2 = a =>{
return a+10;
}
// 当只有一行代码的时候，可以不需要{}，同时不需要return关键字
var print3 = a => a+10;
多个参数：
// 两个参数的情况：
var print = function (a , b) {
return a + b;
}
// 简写为：
var print = (a,b) => a+b;
代码不止一行，可以用{}括起来
var print = (a,b) => {
return a + b;
}
/***********一个参数使用箭头函数************/
/*********当使用了箭头函数之后，可以少写代码**********/
function print1(a){
return a+1;
}
// 匿名函数
var print2 = function (a) {
return a+1;
}
// 箭头函数
var print3 = a => {
return a+1;
}
// 在箭头函数的大括号中，如果只有一行输出代码，那么大括号和return都可以省略
var print4 = a => a+1;
/************多个参数使用箭头函数*************/
var print5 = function (a,b) {
return a+b;
}
var print6 = (a,b) => a+b;
对象的函数属性简写
比如一个Person对象，里面有eat方法：
let person = {
name:"lucy",
eat1:function (food) {
console.log(this.name+"1正在吃"+food);
},
eat2: food => console.log(this.name+"2正在吃"+food),// 在这种情况下，无法通过this访问name
eat3(food){
console.log(this.name+"3正在吃"+food)
},
eat4: food => console.log(person.name+"4正在吃"+food),// 在这种情况下，无法通过this访问name
}
数组中新增了map方法。
map
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
举例：有一个字符串数组，我们希望转为int数组
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)