十七、js中ES6新增语法（上）

声明变量（var，let，const）!!!

语法说明
var 变量名 = 变量值; // 声明变量，函数作用域

let 变量名 = 变量值; // 声明变量，块级作用域 （ps. 作用域内不能重复定义、能修改）

const 变量名 = 变量值; // 声音常量，块级作用域（ps. 作用域内不能重复定义、不能修改 ）

留心1：块就是语法中 {}
留心2：默认全局就是一个最大块{} 只不过你看不到

语法验证：

验证：var 函数作用域

<script>
    var num  = 1
    
    function fn() {
        var num2 = 2 
        console.log(num)   // 1 全局变量，都可以输出
        console.log(num2)  // 2 局部变量，函数体内可以输出
    }
    fn() 
</script>

let语法验证：

脚下留心：默认全局有一个{} 然后 if 、for 这些也是 {} // 思考：for循环{}中的 通过 let 声明一个变量
循环结束 外面能不能用 ？ 不能

<script>
var num = 66
if (num > 1)
{
    let temp = 777
    console.log(temp)  // 可以
}
console.log(temp)     // 不能 块级作用  里面的外面不能用
</script>

const语法验证：

小总结

明确：为什么要搞出新的修饰符

原因：之前var变量修改了 导致出现bug 但是没有报错 （逻辑BUG 而不是代码BUG

解决：使用新的修饰符 let 或 const

语法：

var 变量名 = 值 // 函数作用域，可重复定义、可修改
let 变量名 = 值 // 块作用域，不可重复定义，可修改
const 变量名 = 值 // 块作用域，不可重复定义，不可修改

工作小技巧：
为避免数据污染和数据被重新定义，在es6种新增了let和const语句

// 在实际工作中想避免多个功能数据污染 也可以
// 通过自调用匿名函数
(function(window) {
// …
window.名称 = 数据 //导出成员，让外部使用
})(window)

解构赋值!!!

解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号

解构对象

之前从对象中取到内容的方式

let obj = {
name:“张三”,
age:12,
sex:“男”,
}
let name = obj.name;
let age = obj.age;

解构的方式：

let obj = {
name:“张三”,
age:12,
sex:“男”,
}
let {name} = obj;
/*
表示从obj中获取name属性，并赋值给声明的name变量
*/

使用说明：

1. obj必须是一个对象
2. obj中必须有name属性

还可以一次性解构多个变量：

let obj = {
name:“张三”,
age:12,
sex:“男”,
}
let {name,age} = obj; // 声明并赋值了两个变量

可以将变量名换成一个别的名字：

let obj = {
name:“张三”,
age:12,
sex:“男”,
}
let {name:username,age:a} = obj; // 将obj的name属性值赋值给username变量，age属性值赋值给变量a

多级解构：

let obj = {
name:“张三”,
age:12,
sex:“男”,
wife:{
name:“翠花”,
age:11,
}
}
let {wife} = obj;
let {name} = wife;
// 写为一行
let {wife:{name:wname}} = obj;

解构数组

let arr = [1,2,3];
let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量

使用说明：

解构数组的时候是按顺序取出数组中的值，解构一个变量，只能拿到第一个元素

解构多个元素：

let arr = [1,2,3];
let [num1,num2] = arr; // num1 = arr[0] num2 = arr[1]

利用结构交换两个变量的值：

let arr = [1,2,3,[4,5,6]];
let [a,b,c,[aa,bb]] = arr;
console.log(aa,bb); // 4 5

利用结构交换两个变量的值：

let num1 = 1;
let num2 = 2;
[num2,num1] = [num1,num2]

展开运算符“…”

将一个数组展开为多个变量赋值给多个形参

let arr = [1,2,3];
function fn(a,b,c){
console.log(a,b,c); // 1 2 3
}
fn(…arr);

利用展开运算求数组的最大值

let arr = [5,3,6,9,8,1,7];
let max = Math.max(…arr);
console.log(max); // 9

利用展开运算合并数组

// 之前的写法
let arr = [1,2,3];
let arr1 = [4,5,6].concat(arr);
// 利用展开运算合并
let arr2 = [4,5,6].concat(…arr);
// 再简化
let arr3 = [4,5,6,…arr]

利用展开运算合并对象：

const obj = {
name:“Jack”,
age:20,
sex:“男”,
}
const obj1 = {
…obj,
wife:{
name:“Rose”,
age:18
}
}
console.log(obj1);

合并运算符

将多个实参合并为一个数组

function fn(…arr){
console.log(arr);
}
fn(1,2,3); // [1,2,3]

箭头函数中没有arguments，可以使用合并运算符来模拟arguments

var fn = (…arr) => {console.log(arr)};
fn(1,2,3); // [1,2,3]

对象的简写方式

let name = ‘张三’;
let age = 12;
let obj = {
name,
age
}
console.log(obj);

如果对象的属性名和变量名同名，则可以光写属性名

模板字符串!!!

■明确需求

在工作中经常会出现下述情况，需要将一大段HTML放到JS中，然后拼接在页面显示

思考如何优化加速代码，可扩展性和维护性更好？

■语法说明

反引号 英文状态 1 左边的键 或者 esc下面的键

遇到变量 ${变量名}

■分析步骤

这里我们主要通过es6的模板字符串语法，来解决一大段HTML拼接导致的代码维护性下降问题。实现过程非常简单，一共只需要2个步骤：

1. 通过反引号包住大段HTML
2. 通过${变量名}包裹变量（可选）

案例

更改this指向（call，apply，bind）

语法

function 函数名(形参1,…,形参n) {
// this
}

直接调用函数，语法：函数名(实参,…,实参n) // 明确this就是默认window对象
通过call调用，语法：函数名.call(对象，实参,…,实参n) // this就是你传递的对象
通过apply调用，语法：函数名.apply(对象，[实参,…,实参n]) // this就是你传递的对象

call

call方法也可以用来调用函数：

function fn1(){
    console.log(123);
}
// fn1();
fn1.call(); // 使用call方法调用函数和小括号调用时一样的

这里用call调用时（）中未写内容，this指向跟普通调用相同，指向window

call方法不仅可以用来调用函数，还可以指定调用函数的this指向。call的第一个参数就可以改变函数内的this指向：

function fn2(){
    console.log(this);
} 
fn2.call([1,2,3]); // 打印结果就是这个数组

这时候的this就变成了call的第一个参数，也就是这个数组

call的参数可以有若干个，第一个参数用来改变函数内的this指向，其余的函数是作为调用函数的实参

function fn3(num1,num2){
    console.log(this);
    console.log(num1+num2);
}

// fn3(10,20);
var arr = [10,20];
fn3.call(arr,arr[0],arr[1]); //结果： Array  30

function fn4(){
    console.log(this);
}
fn4.call(); // window
fn4.call(null); // window
fn4.call(undefined); // window

如果call没有参数或第一个参数为null，那么函数中的this执行window

apply
apply的作用和call是一样的，区别只在于写法，apply只有两个参数，第二个参数是一个数组或者伪数组

function fn5(num1,num2){
    console.log(this);
    console.log(num1+num2);
}
var arr = [10,20];
fn5.apply(null,arr); // window  30

apply的特性： apply的平铺性： 将数组的中每一项取出来，作为借用函数的实参

什么时候用什么方法（call、apply）

1. 如果参数比较少的情况下，使用call比较方便
2. 如果参数已经存放在数组中，使用apply

bind
语法：var fn2 = fn.bind(thisArg);
作用： bind会创建并返回一个新的函数， 新的函数和借用的函数是一模一样的, 但是新函数内的this已经被改变成了bind的参数thisArg

function fn6(){
    console.log(this);
}
fn6(); // window
var arr = [1,2,3];
var fn7 = fn6.bind(arr);
fn7(); // Array(1,2,3)
console.log(fn6,fn7);

结果：

bind 是不会去调用fn函数的，不像call、apply会去调用函数。bind会创建并返回一个新的函数，和借用的函数是一模一样的，但是新函数内部的this变成了指定的对象
使用场景：经常用于将定时器的this（window）变成指定的对象：

var obj = {
    name:'张三',
    lover:'李四',
    sayLove:function(){
        // 使用bind将属于window的setTimeout变成当前对象的setTimeout
        setTimeout(function(){
            console.log(this.name+"爱"+this.lover);
        }.bind(this),500); 
    }
}
obj.sayLove(); // 张三爱李四

如果没有bind的话，打印结果是：`""爱undefined

this指向说明!!!

每个函数内容都有一个关键字叫做this。不同的情况下，this代表的内容也是不一样的。

1、普通函数中的this代表window对象

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

2、定时器中的this代表window

var obj = {
eat:function(){
setTimeout(function(){
console.log(this);
});
}
};
obj.eat(); //window

3、自调用函数中的this代表window

document.querySelector(“button”).οnclick=function(){
(function(){
console.log(this);
})()
}
//window

4、对象方法中的this代表调用这个方法的对象

var obj = {
eat:function(){
console.log(this);
}
};
obj.eat(); // obj

5、事件函数中的this代表当前事件的事件源

document.querySelector(“button”).οnclick=function(){
console.log(this);
}
// <button>按钮</button>

6、箭头函数的this在定义箭头函数的时候就知道了，代表上一行代码的this

document.querySelector(“button”).οnclick=function(){
// 这里的this代表button按钮，所以箭头函数的this也是button按钮
setTimeout(()=>{console.log(this);});
}
//<button>按钮</button>

小总结

A 、普通函数调用 this => window对象 function 函数名() { this }

B、 对象函数调用 this => 对象自身 var obj = {say: function() { this }}

C、 事件处理函数调用 this => this事件源 标签对象.事件类型 = function(){ this }

D、 定时器调用 this => window对象

E、 箭头函数中调用 this => 父function中的this 没有父就是window对象（新）

F、 自调用函数中 this => window

G、 bind/apply/call this=>自定的（新）

箭头函数!!!

es6中的箭头函数是用来简写函数的

let fn = function(){
console.log(111);
}

使用箭头函数简写

let fn = ()=>{console.log(111);}

带参数的写法：

let fn = function(a,b){
console.log(a+b);
}

使用箭头函数改写

let fn = (a,b)=>{console.log(a+b);}

注意：如果只有一个形参的时候，小括号可以省略：

let fn = function(a){
console.log(a);
}

使用箭头改写

let fn = a = > {console.log(a);}

注意：如果代码块中只有一行代码，箭头函数可以省略大括号，并将这行代码作为返回值

let fn = function(a){
return a + 1;
}

箭头函数的写法

let fn = a = > a+1;

例：使用箭头函数定义一个返回m到n范围内的随机数的函数：

let fn = (m,n) => parseInt(Math.random()*(n-m+1))+m;

箭头函数使用注意事项：

1. 箭头函数中的this比较混轮，所以在函数和方法中使用到this的时候，就不要用箭头函数
2. 箭头函数中没有arguments

函数默认值

在ES6之前，JS函数需要给形参设置默认值

function 函数名(形参) {
var 变量名 = 形参 || 默认值
}

在ES6中，语法：function 函数名(形参 = 默认值) {}

<script>
function fn(uname, age) {
    // var uname;
    // var age;
    console.log(uname, age)
}
fn()


function fn2(uname = '神龙之母', age = 18) {
    // var uname = 实参 || '神龙之母';
    // var age = 实参 || 18;
    console.log(uname, age)
}
fn2()  
fn2('神龙教主')
</script>

新Symbol数据类型

之前：
基本数据类型：数值型（整型、浮点型）、字符串型、布尔型、undefined、null

复杂数据类型：数组、对象、函数

新增Symbo：

语法：Symbol(参数)
返回：声明一个独一无二的值

<script>
// 语法：Symbol(参数)
// 返回：声明一个独一无二的值
let data1 = Symbol()
let data2= Symbol()
console.log(data1 == data2)

let data3 = Symbol('神龙教')
let data4 = Symbol('神龙教')
console.log(data3 == data4)
</script>

检测数据类型

之前使用typeof检测数据类型，但这种方式只能检测基本数据类型。在判断数组或对象的时候不能准确判断。

有一个比较长的方法，可以检测所有数据类型：

Object.prototype.toString.call(被检测的数据类型)

例：

console.log(Object.prototype.toString.call(123));
console.log(Object.prototype.toString.call(‘abc’));
console.log(Object.prototype.toString.call(true));
console.log(Object.prototype.toString.call(undefined));
console.log(Object.prototype.toString.call(null));
console.log(Object.prototype.toString.call([]));
console.log(Object.prototype.toString.call({}));
console.log(Object.prototype.toString.call(function(){}));
console.log(Object.prototype.toString.call(/^abc$/));
console.log(Object.prototype.toString.call(new Date()));

访问结果：

对象的扩展!!!

语法
目的：简写
情况

1. 当对象的键和值一样 可以只写一个
2. 方法可以去掉function

数组的扩展

1、成员查找find()、findIndex()

■明确需求

通过开发项目时，有时候我们需要判断文件系统中用户是否存在


解决：1 遍历， 2 使用find方法 原理就是遍历 官方封装的

var obj = 上图对象
obj.stus.forEach(function(item, index){ // item 对象
if (你输入账号 == item.name) {
在的
}
})
obj.stus.forEach((item, index) => { // item 对象
if (你输入账号 == item.name) {
在的
}
})

■语法说明

查找成员

数组.find(实战)
let 变量名 = 数组.find(function(item) { // item就是数组中的值，会挨个赋值给item
return 判断条件 // 条件成立 就会终止遍历 将当前item赋值给变量
})
let 变量名 = 数组.find((item) => { // item就是数组中的值，会挨个赋值给item
return 判断条件 // 条件成立 就会终止遍历 将当前item赋值给变量
})

查找成员下标

let 变量名 = 数组.findIndex((item) => {
return 条件
})

上案例：

需求1：求返回数组中大于10的第一个数据

var arr = [2,4,6,10,15,21];
var f = arr.find(function(element, index, array){
    return element > 10;
});
console.log(f);

需求2：求返回数组中大于10的第一个数据的下标

var arr = [2,4,6,10,15,21];
var f = arr.findIndex(function(element, index, array){
    return element > 10;
});
console.log(f);

新增循环（遍历数组：for of）

语法
在ES5中

• 起初遍历数组 ：for、while、dowhile
• 在ES5中遍历数组：forin、forEach、map、filter
• for in （既可以遍历数组 又可以遍历对象 推荐对象
• forEach（只能数组 也推荐数组

在ES6中遍历数组：for of
forof （既可以遍历字符串、数组等 还可以遍历新的数据结构 主要用来就是遍历心的数据结构
语法：

let arr=[值1，值2…]
for (let 变量名 of arr) {
console.log(变量名)
}

let arr = ['ab', 'xzmly', 'sb']
for (let value of arr) {
    console.log(value)
}

forof目的 遍历新的数据结构

let s = new Set([11,22,33])
for (let val of s) {
    console.log(val)
}

大总结

新增变量修饰符

var // 创建变量 函数作用域 可重定义、可修改
let // 创建变量 块作用域 不可重定义、可修改
const // 创建常量 块作用域 不可重定义、不可修改（推荐常量大写，多个单词下划线隔开

解构赋值

let [变量名1=默认值,…,变量名n=默认值] = [值1,…,值n]
let {键:变量名=默认值,…} = {键1:值1,…,键n:值n}

字符串扩展-模板字符串

let str = 反引号 ${变量名} 反引号

函数的扩展 this

普通方法 window
对象方法 对象本身
事件方法 事件源
定时器 window
箭头函数 父方法中的this 父没有function就是全局window

函数的扩展 箭头函数

() => {} 小括号或大括号只有一个参数或一行代码 可省略

对象的扩展

属性简写：当键和值同名 写一个
方法简写：去掉 : function

展开运算符…

合并数组 […arr, …arr2]

数据结构

Set 数组去重 […new Set(旧数组)]

循环

• 起初遍历数组 ：for、while、dowhile
• 在ES5中遍历数组：forin（对象、forEach（数组、map（三阶段react、filter（了解
• 在ES6中遍历数组：forof（了解 新数据结构