let(声明变量)
let a;
let b,c,d;
let e = 100;
let f = 521,g = 'xiaozhou',h = [];
特性
1、变量不能重复声明
2、块级作用域 全局,函数,eval
if for while 都是块级作用域
{
let a = 10;
}
console.log(a);
//报错,有作用域
3、不存在变量提升
console.log(b);
let b = 'hello'; //报错
4、不影响作用域链
{
let c = "hello";
function fn(){
console.log(c);
}
fn();//正常输出,无报错
}
const(声明常量,其值不能修改)
const A = 'hello';
1、一定要赋初始值
const A;//报错
2、一般常量使用大写
3、常量的值不能修改
A = 'hello xiaoming';//报错;
4、块级作用域
{
const B = 'hello';
}
console.log(B);//报错
5、对数组和对象的元素修改,不算对常量的修改,不会报错
const DATA = [11,22,33,44,55];
DATA.push('66');//正常执行,不会报错
变量的结构赋值
es6允许按照一定的模式从数组和对象中提取值,对变量进行赋值(这被称为解析赋值)
1、数组的结构
const F4 = ['小沈阳','宋小宝','刘能','赵四'];
let [xiao,song,liu,zhao] = F4;
console.log(xiao);
console.log(song);
console.log(liu);
console.log(zhao);
/* 小沈阳
宋小宝
刘能
赵四 */
2、对象的结构
const li = {
name :'李易峰',
age:'保密',
move:function(){
console.log("动物世界");
}
}
let {name,age,move} = li;
console.log(name);
console.log(age);
console.log(move);
move();
模板字符串
es6引入了新的申明字符串的方式 `` (’ ’ " " 这两个是以前的)
let str = `我是一个字符串`;
console.log(str,typeof str);
1、内容中可以直接出现换行符
let str = '<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>';//报错,需要用+号连接每一行的内容
let str = `<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>`;//正确
2、变量拼接
let love = '李易峰';
let out = `${love}是一个好演员!!`;
console.log(out);
//输出:李易峰是一个好演员!!
简化对象写法
es6允许在大括号里面,直接写变量和函数,作为对象的属性和方法(这样书写更加简洁)
let name = 'xiaozhou';
let change = function(){
console.log('we can change you!!');
}
const people = {
name,
change,
improve(){
console.log("我们可以这样简写方法");
}
//等同于
improve:function(){
}
}
console.log(people);
箭头函数
es6允许使用箭头(=>)定义函数
let fn = function(){
}
let fn = () =>{
}
1、this 是静态的,this始终指向函数声明时所在的作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2 = () =>{
console.log(this.name);
}
//设置window对象的name属性
window.name = 'xiaozhou';
const people = {
name:"buxian"
}
//直接调用
getName();//xiaozhou
getName2();//xiaozhou
//call方法调用
getName.call(people);//buxian
getName2.call(people);//xiaozhou 这里始终指向的是声明时的全局window的name
2、不能作为构造函数,实例化对象
let Person = (name,age) =>{
this.name = name;
this.age = age;
}
let me = new Person('xiao',20);
console.log(me);//报错
3、不能使用arguments变量
let fn = () =>{
console.log(arguments);
}
fn(1,2,3);
//报错 arguments is not defined
let fn = function(){
console.log(arguments);
}
fn(1,2,3);
//正确显示数组
4、箭头函数的简写
(1)、省略小括号,当形参有且只有一个
let add = n =>{
return n+n;
}
console.log(add(5));//10
(2)、省略花括号,当代码只有一条语句,此时return必须省略(而且语句的执行结果就是函数的返回值)
let pow = (n) => n*n;
console.log(pow(8));//64
箭头函数适合于this无关的回调,定时器,数组的方法回调
箭头函数不适合于this有关的回调,事件回调,对象的方法
函数参数的默认值
es6允许给函数参数赋初始值
###1、形参初始值,具有默认值的参数,一般放在靠后
function add(a,b,c=10){
return a+b+c;
}
let result = add(1,2);
console.log(result);//13
###2、与解构赋值结合
function connect({host = "127.0.0.0",username,password,port}){
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}
connect({
host:'localhost',
username:'root',
password:'root',
port:8080
})
rest参数
es6映入rest参数,用于获取函数的实参,用来代替arguments
function date(...args){
console.log(args);//返回一个数组
}
date('liyifeng','yangmi','dilireba');
rest 参数必须放最后
function fn(a,b,...args){
}
fn(1,3,4,5,6);
扩展运算符
(…)扩展运算符能将数组转换为逗号分隔的参数系列
const tfboys = ['王俊凯','王源','易烊千玺'];
//声明一个函数
function chunwan(){
console.log(arguments);//打印出三个参数
}
chunwan(...tfboys);//等同于 chunwan('王俊凯','王源','易烊千玺')
扩展运算符应用
1、数组合并
const data1 = [1,2,3];
const data2 = [4,5,6];
const data12 = [...data1,...data2];
console.log(data12);//[1,2,3,4,5,6]
2、数组的克隆(浅拷贝)
const data1 = [1,2,3];
const datap = [...data1];
console.log(datap);//[1,2,3]
3、将伪数组转为真正的数组
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
const divs = document.querySelectorAll('div');
const divarr = [...divs];
console.log(divarr);//[div, div, div, div, div]