1.es5数组新增方法
1.1：some方法先遍历数组，如果至少有一个元素满足条件，则返回true，否则返回false
var arr = [2,4,6,10,15,21];
var f = arr.some(function(element,index,array){
if(element > 20){
return true;
}else{
return false;
}
});
1.2every方法先遍历数组，判断所有元素是否满足条件，返回布尔值
var arr = [2,4,6,10,15,21];
var f = arr.some(function(element, index, array){
return element > 10;
});
1.3find方法返回数组中满足条件的第一个值，找不到元素则返回false
var arr = [2,4,6,10,15,21];
var f = arr.find(function(element, index, array){
return element > 10;
});
1.4findIndex方法返回数组中满足条件的第一个值的下标，找不到元素则返回-1
var arr = [2,4,6,10,15,21];
var f = arr.findIndex(function(element, index, array){
return element > 10;
});
2.es6函数
2.1定义变量：如果定义好不修改使用const，会改变用let
2.1.1声明变量的关键字：let
1.不允许重复声明
2.不存在预解析
3.在大括号中声明的变量只能在大括号中使用，譬如if for 的大括号中声明的变量
2.1.2声明常量的关键字：const
1.不允许重复声明
2.不允许重新赋值(可以给对象中新增属性)
3.声明的时候必须赋值预解析
4.不存在预解析
5.在大括号中声明的变量只能在大括号中使用，譬如if for 的大括号中声明的变量
2.2箭头函数
2.2.1箭头函数简写
es6的箭头函数是用来简写函数的
let fn = function(){
console.log(111);
}
使用箭头函数的写法
let fn = ()=>{console.log(111);}
2.2.2带参数的箭头函数写法
let fn = function(a,b){
console.log(a+b)
}
使用箭头函数的写法
let fn = (a,b)=>{console(a+b);}
2.2.3只有一个形参的时候，小括号可以省略
let fn = function(a){
console.log(a);
}
使用箭头函数的写法
let fn = a => {console.log(a);}
2.2.4代码块中只有一行代码，箭头函数可以省略大括号，并将这行代码作为返回值
let fn = function(a){
return a + 1;
}
使用箭头函数的写法
let fn = a => a+1;
注意事项以及案例
1.箭头函数中的this比较混淆，所以在函数和方法中使用到this的时候，就不要用箭头函数
2.箭头函数中没有arguments
案例:使用箭头函数定义一个返回m到n
let fn = (m,n) => parseInt(Math.random()*(n-m+1)+m)
2.3函数默认值
function fn(a,b=2){
return a + b;
}
console.log(fn(5)) //调用函数fn并默认赋值未赋值的a变量，输出7
使用箭头函数改写
let fn = (a,b=2) =>a+b;
console.log(fn(5，6)) //
3.es6解构赋值
解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号
3.1解构对象
3.1.1之前从对象中渠道的内容的方式：
let obj = {
name:"张三",
age:12,
sex:"男",
}
let name = obj.name;
let age = obj.age;
3.1.2解构的方式：
let obj = {
name:"张三",
age:12,
sex:"男",
}
let {name} = obj;
/*
表示从obj中获取name属性，并赋值给声明的name变量
*/
使用说明
1.obj必须是一个对象
2.obj中必须要有name属性
3.1.3解构多个变量
let obj = {
name:"张三",
age:12,
sex:"男",
}
let {name,age} = obj; // 声明并赋值了两个变量
3.1.4将变量名换成一个别的名字
let obj = {
name:"张三",
age:12,
sex:"男",
}
let {name:username,age:a} = obj;
// 将obj的name属性值赋值给username变量，age属性值赋值给变量a
3.1.5多级解构
let obj = {
name:"张三",
age:12,
sex:"男",
wife:{
name:"翠花",
age:11,
}
}
let {wife} = obj;
let {name} = wife;
// 写为一行
let {wife:{name:wname}} = obj;
3.2解构数组
3.2.1解构元素
解构数组的时候是按顺序取出数组中的值，解构一个变量，只能拿到第一个元素
let arr = [1,2,3];
let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量
3.2.2解构多个元素
let arr = [1,2,3];
let [num1,num2] = arr; // num1 = arr[0] num2 = arr[1]
3.2.3多维数组解构
let arr = [1,2,3,[4,5,6]];
let [a,b,c,[aa,bb]] = arr;
console.log(aa,bb); // 4 5
3.2.4利用解构交换两个变量的值
let num1 = 1;
let num2 = 2;
[num2,num1] = [num1,num2]
3.3展开运算符
3.3.1将一个数组展开为多个变量赋值给多个形参
let arr = [1,2,3];
function fn(a,b,c){
console.log(a,b,c); // 1 2 3
}
fn(...arr);
3.3.2利用展开运算求数组的最大值
let arr = [5,3,6,9,8,1,7];
let max = Math.max(...arr);
console.log(max); // 9
3.3.3利用展开运算合并数组
// 之前的写法
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]
3.3.4利用展开运算合并对象
const obj = {
name:"Jack",
age:20,
sex:"男",
}
const obj1 = {
...obj,
wife:{
name:"Rose",
age:18
}
}
console.log(obj1);
3.4合并运算符
3.4.1将多个实参合并为一个数组
function fn (...arr){
console.log(arr);
}
fn(1,2,3) //[1,2,3]
3.4.2箭头函数中没有arguments,可以使用合并运算符来模拟arguments
var fn = (...arr) => {console.log(arr)};
fn(1,2,3) //[1,2,3]
3.5对象的简写方式
如果对象的属性名和变量名同名，则可以光写属性名
let name = '张三';
let age = 12;
let obj = {
name,
age
}
console.log(obj);
4.判断数据类型
之前使用typeof检测数据类型，但这种方式只能检测基本数据类型。在判断数组或对象的时候不能准确判断。
4.1 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()));
5.字符串语法
5.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;
5.2 endsWith()是否以谁结尾，返回布尔值
5.3 includes()判断一个字符串或者数组是否包含一个指定的值
'Blue Whale'.includes('blue'); // returns false
6.this关键字
每个函数内部都有一个关键字是this
可以让我们直接使用的
重点：函数内部的this只和函数的调用方式有关系，和函数的定义方式没关系
函数内部的this指向谁，取决于函数的调用方式
6.1全局定义的函数直接调用，this => window
function fn() {
console.log(this)
}
fn()
// 此时 this 指向 window
6.2对象内部的方法调用，this => 调用者
var obj = {
fn: function () {
console.log(this)
}
}
obj.fn()
// 此时 this 指向 obj
6.3定时器的处理函数，`this => window`
setTimeout(function () {
console.log(this)
}, 0)
// 此时定时器处理函数里面的 this 指向 window
6.4事件处理函数，this => 事件源
div.onclick = function () {
console.log(this)
}
// 当你点击 div 的时候，this 指向 div
6.5自调用函数，this => window
(function () {
console.log(this)
})()
// 此时 this 指向 window
// 自调用函数还可以在前面加！或~
7.上下文调用模式
也叫作方法借用模式。任何函数都能调用call、apply、bind这三个方法
改变this指向
7.1call
7.1.1call方法也可以用来调用函数：
function fn1(){
console.log(123);
}
// fn1();
fn1.call(); // 使用call方法调用函数和小括号调用时一样的
7.1.2call方法不仅可以用来调用函数，还可以指定调用函数的this指向。call的第一个参数就可以改变函数内的this指向：
function fn2(){
console.log(this);
}
fn2.call([1,2,3]); // 打印结果就是这个数组
这时候的this就变成了call的第一个参数，也就是这个数组
7.1.3call的参数可以有若干个，第一个参数用来改变函数内的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
7.1.4如果call没有参数或第一个参数为null，那么函数中的this执行window
function fn4(){
console.log(this);
}
fn4.call(); // window
fn4.call(null); // window
fn4.call(undefined); // window
7.2apply
apply的作用和call是一样的，区别只在于写法，apply只有两个参数，第二个参数是一个数组或者伪数组
7.2.1
apply的特性： apply的平铺性： 将数组的中每一项取出来，作为借用函数的实参
什么时候用什么方法（call、apply）
如果参数比较少的情况下，使用call比较方便
如果参数已经存放在数组中，使用apply
function fn5(num1,num2){
console.log(this);
console.log(num1+num2);
}
var arr = [10,20];
fn5.apply(null,arr); // window 30
7.3bind
语法：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