es6-9集结

// 箭头函数 
let f = a => a + 1;
// 等价于
var f = function(a) {
    return a + 1;
}

// 模版字符串
let a = 'react'
let s = `hello ${a}`; // hello react


// 解构赋值
let [lang, ...other] = ['js', 'java', 'react']; // js , ['java', 'react']

// 扩展运算符 合并数组
let arr1 = ['a', 'a1'];
let arr2 = ['b'];
let newArr = [...arr1, ...arr2] // ['a', 'a1', 'b']

// 对象解构
let {
    person: {
        name,
        age
    },
    foo
} = {
    person: {
        name: 'tom',
        age: 4
    },
    foo: 'foo'
}
console.log(name, foo, age) // tom , foo , 4

// 默认值
let t = (a = 1) => a + 2
t(2) // 4
t() // 3

let o = '';
let temp = o || 1 // 1

// map用法
arr1.map(item => (
    item
))

// filter
arr1.filter(item => (item != 'a')) // a1

// swap 变量值交换
let foo = 1
let bar = 2

;
[foo, bar] = [bar, foo] // foo = 2 , bar = 1
复制代码

一、babel转化
1.环境搭建：
建立目录：
src：书写ES6代码的文件夹，写的js程序都放在这里。
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。

(1)在项目文件夹 命令行初始化 npm init -y
(2)全局安装babel-cli npm install -g babel-cli
(3)本地安装babel-preset-es2015 和 babel-cli :
npm install --save-dev babel-preset-es2015 babel-cli
(4)新建.babelrc
配置转码包:

    "presets":[
        "es2015"
    ],
    "plugins":[]
}
复制代码

在pakejson中配置转码命令：

"scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  //命令行运行npm run build 即可将js转码到dist文件夹
复制代码

二、语法：

// ------------------1.变量的解构赋值--------------------------

    // ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

// *数组解构
    let [a, b, c] = [1, 2, 3];  //可以从数组中提取值，按照位置的对象关系对变量赋值。
    let [q, [w], e] = [1, [2], 3] //数组模式和赋值模式统一：

    let [t, y = 'js'] = ['技s']; //解构的默认值
    console.log(t + y);

//*对象的解构赋值
    let { foo, bar } = { foo: 'ss', bar: 'ee' };

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

let oop;({oop} = {oop:'slce'})// 如果在对象解构前定义了变量  再用此变量解构时会出错，表达式外加()即可

//*字符串解构
    const [z,x,m,v,ll,n] = "JSPang";

//对象的函数解构
    // 直接把这个JSON格式数据当作参数，传递到函数内部进行处理
{
    let jsons = {
        "pp":"aa",
        "bb":"cc"
    }
    function lop ({pp,bb}) {
        console.log(pp,bb)
    }
    lop(jsons);
   
}

//数组的函数解构
{
    let ayy = [88,77,55];
    function ayys (a,b,c) {
        console.log(a- b -c);
    }
    ayys(...ayy);
}
    
    // ----------------------------------------2.扩展运算符和rest运算符（解决参数和对象数组未知情况下的编程，让代码更健壮和简洁。）
//(1)传入的参数不确定可以用...
function oop (...pl) {
console.log(pl);
}
oop(1,2,3,4);

//(2)解决对内存堆栈的引用，真正的赋值(用对象扩展运算符解决)原理是用[].concat(_a)
let a = [1];
let b = a; //对内存堆栈的引用，不是真正的赋值
b.push(2);
console.log(a) //[1,2]  
{
    let a = [1];
    let b = [...a];
        b.push(2);
        console.log('...解决变量的赋值' + a + "---" +b);
}

//reset运算符可以用做实参(代替它前面的实参所对应的形参所后面剩余的形参)  返回array类型
function rest (o,l,...p) {
console.log(p);
}
rest(2,4,6,8,0);

document.write('jdf'.repeat(3));//复制3个字符串


//---------------------------------------------------------------3.js对数字操作-------------------------------

//(1)数字判断和转换 
console.log(Number.isFinite(098))  //只要是数字则返回true，否则false;
console.log(Number.isInteger(0.33)); //判断是否为整数,是---true,否则false
console.log(Number.parseInt(3.3)) //3   浮点数转换为整数

console.log(Number.MAX_SAFE_INTEGER); //最大安全整数
console.log(Number.MIN_SAFE_INTEGER); //最小安全整数

let a = Math.pow(2, 53) - 1;
console.log(Number.isSafeInteger(a));//false     安全整数判断isSafeInteger()

//----------------------------------------------------------------4.数组---------------------------
// （1）.json数组转换为数组

let json = {
    '0': 'ssss',
    '1': 'aaaa',
    '2': 'cccc',
    length: 3
}
console.log(Array.from(json)); //["ssss", "aaaa", "cccc"]  -----ES6中绝大部分的Array操作都存在于Array对象里。用Array.from(xxx)来进行转换
console.log(Array.of(2,'kk'))   // 将文本||变量转换为数组 


//find()实例方法: val：表示当前查找的值。 index：表示当前查找的数组索引。 arr：表示当前数组。
// 所谓的实例方法:就是并不是以Array对象开始的，而是必须有一个已经存在的数组
console.log(
    [1, 2, 3, 4].find(
        (val, index, arr) => {
            return val > 1; //找到了符合条件的值，如果找不到会显示undefined。
        }
    )
);

//(2).fill() 方法用于将一个固定值替换数组的元素。
//array.fill(value, start, end)  
//value	必需。填充的值。
// start	可选。开始填充位置。从0开始
// end	可选。停止填充位置(默认为 array.length)
['ni','hao','me','me','da'].fill('哈哈',0,1);

//(3). keys() 方法用于从数组创建一个包含数组键的可迭代对象。 如果对象是数组返回 true，否则返回 false。
//返回值：一个数组可迭代对象。
Object.keys({p:'d'})//用于对象返回其键 //p
["Banana", "Orange", "Apple", "Mango"].keys().next().value; //0  创建一个可迭代的对象，该对象包含数组的键

for (let i of [3,4,5].keys()) {
    console.log(i); //循环数组 返回数组的索引 0 1 2
}

{let a = [3, 4, 5, 6];
let s = a.keys();
console.log(s.next().value);//0
console.log(s.next().value)//1   -----------逐个输出数组的索引
}


//(4). entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对(key / value) 。
//迭代对象中数组的索引值作为 key， 数组元素作为 value。
 for (let [index,val] of [7,8].entries()) {
     'use strict';
     console.log(index + 'h' + val);   //0h7 1h8  //同时输出数组索引和其对应的值;  [7,8].entries().next().value 输出[0,7]
 }


 //---------------------------------------------5.函数--------------------------------------------------
// （1）函数中的严谨模式

// 我们在ES中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。

// function add(aS, bS = 1) {
//     'use strict'
//     if (aS == 0) {
//         throw new Error('This is error');
//     }
//     return aS + bS;
// }
// console.log(add(1));

// 上边的代码，浏览器控制台报错，这是ES6中的一个坑，。这个错误的原因就是使用了默认值，再使用严谨模式的话，就会有冲突，所取消默认值的操作。

function add(aS, bS) {
    'use strict'
    if (aS == 0) {
        throw new Error('This is error');
    }
    return aS + bS;
}
console.log(add(1, 2));

//in 方法判断对象或数组中是否有某个值

// 判断对象中是否有某个值
{
    let lkj = {
        "oop":"oop",
         "shift":"shfit"
    }
    console.log('oop' in lkj);
}

// 判断数组中是否有某个值
// 之前用数组的length来判断数组是否为空，但是有弊端，
// 比如:[,,,].length //3  其实是空值

//用in解决判断索引
console.log(0 in [,,,]); //false
console.log(0 in ['q','w','e']);  //true

// join()方法  在数组元素中间，加了一些间隔，开发中很有用处。
let arr = ['j', 'w', 'e'];
console.log(arr.join('|')); //j|w|e


//---------------------------------------------------6.对象-------------------------------
//  (1).d对象赋值：
// ES6允许把声明的变量直接赋值给对象:
{
    let [ab,ba] =  [1,2];
    var obs = {ab,ba}

}

// (2).对象Key值构建

// 截取数字
var yaoxi = "http://172.16.2.77:10800/play.html?channel=44";
var nani = parseInt(yaoxi.slice(yaoxi.split('').indexOf('=') + 1));
console.log(typeof nani + nani);

var yaoxi = "http://172.16.2.77:10800/play.html?channel=44";
console.log(yaoxi.split('=')[1].split('l').toString())



Object.is() //对象比较

// 对象的比较方法, 以前进行对象值的比较，经常使用 === 来判断，比如下面的代码：

var obj1 = { name: 'eeee' };
var obj2 = { name: 'eeee' };
console.log(obj1.name === obj2.name);//true
// 那ES6为我们提供了is方法进行对比。

var obj1 = { name: 'eeee' };
var obj2 = { name: 'eeee' };
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name, obj2.name)); //true
// 区分 === 和 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
// === 为同值相等，is()为严格相等。
Object.assign() //对象合并

{
    let a = {a:'opop',bd:12};
    let b = {v:'pppp',dd:12};
    console.log(Object.assign(a,b));
}
 
// symobol在对象中的作用  对对象元素的保护

// symobol是es6新增的原始数据类型  它是JavaScript的第七种数据类型  表示独一无二的值
// Symbol值通过Symbol函数生成，只要属性名是属于Symbol类型的，就是独一无二的，可以保证不会与其他属性名产生冲突。
let s = Symbol('name'); //symbol 代表的是 唯一且不与其他任何类型相同的值 

// 用Symbol构建对象的Key，并调用和赋值。
{
    let sy = Symbol();
    var sys =  {
        [sy]:'la'
    }
    console.log(sys[sy]) //la
}

// 用Symbel对对对象的某个值进行保护  不让其输出

{
    let hu = {name:"hh",phone:'000',age:12};
    //  不让程序输出age
    // 先复制后删除
    let ageClone = hu.age;
    delete hu.age;
  let ages = Symbol();
    hu[ages] = ageClone;
    for (let x in hu) {
        console.log(hu[x]) //{name: "hh", phone: "000", Symbol(): 12}
    }
}



// ------------------------7、Set和WeakSet及map的数据结构-----------------------------

// 1.Set的数据结构(是以数组的形式构建的，实质并不是数组) 返回一个类数组
// Set和Array的显著区别：Set不允许数组有重复的元素()去重
new Set([1, 2, 3, 4, 1, 1, 1, 1])  //{1, 2, 3, 4}  

//  （1）Set 的增删改查

// add添加元素
new Set([1]).add('hh') //{1, "hh"}
{
   //delete删除元素
    let del = new Set([1,1,2]);
        del.delete(1);  //删除数组元素1
        console.log(del) //{2}
}
{
    // has查找元素是否存在  返回Boolea
    let cha = new Set([1,2,4,4]);
    cha.has(4);//true 查找是否存在元素4 
}
{
    //clear  清空数组内容
    let vb = new Set([2,3,45]);
        vb.clear();
        console.log(vb); //{}
}

{
    //size是Set的内置属性 获得Set值的数量
    new Set([1,2,3,4]).size //4

    let bop = new Set([1,2,3]);
        bop.forEach((item) => {console.log(item)})
}


// 2.  weakSet  传入的值必须是对象  返回一个对象数组
{
    let weakObj = new WeakSet();
    let obj = { a: '33', b: '44' }
    let obj1 = obj;
    weakObj.add(obj);
    weakObj.add(obj1);
    console.log(weakObj);    //value: { a: "33", b: "44" }   value是他的内置属性
}

//3.map数据结构 （常见处理对象的键和值） 可以将其看成key/value  返回类数组

{
    let ma = {
        name:'ppp',
        age:111
    }
    let map = new Map();
    map.set(ma,'dep')  //key: "ppp" value: "llll"
    map.get(ma) //dep 得到value
    map.delete(ma);//{}  清空键 
}  
    ```


复制代码