JS-ES6

15年发布的 ES6

新增的 数组方法

// 判定 目标数组中 是否至少有一个元素满足 指定条件 --- 返回布尔值
// 数组.some(function(参1,参2,参3)

var arr = [70, 27, 67, 89]
var bool = arr.some(function (v, i, a) {
    // 本质为封装的循环遍历函数
    console.log(v); // 当前遍历的值
    console.log(i); // 当前遍历的值的下标 --- 可选参
    console.log(a); // 当前遍历的目标数组 --- 可选参
    return v > 90 // 判断条件
})
console.log(bool); // false    没有元素满足条件

// 判定 目标数组中 是否所有元素 都满足 指定条件 --- 返回布尔值
// 数组.every(function(参1,参2,参3)

var arr = [70, 27, 67, 89]
var bool = arr.every(function (v, i, a) {
    return v > 60 // 判断条件
})
console.log(bool); // false    27不满足条件 提前结束

// 判定 目标数组中 第一个 满足条件的值 --- 返回目标值 否则返回undefined
// 数组.find(function(参1,参2,参3)

var arr = [70, 27, 67, 89]
var bool = arr.find(function (v, i, a) {
    return v < 60 // 判断条件
})
console.log(bool); // 27

// 判定 目标数组中 第一个 满足条件的值 的下标 --- 返回目标值的下标 否则返回-1
// 数组.findIndex(function(参1,参2,参3)

var arr = [70, 27, 67, 89]
var bool = arr.findIndex(function (v, i, a) {
    return v < 60 // 判断条件
})
console.log(bool); // 1

新增的 定义变量关键字

let
对比var 区别：
1. let定义的变量 没有 预解析

console.log(a);
let a = 10

预解析案例-图示

let a = 10
var b = 5
console.log(window);

全局变量检测-图示

if (true) {
    var a = 10
}
if (true) {
    let b = 5
}
console.log(a);
console.log(b);

let作用域测试-图示

window.onclick = () => {
    for (let i = 1; i <= 3; i++) {
        setInterval(function () {
            console.log(i);
        }, 1000)
    }
}

let解决异步问题-图示

4. 不允许对 同一变量 重复定义

let a = 10
let a = 5
console.log(a);

let重复定义测试-图示

const a = 5;
a = 10
console.log(a);

改变const常量测试-图示

新增的 函数定义方式 --- 箭头函数

// 1. 只针对 匿名函数 的简写
// 2. 省略关键字function 小括号()后添加箭头=>
var a = () => {console.log(213);}
a()

// 3. 只有一个形参时 小括号可省略
var a = i => {console.log(i);}
a(213)

// 4. 当大括号内只有一行代码时 大括号可省略 若代码只有return 则省略大括号时 return关键字一定要一起省略
var a = i => i
console.log(a(213));

新增的 字符串方法

var str = 'http://www.baidu.com'

// 1. 字符串是否以某子串 开头 --- 返回布尔值
// 字符串.startsWith('检测子串')
console.log(str.startsWith('http'));

// 2. 字符串是否以某子串 结尾 --- 返回布尔值
// 字符串.endsWith('检测子串')
console.log(str.endsWith('.com'));

// 3. 字符串或数组 是否 包含 某个子串或值 --- 返回布尔值
// 字符串|数组.includes('检测子串|值')
var arr = ['ab', 'bb', 'cd']

console.log(str.includes('baidu'));
console.log(arr.includes('bb'));

函数默认值

允许赋予形参默认值

// 有实参传入时 实参覆盖默认值
// 无实参传入时 使用默认值
function add(a, b = 2) {
    return a + b;
}
console.log(add(5, 1)); // 6

// 带默认值的形参变可选项
console.log(add(5)); // 7

// 带默认值的形参只能放在其他形参后面

模板字符串

// 反引号 ``
// 1. 字符串可以换行书写 且保留换行符和空格
var str1 = `
 1 2 3
4  5  6
`
console.log(str1);

// 2. 字符串中可以直接使用 美元符+大括号 识别变量 不用再拼接字符串 且不能拼接字符串
var a = 213
var str2 = `abc${a}def`
console.log(str2);

模板字符串功能展示-图示

解构赋值

本质：一种快速赋值的方法
数组解构

var arr = [1, 2, 3]
// 1.1 数组解构
// 通过中括号装载变量的形式 对目标数组中"对应下标"的数据进行

var [a, b, c] = arr
console.log(a, b, c); // 1 2 3

var [d, e] = arr
console.log(d, e); // 1 2

var [f, _, g] = arr
console.log(f, g); // 1 3
// 可以使用下划线作为无意义变量 接受不需要的数据 进行跳过

var [h, i, j, k] = arr
console.log(h, i, j, k); // 1 2 3 undefined

var brr = [1, [2, 3], 4]
// 1.2 数组的多重解构

var [a, b, c] = brr
console.log(a, b, c); // 1 [2,3] 4

var [d, [_, e]] = brr
console.log(d, e); // 1 3
// 通过嵌套中括号来提取多重数组中的数据

// 1.3 延展：交换两个变量的值

var a = 5
var b = 10
console.log(a, b); // 5 10

var [b, a] = [a, b]
console.log(a, b); // 10 5

对象解构

// 2.1 对象解构

var date = {
    year: 2022,
    month: 3,
    day: 29,
}
var {month,day} = date
// 定义的变量名需要跟对象中的键名保持一致
console.log(month,day); // 3 29

// 解构对象并取别名
var {month: m,day: d} = date
// 可以在定义时通过冒号连接原键名的新变量名
console.log(m, d); // 3 29
console.log(month, day); // 报错
// 改名后 原键名的变量无法再输出

// 2.2 对象的多重解构

var date = {
    year: 2022,
    month: 3,
    day: 29,
    time:{
        hour:17,
        min:30
    }
}
var {time:{hour}} = date
// 先提取外层键名 通过冒号连接大括号 再填写下一层需要提取的键名
console.log(hour); // 17

展开 / 合并运算符 (点点点运算符)

// 1. 展开运算符
// 1.1 展开数组
var arr = [1, 2, 3, 4]

console.log(arr); // [1,2,3,4]
console.log(Object.prototype.toString.call(arr)); // [object Array]

console.log(...arr); // 1 2 3 4
// 数组被展开成数字
console.log(Object.prototype.toString.call(...arr)); // [object Number]

// 1.2 展开对象
var time = {
    month: 3,
    day: 29,
}
var date = {
    year: 2022,
    ...time
}
console.log(date); // {year: 2022, month: 3, day: 29}
// 对象time被展开成多个键值对

// 2. 合并运算符用法

var arr
function fn(...a) {
    arr = a
}
fn(6, 7, 8, 9)
// 该组数据在传入时 被合并为数组
console.log(arr); // [6,7,8,9]
console.log(Object.prototype.toString.call(arr)); // [object Array]

对象的简写

// 允许对象外的变量 作为同名键值对 填充进对象

var str = 'abc';
var arr = [1, 2, 3];
var fn = () => 0

var obj = {
    str,
    arr,
    fn
}
console.log(obj); // {str: 'abc', arr: Array(3), fn: ƒ}

新增的 检测数据类型 的方法

// Object.prototype.toString.call()
// 可用于引用类型数据的检测 可返回更加明确的数据类型

console.log( Object.prototype.toString.call([]) ); // [object Array]
console.log( Object.prototype.toString.call({}) ); // [object Object]
console.log( Object.prototype.toString.call(Math) ); // [object Math]
console.log( Object.prototype.toString.call(new Date()) ); // [object Date]
console.log(Object.prototype.toString.call(function(){})); // [object Function]
console.log(Object.prototype.toString.call(/^abc$/)); // [object RegExp]

上下文调用模式 --- 借用模式 --- 借用函数

// 函数.call(this的新指向,实参1,实参2...)
// 1.1 调用函数
function fn() {console.log(123);}
fn.call() // 等效于fn()

// 1.2.1 改变函数this的指向
function fn() {console.log(this);}
var obj = {year : 2022}
fn()
fn.call(obj)

// 1.2.2 只调用函数 但是不改变函数this的指向
function fn(a, b) {console.log(a + b);}
fn.call(null, 10, 5) // 15
// call方法中 第一个参数为原函数this的新指向 填null即不改变 后续实参可以正常传参
// 但null不能省略 且只能在第一位

1.2 call方法改变函数this-图示

// 函数.apply(this的新指向,由实参组成的数组)
// 用法与call大致相同
// call可传入多个实参
// apply一般只有两个参数 第二个参数为数组

function fn(a, b) {console.log(a + b);}
fn.apply(null, [10, 5]) // 15

// 函数.bind(this的新指向)
// 复制函数 且改变新函数this的指向

function fn() {console.log(123);}
var fun = fn.bind()
fun() // 123

借用函数

原理：利用某方法的 原型 调用该方法 再用call改变方法的 this的指向

// 场景1 伪数组转数组
var lis = document.querySelectorAll('li')
console.log(lis); // NodeList(3) [li, li, li]
console.log(Object.prototype.toString.call(lis)); // [object NodeList]

console.log([].slice.call(lis, 0)); // [li, li, li]
// 过程：调用本属于数组的slice方法 将slice的this指向改为变量lis 再传入参数0 从下标0开始截取 返回新数组
console.log(Object.prototype.toString.call([].slice.call(lis, 0))); // [object Array]

伪数组
可以遍历 但不能使用数组方法