es6-es11笔记1

发表于 更新于 分类于 阅读次数： 本文字数： 1.9k 阅读时长 ≈ 2 分钟
es6到es11的笔记1

let 变量声明

1
2
3
4
5
let a;
let b, c, d, e;
let k = 555;
let t = "init";
let y = [];

let 不可重复声明

1
2
let a = 100;
let a = 200; //错误的声明

块级作用域

1
2
3
4
{
  let name = "name";
}
console.log(name); //报错，not defined

没有变量提升

1
2
3
4
5
console.log(tag); //undefined，变量提升
var tag = "name";
---------------------------;
console.log(tag); //报错
let tag = "name";

不影响作用域链

1
2
3
4
5
6
7
{
  let name = "doc";
  function fn() {
    console.log(name);
  }
  fn();
}

点击切换颜色

let案例

点击后变为粉色

html
1
2
3
4
5
6
<div class="container">
    <h2 class="page-header">点击切换颜色</h2>
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
</div>
javascript
1
2
3
4
5
6
7
8
9
let items = document.getElementsByClassName('demo1');
  //遍历并绑定事件
for(let i = 0 ; i<items.length ; i++){ //要使用let i = 0
    items[i].onclick = function() {
    //修改当前元素的背景颜色
    // this.style.background = 'pink';
    items[i].style.background = 'pink';
  }
}
css
1
2
3
4
5
6
7
.demo1 {
        width: 100px;
        height: 50px;
        border: solid 1px rgb(42, 156, 156);
        float: left;
        margin-right: 10px;
    }

若使用 var i=0;变量会被提升为全局变量，每次点击执行回调函数时，都会执行 items[3].style.background = ‘pink’;所以会出现问题。而使用 let 时 i 会作为回调函数内的一个元素，而不会被提升为全局变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var i;
i=3;
{
    items[i].style.background = "pink";  //使用var时
}
-----------------------------------------------------------
{
    let i=0;                            //使用let时
    items[i].style.background = "pink";
}
{
    let i=1;
    items[i].style.background = "pink";
}
{
    let i=2;
    items[i].style.background = "pink";
}

const 声明常量

const NORMAL = "常量";

  • const 声明必须有初始值。

  • 一般使用大写。

  • 常量值不能修改。

  • 块级作用域。

  • 对数组与对象的修改不算对常量的修改。

1
2
3
const nums = [1, 2, 3, 4, 5, 6];
num.push(6); //正确的写法
num = 10; //错误的写法

变量解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

数组的解构

1
2
const nums = [1, 2, 3, 4];
let [a, b, c, d] = nums; //将a,b,c,d分别赋值

对象的解构

1
2
3
4
5
6
7
8
9
const people = {
    name: "zhangsan";
    age: 18;
    ability: function(){
        console.log("ok");
    }
}
let {name,age,ability} = people;  //必须与对象属性名相同
ability();

模板字符串

声明

1
let str = `字符串`;

内容中可以直接出现换行符

1
2
3
4
5
let str = `多
           行
           子
           符
           串`;

变量拼接

1
2
let str1 = "字符串";
let sout = `${str1}<-这是拼接进来的字符串`;

简化对象写法

1
2
3
4
5
6
7
8
9
10
11
let name = "tname",age = "18";
const people={
    name,  //等同于name=name;
    age,  //age=age;
    improve(){
        console.log("a");    // 等同于 improve = function(){
                             //                               console.log("a");
                             //                           }
    }
    }
}

箭头函数

1
2
3
4
let fn = (a, b) => {
  return a + b;
};
fn(1, 2);

this 是静态的，this 始终指向**函数声明**时所在作用域下的 this 的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getName(){
    console.log(this.name);
}
let getName2 = () =>{
    console.log(this.name);
}
window.name="name1";
const s = {
    name = "name2";
}
getName();   //直接调用this指向window
getName2();   // name1

getName.call(s);   //name2
getName2.call(s);  //name1

不能作为构造实例化对象

1
2
3
4
let Person = (name, age) => {
  this.name = name;
  this.age = age; //错误的使用方法
};

不能使用 arguments 变量

1
2
3
4
let fn = () => {
  console.log(arguments);
};
fn(1, 2, 3); //错误的使用方法

箭头函数的简写

i. 当形参有且只有一个时可省略小括号。

1
2
3
4
5
6
7
let add = (n) => {
  return n++;
};
//简化为
let add = (n) => {
  return n++;
};
  ii.当代码体只有一条时可省略花括号,且return也应一并省去。

1
2
3
4
5
let p = (n) => {
  return n++;
};
//简化为
let p = (n) => n++;

箭头函数实例

箭头函数实例

两秒后变为粉色

html
1
<div id="demo2"></div>
javascript
1
2
3
4
5
6
7
8
9
10
11
12
let de = document.getElementById('demo2');
  de.addEventListener("click", function(){        //用箭头函数的写法
            setTimeout(() => {       
                this.style.background = 'pink';
            }, 2000);
        });
//   de.addEventListener("click", function(){        //不用箭头函数的写法
//            let _this = this;  //保存 this 的值,使_this指向
//            setTimeout(function(){       
//               _this.style.background = 'pink'; //修改背景颜色 this
//            }, 2000);
//        });
css
1
2
3
4
5
#demo2 {
     width: 200px;
     height: 200px;
     background: #58a;
}
1
2
3
4
5
6
7
8
9
10
const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //取其中偶数
const res = a.filter(function (i) {
  if (i % 2 === 0) {
    return true;
  } else {
    return false;
  }
});
//使用箭头函数
const res = a.filter((i) => i % 2 === 0);

箭头函数适合做与 this 无关的回调，如定时器与数组方法回调。