JavaScript

es 6 基础巩固

ECMAScript 发展历史

1、let

let 允许声明一个在作用域限制在块级中的变量、语句或者表达式。

// var a = 1;
// 全局作用域 函数作用域
{
    let a = 1;
    var b = 1;
    console.log(a);  //作用域中使用
}
console.log(a);//找不到

2、块级作用域 if

let b;   
if(true){
    let a = 1;
    b = 2;
    console.log(a);
}
console.log(b);
console.log(a);

3、块级作用域-for

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

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

4、let和var的区别

// console.log(a);
// var a = 1;

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


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

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

5、常量const

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

6、解构赋值 let [a , b]= res;

let obj = {
    a: 1,
    b: 2,
    c: 3
};
// 交互对象的 a,c两个属性
// let a = obj.a;
// let c = obj.c;
// obj.a = c;
// obj.c = a;

// 对象的解构赋值
let {a,c} = obj;
console.log(a,c);
// let {a} = obj   ==> let a = obj.a;
let {d} = obj;
console.log(d);

// let arr = [1,2,3];
// let [a,b,c] = arr;
// console.log(a,b,c);
/*
    对象解构：变量名 和 属性名 要对应
    数组解构：变量名 和 值索引对应
*/
let a = 0;
let b = 1;
let arr = [a,b];
[b,a] = arr;
console.log(a,b);

let str = "ABCD";
let [a,b] = str;
console.log(a,b);

7、展开运算符 …

// 展开运算符
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);

// 剩余参数
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a,b);

// 展开运算符
let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    ...obj,
    c: 3,
    d: 4
};
console.log(obj2);
// 剩余参数
let {a,...d} = obj2;
console.log(a,d);

8、set 的使用

let arr = [1,2,3,4,1,3,5,2];
let data = new Set(arr);
console.log(data);
//去重
console.log([...data]);

let arr = [1,2,3,4,1,3,5,2,"c"];
let data = new Set(arr);
//console.log(data.add("a").add("b"));
// console.log(data.delete("b"));
//console.log(data.has(2));
data.clear();
console.log(data.size,data);
/*
    size 数据长度

    Set.add() 添加子项  返回 set 数据本身
    Set.delete() 删除子项 返回 true | false 
    Set.has() 是否包含子项

*/

9、map 的使用

let data = new Map([["leo",40],["zmouse",30],["reci",20]]);
data.set("刘伟",41);
data.delete("leo");
console.log(data.get("zmouse"));
console.log(data);
/*
    size 数据长度

    data.set() 添加子项  返回 set 数据本身
    Set.delete() 删除子项 返回 true | false 
    Set.has() 是否包含子项

*/

10、箭头函数的使用

let fn = ()=>{
    console.log(1);
};
fn();

// let fn = (nub1,nub2)=>nub1*nub2;

// console.log(fn(2,3));


/*
    参数 => 返回值
    (参数1,参数2) => 返回值 
    () => {
        执行语句
        return
    }
*/

let fn = (a,...arg)=>{
    //console.log(arguments);
    console.log(a,arg);
};

fn(1,2,3,4);

// 箭头函数本身没有不定参
// rest 参数 剩余参数

document.onclick = function(){
    let fn = (a,...arg)=>{
        console.log(this);
    };
    fn();
};
// 箭头 this 指向，箭头函数定义时所在的作用域的this

11、函数参数默认值

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

12、数组新增方法 from

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

(function(){
    // let list = document.getElementById("list");
    // let lists = list.getElementsByTagName("li");
    // //lists = [...lists];
    // 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);
})();

13、isArray

<!-- Boolean Array.isArray(data) 检测数据是否是个数组
参数：
    data 要检测的数据
返回值:
    true 数组，false 非数组 -->
    
<!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>
</head>
<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.querySelectorAll("li");
    let arr = [];
    console.log(Array.isArray(lists));
    
})();
</script>
</body>
</html>

14、of方法

<!-- Array Array.of(element0[, element1[, ...[, elementN]]]) 将参数转成一个数组

参数：
    elementN 要放入数组中的数据

返回值：   
    新数组 -->
    
<!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>
</head>
<body>
<ul id="list">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>    
<script>
(function(){
    let arr = Array.of(1,2,3,4,5,5,6);
    console.log(arr);
    let arr2 = [].of(12,23);
    
})();
</script>
</body>
</html>

15、find方法

<!-- Value arr.find(callback[, thisArg]) 查找数组中满足要求的第一个元素的值

参数：
    callback
        在数组每一项上执行的函数，接收 3 个参数：
            element
                当前遍历到的元素。
            index[可选]
                当前遍历到的索引。
            array[可选]
                数组本身

可选参数               
    thisArg
        执行回调时用作this 的对象
返回值
    数组中第一个满足所提供测试函数的元素的值，否则返回 undefined -->
    
 let arr = [1,2,5,6];
 let val = arr.find((item)=>{
     return item >= 5;
 });
 console.log(val);


<--
Index arr.findIndex(callback[, thisArg]) 查找数组中满足要求的第一个元素的值的索引
参数:
    callback
        针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
        element
            当前元素。
        index
            当前元素的索引。
        array
            调用findIndex的数组。
可选参数：            
    thisArg
        执行callback时作为this对象的值
返回值：
    满足要求的值的索引-->
    
let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
    return item >= 5;
});
console.log(index);

16、数组扁平化

//Array arr.flat([depth]) 扁平化多维数组
//可选参数：
  //  depth
   //     指定要提取嵌套数组的结构深度，默认值为 1。
//返回值：
    //一个包含将数组与子数组中所有元素的新数组
    
let arr = [
    [1,2],
    [3,4],
    [
        [6,7],
        [
            [8],
            [9,10]
        ]
    ]
];
console.log(arr.flat(Infinity));

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

参数：
    callback
        可以生成一个新数组中的元素的函数，可以传入三个参数：
        currentValue
            当前正在数组中处理的元素
        index可选
            可选的。数组中正在处理的当前元素的索引。
        array可选
            可选的。被调用的 map 数组
可选参数：
    thisArg
        执行 callback 函数时 使用的this 值
返回值：
    一个包含将数组与子数组中所有元素的新数组**/
let arr = [
    [1,2],
    [3,4],
    [6,8]
];
let arr2 = arr.flatMap(item=>{
    item = item.filter(item=>item>=2);
    return item;
});
console.log(arr2);

17、includes方法

/**Boolean arr.includes(valueToFind[, fromIndex]) 判断数组中是否包含一个指定的值
参数：
    valueToFind 需要查找的值
可选参数：
    从 fromIndex 处开始向后查找  
返回值：
    true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex
    **/
let arr = ["a","b","c","d"];
console.log(arr.includes("a",-3));

18、fill

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

let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr);

19、startsWith和endsWith

/**Boolean str.endsWith(searchString[, length]) 判断当前字符串是否是以另外一个给定的子字符串“结尾”

参数
    searchString
        要搜索的子字符串。
可选参数
    length
        作为 str 的长度。默认值为 str.length
返回值
    如果传入的子字符串在搜索字符串的末尾则返回true；否则将返回 false。**/
    
    /**
    Boolean str.startsWith(searchString[, position]) 判断当前字符串是否以另外一个给定的子字符串开头
参数
    searchString
        要搜索的子字符串。
可选参数
    position
        在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
返回值
    如果传入的子字符串在搜索字符串的开始则返回true；否则将返回 false。**/
let str = "123456789";
console.log(str.startsWith("56",4));//
console.log(str.endsWith("67",7));

20、repeat

let str = "123";
console.log(str.repeat(10000000));

21、模板字符串

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

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

• 插值

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

22、对象新增内容

let a = 0;
let b = 1;
let obj = {
    a,// a: a
    b, // b: b
    c(){
        console.log(123);
    }
};
obj.c();
//console.log();

23、对象合并

//参数:
   // target
     //   目标对象
   // sources
     //   源对象
//返回值：
  //  目标对象
//Object Object.assign(target, ...sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象
let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    c: 3,
    d: 4
};
let f = null;
let obj3 = Object.assign({},obj,obj2,{f});
console.log(obj,obj2,obj3);

24、比较

let nub = NaN;
let str = NaN;
console.log(Object.is(nub,str));

25、属性名表达式

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

26、babel是一个 JavaScript 编译器

<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>    

回见