ES6学习笔记

最新推荐文章于 2024-10-05 17:11:00 发布

有梦想的笨笨

最新推荐文章于 2024-10-05 17:11:00 发布

阅读量80

点赞数

文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/2201_75474092/article/details/128302507

版权

一、

1、let和const

相同点：无变量提升、是块级作用域、不能重复声明

不同点：cosnt一旦被声明无法修改

作用：解决for循环中变量提升的问题、不会污染全局变量

    <script>
        const arr  = [];
        for (let i = 0; i <  10; i++) {
            arr[i] = function(){
                return(i);
            }
        }
        console.log(arr[4]());
    </script>

：默认情况下使用const，在已知需要修改的情况用let

2.模板字符串

模板字符串：使用tab键上面的反引号``，插入变量时使用${变量名}

    <div id="box">

    </div>
    <script>
      const Box = document.querySelector('#box')
      let id = 1;
      let name  = 'lisa';
      let html = `<ul>
            <li>
                <p id=${id}>${name}</p>
            </li>
        </ul>`;
      Box.innerHTML = html;
    </script>

3.强大的函数

1.带参数默认值的函数

function arr(a, b=20){
    return a + b;
}
console(arr(30));

2.默认表达式也可以是一个函数

      <script>
        function add(a, b  = getVal(5)){
          return a + b;

        }
        function getVal(val){
          return val + 5;
        }

        console.log(add(10));
      </script>

3.剩余参数：由三个点···和一个紧跟着的具名参数指定···keys

//把多个独立的参数合并到一个数组中

//局限性：放在形参中必须放在后面

        <script>
            function pick(obj,...keys) {
                let val = Object.create(null);
                for (let i = 0;  i < keys.length; i++) {
                    val[keys[i]] = obj[[keys[i]]]

                }
                return val;
            }
            let book =  {
                name:'susu',
                year:'2002'
            }
            let getBox = pick(book,'name','year');
            console.log(getBox);
          </script>

4.扩展运算符 ...//将一个数组分割，，并将各个项作为分离的参数

4.1处理数据中最大值

const arr = [10,13,25,45,657,34,56];
console.log(Math.max(...arr));

5.箭头函数：使用=>来定义 function（）{}等于（）=>{}

返回对象：（）=>（{}）

let getObj = id => ({id:id,name:'lisa'});
let obj = getObj(1);
console.log(obj);

//箭头函数无this指向，箭头函数内部this值只能通过查找作用域链来确定，一旦是用箭头函数，当前就不存在作用域

注：1.是用箭头函数函数内部无arguments

2.箭头函数不能使用new关键字来实例化对象

//function函数也是一个对象，箭头函数不是一个对象，可以认为他是一个表达式

let Person  () => {

}
let p = new Person();//报错

4.解构赋值

//解构赋值是对赋值运算符的一种操作

//针对数组和对象进行操作

对对象进行解构

    let soo = {
      name:'lisa',
      age:18
    }
    //完全解构
    let {name,age} =  soo;
    console.log(name,age);
    let  obj = {
      a:{
        name:'lili'
      },
      b:[],
      c:'nihao'
    }
    //不完全解构
    let {a} = obj;//必须是当前对象中的属性名
    console.log(a);

对数组进行解构

    let arr = [1,2,3];
    let [a,b,c] = arr;
    console.log(a,b,c);
    //可嵌套
    let arr1 = [1,[2],3];
    let [d,[e],f] = arr1;
    console.log(d,[e],f);//可忽略

5.扩展的对象功能

const name = 'lisa',
                age = 18;
            const person = {
                name,//简化name：name
                age,//简化age：age
                sayName(){
                    console.log(this.name)
                }
            }
            person.sayName();

            function fn(x,y){
                return{x,y}//简化了对象 {x：x，y：y}
            }
            console.log(fn(10,22));

            let man = {
                money:100,
                set(one){
                    if(one < this.money) {
                        throw new Error('存款太少了 ')//抛出异常
                    }
                    this.money = one
                },
                get(){
                  return this.money
                }
            }
            man.set(200);
            console.log(man.get());

5.1组合：

用表达式的方式进行组合

//用表达式的方式进行组合
            const obj  =  {};
            obj.isShow  = true;
            const name = 'a';
            obj[name+'bc']=123;
            console.log(obj);

方法同样可以组合

//用方法的方式进行组合
            const obj  =  {};
            obj.isShow  = true;
            const name = 'a';
            obj[name+'bc']=123;

             obj['f'+name] = function (){
                 console.log(this)
             }
            console.log(obj);

5.2对象的方法

is()等价于===比较两个值是否完全相等

   console.log(NaN==NaN);//结果是false
   console.log(Object.is(NaN,NaN));//结果是true

assign(）//对象的合并 Object.assign(target,obj1,obj2...)

let assign = Object.assign({a: 1}, {b: 2});
            console.log(assign);//返回合并后的对象

6.Symbol

//原数据类型 Symbol，他表示的是独一无二的值、、最大用途：用来定义对象的私有变量

console.log(Object.is(name, name1));//true、内存地址相同
      let symbol = Symbol('name');
      let symbol1 = Symbol('name');
      console.log(Object.is(symbol, symbol1));//false

//如果用Symbol定义的对象中的变量，取值时一定要用【变量名】、Symbol定义的对象无法遍历

let i = Symbol('qw');
      console.log(i);
      let obj = {};
      obj[i] = 'lili';//不可遍历
      console.log(obj);
      console.log(obj[i]);//输出 lili

7.Map和Set

Set()：集合：表示无重复值的有序列表

添加元素add（）、删除元素delete（）、校验某个值是否在set集合里面has（）、集合长度（size）

let set = new Set();
        console.log(set);
        //添加元素
        set.add(2);
        set.add('4');
        set.add('4');//被忽视，不被打印
        set.add([1,2,3]);
        //删除元素
        set.delete(2);
        //校验'4'是否在set集合里
        console.log(set.has('4'));
        console.log(set);

将set集合转换为数组

        let s = new Set([1, 2, 3, 4, 5]);
        //将set转换为数组
        console.log(s);
        //扩展运算符
        let w = [...s];
        console.log(w);

扩展：WeakSet：

1.只能传入对象参数

2.不可迭代

3.没有forEach()

4.没有size属性

Map类型是键值对的有序列表，Map的键和值可以是任意类型

添加元素 set（），删除元素delete（），校验has（），取值get（）

let map =  new Map;
        console.log(map);
        // map.set()添加数据
        map.set('1','1');
        map.set('ad','22');
        console.log(map);
        //map.get()取值
        console.log(map.get('ad'));
        let i = {
            name:'lisa',
            age:18
        }
        console.log(map.set('a',i));

8.数组的扩展功能

8.1、from：将伪数组转换成真正的数组

  //from（）、of（）
  //from():将伪数组转换成真正的数组
    function add() {
      let arr = Array.from(arguments);
      console.log(arr);
    }
    add(1, 2, 3);

let i = document.querySelectorAll('li');
    //用from（）将其转换为数组
    console.log(Array.from(i));
    //用扩展运算符将其转换为数组
    console.log([...i]);

from（）还可以接受第二个参数，用来对每个元素进行处理

let iContent = Array.from(i, ele => ele.textContent);
    console.log(iContent);//打印结果：['1', '3', '2', '4']

8.2、of()将一组值转换成数组

//of()将一组值转换为数组
    console.log(Array.of(1, 2, 3, 4, 'ad'));

8.3、copywithin()复制

//copyWithin()将数组 内部指定的元素赋值到其他位置，返回当前数组
    console.log([1, 2, 3, 4, 5, 6].copyWithin(0, 3));

8.4、find()找出第一个符合条件的数组成员
findIndex()找出第一个符合条件的数组成员的索引

    //find()找出第一个符合条件的数组成员
    //findIndex()找出第一个符合条件的数组成员的索引
    let c = [1,2,3,4,5,0].find(i => i>3);
    let d = [1,2,3,4,5,0].findIndex(i => i>3);
    console.log(c);//打印结果是4
    console.log(d);//打印结果是3

8.5.entries()、keys()、values()//取值返回一个遍历器可以使用for...of循环进行遍历

keys()对键名遍历

    for (let index of [1, 2, 3, 4].keys()) {
        console.log(index);//遍历索引
    }

values()对值遍历

    for (let ele of [1, 2, 3, 4].values()) {
        console.log(ele);//遍历值
    }

entries()对键值对遍历

for (let [index,ele] of [1, 2, 3, 4].entries()) {
        console.log(index,ele);//遍历键值对
    }

有梦想的笨笨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫