kkb35_预习ES6基础

小久
103 阅读9分钟

  • ECMAScript6 是ECMAScript新增的最新的一个标准

    • JavaScript三大组成部分
      • ECMAScript
        • js中数据类型及相关操作，流程控制，运算符及相关运算
      • DOM 是对文档的操作类似于添加，删除元素的操作
      • BOM 是对浏览器的操作例如 历史浏览，滚动条位置等
    • 发展历史
      • 已经经历了很多版本

  • let和const

    • let和var的写法差不多

      • var可以重复声明 但是在同一作用域let不能重复声明 比较人性化，减少了开发中的错误
      • var ：全局作用域和函数作用域 let是全局作用域和块级作用域{}
      • var 可以预解析，但是let不能预解析

    • const 常量

      • 只能在声明的时候赋值
      • 块级作用域
      • 不会被预解析
      • 不能重复声明
      • 不能重复赋值

  • 解构赋值

    • 对象的解构赋值

    •     let obj ={
        a:1,
        b:2
    };
    
    let {a,b}= obj;
    console.log(a,b);
//一定要对应 名字也必须相同
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);

  • 快速交互a，b的值

    • let a=0;
let b=1;
let c;
c = a;
a = b;
b = c;

//有了ES6之后
[a,b] = [b,a];

  • 展开运算符

    • 对象展开

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

    • 数组展开

      • // 展开运算符
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 arr = [1,2,3,4,5];
let arr2 = [...arr];
console.log(arr2);//输出结果和arr一样 等于展开也等于复制

  • 构造函数 用来构建某一类型的对象 - 对象的实例化

  • set对象 数组去重构造函数

    • 也是一个构造函数 let s = new Set(arr) 参数可以是数组也可以是一个类数组
    • s.size 是数值的个数 就是length
    • s.clear(); 清空所有值
    • s.delete(val); 参数不是下标 是具体的值
      • 返回的是一个布尔值（没这个值才会出现删除不成功）
    • s.add(val); s.add(val).add(val).add(val); 可以链式的使用
      • 返回的是s对象本身
    • s.has(val); 查看是否含有某值
      • 返回一个布尔值 看是否包含这个值
    • 兼容性看手册

  • map 对象

    • let arr = [
    ['a',1],
    ['b',2],
    ['c',3]
];
let m = new Map(arr);
m.clear();//清空所有值
m.delete(key); //返回一个布尔值  删除某一项  key就是数据的key值 ('a')
m.get(key);//返回值是key对应的value
m.has(key)//获取某一项具体值 返回布尔值
m.set(key,val);//设置一个值  key是数据的key  val是数据的val  还可以用来修改原来的键值对

  • 箭头函数

    • 最基本的写法是 形参 => 返回值

      • let fn = nub => nub*2;

    • （形参，形参）=>返回值

      • let fn = (nub,nub2) => nub*nub2;

    • 没有参数 不能省略参数

      • ()=>返回值

    • 最经典的写法

      • (形参)=>{

        执行语句 一定要有返回值

        }

    • rest参数

      • 就是不定参 要是需要获取不定参需要...key 来作为形参获取

    • this问题

      • function函数如果不是被某个函数或者某个方法调用的 或者就只是它函数自调用，或者单纯的调用。他的this就指向window
      • 箭头函数本身没有this ，调用箭头函数this时，指向的是其声明时，所在的作用域的this。

    • 默认参数值

      • 在形参输入的时候直接在后面等于相应的值就可以

      • let fn = (nub=0,nub2=0)=>{
    console.log(nub+nub2);
}
fn();
let fn = (a,b)=>{
    a = a || 10;
    b = b || 2;
    console.log(a*b);
}
fn();

  • Array.from();

    • 将一个类数组转化成真正的数组（目的是可以使接下来的操作里使用数组操作）

      • 类数组：有下标，有length

    • 返回值就是转换之后的新数组 属Array构造函数下的函数

    • {
    let arr = [];
    let lis = document.querySelectorAll('#list li');
    lis = Array.from(lis,function(item,index){
        console.log(item,index,this);
    },arr);
    lis = [...lis];
    console.log(lis);
}

    • 如果要改变函数this指向的话 就不能用箭头函数，只能用function ，因为箭头函数的this指向是它声明时所在的块级作用域的this 在此案例中，this是window。

  • Array.isArray(data); 参数：是要检测的数据

    • 检测数据是否是个数组
    • 返回值 是个布尔值

  • Array.of(ele0[,ele1[,ele2]]);

    • 将参数转成一个数组
      • ele是要放入数组中的数据
      • 返回值：新数组

  • 数组方法

    • arr.indexOf('a'); 查询数组里面是否有指定的值

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

      • callback 在数组每一项上执行的函数，接收三个参数；
      • index [可选] 当前遍历到的索引
      • array[可选] 数组本身
      • 可选参数 thisArg 执行回调时用作this的对象
      • 返回值 数组中第一个满足所提供测试函数的元素的值，否则返回undefined
    • //let arr = ['a','b','c','d'];
let arr = [1,2,3,4];
let val = arr.find((item,index)=>{
	if(item>3){
		return true;
	}
});
let val = arr.find(item=>item>=3);
//输出val结果是4

    • arr.findIndex();

      • 使用方法和上面一样 不同的是 返回的是查找到的第一个在数组中满足要求的值的下标

    • arr.flat ([depth]);扁平化多维数组

      • 可选参数：指定要提取嵌套数组的结构深度，默认值为1；

      • 返回值：一个包含将数组与子数组中所有元素的新数组

      • 想将所有的数组取出，可以将Infinity传进去

      • let arr = [
    [1,2],
    [3,4],
    [
        [6,7],
        [
            [8],
            [9,10]
        ]
    ]
];
console.log(arr.flat(Infinity));

    • arr.flatMap 返回新数组的方法

      • 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组，他和map和深度值1的flat几乎相同，但是 flatMap 通常在合并成一种方法的效率稍微高一些

      • let arr = [
    [1,2],
    [3,4],
    [6,8]
];
let arr2 = arr.flatMap(item=>{
    item = item.filter(item=>item>=2);
    return item;
});
console.log(arr2);
    let arr2 = [
        ['小明', '18'],
        ['小刚', '18']
    ];
    let arr3 = arr2.flatMap((item) => {
        item = item.filter((item, index) => {
            return index == 0;
        });
        return item;
    });
arr3的输出结果只有名字

      • 参数

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

    • arr.includes Boolean arr.includes(valueToFind[, fromIndex])

      • 暂时不常用，经常用在二进制数据的
      • 判断数组中是否包含一个指定的值
        • 参数：valueYoFind 需要查找的值
        • 可选参数： 从fromIndex处开始向后查找
        • 返回值：true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex

    • Array arr.fill(value[, start[, end]]);

      • 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
      • 不改变原数组长度
      • 参数：用来填充数组元素的值
      • 可选参数：start 起始索引，默认值为0 end终止索引，默认值为arr.length 超过的时候按照length计算

  • 字符串方法

    • str.includes Boolean str.includes(valueToFind[, fromIndex])
      • 判断字符串是否包含一个指定的值
      • 和数组的includes详细方法相同
    • str.endsWith Boolean str.endsWith(searchString[, length]);
      • 判断当前字符串是否是以另外一个给定的字符串“结尾”。
      • 参数：
        • searchString 要搜索的字符串
        • 可选参数：length 作为str的长度，默认值为str.length
        • 返回值：如果传入的子字符串在搜索字符串的末尾则返回true；否则返回 false；
    • str.startsWith Boolean str.startsWith(searchString[, position])
      • 判断当前字符串是否以另外一个给定的字符串开头
      • 参数：
        • searchString 要搜索的子字符串
        • position 可选参数， 在str中搜索，searchString的开始位置，默认值为0，也就是真正的字符串开头处
        • 返回值：如果传入的字符串在搜索字符串的开始则返回true；否则返回false；
    • str.repeat String str.repeat(count)
      • 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
      • 参数
        • count 介于0 和正无穷大之间的整数，表示在新构造的字符串中重复了多少遍原字符串
        • 返回值：生成新的字符串

  • 模板字符串

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

    • 模板字符串的插值表达式：

      • ${}   //插值表达式  可以传入函数并且接收返回值

    • 区别

      • 内容可以允许换行
      • if是流程控制语句，不介意写进差值表达式中。 可以用三目表达式

  • 对象

    • 简洁表示写法

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

    • 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);

    • Boolean Object.is(value1, value2) 判断两个值是否是相同的值。

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

      • 规则：

        • 两个值都是 undefined

        • 两个值都是 null

        • 两个值都是 true 或者都是 false

        • 两个值是由相同个数的字符按照相同的顺序组成的字符串

      • 两个值指向同一个对象

      • 两个值都是数字并且

        • 都是正零 +0

        • 都是负零 -0

        • 都是 NaN

  • Babel

    • 是一个JavaScript编译器
    • 最基本的写法：
      • 在head引入Babel的js文件
      • 再从下面的script标签里加一个type属性
      • 最后就会在html页面中看见编译完的js代码
avatar
文章
阅读
粉丝