JavaScript学习笔记—ES6

JavaScript学习笔记—ES6

内容：

• ES6的新增语法
• ES6的内置对象扩展

---

1.ES6的新增语法

1.1 let 关键字

声明的变量具有块级作用域，类似 { }

• let声明的变量只在所处于的块级有效（可以防止循环变量变成全局变量）

if(true){
	let a=10;
}
console.log(a);// a is not defined	

• 不存在变量提升

console.log(a); // a is not defined
let a=20;

• 暂时性死区
  就是，在块级作用域中，使用let声明变量，这个变量会与这个块级整体进行绑定，不受外部影响。

var num=10;
if(true){
	console.log(num); //会报错，num is not defined
	let num=20;
}

经典面试题 ①：

var arr=[];
for(var i=0;i<2;i++){
	arr[i]=function(){
	    console.log(i)
	    }
}	    
arr[0](); // 2
arr[1](); // 2

此题的关键点：变量i是全局变量，函数执行时输出的都是全局作用域下的i值

经典面试题 ②：

let arr=[];
for(let i=0;i<2;i++){
	arr[i]=function(){
	console.log(i);
	}
}
arr[0](); // 0
arr[1](); // 1

此题的关键：每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值。

---

1.2 const 关键字

作用：声明常量。内存地址不能变化的量
（简单数据类型的值是不能变化的，遇上复杂数据类型时只可改里头的内容）

• 具有块级作用域
• 声明常量时必需赋值
• 常量赋值后，值不可以修改

总结： let、const、var 的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

---

1.3 解构赋值

从数组或对象中提取值，按照对应的位置，对变量赋值。

数组解构

let [a,b,c，d,e]=[1,2,3]; // 注意：[a,b,c]的中括号不代表数组，他代表结构，从数组中提取值
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
//变量的数量和值的数量不一致会出现什么情况？
console.log(d); // undefined
console.log(e); // undefined

对象解构

let person={name:'zhangyang',age:20};
let {name,age}=person;
let {asd,op}=person;
console.log(name); //zhangyang
console.log(age); //20
console.log(asd); // undefined
console.log(op); //undefined

let {name:myName,age:myAge}=person; //myName myAge 属于别名； name是用来匹配person中的属性，冒号右边的myName才是真正的变量
console.log(myName); //zhangyang
console.log(myAge); // 20

---

1.4 箭头函数

格式：

( ) => { } 
const fn = ( ) => { }

如何调用？
赋值给一个变量

• 如果形参只有一个，可以省略小括号
• 如果函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
• 箭头函数不绑定this关键字，this指向的是函数定义位置的上下文this

<script type="text/javascript">
function fn(){
console.log(this);

	return ()=>{
	 console.log(this) // 这个return 返回的是这个匿名函数（箭头函数）。虽然是会返回，但是你没有用东西装它，没有调用它所以它不起作用。
	}
}

const obj={name:'zhangsan'};

var resFn=fn.call(obj); //此处，使用call()方法更改了fn()的this指向。且用resFn来接住返回的匿名函数。即 var resFn=()=>{console.log(this);}

resFn(); //调用箭头函数
</script>

箭头函数面试题： 输出的年龄是几岁？

var age =100;

var obj={
 age:20,
 say:()=>{
 	alert(this.age)；
 }
}

obj.say(); //20

1.对象是不能产生作用域的！
say( )被定义在了全局作用域下
所以此处的this不是指向obj，而是window下面的age

---

1.5 剩余函数

允许我们将一个不定数量的参数表示为一个数组；和解构配合使用

function fn(first,...args){
	console.log(first); // 1
	console.log(args); // [2,3,4] 是数组的形式奥
}
fn(1,2,3,4);

let students=['wangwu','zhangsan','lisi'];
let [s1,...s2]=students;
console.log(s1); // wangwu
console.log(s2); // ['zhangsan','lisi']

暂时没有遇到一个实例用法，看看日后什么时候遇上

---

2.ES6的内置对象扩展

2.1 Array 的扩展方法

1. 扩展运算符（展开语法）：…

1. 可以将数组或者对象转为用逗号分隔的参数序列

let ary= [1,2,3];
...ary// 1,2,3
console.log(...ary);//1 2 3

2. 可以用于合并数组

let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2];

//或 ary1.push(...ary2);

3. 将 类（伪）数组或对象转换为真正的数组

let divs = document.getElementsByTagName('div');
divs=[...divs];

---

2. 构造函数方法：Array.from( )

1. 可以将类数组或可遍历对象转换为真正的数组

var arrayLike = {
   "0": "张三",
   "1": "李四",
   "2": "王五",
   "length": 3
  }
  
  var ary = Array.from(arrayLike);
  console.log(ary) // ['张三','李四','王五']

2. 可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

var arrayLike = {
   "0": "1",
   "1": "2",
   "length": 2
  }
  var ary = Array.from(arrayLike, item => item * 2)
  
  console.log(ary)

---

3. 实例方法：find （ ）

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

var ary = [{
   id: 1,
   name: '张三'
  }, {
   id: 2,
   name: '李四'
  }];
  let target = ary.find(item => item.id == 3);
  console.log(target) // undefined

4. 实例方法：findIndex（ ）

用于找出第一个符合条件的数组成员的位置，如果没有找到返回 -1

let ary = [10, 20, 50];
  let index = ary.findIndex(item => item > 15);
  console.log(index)

5. 实例方法：includes（ ）

表示某个数组是否包含给定的值，返回布尔值。

let ary = ["a", "b", "c"];

  let result = ary.includes('a')
  console.log(result)//true
  result = ary.includes('e')
  console.log(result) // false

---

2.2 String 的扩展方法

1. 模板字符串

使用反引号定义

1. 可以解析变量

let name ='张三';
let sayHello=`hello,my name is ${name}`; // hello,my name is 张三

后面有用到这个方法哦

2. 模板字符串中可以换行

let result = {
   name: "zhangsan",
   age: 20
  };
  let html = `
   <div>
    <span>${result.name}</span>
    <span>${result.age}</span>
   </div>
  `;
  console.log(html);

3. 可以调用函数

const sayHello = function(){
return '可以调用函数哦';
};
let greet = `${sayHello( )} 真的`;
console.log(greet); //可以调用函数哦 真的

---

2. startsWith( )和endsWith( )

• startsWith( ) ：表示参数字符串是否在原字符串的头部，返回布尔值
• endsWith( ) ：表示参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello ECMAScript 2015';
  let r1 = str.startsWith('Hello'); //true
  let r1 = str.startsWith('Hello ecma '); // false
  console.log(r1);
  let r2 = str.endsWith('2016'); //false
  console.log(r2)

---

3. repeat（ ）
表示将原字符串重复n次，返回一个新字符串

'x'.repeat(3); // xxx

---

2.3 Set 数据结构

ES6 提供了新的数据结构 Set。类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set 数据结构

Set 函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1,2,3,4,5]);

• add(value)：添加某个值，返回Set结构本身
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为Set的成员
• clear( )：清除所有成员，没有返回值

遍历
与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

s.forEach(value=>console.log(value)}

---