变量声明
let和const使用
console.log(flag);//undefined
var flag= 123;
console.log(flag);//123
//let声明的变量不存在解析
let flag= 123;
console.log(flag);//报错
var flag = 123;
var flag = 456;
console.log(flag);//456
let flag = 123;
let flag = 456;
console.log(flag);//报错
//ES6引入块级作用域
//在块级作用域内部,变量只能先声明再使用
//暂时性访问区
if(true){
var flag = 12;
}
console.log(flag);//123
if(true){
let flag = 12;
}
console.log(flag);//报错
//const用来声明常量
// 声明的常量不允许重新赋值,而且也必须初始化
const n = 1;
const n = 2;//报错
字符串和函数
变量的结构赋值
var a = 1;
var b = 1;
var c = 1;
var a = 1, b =2;
//数组的结构赋值
let [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
//结构赋值位置对应
let [a,b,c] = [,2,];
console.log(a,b,c);
//对象的结构赋值,跟顺序无关
let {foo,bar} = {foo:'hello', bar:'hi'}
console.log(foo,bar);
//对象属性别名,如果有了别名,那么原来的名字就无效了
let {foo:abc,bar} = {foo:'hello', bar:'hi'}
console.log(abc,bar);//那么此时foo不能访问
let {con,sin,random} = Math;
console.log(typeof con);//function
console.log(typeof sin);//funciton
console.log(typeof random);//function
//对象结构赋值指定默认值
let {foo:abc='hello',bar} = {bar:'hi'}
console.log(abc,bar);//那么此时foo不能访问
字符串的结构赋值
let [a,b,c,d,e] = "hello";
console.log(a,b,c,d,e);
console.log("hello".length);
let {length} = "hello";
console.log(length);
字符串相关扩展
includes() //判断字符串中是否包含子串 ,,有返回true,否则false
//参数一:匹配的子串
//参数二:从第几个开始匹配
console.log('hello world'.includes('world'));//true
console.log('hello world'.includes('world',6));//true //从第几个开始进行判断
starsWith()
//判断字符串以指定的字串开始
let url = "admin/index.php";
console.log(url.startsWith('aadmin'));//false
endsWith()
//判断字符串以指定的字串结束
//模板字符串
let obj = {
username: 'lisi',
age : 12,
gender : 'male'
}
//正常使用方式
let tag = '<div><span>'+obj.username+'</span></div>'
console.log(tag);
//模板使用方式
let tpl = `
<div>
<span>${obj.username}</span>
<span>${1+1}</span>
<span>${function(){return 1;}}</span>
</div>
`;
函数相关扩展
//1.参数默认值
function foo(param){
let p = param || 'hello';
console.log(p);
}
foo('hi');
function foo(param = 'hello'){
console.log(param);
}
foo('hi');
//2.参数结构赋值
function foo(uname='lisi', age=12){
console.log(uname, age);
}
foo('zhangsan',13);
function foo({uname='lisi', age=13}={}){
console.log(uname, age);
}
foo({uname:'zhangsan', age=12});
//3.rest参数
function foo(a, ...param){
console.log(a, param);
}
foo(1,2,3);
//4. ...扩展运算符
function foo(a,b,c,d,e){
console.log(a+b+c+d+e);
}
//正常使用
foo(1,2,3,4,5);
let arr = [1,2,3,4,5];
foo.apply(null,arr);
//扩展属性使用
foo(...arr);
//具体应用
let arr1 = [1,2,3];
let arr2 = [1,2,3];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
//5.箭头函数
function foo(){
console.log('hello');
}
foo();
let foo = () => console.log('hello');
foo();
function foo(v){
return v;
}
let foo = v => v;
var ret = foo(111);
let foo = (a,b) => console.log(a + b);
foo(1,3);
//多个参数需要如下方式使用
let foo = (a,b) => {
let c = 1, console.log(a + b + c);
}
foo(1,3);
//匿名函数使用
let arr = [1,2,3];
arr.forEach(function(element, index){
console.log(element, index);
})
arr.forEach(f(element,index) =>{
console.log(element, index);
});
注意事项
1.箭头函数中的this取决于函数的定义,而不是调用
funtion foo(){
console.log(this);
}
foo();
foo.call({num:1});//这里的是使用call调用,那么this代表是传入的对象
2.箭头函数不可以new
let foo = () => {this.num = 123};
new foo();
3.箭头函数不可以使用arguments获取参数列表,可以使用rest参数替代
let foo = (a,b) => {
console.log(a,b);
console.log(arguments);//这种方式获取不到
}
foo(1,2);
let foo = (...param) = {
console.log(param);
}
foo(12,34);
以上是针对ES6语法做的简单的总结,以后在补充。