ECMAScript6基础 ---let、var、const；块级作用域；解构赋值；展开运算符；set；map；箭头函数；新增数组、新增字符串、新增对象；babel使用；

JavaScript 三大组成部分
（ECMAScript 、DOM、BOM）

ECMAScript 发展历史

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources

ECMAScript 包含内容：
JS 中的数据类型及相关操作，流程控制，运算符及相关运算……

es6 更简化，更严谨

ECMAScript 6
一、let 、var 、const
let与var差异：
let 不能重复声明；
let 允许声明一个在作用域限制在块级（块级作用域 {}）中的变量、语句或者表达式；
let 不会被预解析；（先声明再使用）
var 声明的变量只能是全局或者整个函数块的；

let：
let同一作用域下，不能重复声明，会报错；
作用域：全局作用域 和 块级作用域{} ；也就是说只能在这个代码块{}中去用let；
let 不会被预解析 ；就是说先输出再定义会报错，不进行预解析（要遵循先声明再使用的原则）；

var：
var同一作用域下，可以重复声明；
作用域：全局作用域 和 函数作用域；
var会进行预解析，但还是要遵循先声明再使用的原则；

const 常量：
- 常量不能重新赋值
- 不能重复声明
- 块级作用域{}
- const 不会被预解析
- 手册地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
- 常量一定要先赋值，而且赋值后不能修改（若修改对象内的值可以，但整个对象进行修改不行，若不让其修改对象内的值，可以用Object.freeze(obj)将其对象进行冻结起来，此处的冻结只是一层，内部若是还有对象的话还是可以修改，若还需要内部对象冻结，需要手动写一个递归进行深冻结），其他影响和let一样（不能重复声明，块级作用域{}，不会被预解析）
- 常量定义对象，不能重写（最外层不能更改），里层或者更深层可更改。若不想让其更改，可将其冻结Object.freeze(obj),注意freeze只冻结一层，做想要深冻结，需手写一个递归，如deepFreeze，类似深拷贝

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

<script> 
// var 不能重复声明
var a = 10;
var a = 20;
{
    var a = 30;
    console.log(a);
}

// var 会进行预解析，但还是要遵循先声明再使用的原则，不会报错
console.log(a);
var a = 1;
</script> 

<script> 
// let 不会被预解析，必须先声明后使用，会报错
console.log(a);
let a = 1;

let fn = function(){
    console.log("一定先声明，在使用");
};
fn();

// let 不能重复声明
let a = 10;
let a = 20;
{
    let a = 30;
    console.log(a);
}

// let 允许声明一个在作用域限制在块级中的变量、语句或者表达式
// var 全局作用域 函数作用域
var a = 1;
{
    let a = 1;
    var b = 1;
    console.log(a);
}
console.log(a);
</script> 

<script>
const b;// 常量 let、var 变量
//b = 20;
console.log(b);
// 常量只能在声明时赋值，并且一旦赋值不能修改

const obj = { 
	name: '张三',
	age: 28
} 
obj = { name: '李四'} ; // 不可更改，会报错
但是可以改对象里边的值
obj.name = '李四';// 可更改成功
</script> 

二、块级作用域 if 和 for
原先使用

(function(){
    
})()

现在使用 ==>代码块

{

}

<script>
let b;   
if(true){
    let a = 1;
    b = 2;
    console.log(a);//1
}
console.log(b);//2
//console.log(a);//报错 a is not defined
</script> 

<script>
for(let i = 0; i < 5; i++ ){
   setTimeout(function(){
       console.log(i);
   },100);
}
//结果01234

// let i;
// for(i = 0; i < 5; i++ ){
//    setTimeout(function(){
//        console.log(i);
//    },100);
// }
//结果5

// for(var i = 0; i < 5; i++ ){
//   (function(i){
//     setTimeout(function(){
//         console.log(i);
//     },100);
//   })(i);
// }
//结果01234
</script>   

三、解构赋值
1.对象的解构赋值 let {a,c} = obj; 【变量名 和 属性名 要对应（名称一致）】
2.数组的解构赋值 let [a,b,c] = arr; 【变量名 和 值索引 要对应（位置一致）】
3.字符串的解构赋值 let [a,b] = str; 【字符串与数组一样，与位置对应】
手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

对象的解构赋值

<script>
let obj = {
    a: 1,
    b: 2,
    c: 3
};
//一般声明一个变量存起来方便后期使用
// let a = obj.a;
// let b = obj.b;
// console.log(a,b);//结果1 2

// 交互对象的 a,c两个属性
// let a = obj.a;
// let c = obj.c;
// obj.a = c;
// obj.c = a;

// 对象的解构赋值
let {a,c} = obj;
console.log(a,c);//结果 1 3
// 解构出来后重命名写法（用不多）
// let {a:a1,c:c1} = obj;
// console.log(a1,c1);//结果 1 3

// let {a} = obj   ==> let a = obj.a;  此处前边的a必须一一对应obj里的a，名称一一对应
let {d} = obj;
console.log(d);//结果undefined
</script>   

数组的解构赋值

<script>
// let arr = [1,2,3];
// let [a,b,c] = arr;
// console.log(a,b,c);//结果1 2 3 
/*
    对象解构：变量名 和 属性名 要对应（名称一致）
    数组解构：变量名 和 值索引 要对应（位置一致）
*/
let a = 0;
let b = 1;
let arr = [a,b];
[b,a] = arr;
console.log(a,b);//结果 1  0

//面试题:如何快速交互a,b的值
let a = 0;
let b = 1;
[a,b] = [b,a];
</script>

字符串的解构赋值

<script>
//字符串与数组一样，与位置对应
let str = "ABCD";
let [a,b] = str;
console.log(a,b);//结果 A B

//数字
let nub = 123;
let [c,d] = nub;
console.log(c,d);//结果nub is not iterable  【数字nub不是迭代器】
</script>   

四、展开运算符【…变量名】
1.对象展开 let obj = { a: 1,b: 2}; let obj2 = {…obj, c: 3, d: 4 };
2.数组展开 let arr = [1,2,3,4,5]; let arr2 = [“a”,…arr,“b”,“c”];

3.剩余参数 ===>展开运算符 与 解构赋值 配合使用
①对象
let {a,…d} = obj2;
console.log(a,d);//结果1 { b:2, c:3, d:4 }
②数组
let arr3 = [1,2,3,4,5];
let [a,…b] = arr3;
console.log(a,b);//结果1 [2,3,4,5]

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

*注意：不管是对象还是数组，它们的类型都是对象，那么对象就注意传值的问题，在这过程中，不建议对象直接赋值给另一变量，因为这块你如果作修改的话第一对象也会作为修改，有变化。
let obj = {a:1,b:2};
let obj2 = obj;
obj2.a=10;
console.log(obj);//结果{a:10,b:2}
此处说明a已经发生改变，为解决这一问题，就改变以下内容，将obj解构出来，既不存在传值问题了。let obj2={…obj}*这样obj与obj2就是独立的，互不影响，只是把obj结构出来放入obj2内

浏览器兼容性问题去我发的手册链接中慢慢看。

数组展开

<script>
// 展开运算符
let arr = [1,2,3,4,5];
let arr2 = ["a",...arr,"b","c"];
// 把 arr 中的数据放入 arr2 中，从 第 1 位开始排列
// ["a",1,2,3,4,5,"b","c"]
console.log(arr2);//结果['a',1,2,3,4,5,'b','c']

// 剩余参数 ===>展开运算符 与 解构赋值  配合使用
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a,b);//结果1 [2,3,4,5]
</script>   

对象展开

<script>
// 展开运算符
let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    ...obj,
    c: 3,
    d: 4
};
console.log(obj2);//结果{a: 1,b: 2,c: 3,d: 4}
// 剩余参数 ===>展开运算符 与 解构赋值  配合使用
let {a,...d} = obj2;
console.log(a,d);//结果1 {b:2,c:3,d:4}
</script>  

五、Set 对象 map对象
set本身是函数，用来构建对象（又称构造函数）
set 、map本身是函数，它们都有一个名称叫构造函数，像这类函数还有Array() Data()等等
构造函数：用来构建某一类型的对象 - 专业叫法（对象的实例化）
let s = new Set();//通过new来构建set对象,set中可传入数组或类数组

1.Set 对象的数据结构
2.Set 相关属性与方法（size 属性、clear()、delete()、has()、add() ）

set：【接收数组】
（1）作用于数组去重；
（2）Set.size()属性，去重后保留数值的个数，相当于length
（3）Set.add(val) 添加某个值 返回 set 数据本身
（4）Set.delete(val) 删除某个值 返回 true | false （是否删除成功///没有这个值才会出现删除失败情况）
（5）Set.has(val) 是否包含某个值
（6）Set.get(val)获取某项值
（7）Set.clear()清除所有值

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

3.Map 对象的数据结构
4.Map 相关属性与方法（size 属性、clear()、delete()、get()、has()、set()）

map:【接收二维数组，相当于可以理解为对象，但不接收对象，因为不可迭代】key-value（键值对）
（1）Map.size()属性，数据长度
（2）Map.clear();清除所有值
（3）Map.delete(key);删除数据key的值
（4）Map.get(key);获取数据key的值
（5）Map.has(key) 是否包含某个值，返回 true | false
（6）Map.set(key,val);设置一个值，返回值map对象本身（就可以用链式操作）不是add了是set

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

Set()

<script>
let arr = [2,1,2,3,4,1,3,5,2];
let s = new Set(arr);//去重
console.log(s);//去重结果{2,1,3,4,5}

console.log(s.size);//结果5  size 数值的个数  ===》相当于length

s.clear();//清空所有值
console.log(s.clear());//清空所有值,结果为undefined

s.delete(4);//删除某个值，结果为{2,1,3,5}
console.log(s.delete(0));//删除是否成功，结果为false

console.log(s.add(6));//返回值是set本身，添加某个值，add具备去重，若此处添加5，结果只能存在一个5

s.add(6).add(7).add(8);//因为add返回set本身，所以这里提供了链式操作的接口

console.log(s.has(2));//查看是否包含某个值，结果为true

s.get();//

arr = [...s];//对象转数组，此处将s解构出来放入[]中，s与arr独立的，互不影响
console.log(arr);//对象转数组结果[2,1,3,4,5]

</script>

Map()

<script>
let arr = [
	["leo",40],
	["zmouse",30],
	["reci",20]
];//二维数组

let m= new Map(arr);

console.log(m.clear());//清空所有值,console.log(m);结果为{}

console.log(m.delete("leo"));//入参key -- 》删除某个值，结果为true
console.log(m);//m结果为[["zmouse",30],["reci",20]]

console.log(m.get("zmouse"));//获取数据key的值，结果30

console.log(m.delete("zmouse"));//结果true

m.set("刘伟",41);//设置一个键值对
m.set("刘伟1",41).set("刘伟2",42).set("刘伟3",43);//因为set返回map本身，所以这里提供了链式操作的接口

</script>  

六、箭头函数
1.箭头函数的各种写法
2.箭头函数的 this 问题（箭头函数本身没有this参数，所以调用箭头函数的 this 时，指向的是其声明时 所在的作用域的this）
3.箭头函数的不定参问题（箭头函数没有不定参 arguments）

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

注意：箭头函数都需要存起来

箭头函数的各种写法:（参数==形参）1个参数，多个参数，无参数
    1.参数=>返回值
	2.(参数1,参数2)=>返回值
	3.() => {
        执行语句
    }
    4.() => {
        执行语句
        return 
    }
    5.(形参) => {
        执行语句
        return
    }

<script>
//参数=>返回值
let fn = ()=>{
    console.log(1);
};
fn();//结果1

// let fn = (nub1,nub2)=>nub1*nub2;
// console.log(fn(2,3));//结果6
</script>

不定参

<script>

function fn(){
	console.log(arguments);
}
fn(1,2,3,4);//结果Arguments对象 {1,2,3,4}


let fn = (...arg)=>{
    console.log(arg);
};
fn(1,2,3,4);//结果 [1,2,3,4]   注意此处是数组


// 箭头函数本身没有不定参,没有arguments这个东西的
// rest 参数，也就是剩余参数
let fn = (a,...arg)=>{
    //console.log(arguments);
    console.log(a,arg);
};
fn(1,2,3,4);//结果1 [2,3,4]

</script>   

this参数

<script>
//this指向document
document.onclick = function() {
	console.log(this);
}

//this指向windows
document.onclick = ()=>{
	console.log(this);
}

//箭头函数本身没有this，调用箭头函数的this时，指向的是其声明时所在的作用域的this
// 箭头 this 指向，箭头函数定义时所在的作用域的this
document.onclick = function(){
	//this指向document
    let fn = (a,...arg)=>{
        console.log(this);
    };
    
    //this指向windows
    //function fn(){
	//	console.log(this);
	//}
	
    fn();
};
</script> 

七、rest 参数设置 （往上查找不定参看）或者看剩余参数

八、参数默认值设置 （在箭头函数传参时把默认值带上，就不会存在其他没有找到默认值的情况）

 <script>
// function fn(nub=0,nub2=0){
//     console.log(nub+nub2);
// }

let fn = (nub=0,nub2=0)=>{
    console.log(nub+nub2);
}

fn();
</script>

九、新增数组
注意区分哪些方法是对象下的方法，哪些方法是对象本身的方法
如获取时间戳
new Date().getTime();//对象下的方法
Date.now();//对象本身的方法

- Array.form(类数组)    把一个类数组转换成真正的数组 【类数组：有下标有length】，返回值：转换后的新数组

类数组转真数组，除了Array.form()还可用展开运算符

Array Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组转换成数组
参数：arrayLike ：类数组
可选参数:
mapFn： 类似 map 方法，循环类数组时的回调函数，返回值组成新数组
thisArg： mapFn 函数执行时的 this 指向
返回值： 根据 arrayLike 生成的新数组

- Array.of(elementN)   将参数转成一个数组, 返回值： 新数组

Array Array.of(element0[, element1[, …[, elementN]]]) 将参数转成一个数组
参数： elementN 要放入数组中的数据
返回值： 新数组

- Array.isArray(data)    检测数据是否是个数组,  返回值: true 数组，false 非数组

Boolean Array.isArray(data) 检测数据是否是个数组
参数：data 要检测的数据
返回值: true 数组，false 非数组

- find(callback)  查找数组中满足要求的第一个元素的值

Value arr.find(callback[, thisArg]) 查找数组中满足要求的第一个元素的值
参数：callback
·在数组每一项上执行的函数，接收 3 个参数：
– element 当前遍历到的元素。
– index[可选] 当前遍历到的索引。
– array[可选] 数组本身
可选参数： thisArg 执行回调时用作this 的对象
返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined

- findIndex(callback)  查找数组中满足要求的第一个元素的值的索引

Index arr.findIndex(callback[, thisArg]) 查找数组中满足要求的第一个元素的值的索引
参数: callback
·针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
– element 当前元素。
– index 当前元素的索引。
– array 调用findIndex的数组。
可选参数： thisArg 执行callback时作为this对象的值
返回值： 满足要求的值的索引

- includes(valueToFind)  判断数组中是否包含一个指定的值

Boolean arr.includes(valueToFind[, fromIndex]) 判断数组中是否包含一个指定的值
参数： valueToFind 需要查找的值
可选参数： 从 fromIndex 处开始向后查找
返回值： true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex

- fill(value)  用一个固定值填充一个数组中从起始索引到终止索引内的全部元素 (用于操作二进制数据)

Array arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
参数： 用来填充数组元素的值。
可选参数：
– start 起始索引，默认值为0。
– end 终止索引，默认值为 arr.length

- flat([depth])  扁平化多维数组 (二维数组转一维数组称数组扁平化)

Array arr.flat([depth]) 扁平化多维数组
可选参数： depth 指定要提取嵌套数组的结构深度，默认值为 1。
返回值： 一个包含将数组与子数组中所有元素的新数组

- flatMap()

Array arr.flatMap(function callback(currentValue[, index[, array]]) {
// 返回新数组的元素
}[, thisArg]) 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些

参数： callback
·可以生成一个新数组中的元素的函数，可以传入三个参数：
– currentValue 当前正在数组中处理的元素
– index可选 可选的。数组中正在处理的当前元素的索引。
– array可选 可选的。被调用的 map 数组
可选参数： thisArg 执行 callback 函数时 使用的this 值
返回值： 一个包含将数组与子数组中所有元素的新数组

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

<body>
<ul id="list">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>    
<script>
    // 测试是否是类数组，用map测试，因为map本身是传的数组，报错说明不是真正的数组，是类数组
    let lis = document.querySelectorAll('#list li');
    //lis = Array.from(lis);// 将 类数组 转换成真正的 数组 
    console.log(lis);
    lis.map(item=>{
        return item
    })
</script>
</body>

// Array.form(类数组) 把一个类数组转换成真正的数组 【类数组：有下标有length】，返回值：转换后的新数组

<body>
<ul id="list">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>    
<script>

(function(){
    // let list = document.getElementById("list");
    // let lists = list.getElementsByTagName("li");
    
     //方式一 ：将 类数组  转换成  数组 （通过展开运算符）
     // lists = [...lists];
     
     //方式二 ：将 类数组  转换成  数组 （通过Array.from()）
    // lists = Array.from(lists);
    // // lists.forEach(item => {
    // //     console.log(item);
    // // });
    
    // console.log(lists);
    
    
    let datas = {
        0: "a",
        1: "b",
        2: "c",
        length: 3
    };
    
    // datas = Array.from(datas);
    
    datas = Array.from(datas,function(item,index){
        console.log(item,index,this);
        return item.toUpperCase();
    },document);
    console.log(datas);
    
})();
</script>
</body>

// Array.of(elementN) 将参数转成一个数组, 返回值： 新数组

<script>
{
	console.log(Array.of(1,2,3,4,'a'));//[1,2,3,4,'a']
}
</script>

// Array.isArray(data) 检测数据是否是个数组, 返回值: true 数组，false 非数组

<body>
<ul id="list">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
<script>

{
	let lis = document.querySelectorAll('#list li');
	console.log(Array.isArray(lis));//false
	
    lis = [...lis];//展开运算后
	console.log(Array.isArray(lis));//true
}
</script>
</body>

// find(callback) 查找数组中满足要求的第一个元素的值

<script>
//之前
let arr = ['a','b','c','d'];
arr.indexOf('a');

 let arr = [1,2,5,6];
 let val = arr.find((item)=>{
    return item >= 5;
 });
 //箭头函数简写
 let val = arr.find(item=>item>=5);
 console.log(val);//5  无此值则返回 undefined



// findIndex(callback)  查找数组中满足要求的第一个元素的值的索引

let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
    return item >= 5;
});
console.log(index);//2

</script> 

// flat([depth]) 扁平化多维数组 （多维数组转一维数组 ）Infinity提取无限层

<script>
let arr = [
    [1,2],
    [3,4],
    [
        [6,7],
        [
            [8],
            [9,10]
        ]
    ]
];
console.log(arr.flat(1));//输出[1,2,3,4,[6,7],[[8],[9,10]]]
console.log(arr.flat(Infinity));//输出[1,2,3,4,6,7,8,9,10]
</script> 

//flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些
注意：只能处理一层，若处理多层需要递归处理

<script>
let arr = [
    [1,2],
    [3,4],
    [6,8]
];
//flatMap本身接收回调函数，扁平化处理
let arr2 = arr.flatMap(item=>{
    item = item.filter(item=>item>=2);
    return item;
});
console.log(arr2);//[2,3,4,6,8]
</script>  

填充 fill(value) 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

<script>
/*
Array arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
参数：
    用来填充数组元素的值。
可选参数：
    start 
        起始索引，默认值为0。
    end 
        终止索引，默认值为 arr.length  
*/

let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);//不包含结束位，且最大也只能是length长度，超过也没用
console.log(arr);//['a','f','f','d','e']

arr1.fill('f')
console.log(arr1);//['f','f','f','f','f']

arr2.fill('f',3)
console.log(arr2);//['a','b','c','f','f']

</script>

includes(valueToFind) 判断数组中是否包含一个指定的值

<script>
let arr = ["a","b","c","d"];
console.log(arr.includes("a"));//true,第二个参数是从第几位开始检索
console.log(arr.includes("a",2));//从第二位也就是c开始往后检索是否含有a，返回false
console.log(arr.includes("a",-3));//false

</script>  

十、新增字符串

- includes(valueToFind)    判断字符串是否包含一个指定的值

Boolean str.includes(valueToFind[, fromIndex]) 判断字符串是否包含一个指定的值
详细： 参考数组的 includes

- startsWith(searchString)  判断当前字符串是否以另外一个给定的子字符串开头

Boolean str.startsWith(searchString[, position]) 判断当前字符串是否以另外一个给定的子字符串开头
参数：searchString 要搜索的子字符串。
可选参数：position 在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
返回值：如果传入的子字符串在搜索字符串的开始则返回true；否则将返回 false。

- endsWith(searchString)   判断当前字符串是否是以另外一个给定的子字符串“结尾”

Boolean str.endsWith(searchString[, length]) 判断当前字符串是否是以另外一个给定的子字符串“结尾”
参数：searchString 要搜索的子字符串。
可选参数：length 作为 str 的长度。默认值为 str.length
返回值：如果传入的子字符串在搜索字符串的末尾则返回true；否则将返回 false。

- repeat(count)   构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本

String str.repeat(count) 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
参数：count 介于0和正无穷大之间的整数。表示在新构造的字符串中重复了多少遍原字符串
返回值：生成的新字符串

- 模版字符串   （可换行，无报错）

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。
·· ==> 反引号 将内容圈起来，再用插值表达式${ }把值替换
${ } ===> 插值表达式

手册地址：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

startsWith(searchString) 判断当前字符串是否以另外一个给定的子字符串开头
endsWith(searchString) 判断当前字符串是否是以另外一个给定的子字符串“结尾”

<script>
let str = "123456789";
console.log(str.startsWith("56",4));//true
console.log(str.endsWith("67",7));//true
</script>   

repeat(count) 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本

<script>
let str = "123";
console.log(str.repeat(10000000));//输出10000000个123
console.log(str.repeat(3))//123123123
</script>

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”

<script>
let name = "LEO";
let age = 40;
let gender = "男";
//let str = '姓名：' + name + '，年龄：' + age + '岁，性别：+ gender';
let str = `姓名：${name}，
年龄：${age}岁，
性别：${gender}`;
console.log(str);
</script>

<script>
let name = "LEO";
let age = 40;
let gender = function(){
    return "男"
};
let str = `姓名：${[1,2,3,4]}，
年龄：${age>20?"**":age}岁，
性别：${gender()}`;
// 插值表达式
console.log(str);
</script>

十一、新增对象
- 属性简洁表示法
- 属性名表达式
- 方法简写

- 对象合并===》
- Object.assign(target, ...sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象

Object Object.assign(target, …sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象
参数: target 目标对象, sources 源对象
返回值： 目标对象

比较===》
- Object.is(value1, value2) 判断两个值是否是相同的值

Boolean Object.is(value1, value2) 判断两个值是否是相同的值。
规则：
两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
— 都是正零 +0
— 都是负零 -0
— 都是 NaN

手册地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

属性简洁表示法 { a, b }

<script>
let a = 0;
let b = 1;
let obj = {
    a, // a: a
    b, // b: b
    c(){//方法简写
        console.log(123);
    }
};
obj.c();//123
</script>   

属性名表达式 [ n ]

<script>
let n = "name" ;
let obj = {
    [n]: "leo"
};
console.log(obj);//{"name":"leo"}
 
</script>

对象合并 ①用展开运算符（推荐使用）②用 Object.assign()

<script>
let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    c: 3,
    d: 4
};
// let obj2  = {
//	...obj,
//	c: 3,
//	d:4
//}
// console.log(obj2);
let f = null;
// let obj3 = Object.assign(obj2 ,obj);//将obj放入obj2中
// let obj3 = Object.assign({},obj,obj2);//将obj，和obj2 放入空对象中
let obj3 = Object.assign({},obj,obj2,{f});//将obj，和obj2 放入空对象中
console.log(obj,obj2,obj3);// { a: 1, b: 2 }  { c: 3, d:4  } { a: 1, b: 2, c: 3, d:4 } 
</script> 

比较 ①Object.is() ②=== 三等

<script>
let nub = NaN;
let str = NaN;
console.log(Object.is(nub,str));//true

console.log( 0 === 0);//true
console.log( +0 === -0);//true
console.log(Object.is(+0,-0));//false

console.log(Object.is(NaN,NaN));//true
console.log( NaN === NaN);//false
</script> 

十二、babel使用 （帮助我们兼容es6的一些语法）babel做代码编译
- Babel 是一个 JavaScript 编译器
- Babel 基本是否方法
- 注意： 引入type
- 需要测试，因为有些较新的东西babel也不一定能识别编译成功，当然80%是有经过处理的

兼容性可以不用过多考虑，可以用babel

手册地址：

https://www.babeljs.cn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="babel.min.js"></script>
</head>
<body>
<script type="text/babel">
let name = "LEO";
let age = 40;
let gender = "男";
let str = `姓名：${name}，
年龄：${age}岁，
性别：${gender}`;
console.log(str);
let arr = [1,2,3];
let val = arr.find((item)=>{
    return item > 1
});
console.log(val);
</script>    
</body>
</html>