1、let变量
1、声明变量
1 2 3 4 5
| let a; let a,b; let a = 10; let b = []; let c = '你好!';
|
2、变量不能重复声明
1 2 3
| let start = '张永记'; let start = '葛震鹏'; var可以重复声明,但是let不可以,会报错。
|
3、块级作用域
1 2 3 4 5 6
| { let girl = '谢长友'; } console.log(girl); 报错,超出块级作用域。 不局限于此,if else while等语句也满足上述情形。
|
4、不存在变量提升
1 2 3
| console.log(girl); let girl = '谢长友'; 报错,var不会,开始时程序会收集变量,var可以提升,let不可以。
|
5、不影响作用域链
1 2 3 4 5 6 7
| { let school = '北京邮电大学'; function fn(){ console.log(school); } fn(); }
|
2、const常量
1、一定要赋初始值
2、一般常量使用大写(潜规则)
3、常量的值不能修改
4、块级作用域
1 2 3 4
| { const school = '北京邮电大学'; } console.log(school);
|
5、对于数组和对象的元素的修改,不算做对常量的修改,不会报错
1 2
| const TEAM = ['UZI','MLXG','MING','XIAOHU']; TEAM.push('MEIKO');
|
3、变量的解构赋值
1
| ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
|
1、数组的解构
1 2 3 4 5 6
| const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao,liu,zhao,song] = F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song);
|
2、对象的解构
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| const zhao = { name : '赵本山', age : '不详', xiaopin: function(){ console.log("我可以演小品"); } }
let {name,age,xiaopin} = zhao; //解构时注意name,age这些要一一对应。 console.log(name); console.log(age); console.log(xiaopin);
xiaopin();
|
4、模板字符串
1
| 新的声明字符串的方式,有单引号‘’,双引号“”,现在还有反引号``。
|
1、声明
1 2
| let str = `我也是一个字符串!`; console.log(str);
|
2、内容中可以直接出现换行符
1 2 3 4 5 6
| let str =`<ul> <li>马云</li> <li>马化腾</li> <li>赵子龙</li> <li>刘备</li> </ul>`;
|
3、用于变量的拼接
1 2 3
| let love = '淑芬'; let out = `${love}是我最喜欢的科目!`; console.log(out);
|
5、对象的简化写法
1
| ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法,使得书写更加的简洁。
|
1 2 3 4 5 6 7 8 9 10 11 12
| let name = '北京邮电大学'; let change = function(){ console.log('你好呀!'); }
const school = { name, change, improve(){ //函数方法可以简化为此种形式。 console.log('这样也可以呀!'); } }
|
6、箭头函数
1 2 3 4 5 6 7 8 9 10 11 12
| 对比: 起初定义的函数类型: let fn = function(a,b){ return a + b; } 箭头函数: let fn = (a,b) =>{ return a + b; } let result = fn(1,2); console.log(result);
|
1、this是静态的,this始终指向函数声明时所在作用域下的this值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| function getName(){ console.log(this.name); }
function getName2 = () => { console.log(this.name); }
//设置window的name属性 window.name ='北京邮电大学'; const school = { name: "北京师范大学"; }
//直接调用 getName(); getName2(); 都输出`北京邮电大学` // this是静态的,this始终指向函数声明时所在作用域下的this值。 //call方法调用 getName.call(school); getName2.call(school); 第一个输出`北京师范大学`,第二个输出`北京邮电大学`。
|
2、不能作为构造实例化对象
1 2 3 4 5 6 7 8
| let person = (name,age) => { this.name = name; this.age = age; }
let me = new person('张三',20); console.log(me); //出错,箭头函数不能作为构造实例化对象。
|
3、不能使用arguments变量
1 2 3 4
| let fn = () => { console.log(arguments); } fn(1,2,3);
|
4、箭头函数的简写
1 2 3 4 5 6 7 8 9
| 1、省略小括号,当形参有且只有一个的时候 let add = n => { return n + n; } console.log(add(2));
2、省略花括号,当代码体只有一条语句时,此时return必须省略,语句的执行结果就是函数的返回值。 let pow = n => n + n; console.log(pow(2));
|
5、箭头函数实战示例
1、如何获取到相应的”元素“,getElementById(‘Id’)。
2、如何为相应的”元素“增加事件,addEventListener(‘事件触发的方式’,触发的事件)。
3、延时函数的使用方式,setTimeout(‘延时执行的事件’,延时的时间,单位是毫秒)。
4、this指代问题的两种解决办法,更推荐使用箭头函数的方式。
1、数组按要求筛选,筛选的方法是filter()。
2、注意箭头函数的使用方式。
7、函数参数默认值的设置
1、有默认值时,没有传值则使用默认值。
2、是对象时与解构配合使用更好。
8、rest参数
注:rest参数得到的返回值是一个数组,更便于使用。
9、扩展运算符
1 2 3 4 5
| ...扩展运算符能将数组转化为逗号分隔的参数序列
声明一个数组 const tfboys = ['yyqx','wjk','wy']; ['yyqx','wjk','wy'] ...tfboys 'yyqx','wjk','wy'
|
1、用于数组的合并
2、用于数组的克隆
3、将伪数组转成真正的数组
10、迭代器
1 2 3 4 5 6 7 8 9 10 11
| const array = ['唐三','小舞','戴沐白','奥斯卡'];
使用in,输出的是键名。 for(let i in array){ console.log(i); }
使用of,输出的是键值。 for(let i of array){ console.log(i); }
|
11、promise方法
1、生成一个promise对象
2、promise()里面是一个函数,函数有两个参数resolve,reject
3、异步执行后,可以调用promise对象的then方法
4、then方法里面有两个参数,是两个函数,前面执行调用成功,后面执行调用失败
12、async和await