ES6标准入门(第二版)——阮一峰书籍学习笔记

ES6新增的let和const

都不存在变量提升,不可在同一作用域下重复申明同一变量名

let声明的变量只在当前作用域可用，一个大括号就是一个作用域

let x = 0;
// let x =10; 报错：Identifier 'x' has already been declared
{let x =10} //正确
console.log(x)//打印同一作用域下的 x = 0

const声明一个只读变量，声明之后不允许改变,但是可以改变对象数组里的内容，不能改变常量所指向的内存地址。

//1.声明后不可改变
const x = 10;
x = 20;
console.log(x)//Assignment to constant variable.

//2.改变对象或数组的内容
const obj = {
	a: '111',
	b: '222',
	c:'333',
}
boj.d = '444'
console.log(obj)//{a: "111", b: "222", c: "333", d: "444"}

解构赋值

1. 解构赋值基础

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

注意：左右两边解构格式保持一致

2. 左右保持一致

let [a,b,d] = [1,[2,3],4]
console.log(a,b,c)// 1 [2 3] 4

3. json格式和别名

let json = {
    name : 'Strive',
    age: 18,
    sex: 'man'
}
let [name,age,sex] = json
console.log(name,age,sex)// Strive 12 man

//别名
let [name:n,age:a,sex:s] = json
console.log(n, a, s);// Strive 12 man

4. 默认值

let arr = ["aaa", "bbb"];
//let[a,b,c] = arr; //aaa bbb undefined
let [a, b, c = "暂无数据"] = arr；
console.log(a, b, c);

//如果值为undefined则为真的空值
let arr2 = ["aaa","bbb",undefined]
let [a, b, c = "暂无数据"] = arr；
console.log(a, b, c);//aaa bbb 暂无数据

//如果是null是不会显示默认值
let arr2 = ["aaa","bbb",null]
let [a, b, c = "暂无数据"] = arr；
//console.log(a, b, c);//aaa bbb null
console.log(a, b, c == null && "ccc");

模板字符串

用于字符串连接，反引号包裹内容，${}内写变量，保留空格和缩进，如果需要内部需要用到反引号需要在符合前面加反斜杠

//原始写法：
cosole.log(‘xxx’ + 变量 + ‘xx‘ + 变量)

//ES6写法： `字符串${变量}字符串`，会保留反引号内部格式，保留空格和缩进
console.log(`xxxx${变量}xxx${变量} xxx`)
//模板字符串还可以调用函数
function fn(){
	return "13"
}
console.log(`滑小稽${fn()}岁`)//滑小稽13岁

字符串查找

1. includes(),返回布尔值，表示是否找到了参数字符串，还可以判断浏览器

vavr s = 'Hello world'
s.includexs('r')//true

//判断浏览器是否是Chrome
if(navigator.userAgent.includes('Chrome')){
	alert('yes');
}else{
	alert('no')
}

2. starsWith(),返回布尔值，表示参数字符串是否再原字符串的头部

var s = 'Hello world'
s.starsWith('Hello')//true

3. endsWith(),返回布尔值，表示参数字符串是否在原字符串的尾部

var s = 'Hello world'
s.endsWith('orld')//true

4. repeat(),返回一个新字符串，表示将原字符串重复n次

var x = 'abc'
console.log(x.repeat(3))//abcabcabc
console.log('a'.repeat(3))//aaa

//如果参数是小数向下取整
console.log(x.repeat(2.9))//abcabc

//如果参数是负数或Infinity(无穷)，会报错
console.log(x.repeat(Infinity))//Invalid count value
console.log(x.repeat(-1))//Invalid count value

//如果参数是0到-1之间，则等同于0，NAN也是0
console.log(x.repeat(-0.5))// ""
console.log(x.repeat(NAN))// "

//如果参数是字符串，则会先转换为数字
console.log(x.repeat('aoao'))// ""
console.log(x.repeat('2'))//abcabc

字符串补全

ES7推出了字符串补全长度的功能，可以在头部或尾部补全

1. padStart(指定总长度，补全内容),头部补全

var x = 'abc'
x.padStart(5，'xs')//xxabc
x.padStart(6,'xs')//xsxabc

//如果原字符串的长度等于或大于指定的最小长度，则返回原字符串
x.padStart(2,'x')//abc

//如果省略第二个参数，则会用空格补全
x.padStart(5,)//'  abc'

2. 尾部添加padEnd(),同头部添加一样，只是在结尾补全

数值的扩展

1. 检测Infinite和NaN两个特殊值

//Number.isFinite(),检测一个数值是否非无穷
Number.isFinite(0.8)//true
Number.isFinite(10);//true
Number.isFinite(Infinity)//flase
Number.isFinite(-Infinity)//flase
Number.isFinite(NaN)//flase
Number.isFinite('foo')//flase
Number.isFinite('10')//flase
Number.isFinite(true)//flase

//Number.isNaN(),检测一个值是否为NaN
Number.isNaN(NaN)//true
Number.isNaN(15)//flase
Number.isNaN("15")//flase
Number.isNaN(true)//flase
Number.isNaN(15 / NaN)//true
Number.isNaN("true" / 0)//true
Number.isNaN("true" / "true")//true

2. ES6将全局方法parseInt()和parseFloat()移植到了Number对象上，行为保持不变,这样做的目的是逐渐减少全局性方法，使语言逐步模块化。

//ES5写法
parseInt('10.1')//10
parseFloat('123.45#')//123.45

//ES6写法
Number.parseInt('10.1')//10
Number.parseFloat('123.45#')//123.45

Number.parseInt === parseInt //true
Number.parseFloat === parseFloat //true

3. Number.isInteger(),判断值是否为整数,返回布尔值，注意，在javasScript内部整数和浮点数是同样的存储方法，所以3和3.0被视为同一个值。

Math对象扩展

ES6在Math对象上新增了17个与数学相关的方法，所有这些方法都是静态方法，只能在Math对象上调用

1. Math.trunc()方法用于去除一个数的小数部分，返回部分

Math.trunc(3.1415)//3
Math.trunc(-3.1415)//-3
Math.trunc(-0)//-0

//对于非数值，内部会使用Number方法将其先转换为数值
Math.trunc('1.234')//1

//对于空值和无法截取则整数的值返回NaN
Math.trunc(NaN)//false
Math.trunc('foo')//flase
Math.trunc()//false

2. Math.sign()方法用于判断一个数到底是正数，负数还是零,返回值有5种：

• 参数为正数：返回+1
• 参数为负数：返回-1
• 参数为0：返回0
• 参数为-0：返回-0
• 其他值：返回NaN

数组扩展

1. Array.from()方法用于把伪数组转换为真正的数组,如果参数是一个真正的数组，则返回一个新的数组

let arr = {
	'0': 'a',
	'1': 'b',
	'3': 'c',
	length: 3
};
let newArr = Array.from(arr)
console.log(newArr)// ["a", "b", "c"]

// 扩展运算符也可以转换为数组
var newArr2 = [...arr]
console.log([newArr2])l;

//可以接收第二个参数，对每个元素进行处理，将处理后的值放入返回的数组
Array.from(arr, x => x * x)
//等同于
Array.from(arr).map(x => x * x)
Array.from([1,2,3], (x) => x * x)//[1, 4, 9]

//将数组里布尔值为false的成员转换为0
Array.from([1,,2,,3], (n) => n || 0)//[1, 0, 2, 0, 3]

2. Array.of()方法将一组值转换为数组,主要的目的是弥补数组构造函数Array()的不足。

//Array.of()
Array.of(3)//[3]
Array.of(1,2,3)//[1,2,3]

//Array(),只有参数个数不少于2时，才会返回由参数组成的新数组，参数只有一个时，实际上是指定数组的长度
Array()//[]
Array(3)//[, , ,]
Array(1,2,3)//[1, 2, 3]

//Array.of()基本数可以用来替代Array()或new Array()，并且不存在由于参数不同二导致的重载
//它总是返回参数值组成的数组，如果没有参数则返回空数组。

//模拟一个Array.of()方法
function ArrayOf(){
	return [].slice.call(arguments)
}

3. find()方法用于找出第一个符合条件的数组成员，它的参数是一个回调函数，找到就返回，没有就返回undefined

let arr = [4, 3, 2, 1, 5];
console.log(arr.find((n) => n < 3)); //2

//find()方法的回调函数接收3个参数，以此为当前的值，当前的位置和原数组
console.log(
    arr.find((value, index, arr) => {
        return value > 4;
     })
); //5

//findIndex()方法用于与find方法非常类似，返回的第一个符合条件的数组成员的位置，如果都不符合条件则返回-1
console.log(arr.findIndex((value, index, arr) => value > 4)); //返回索引：4

//这两个方法都接受第二个参数，用来绑定回调函数的this对象，都可以发现NaN，弥补了数组的indexOf()方法的不足
console.log([NaN].indexOf(NaN)); //-1
console.log([NaN].findIndex((y) => Object.is(NaN, y))); //0
x
//indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到

4. fill()方法用于给定值填充数组

console.log(["a", "b", "c"].fill(7)); //[7, 7, 7]
console.log([1, 2, 3].fill(6)); // [6, 6, 6]

//fill方法用于数组的初始化非常方便，数组中已有元素，会被全部被抹去
//该方法还会可以接收第二个和第三个参数，用于指定填充的开始位置(索引)和结束位置
console.log(["a", "b", "c"].fill(7, 1, 3));

5. ES6提供了3个新方法用于遍历数组entries()，keys()和values()

//1. keys()是对键名遍历
let arr = ["a", "b"];
for (let index of arr.keys()) {
  console.log(index);
  //0
  //1
}

//2.values()是对键值的遍历
for (let elem of arr.values()) {
  console.log(elem);
  //a
  //b
 }

//3.entries()是对键值对的遍历
for (let [index, elem] of arr.entries()) {
  console.log(index, elem);
  //0 "a"
  //1 "b"
}

//如果不使用for...of循环，可以手动调用遍历器对象的next方法进行遍历
let entries = arr.entries();
console.log(entries.next().value); // [0, "a"]
// console.log(entries.next().value);[1, "b"]

6. 数组实例的includes()

1.Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似，该方法属于ES7

2.该方法的第二个参数表示搜索的起始位置，默认为0，如为负数则倒数，若位置超出数组长度，从0开始

3.indexOf方法有两个缺点，一个是不够语义化，其含义是找到参数值的第一个出现位置，所以要比较是否不等一-1，二是其内部使用严格相当运算符(===)进行判断会导致对NaN的误判，includes使用的是不一样的判断算法，没有这个问题

7.数组的空位

ES5对空位的处理不是很一致，大多数会会忽略空位
forEach(),filter(),every()和some()都会跳过空位
map会跳过空位，但是会保留这个值
join()和toString()会将空位视为undefined,而undefined和unll会被处理成空字符串

ES6则是明确将空位转换为undefined
Array.from方法会将数组的空位转换为undefined，也就是说不会忽略空位
扩展运算符(…)页会将空位转换为undefined
fill()会将空位视为正常的数组位置
for…of循环也会遍历空位