一、声明变量
var a = 1; // var 是variable的简写，可以理解成变量的意思。 -----> 全局声明，都可以拿到。
let b = 2; // let 在英文中是“让”的意思，也可以理解为一种声明的意思。 -----> 开启部分作用域，只在当前作用域有效
const c = 3; //const 在英文中也是常量的意思。 ----->常量可以简单理解为不变的量。声明之后不可改变
二、变量的解构赋值
1、定义
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
2、数组的解构赋值
let [a,b,c]=[1,2,3]
// 等价于下面的单独赋值
// let a = 1;
// let b = 2;
// let c = 3;
console.log(a,b,c) // 1 2 3
3、 对象的解构赋值
let {foo,bar} = {foo:'小花',bar:'大花'};
console.log(foo+bar); //大花小花
let foo;
// {foo} = {foo:'小花'}; 当提前定义过变量时，解构会报错，需要使用()包裹
({foo} = {foo:'小花'});
console.log(foo); //小花
4、字符串的解构
const [a,b,c,d,e,f]="这是一个测试";
console.log(a);//这
console.log(b);//是
console.log(c);//一
console.log(d);//个
console.log(e);//测
console.log(f);//试
5、解构的默认值
let [a,b="小花"]=['大花']
// 此时 对a进行了赋值， b未赋值，则给默认值'小花'
console.log(a + b); // 大花小花
// 需要注意的是undefined和null的区别：
let [a,b="小花"]=['大花',undefined];
console.log(a + b); // 大花小花
let [a,b="小花"]=['大花',null];
console.log( a + b); //大花null
注意：
1、数组模式和赋值模式统一; 即 等号左边和等号右边的形式要统一，如果等号两边形式不一样，很可能获得undefined或者直接报错。
2、需要注意的是undefined和null的区别
三、扩展运算符和rest运算符
1、对象扩展运算符（…）
//可以传入多个值，并且就算方法中引用多了也不会报错
function xiaohua(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
xiaohua(1,2,3); // 1 2 3 undefined
数组赋值，将arr1的值赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。
let arr1 = ['www', 'baidu', 'com'];
let arr2 = arr1;
console.log(arr2);//["www", "baidu", "com"]
arr2.push('xiaohua');
console.log(arr1, 'arr1');//["www", "baidu", "com", "xiaohua"] "arr1"
console.log(arr2, 'arr2');//["www", "baidu", "com", "xiaohua"] "arr2"
利用对象扩展运算符简单的解决这个问题，此时arr1的值没有改变
let arr1 = ['www', 'baidu', 'com'];
let arr2 = [...arr1];
console.log(arr2); //["www", "baidu", "com"]
arr2.push('xiaohua');
console.log(arr1, 'arr1'); //["www", "baidu", "com"] "arr1"
console.log(arr2, 'arr2'); //["www", "baidu", "com", "xiaohua"] "arr2"
2、rest运算符
function ceshi(first,...arg){
console.log(arg);
}
ceshi('no','i','l','o','v','e','y','o','u');//["i", "l", "o", "v", "e", "y", "o", "u"]
// rest运算符 可以用 ... 表示，运算符把逗号隔开的值序列组合成一个数组
其中for循环可以用 for...of；for…of的循环可以避免我们开拓内存空间，增加代码运行效率。 结果如下图：
function ceshi(first,...arg){
for(let val of arg){
console.log(val);
}
}
ceshi('no','i','l','o','v','e','y','o','u');
image.png
四、字符串模板
1、字符串拼接
支持html标签；支持运算符;结果如下：
let a = '大花';
let c = '小花';
let b = `${a}不喜欢${c}</br>${c}喜欢${a}</br>`;
let d = 1;
let e = 2;
let num = `${d+e}`
document.write(b);
document.write(num);
image.png
2、新增的方法
1、indexOf('a') --------- 判断字符串是否存在'a',不存在返回 -1，存在返回索引
2、includes('前端') -------- 判断字符串是否存在'前端',存在返回 true，不是返回 false
3、startsWith(':') ---------- 判断字符串是否以':'开头, 是返回 true，不是返回 false
4、endsWith(':') ----------- 判断字符串是否以':'结尾, 是返回 true, 不是返回 false
5、repeat() ---------------- 重复字符
let str = ':一个不爱吃饭的前端不是一个好厨子?'
console.log(str.indexOf('a'));// -1
console.log(str.includes('前端'));//true
console.log(str.startsWith(':'));//true
console.log(str.endsWith(':'));//false
console.log('吃饭|'.repeat(3));//吃饭|吃饭|吃饭|
五、ES6数字操作
- 1、可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false
- 2、NaN是特殊的非数字，可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true。
- 3、判断是否为整数Number.isInteger(xx)
- 4、整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
- 5、最大安全整数：Number.MAX_SAFE_INTEGER；最小安全整数 ： Number.MIN_SAFE_INTEGER
- 6、安全整数判断isSafeInteger( )
六、新增的数组知识
1、Array.from()：将json字符串转化为数组
let json = {
'0': '我',
'1': '好',
'2': '累啊',
length: 3
}
let arr = Array.from(json);
console.log(arr) //["我", "好", "累啊"]
2、Array.of(): 它负责把一堆文本或者变量转换成数组。
let arr = Array.of(3, 4, 5, 6);
console.log(arr); //[3, 4, 5, 6]
3、find()方法是从数组中查找
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let cy = arr.find(function (value, index, arr) {
// value：表示当前查找的值。
// index：表示当前查找的数组索引。
// arr：表示当前数组。
return value > 5;
})
console.log(cy);//6;如果找不到会显示undefined
4、fill()方法的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置
let arr = [0, 1, 2, 3, 4, 5, 6];
arr.fill('小花', 2, 5);
console.log(arr);// [0, 1, "小花", "小花", "小花", 5, 6]
5、数组遍历
let arr = ['大花', '小花', '大小花']
// 获取的是 key
// for (let item of arr) {
// console.log(item);
// }
// 获取的是 index
// for(let index of arr.keys()){
// console.log(index)
// }
// 获取的是 index 和 key
// for (let [index, val] of arr.entries()) {
// console.log(index + ':' + val);
// }
//entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。
//不理解也不知道什么情况下需要使用。
let list=arr.entries();
console.log(list.next().value);//[0, "大花"]
console.log(list.next().value);//[1, "小花"]
console.log(list.next().value);//[2, "大小花"]
七、ES6中的箭头函数和扩展
1、函数默认值、抛出错误、严谨模式（严谨模式与默认值不能同时使用）
//函数参数传递默认值
function add1(a,b=1){
return a+b;
}
console.log(add1(1));
//关于函数的{}
//如果函数体内只有一条语句，则可以省略{}，否则不可省略
//(a,b=1)是指这里b参数有个默认值，若b不传实参，则b的值为1
//主动抛出错误
function add2(a,b=1){
//'use strict'//开启严谨模式
if(a == 0){
throw new Error('This is error')
}
return a+b;
}
console.log(add2(0));
console.log(add2.length);//获取参数的个数
//经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。
//如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。
//箭头函数不能当构造函数进行使用
2、ES6中的函数和数组补漏
- 1、对象的函数解构
// 对象的函数解构
let json = {
a: '测试'
}
function fun({a,b = '1'}) {
console.log(a, b);//测试 1
}
fun(json);
//在调用接口的时候，有的时候可能是需要传递多个参数的，这时使用这个写法就不用一个一个传递参数了。个人而言，看这段代码实在不知道什么时候可以用，但是好像项目中又用到了。迷茫ing...
- 2、in的用法
in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。
对象中是否存在某个属性名；数组下标位置是否为空。
let obj={
a:'啊',
c: '照片详情',
b:'哦'
}
console.log('d' in obj); //false
let arr=['喜欢','毛不易'];
console.log(0 in arr); // true
//0是指数组下标位置为0是否为空。
- 3、数组的遍历方法(forEach,filter,some,map)
console.log('------forEach遍历数组------')
//forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。
let arr=['毛不易','是', '', '小可爱'];
arr.forEach((val,index)=>console.log(index,val));
console.log('-----filter遍历数组--------')
arr.filter((val,index)=>console.log(index,val));
console.log('-----some遍历数组--------')
arr.some((val,index)=>console.log(index,val));
console.log('-----map遍历数组--------')
arr.map((val,index)=>console.log(index,val))
console.log('-----map替换数组--------')
console.log(arr.map(x=>'花花'));
image.png
- 4、数组转化为字符串
let arr=['毛不易','是', '', '小可爱'];
console.log("-----数组转换为字符串------");
console.log(arr.join('|'), '//自定义字符');//自定义字符
console.log(arr.toString(),'//字符为,');//字符为,'
image.png
八、ES6中的对象
1、对象赋值
// 对象赋值
let nickname = "花花";
let name = '华晨宇';
var obj = {nickname,name};
console.log(obj); // {nickname: "花花", name: "华晨宇"}
2、获取[key]值
let key = 'nickname';
var obj = {
[key]: '花花',
name: '华晨宇'
}
console.log(obj.nickname); //花花
console.log(obj.name); //华晨宇
3、自定义对象方法
let person = {
name: '老师',
introduce: function (name, address) {
return `我叫${name}, 来自${address}`
}
}
console.log(person.introduce('小花', '安徽'));//我叫小花, 来自安徽
console.log(person.introduce('da花', '南京'));//我叫da花, 来自南京
4、对象比较 Object.is()
console.log(Object.is(obj.name,person.name)); //false
5、=== 与 Object.is() 的区别
=== 同值相等 Object.is()严格相等
console.log(+0 === -0); //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true
6、Object.assign( )合并对象
console.log(Object.assign(obj, person));// 此时 后面对象的name值是会覆盖前面对象的name值
image.png
7、Symbol
Symbol对象元素的保护作用
在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用Symbol进行保护。
let person = {
name: '老师',
sex: '女',
introduce: function (name, address) {
return `我叫${name}, 来自${address}`
}
}
let age = Symbol();
person[age] = 12;
for(let item in person) {
console.log(person[item]);
}
//此时不会输出age，对age进行了保护。
//若想输出，此时直接打印 person[age]即可
image.png
九、 set 和 weakSet 数据结构
1、set
// set声明（去重的数组）
let setArr = new Set(['小花','是一个','可爱的','小朋友','小朋友']);
console.log(setArr);//Set {"小花", "是一个", "可爱的", "小朋友"}
// 增加
setArr.add('好可爱');
console.log(setArr); //Set {"小花", "是一个", "可爱的", "小朋友", "好可爱"}
// 删除
setArr.delete('好可爱');
console.log(setArr); //Set {"小花", "是一个", "可爱的", "小朋友"}
// 查找
console.log(setArr.has('可爱的'));//true
// for ... of 循环
for (let item of setArr){
console.log(item);
}
// forEach
setArr.forEach((value)=>console.log(value));
// 长度
console.log(setArr.size)
// 删除全部
setArr.clear();
console.log(setArray);// setArray is not defined
十、函数式编程
函数式编程(缩写为 FP)是一种通过组合纯函数来构建软件的过程，避免状态共享、可变数据及副作用的产生。
1、函数式编程定义
image.png
2、函数式编程的特点
- 函数是"第一等公民"
把它想象成一个数据类型，可以声明、赋值给其他变量、当参数传给函数等等
- 函数是"第一等公民"
- 只用"表达式"，不用"语句"
"表达式"（expression）：是一个单纯的运算过程，总是有返回值；
"语句"（statement）：是执行某种操作，没有返回值。
函数式编程要求，只使用表达式，不使用语句。也就是说，每一步都是单纯的运算，而且都有返回值。
- 只用"表达式"，不用"语句"
- 没有"副作用"
所谓"副作用"，指的是函数内部与外部互动（最典型的情况，就是修改全局变量的值），产生运算以外的其他结果。
函数式编程强调没有"副作用"，意味着函数要保持独立，所有功能就是返回一个新的值，没有其他行为，尤其是不得修改外部变量的值。
- 没有"副作用"
- 不修改状态
函数式编程只是返回新的值，不修改系统变量。因此，不修改变量，也是它的一个重要特点。
- 不修改状态
- 引用透明
引用透明（Referential transparency），指的是函数的运行不依赖于外部变量或"状态"，只依赖于输入的参数，任何时候只要参数相同，引用函数所得到的返回值总是相同的。
方法传入的参数类型与返回值类型是一样的（类比map，same方法，传入一个数组同时返回的也是一个数组）
- 引用透明
add(x, y) {
return x + y
}
multiply(x, y) {
return x * y
}
subtract(x, y) {
return x - y
}
console.log(subtract(multiply(add(1,2), 3), 4))//5
image.png
add(x, y) {
return {
multiply: (z) => {
return {
subtract: (a) => {
return (x + y) * z - a
}
}
}
}
}
console.log(add(1, 2).multiply(3).subtract(4))//5
来自：http://www.ruanyifeng.com/blog/2012/04/functional_programming.html
