ES6概述
ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。我们现在学的ES6实际学的是ES4。
let与const关键字
let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var(在一对大{} 里面起作用)
{
let a = 15;
console.log(a);
}
并且let 不能重复声明(下面是错误示范)
{
let a = 10;
let a = 20;
}
let声明变量不会变量提升,下面这样写会报错,而var 声明变量会出现undefined
{
console.log(a);
let a = 15;
}
const声明变量通常为常量与let的特点一样并且const声明变量必须赋值 变量名建议大写 const声明变量后不可重新赋值
const PI = 3.1415926;
console.log(PI);
const ARR=10;
ARR = 20;
console.log(PI);
//会报错
解构
解构就是把数组或者对象拆分为单个的变量。
交换变量
var a = 15;
var b = 88;
[a, b] = [b, a];
console.log("a:",a);
console.log("b:",b);
//a,b值互换
用,(逗号)分割可以跳过 ... 剩余值给默认值有顺序的
var arr = [1,3,5,7,9];
// 同a,b,rest 解构数组arr
// rest 对应的是剩余内容
var [a,b,...rest]=arr;
console.log(arr);
console.log(a,b,rest);
ES6中解构数组可以给默认值
var arr1 = [2, 9];
[e,f,g=50] = arr1;
console.log("e:",e)
console.log("f:",f)
console.log("g:",g)
es6还可以解构对象
let o = {p:42, q:true};
let {p,q} = o;
console.log(p,q);
//变量名必须和对象键名一致
字符串
字符串模板给字符串拼接带来了极大的方便
``包裹字符串,${变量} 可以保留换行
var obj = {name:"xxx",age:18};
var str = `大家好我的名字是:${obj.name}
今年${obj.age}`;
console.log(str);
includes (包含)、startsWith(开头包含) 、endWith(结尾包含) 可以检测字符串
let str = "string";
console.log('includes',str.includes("c"));
console.log('start',str.startsWith('str'));
console.log('end',str.endsWith('ng'));
字符串-重复与填充
repeat(n) 重复n遍 padStart(a,b)从前面把字符串用b填充直到有a个 padEnd(a,b)从后面开始把字符串用b填充直到有a个
var a = "我爱你!";
console.log(a.repeat(10));
var str = "5";
console.log(str.padStart(3,"0"));
console.log(str.padEnd(2,"元"));
函数
箭头函数是ES6的重要内容
ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体:=> 前面是函数参数 =>后面是返回值也是执行语句
var getPrice = function() {
return 4.55;
};
//明显更简便
var getPrice = () => 4.55;
多个参数 或者没有参数 都用( )括号包起来
var arr3 = [1,2,3];
arr3.forEach(
(item,index,self) => console.log(item,index,self)
)
执行语句有多个的时候 用{}包括起来
var fun = (a)=>{
if(a>10){
return "大了";
}
else if(a<10){
return "小了";
}
else{
return "恭喜中奖了";
}
}
箭头函数this 指的是函数上一层的this
var obj = {
name:"xxx",
age:18,
say:function(){
setInterval(()=>{ //3秒触发一次
// 谁调用函数 this指向谁
// 箭头函数this指向上一层作用域
console.log(`大家好我是${this.name}今年${this.age}`);
this.age++;
},3000)
}
}
obj.say();
函数的参数可以设置默认值 或 不定参
function add(a=3,b=5){
return a+b;
}
console.log(add(10));
function add1(...arg){
// arg 是一个参数数组是不定义
return arg.reduce((a,b)=>a+b);
}
console.log(add1(1,2,3))
console.log(add1(1,2,3,4,5));
对象
var name = "张三";
var age = 18;
// var obj = {
// name:name,
// age:age,
// }
// 当变量名与键名一致时 可以省略
var obj = {
name,
age,
say() { alert("我是" + this.name) }
}
// 动态属性
var a = "my";
var b = "name";
var obj2 = {
age:18,
// 拼接
[a+b]:"张三"
}
console.log(obj2);
总结
let const 可以声明变量es6可以将数组或对象解析成单独的变量 箭头函数是函数的一种简写形式,使用括号包裹参数,跟随一个 =>:=> 前面是函数参数 =>后面是返回值也是执行语句。(本人小白,文章不具备参考性,勿在意)