ES6 学习体会

Posted 2020-10-11 cc

第一部分：

1.初始化项目 npm init -y
2.安装ES6 环境
.babelrc 文件
babel-cli -g
babel-ecmascript2015 babel-cli --save-dev

#######################################################################################################

第二部分：
变量的三种声明方式:
var -- 全局声明(容易产生污染)
let -- 局部声明(只存在于当前作用域)
const -- 变量声明之后，不允许随意更改(也可理解为常量)

#######################################################################################################

第三部分：
1.变量的解构赋值
<< ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。

<< 1.
let a = 0;
let b = 1; =>
let c = 2;
let [a,b,c] = [1,2,3] => var a = 1,b = 2, c = 3;
let [a,[b,c],d] = [1,[2,3],4] => var a = 1,b = 2,c =3 ,d = 4
注：如果等号两边形式不一样，很可能获得undefined或者直接报错。

<< 2.数组的解构：
1>
let [foo=true] = [];
console.log(foo) // true
2>
let [a,b="zcc"] = [‘hello‘]
console.log(a+b) // hellozcc
3>undefined相当于什么都没有，b解构成了null。
let [a,b="zcc"] = [‘hello‘，undefined]
console.log(foo) // hellozcc
4>null 有值，但值为null,b取null。
let [a,b="zcc"] = [‘hello‘, null]
console.log(foo) // hello null

<< 3.对象的解构
注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

1.解构不仅可以用于数组，还可以用于对象。
let foo;
({foo,bar} = {foo : ‘zcc‘,bar : ‘000‘});
console.log(foo+bar) // zcc000
<< 4.字符串的解构
字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d]="JFAS";
console.log(a);
console.log(b);
console.log(c);
console.log(d);

#######################################################################################################

第三部分：扩展运算符和rest运算符
<< 1.对象扩展运算符(...):
(主要用于：当我们声明一个变量方法，但不确定参数个数的时候)
function argument(...arg){
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
console.log(arr[3])
}
argument(1,2,3)

1.eg: 这里的arr2 是对arr1 的映射
let arr1=[‘www‘,‘xiaoming‘,‘com‘];
let arr2=arr1;
console.log(arr2); // www,xiaoming,com
arr2.push(‘shengHongYu‘);
console.log(arr1); // www,xiaoming,com,shengHongYu
2.eg: 这里的arr2 是对arr1 的扩展
let arr1=[‘www‘,‘xiaoming‘,‘com‘];
let arr2=[...arr1];
console.log(arr2); // www,xiaoming,com
arr2.push(‘shengHongYu‘);
console.log(arr2); // www,xiaoming,com,shengHongYu
console.log(arr1); // www,xiaoming,com
<< 2.rest(剩余) 运算符

function argument(first,...arg){
console.log(arg.length)
for(let i = 0;i < arg.length; i++){
console.log(arg[i]) // 1,2,3,4,5,6
}

for(let val of arg){ // ES6 循环更高效率
console.log(val) // 1,2,3,4,5,6
}

}
argument(0,1,2,3,4,5,6) // 6

#######################################################################################################

第五部分：字符串模版
ES6对字符串新增的操作，最重要的就是字符串模版，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。
<< 1. 字符串拼接
let str1 = ‘zcc2333‘;
let str2 = ‘字符串2‘; // let str2 = `${str1}我是一个字符串`;

<< 2.查找字符串
let str = "zcc2333";
let str2 = "zcc2333我是一个字符串";

console.log(str2.indexOf(str1)); //返回索引，没有返回-1;
console.log(str2.includes(str1)); //返回 true 不存在返回false
console.log(str2.startsWith(str1)) //返回 查看开头是否有 true/false
console.log(str2.endsWith(str1)) //返回 查看结尾是否有 true/false

<< 3.字符串复制
document.write(‘zcc2333|‘.repeat(10)) // 第一个参数是要复制的字符串，repeat(num) 要复制的个数

#######################################################################################################

第六部分：ES6数字操作

<< 1.二进制和八进制
1>. 二进制
二进制声明： 二进制的英文单词是Binary,二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。
let binary = 0B100110;
console.log(binary) // 21
2>. 八进制
八进制声明：八进制的英文单词是Octal，也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。
let octonary = 0O666;
console.log(octonary) // 438
<< 2.数字判断和转换
1>. 数字验证Number.isFinite( xx )
注意：可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。
let a = 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite(‘xiaoming‘));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
3>. NaN验证
NaN是特殊的非数字，可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true。
console.log(Number.isNaN(NaN)); // true
4>. 判断是否为整数Number.isInteger(xx)
let a=123.1;
console.log(Number.isInteger(a)); //false
5>. 整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
let a=‘9.18‘;
console.log(Number.parseInt(a)); // 9
console.log(Number.parseFloat(a)); // 9.18
<< 3.整数取值范围操作
注意：整数的操作是有一个取值范围的，它的取值范围就是2的53次方。我们先用程序来看一下这个数字是什么。
let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991

1>. 最大安全整数
console.log(Aumber.MAX_SAFE_INTEGER(a))
2>. 最小安全整数
console.log(Number.MIN_SAFE_INTEGER(a))
3>. 安全整数判断
let a = Math.pow(2,53) - 1;
console.log(Nuber.isSafeInteger(a)) // fasle

#######################################################################################################

第七部分：ES6中新增的数组知识（1）

<< 1. json 转换数组方法 Array.from()
let json1 = {
"0": "小明",
"1": 18,
‘2‘: "china",
length: 3
}
这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。然后再控制台输出一下：
let arr = Array.from(json)
console.log(arr) // arr = ["小明",18,"china"]

<< 2.Array.of()
它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，我们知道 eval 转换的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上：
数字转数组：
let arr =Array.of(3,4,5,6);
console.log(arr); // [3,4,5,6]

字符串转数组：
let arr =Array.of(‘小明‘,‘18‘,‘china‘);
console.log(arr); // [‘小明‘,‘18‘,‘china‘]

<< 3.find( )实例方法:
所谓的实例方法就是并不是以Array对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法。
这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：
1> value: 表示当前查找的值。
2> index: 表示当前查找的数组索引。
3> arr: 表示当前数组。

#####################################################################################

第八部分：ES6中新增的数组知识（2）

<< 1.fill( )实例方法:
fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill(‘xiaoming‘,2,5);
console.log(arr);

<< 2.for...of循环：
这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环。
let arr = [‘小明‘,‘18‘,‘china.‘];

1>. 循环数组中的元素
for(let item of arr){
console.log(item)
}
// ‘小明‘ ‘18‘ ‘china.‘
2>. 循环数组中的下标 arr.keys() -> es6 中的实例方法
for(let item of arr.keys()){
console.log(item)
}
// 0 1 2
2>. 同时输出数组的内容和索引
for( let [index,val] of arr.entries){
console.log(index+‘:‘+val)
}
// 0 : 小明 1 : 18 2 : china
<< 3.entries( )实例方法：
entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码：
let arr=[‘小明‘,‘18‘,‘china‘]
let list=arr.entries(); // 将数组生成条目行的形式
console.log(list.next().value); // [0, "小明"]
console.log(list.next().value); // [1, "18"]
console.log(list.next().value); // [2, "china"]

#####################################################################################

第九部分：ES6中的箭头函数和扩展
回顾一下ES5中的函数写法。写一个函数，进行一个加法计算:
function add(a,b){
return a+b
}
add(2); // undefined
add(2,3); // 2+3 =5

<< 1.默认值
在ES6中给我们增加了默认值的操作，我们修改上边的代码，可以看到现在只需要传递一个参数也是可以正常运行的。
function add(a,b=1){ // b 的默认值为 1
return a+b
}
add(2); // 2+1 = 3
add(2,3); // 2+3 =5

<< 2.主动抛出错误
在使用Vue的框架中，可以经常看到框架主动抛出一些错误，比如v-for必须有:key值。那尤大神是如何做到的那？
其实很简单，ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。
function add(a,b=1){
if(a == 0){
throw new Error(‘This is error‘)
}
return a+b;
}
console.log(add(0));
<< 3.函数中的严谨模式
在ES5中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。
function add(a,b=1){
‘use strict‘
if(a == 0){
throw new Error(‘This is error‘);
}
return a+b;
}
console.log(add(1)); // 浏览器报错，严谨模式不允许使用默认值
<< 3.获得需要传递的参数个数
使用别人的框架时，不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。
function add(a,b){
‘use strict‘
if(a == 0){
throw new Error(‘This is error‘);
}
return a+b;
}
console.log(add.length); // 2
当其中的a 或 b 含有默认值时 这时候 add.length 为1.
当其中的a 和 b 都有默认值时 这时候 add.length 为0.
function add(a,b=1){
‘use strict‘
if(a == 0){
throw new Error(‘This is error‘);
}
return a+b;
}
console.log(add.length); // 2

<< 5.箭头函数
注：箭头函数不允许使用 new 构造函数！
add(a,b=1) => a+b;
console.log(add(1,3)) // 4
add(a,b=1) => {
return a+b
}
console.log(add(3)) // 4
注：箭头函数不允许使用 new 构造函数!!!

第十部分：ES6中的函数和数组补漏

<< 1.对象的函数解构
我们在前后端分离时，后端经常返回来JSON格式的数据，前端的美好愿望是直接把这个JSON格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。
let json = {
a:‘小明‘,
b:‘china‘
}
function fn({a,b=‘xiaoming‘}){

console.log(a,b);
}
fn(json); // 小明 china

let arr = [‘小明‘,‘18‘,‘china‘];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr); // ‘小明‘ ‘18‘ ‘china‘

<< 2.in的用法
in是用来判断对象或者数组中是否存在某个值的。

1>. 对象判断
let obj={
a:‘xiaoming‘,
b:‘小明‘
}
console.log(‘a‘ in obj); //true
2>. 数组判断 (数组空位的判断)
先来看一下ES5判断的弊端，以前会使用length属性进行判断，为0表示没有数组元素。但是这并不准确，或者说真实开发中有弊端。

let arr=[,,,,,];
console.log(arr.length); // 5

上边的代码输出了5，但是数组中其实全是空值，这就是一个坑啊。那用ES6的in就可以解决这个问题。

let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=[‘xiaoming‘,‘小明‘];
console.log(0 in arr1); // true

注意：这里的0指的是数组下标位置是否为空。

<< 3.数组的遍历方法
1>. forEach

let arr=[‘小明‘,‘18‘,‘china‘];
arr.forEach((val,index)=>console.log(index,val));

forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。但是有时候我们需要这样的空数组，那就会非常尴尬了。

2>. filter
let arr=[‘小明‘,‘18‘,‘china‘];
arr.filter(x=>console.log(x));
// 小明
// 18
// china
// []
3>. some
let arr=[‘小明‘,‘18‘,‘china‘];
arr.some(x=>console.log(x));
// 小明
// 18
// china
// false
4>. map
let arr=[‘小明‘,‘18‘,‘china‘];
console.log(arr.map(x=>‘web‘));
// ["web", "web", "web"]
// undefined

<< 4.数组转换字符串
1>. join()方法
join()方法就是在数组元素中间，加了一些间隔，开发中很有用处。

let arr=[‘小明‘,‘18‘,‘china‘];
console.log(arr.join(‘|‘));
// ‘小明|18|china‘

2>. toString()方法
// 转换时是用逗号隔开了。

let arr=[‘小明‘,‘22‘,‘china‘];
console.log(arr.toString());
第十一部分：ES6中对象
<< 1.