【JavaScript】学习第十六天（ES5和ES6）

ES6语法

ES5和ES6

我们说的ES5和ES6其实就是在 js 语法的发展过程中的一个版本而已

ES5新增

一、数组的相关方法

1. 数组.forEach(function (item, index, arr) {})
2. 数组.map(function (item, index, arr) {})
3. 数组.filter(function (item, index, arr) {})
4. 数组.every(function (item, index, arr) {})
5. 数组.some(function (item, index, arr) {})

二、严格模式

1、使用"use strict"定义严格模式
2、严格模式可以定义在函数的最顶端或程序的最顶端
3、在严格模式下 在变量a 没有声明时 a = 10 ; 这样的赋值会报错，定义两个相同名称的函数参数也会报错
4、严格模式执行效率更高

call()、bind()、apply()改变this指向

先说一说this，每一个函数内部都有一个关键字是 this
函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系

1、全局定义的函数直接调用时，this=>window

function fn(){
  console.log(this);//window
}

fn();

2、对象内部的方法调用，this => 调用者（对象）

var obj = {
   name:"zhangsan",
   age:18,
   say:function(){
     consoloe.log(this);//方法内部值的是obj
   }
}

3、事件处理函数，this => 事件源

写法一：
odiv.onclick = function(){
   consoloe.log(this);//事件源odiv
}


写法二：
odiv.onclick = fn;
function fn(){
   consoloe.log(this);//事件源odiv
}

写法三：
<button onclick = "fn(this)">点我</button>

function fn(a){
   console.log(a);//a是实参this，指的是点击的button按钮
}

4、定时器内部的this指向winodw

setTimeOut(function(){
 consoloe.log(this);//事件源window
},10000)
setInterval(function(){
 consoloe.log(this);//事件源window
},10000)

5、自调用函数，this => window

(function(){
  consoloe.log(this);//window
})()

使用call()、bind()、apply()强行改变this指向

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函数是全局函数，全局函数的 this指向window

   
    需求：想将fn内部的this指向obj,这样的话，就可以使用this.age访问到18
     call：
      作用：改变this指向的
      语法：函数名.call(obj,参数1,参数2...)
      注意：1. 会调用函数
            2. fn中this指向改变成obj

      fn.call(obj,1,2);// 输出的结果是1 2 18

2、 apply()

语法：

函数名.apply(要改变的 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函数是全局函数，全局函数的 this指向window

   
    需求：想将fn内部的this指向obj,这样的话，就可以使用this.age访问到18
    apply：
    作用：改变this指向的
    语法：函数名.apply(obj,[参数1,参数2...])
    注意：1. 会调用函数
         2. fn中this指向改变成obj

    fn.apply(obj, [1, 2])

3、bind()
语法：

var newFn = 函数名.bind(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， …); newFn(传递参数)

返回值：

返回一个已经改变了 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函数是全局函数，全局函数的 this指向window

    bind():
    作用：改变this指向的
    语法：函数名.bind(obj,参数1,参数2...)
    注意
         1. 函数返回一个已经改变了this指向的函数
         2. fn中this指向改变成obj

    var newfn = fn.bind(obj, 1, 2)
    newfn();

ES6新增的内容

1、let和const关键字

 let用来声明变量,它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效,类似于C，C++,JAVA局部变量的概念。

let/const和var的区别：

1. 预解析：var会进行预解析，let/const不会
2. 变量重名：var定义变量可以重名，let/const不允许在同一个作用域下，定义重名变量
3. 块级作用域：var没有块级作用域，let/const有

1. 预解析：var会进行预解析，let/const不会
var命令会发生"变量提升"现象,也就是预解析，即变量可以在声明之前使用，值为undefined。
这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
// var 的情况
console.log(foo);// 输出undefined
var foo = 2;

// let 的情况
console.log(bar);// 报错   ReferenceError
let bar = 2;
也就意味着被let声明的变量，必须先定义在使用。

2. 变量重名：var定义变量可以重名，let/const不允许在同一个作用域下，定义重名变量
var a = 123;
var a = 123; //可以实现

let b = 123;
let b = 123; //Identifier 'a'has already been declared
3.块级作用域：var没有块级作用域，let/const有
{
   var a = 10;
   let b = 123;
}
console.log(a);
console.log(b)
上面代码在代码块之中，
分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量无法被打印，
var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

再如：
for(let i=0; i<10; i++){
   document.write(i);
}
document.write(i)；
//x 看不到
上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

let和const的区别：

1.声明时赋值
2.值的修改

什么使const命令呢？实际上它也是一种声明常量的方式。
const命令用来声明常量，一旦声明，其值就不能改变。也就是只读变量。
const a=10;
a=100; //Assignment to constant variable.报错

基本用法:
a.声明常量
const PI = 3.1415;
console.log(PI) // 3.1415
PI = 3;         // TypeError: Assignment to constant variable.
b.常量必须初始化
const foo;      //报错Missing initializer in const declaration
c.块级作用域
{
    const foo = 123;
}
console.log(foo);上述代码依然报错，和let的效果是一样的。
d.声明不提升(const修饰的变量必须先定义后使用)
if (true) {
    console.log(MAX);// ReferenceError
    const MAX = 5;
}
e.const修饰的变量不可重复定义
简单来说，let和const的功能基本类似，只是let用来修饰变量,const用来修饰常量。
无论是let还是const,这并不算新的语法，其实这些内容甚至是其他高级语言"玩剩下的",
这种改动只是将JS脚本语言更加标准化了，可见js的语法也更加的后台化。

2、字符串新增

字符串新增方法：

1. str.includes(元素):    在字符串中判断是否包含某个元素，返回的是布尔值
2. str.startsWith(字符串)    判断字符串是否以某个字符串开始，返回布尔值
3. str.endsWith(字符串)    判断字符串是否以某个字符串开始，返回布尔值
4. str.repeat(n) :      让字符串重复n次

3、箭头函数

3.1 ES6 语法中定义函数的一种方式

3.2 函数定义的方式：

3.2.1 ：声明式 function fn() {}
3.2.2 ：赋值式 var fn = function () {}
3.2.3 ：箭头函数（赋值式的一种简化写法） var fn = () => {}

3.3 箭头函数的特点：

3.3.1 ：当你的形参只有一个的时候, 可以不写小括号

   
    var fn = function(){
        console.log(1);
    }
    fn();
    简写成：
    var fn = ()=>{
        console.log(1);
    }
    fn();

3.3.2： 当你的函数体只有一行代码时, 可以省略大括号不写（如果这一行代码有return，return可以不写）

   
    var fn = function(a,b){
       console.log(a+b)
    }
    fn();
    简写成：
    var fn = (a,b)=>console.log(1); 
    fn();


    var fn = function(a,b){
      return a+b;
    }
    
    简写成：
    var fn = (a,b)=>a+b;

3.3.3 箭头函数内没有 arguments

3.3.4 箭头函数内没有 this（简单理解就是：this指代的是该箭头函数的上下文）

odiv.onclick = ()=>{
   console.log(this)
}

4、解构赋值

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

解构数组 语法: 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] =[12,4,3,23,45,32,4] 
console.log(a,b,c,d,e,f,g);


var obj = {name:'张三',age:18,sex:"男"}
var {name,age,sex} = obj;
console.log(name,age,sex);

解构赋值的用途：
用途一：解构赋值可以让一个函数返回多个值使用 []
function fun(){
    return [1,2,3];
}
//let a = fun();let [x,y,z] = fun();
//console.log(a);
console.log(x,y,z);


案例：
返回1~100能被3整除的数之和，以及这样的数有多少个。
function is3(){
    let sum = 0;
    let count = 0;
    for(let i=1; i<=100; i++){
        if(i%3==0){
            sum += i;
          count++;
        }
    }
    return [sum,count];
}
let [sum,count] = is3();
console.log(sum,count);

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

5、默认参数

5.1 概念：
给函数的形参设置一个默认值, 当你没有传递实参的时候, 默认参数会生效

语法：

function fn(a = 10, b = 20) { }  参数a的默认值是10

// 将函数的形参位置设置一个默认参数，该默认参数在没有传递实参时生效

function fn(a=10,b=20){
    console.log(a,b);
}
 
fn();

6、扩展运算符

6.1 概念：
展开合并运算符,主要是操作 数组 和 对象 的运算符号（…）
**作用：**展开、合并
**展开：**可以展开对象或者展开数组

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)

7、Set和map集合

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

Set的属性和方法

属性： size获取元素的长度

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

delete(ele) ：删除
has(ele) ：是否包含某个元素，返回布尔值
clear() ：清空set集合

Set集合特点自动去重实现数组去重 ：
let arr =[2,3,4,2,3,4,2,3,4];
let set = new Set(arr);
let arr = Array.from(set);//Number("123");
console.log(arr);

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

属性： size获取元素的长度

方法：

设置键值对 set(key,value)
获取       get(key)
删除       delete(key)
清空       clear()
包含       has(key)    返回布尔值

<script>
    // map的遍历:
    let map = new Map();
    map.set("1", "校长"); 
    map.set("2", "小明"); 
    map.set("3", "老王");//map.delete("3");map.clear();
    console.log(map.has("0"));
    console.log(map.get("2"));
    console.log(map);
    for (let t of map) {
        console.log(t[0] + t[1]); //0代表Key 1代表value
    }
map的遍历:
for(let t of map){
    console.log(t[0] + t[1]); //0代表Key 1代表value
}
</script>

7、for…of循环，

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