js中es6

es6是ECMAScript的第6个版本，在2015年发布。也有人将ECMAScript之后的版本统称为es6。比起之前的语法，es6有很多新语法，让开发者在操作数据和函数的时候，功能既多，操作又简便。

数组新增的方法

some - 判断数组中是否至少有一个元素是满足指定条件的，返回布尔值

every - 判断数组中是否所有元素都满足指定的条件，返回布尔值

find - 查找数组中第一个满足指定条件的值，找到返回值，找不到返回underfind

findIndex - 查找数组中满足条件的第一个元素对应的下标，找到返回下标，找不到返回-1

定义变量

es6中新增了两个类似于var的关键字来定义变量，分别是let和const

var定义的变量，其实是属于window属性，平常直接输出变量名，是一种简写，完整写法应该是window.变量名

let关键字

特点：

不允许重复声明变量

不存在预解析

在大括号中声明的变量只能在大括号中使用，如if、for的大括号中声明的变量

const关键字也是用来定义变量的，具备let的所有特性，在定义变量时必须直接赋值，另外，const定义的变量的值不能修改

箭头函数

 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 = a = > {console.log(a);}

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

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中可以定义默认值，表示参数作为可选项，如果不传入就使用默认值，传入就使用传入的值

function add(a,b=2){
    return a + b;
}
console.log(add(5));

用箭头函数改写

let add = (a,b=2) => a+b;
console.log(add(5));

模板字符串

es6中新增了定义字符串的方式，使用反引号``

1.可以换行书写，保持字符串中的换行和空格

2.模板字符串中可以识别变量，使用美元符大括号${变量}

解构赋值

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

解构对象

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

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

解构的方式

    let obj = {
        name: "张三",
        age: 12,
        sex: "男",
    }
    let {name} = obj;
    console.log(name);

表示从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);
    }
    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]

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

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);

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

字符串语法

1.startsWith（）是否以谁开头，返回布尔值

let str1 = "file:///C:/Users/iTAze/Desktop/1.html";
let str2 = "https://mp.csdn.net/postedit";
console.log(str1.startsWith("https://"))// false;
console.log(str1.startsWith("file:///"))// true;

2.endWith（）是否以谁结尾，返回布尔值

3.includes（）判断一个字符串或数组是否包含一个特定的值

'Blue Whale'.includes('blue'); // return false

检测数据类型

之前使用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()));

访问结果

 this关键字

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

1.全局中this代表window

2.普通函数中的this代表window对象

3.定时器中的this代表window

4.自调用函数中的this代表window

5.对象方法中的this代表调用这个函数的对象

6.事件函数中的this代表当前事件源

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

重点：函数内部的this和函数的调用方式有关系，和函数的定义方式没关系。箭头函数在定义的时候就知道this代表什么

上下文调用模式

也叫作方法借用模式。任何函数都能用call、apply、bind这三个方法。这三个方法主要用来改变函数中this的指向。

call

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

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

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

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

function fn4(){
    console.log(this);
}
fn4.call(); // window
fn4.call(null); // window
fn4.call(undefined); // 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 的话，答应结果是：“”爱underfind

伪数组

伪数组是一个对象。

这个对象必须有length属性，如果length不为0，这个对象中必须要有下标和对应的数据。

var farr = {
    0:123;
    length:1;
}

这就是伪数组。

常见的伪数组有：

arguments
DOM对象列表----HTMLCollection

伪数组转化为数组的方法

Array.prototype.slice.call(fakeArray) 

也可以遍历放进数组中