1. ES6简介
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
2. ES6 let 与 const
ES6 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
2.1 let 命令
- 代码块内有效
{
let a=0;
var b=1;
}
console.log(a,b);
// a is not difined
- 不能重复声明
var a=1;
var a=2;
let b=3;
let b=4;
console.log(a,b);
// b Identifier 'b' has already been declared
- 不存在变量提升
console.log(a);//a is not defined
var a = 1;
console.log(a); //Cannot access 'a' before initialization
let a = "apple";
//变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。
//变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。
var 声明变量特点
（1）允许重复声明
（2）存在变量提升
（3）存在就近原则
（4）全局变量会作为全局对象window的属性
（5）只受函数作用域的限制
2.2 const命令 用来声明常量
- 常量初始化完成，不允许二次赋值。
const a=11;
a=22;
console.log(a);//Assignment to constant variable.
- 常量不允许只声明不赋值。
const a;
console.log(a);//Missing initializer in const declaration
var b;
console.log(b);//undefined
3. 解构赋值
概述
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
解构赋值：允许将相同结构的值赋值给变量(模式匹配，=左右两侧模式相同才能解构，否则解构失败，变量值为undefined)
1. 数组解构赋值： [value,value,value,...]
有数组：[1,2,3,4,5]，需要定义变量a,b,c,d,e来接收数组元素的值。
let arr = [1, 2, 3, 4, 5];
// ES5
// let a = arr[0],
// b = arr[1],
// c = arr[2],
// d = arr[3],
// e = arr[4];
// ES6 数组解构
let [f,b,e,d,c] = arr;
console.log(f,b,c,d,e);
// let [a,b,[c,d],e] = [1,2,[3],4,5];
// console.log(a,b,c,d,e);
2. 对象解构： {key:value,key:value,...}
// 对象的解构
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function() {
console.log("我可以演小品");
}
};
// let{name,age,xiaopin}=zhao;
// console.log(name);
// console.log(age);
// console.log(xiaopin);
// xiaopin();
// let{xiaopin,name,age}=zhao;
console.log(zhao.name, zhao.age);
zhao.xiaopin()
// xiaopin();
// console.log(name);
// 用途：
{
// 1. 快速交换变量的值
let arr = [33,7,19,99,0,5,13];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
// var tmp = arr[j];
// arr[j] = arr[j + 1];
// arr[j + 1] = tmp;
[arr[j+1],arr[j]] = [arr[j],arr[j+1]];
}
}
}
console.log(arr);
}
4. ES6 对 Number 的拓展
Number 对象新方法
- Number.isFinite()：返回布尔值，用于检查一个数值是否为有限的
console.log(Number.isFinite(1));//true
console.log(Number.isFinite(0.1));//true
console.log(Number.isFinite(NaN));//false NaN不是有限的
console.log(Number.isFinite(10/3));//true
- Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false
console.log(Number.isFinite('foo')); // false
console.log(Number.isFinite('15')); // false
console.log(Number.isFinite(true)); // false
console.log(Number.isFinite(1)); // true
- Number.isNaN()：返回布尔值，判断一个数值是否是NaN(
未定义或不可表示的值)
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(10+'a')); // false
console.log(Number.isNaN(10*'a')); // true
- Number.parseInt() /Number.parseFloat()
console.log(Number.parseFloat('123.45')); // 123.45
console.log(Number.parseFloat('123.45abc')); // 123.45
// 不指定进制时默认为 10 进制
console.log(Number.parseInt('12.34')); //12
console.log(Number.parseInt(12.34)); // 12
// 指定进制
console.log(Number.parseInt('0011', 2)); // 3
ES6 在 Math 对象上新增了 17 个数学相关的静态方法，这些方法只能在 Math 中调用。
Math 进行拓展
- Math.cbrt()：计算数值的立方根
console.log(Math.cbrt(1)); // 1
console.log(Math.cbrt(0)); // 0
console.log(Math.cbrt(-1)); // -1
console.log(Math.cbrt(8)); // 2
// 会对非数值进行转换
console.log(Math.cbrt('1')); // 1
- Math.hypot(): 用于计算所有参数的平方和的平方根。
console.log(Math.hypot(3, 4)); // 5
// 非数值会先被转换为数值后进行计算
Math.hypot(4, '3'); // 5
// 参数中存在无法转换为数值的参数时返回 NaN
Math.hypot(NaN); // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot({}); // NaN
3.Math.trunc()：去除小数部分
Math.trunc(12.3); // 12
Math.trunc(12); // 12
// 整数部分为 0 时也会判断符号
Math.trunc(-0.5); // -0
Math.trunc(0.5); // 0
// Math.trunc 会将非数值转为数值再进行处理
Math.trunc("12.3"); // 12
// 空值或无法转化为数值时时返回 NaN
Math.trunc(); // NaN
Math.trunc(NaN); // NaN
Math.trunc("hhh"); // NaN
Math.trunc("123.2hhh"); // NaN
- Math.sign()：判断一个数是正数(1) 还是负数(-1) 还是 0(0)
Math.sign(1); // 1
Math.sign(-1); // -1
// 参数为 0 时，不同符号的返回不同
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(-5); // -1
// 判断前会对非数值进行转换
Math.sign('1'); // 1
Math.sign('-1'); // -1
// 参数为非数值（无法转换为数值）时返回 NaN
Math.sign(NaN); // NaN
Math.sign('hhh'); // NaN
5.Math.imul(): 两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。
6.双曲函数方法
Math.sinh(x): 用于计算双曲正弦。
Math.cosh(x): 用于计算双曲余弦。
Math.tanh(x): 用于计算双曲正切。
Math.asinh(x): 用于计算反双曲正弦。
Math.acosh(x): 用于计算反双曲余弦。
Math.atanh(x): 用于计算反双曲正切。
5. Array拓展
1.Array.from()
将类数组对象转化为数组。
//将类数组转化为数组
var fakeArray = {
"0": "first",
"1": "second",
"2": "third",
length: 3
};
var fake = Array.from(fakeArray);
fake.push('aa');
console.log(fake);
// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]
2.Array.of()
将参数中所有值作为元素形成数组。
Array.of基本上可以用来替代Array()或newArray()，并且不存在由于参数不同而导致的重载，而且他们的行为非常统一。
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
// 参数为空时返回空数组
console.log(Array.of()); // []
3. includes()
返回布尔值， 判断是否包含指定元素
console.log(['a', 'b', 'c'].includes('a'));
//参数1： 包含的指定值
[1, 2, 3].includes(1); // true
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true
4.flat()
//嵌套数组转一维数组
console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
5. find()/findIndex()
(1)、find()
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。
以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：
let myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
//var f = function(a){
// return a;
//}
//f(1); //1
console.log(v);// 5
没有符合元素，返回undefined:
let myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>40);
console.log(v);// undefined
回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。
查找索引值为4的元素：
let myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
return index==4
});
console.log(v);// 5
（2）、findIndex()
查找数组中符合条件的元素索引， 若有多个符合条件的元素， 则返回第一个元素索引。
let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item == 2)); // 1
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0
6.fill()
将一定范围索引的数组元素内容填充为单个指定的值。
let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
7.copyWithin() (copy)
将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
8.entries()
遍历键值对。
for(let [key, value] of ['a', 'b'].entries()){
console.log(key, value);
}
// 0 "a"
// 1 "b"
// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]
9.keys()
遍历键名。
for(let key of ['a', 'b'].keys()){
console.log(key);
}
// 0
// 1
// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]
10.values()
遍历键值。
for(let value of ['a', 'b'].values()){
console.log(value);
}
// "a"
// "b"
// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]
6. String拓展
1、模板字符串：可以用反引号（``）标识字符串
特点：
（1）允许换行
（2）解析变量或表达式，变量或表达式需要 ${} 包裹
let name = "小兰";
let age = 20;
let info = `我叫${name},我今年 ${age+1}岁`
console.log(info);
2、拓展的方法子串的识别
ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。
1.includes()：返回布尔值，判断是否找到参数字符串。
2.startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
3.endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。
let string = "apple,banana,orange";
string.includes("banana"); // true
string.startsWith("apple"); // true
string.endsWith("apple"); // false
string.startsWith("banana",6) // true
注意：这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。
3、字符串重复
（1）、repeat()：返回新的字符串，表示将字符串重复指定次数返回。
console.log("Hello,".repeat(2)); // "Hello,Hello,"
（2）、如果参数是小数，向下取整
console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"
（3）、如果传入的参数是字符串，则会先将字符串转化为数字
console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2")); // "Hello,Hello,"
4、字符串补全
（1）、padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。
console.log("h".padStart(5,"o")); // "ooooh"
console.log("h".padEnd(5,"o")); // "hoooo"
console.log("h".padStart(5)); // " h"
（2）、如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串:
console.log("hello".padEnd(10,",world!")); // "hello,worl"
（3）、常用于补全位数：
console.log("123".padStart(10,"0")); // "0000000123"
