二阶段JavaScript-Day16知识点整理(ES5语法、ES6语法)

1.ES5

​ 1.数组方法：forEach, map, filter, every, some

​ 2. 严格检查模式 “use strict”

​ 3.call(), bind(), apply()改变this指向

//1.全局定义的函数直接调用时，this -> window
//2.对象内部的方法调用，this -> 调用者（对象）
//3.事件处理函数，this -> 事件源
//4.定时器内部的this -> window
//5.自调用函数，this -> window
//(function(){
//  consoloe.log(this);//window
//})()

1.call()
	语法：函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...)
	注意：会立即执行函数
    	 第一个参数是你要改变的函数内部的 this 指向
         第二个参数开始，依次是向函数传递参数
function fn(x,y){
        console.log(x);
        console.log(y);
        console.log(this.age);
    }
var obj = {
        age: '18'
    }
fn(1, 2);// 1 2 undefined
fn.call(obj, 1, 2);//1 2 18

2.apply()
	语法：函数名.apply(要改变的 this 指向，[要给函数传递的参数1， 要给函数传递的参数2， ...])
    注意：会立即执行函数
    	 第一个参数是你要改变的函数内部的 this 指向
         第二个参数是一个 数组，数组里面的每一项依次是向函数传递的参数
fn.apply(obj, [1, 2]);//1 2 18

3.bind()
	语法：var newFn = 函数名.bind(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...); 
		 newFn(传递参数);
	返回值：返回一个已经改变了 this 指向的函数
var newfn = fn.bind(obj, 1, 2);
newfn();

2.ES6

3.let和const

​ let用来声明局部变量，const用来声明常量。

​ let、const和var的区别：

​ 1.预解析：var会进行预解析，let、const不会。

​ 2.变量重名：var定义变量可以重名，let、const不允许在同一个作用域下，定义重名变量。

​ 3.块级作用域：var没有块级作用域，let、const有。

​ 4.let可以被重新赋值，const不可以被重新赋值。

​ 5.const声明立即赋值，let可以先声明后赋值。

​ 使用let的好处：可以避免全局变量污染

4.字符串ES6新增

//1.在字符串中判断是否包含某个元素，返回的是布尔值
str.includes(元素);

//2.判断字符串是否以某个字符串开始，返回布尔值
str.startsWith(字符串);

//3.判断字符串是否以某个字符串开始，返回布尔值
str.endsWith(字符串);

//4.让字符串重复n次
str.repeat(n);

5.箭头函数

​ 定义函数，赋值式：var fn = function(){};

​ 箭头函数是赋值式的一种简化。

​ var fn = ( 参数 ) => { 函数体 };

​ 箭头函数的特点：

​ 1.当形参只有一个的时候可以不写小括号。

​ 2.当函数体只有一行代码时, 可以省略大括号不写。

​ 3.当函数体只有一行代码时，且有return，return也可以不写。

​ 注意：

​ 1.箭头函数内没有arguments

​ 2.箭头函数内没有this (this指代的是该箭头函数的上下文)

6.解构赋值

​ 解构赋值 快速从对象或者数组中获取一些数据，分为解构数组和解构对象。

​ 解构数组 语法: var [ 变量1, 变量2, 变量3, … ] = 数组

​ 解构对象 语法: var { 键名1, 键名2, 键名3, … } = 对象

var arr = [12,4,3,23,45,32,4];
var [a,b,c,d,e,f,g] = arr;
console.log(a,b,c,d,e,f,g);//12 4 3 23 45 32 4

​ 解构赋值的用途：

//1.解构赋值可以让一个函数返回多个值使用 [];
function fun(){
    return [1,2,3];
}

//2.解构赋值可以实现两个数的交换
let a=10,b=20;
[a,b] = [b,a];
console.log(a,b);

7.默认参数

​ 给函数的形参设置一个默认值, 当没有传递实参的时候, 默认参数会生效。

​ 语法：function fn(a = 10, b = 20) { } 参数a的默认值是10。

8.扩展运算符

​ 展开合并运算符,主要是操作 数组 和 对象 的运算符号（…）。

​ 作用：展开、合并

var arr = [21, 34, 54, 2, 5]
console.log(arr);//(5) [21, 34, 54, 2, 5]
console.log(...arr);//把数组的元素一个一个的展开开来

// 合并
function fun(...arr){
    console.log(arr);//将传递的形参合并成一个数组
}

fun(1,2,3,4,5);

9.Set和map集合

​ Set：数据结构，类似于数组，但是它的值不会重复（自动去重）。

​ Set的属性和方法：

​ 属性：size获取元素的长度。

​ 方法：add(ele) 向Set中添加元素。

​ delete(ele) 删除。

​ has(ele) 是否包含某个元素，返回布尔值。

​ clear()： 清空set集合。

​ map的属性和方法：

​ map也是一种数据结构，类似于对象。

​ 属性：size获取元素的长度。

​ 方法：设置键值对 set(key,value)

​ 获取键值对 get(key)

​ 删除键值对 delete(key)

​ 清空键值对 clear()

​ 包含键值对 has(key) 返回布尔值

10.for…of循环

for..of和for..in的小小总结：
for..in：ES5提出
for..of：ES6提出
数组：for.in循环可以遍历数组，遍历的是下标（字符串类型），for.of可以遍历数组，遍历的是值。
对象：for..in循环遍历对象,for..of不可以遍历对象。
map集合：for..of可以遍历map集合，for..in不能遍历map集合。