基础知识常被8:ES6中的相关语法(持续更新中)(超级详细,一笔一笔亲自打印上去的)


在2019年的8月的最后一天,有必要写点总结的东西,所以今天就来讲讲ES6中的那点事儿。

let,const,var的对比:

let

1.使用let声明得变量不能再次声明
   let a = 5;
   let a = 6;
   console.log(a); 
   错误提示:Uncaught SyntaxError: Identifier 'a' has already been declared
2.具有块级作用域
 {
   let a = 5;
   console.log(a);
 }
   console.log(a); //a is not defined
3.let没有变量提升,必须要先定义在使用
   console.log(a);  //undefined
   var a = 5;

   console.log(a); //Cannot access 'a' before initialization
   let a = 5;
4.let的声明不会像var声明一样作用到window中
   var abc = function(x, y) {
      return x + y;
   }
   console.log(abc(1,2));
   console.log(window) // 在这里window中已经存在abc的属性了,作用到了abc中


	let abc = function(x, y) {
      return x + y;
    }
    console.log(abc(1,2));
    console.log(window) // 因为是let定义的函数,所以在window的属性中就看不见abc的这个方法了

const

1.const 定义常量必须给初始值
	const a;
    console.log(a);//Missing initializer in const declaration
2.const 一但定义了就不能修改了
    const a = 5;
    const a = 10;
    console.log(a);Uncaught SyntaxError: Identifier 'a' has already been declared
3.具有块级作用域(同let)
4.常量是独立的,和window对象没有关系(同let)
5.常量必须先定义再使用,没有提升(同let)

数组的解构:

1.模式=数组
模式=数组
        let [a,b,c] = ['测试1','测试2','测试3'];
        console.log(a); //测试1
        console.log(b);	//测试2
        console.log(c); //测试3
2.变量多,值少
变量多,值少
        let [a,b] =  ['测试1','测试2','测试3'];
        console.log(a); //测试1
        console.log(b); //测试2
3.变量少,值多
变量少,值多
        let [a,b,c] = ['测试1','测试2']
        console.log(a);//测试1
        console.log(b);//测试2
        console.log(c);undefined
4.按需取值
 按需取值
        let [a, , b] = ['测试1', '测试2', '测试3']
        console.log(a);//测试1
        console.log(b);//测试3
5. 剩余值
 剩余值
        let [a,b,...c] = ['测试1', '测试2', '测试3','测试4']
        console.log(a);//测试1
        console.log(b);//测试2
        console.log(c);//["测试3", "测试4"]
6. 复杂情况
  复杂情况
        let[,,[a,b],c] = ['aa','bb',['cc','dd'],'ee']
        console.log(a)//cc
        console.log(b)//dd
        console.log(c)//ee

对象的解构:

1. 基本的解构
 基本的解构
		let {id,name,age} = {id:1,name:"张三",age:18};
        console.log(id)//1
        console.log(name)//张三
        console.log(age)//18
2. 按需取值
 按需取值
		let {id,name} = {id:1,name:"张三",age:18};
        console.log(id)//1
        console.log(name)//张三
3.剩余值
 剩余值
		let {id,...c} = {id:1,name:"张三",age:18};
        console.log(id) //1
        console.log(c)// object{
        					age:18,
        					name:"张三"}
4. 有冲突,可以为变量定义其他名字
 有冲突,可以为变量定义其他名字
		let id = 5;
        let {id} = {id:1,name:"张三 ",age:18};//Identifier 'id' has already been declared
        let {id:nameId} = {id:1,name:"张三 ",age:18};//Identifier 'id' has already been declared
        console.log(nameId);//张三
5. 复杂的情况
 复杂的情况
		 let {code, data} = {
            code: 200, 
            msg: '成功', 
            data: [
                {id:1, title: 'aaa'}, 
                {id:2, title: 'aaa'}, 
                {id:3, title: 'aaa'}
            ]
        };
        console.log(code);
        console.log(data);

箭头函数

样式:
let fn = () =>{
			  }
()小括号内放入参数,{}大括号内放入函数体
特点:
  • 如果箭头函数参数只有一个,则小括号可以省略
  • 如果箭头函数的函数体只有一行代码,则大括号可以省略,并且默认表示返回函数体的值(自带return效果)
  • 箭头函数的内部没有arguments对象
    • 没有argument对象那怎么遍历呢?
    • let abc = (…z) =>{
      console.log(z);
      }
      abc(1,2,3,4,5,6);
  • 箭头函数不能当作构造函数
  • 箭头函数的内部没有自己的this,箭头函数的this指向外部作用域的this

函数参数的默认值

(如果某个参数有默认值,则需要把该参数放到参数列表后面)

function abc (x,y=3){
	console.log(x+y);
}

内置对象的扩展:

Array

1.拼接
拼接
        let arr1 = [1,2,3,4];
        let arr2 = [4,5,6,7];
        let arr3 = [...arr1,...arr2];
        console.log(...arr3);  //1,2,3,4,4,5,6,7
2.将为数组转换成数组
将为数组转换成数组
        let weishuzu = {
            0:"张三",
            1:"李四",
            2:"王五",
            length:3
        }
        let arr = Array.from(weishuzu);
        console.log(...arr)//张三,李四,王五
3.forEach遍历
forEach 遍历
        ES5
        [1,2,3,4,5,6,7,8,9].forEach(function(item){
            console.log(item)
        });
        ES6
        [1,2,3,4,5,6,7,8,9].forEach(item=>console.log(item));
4.find(值)和findIndex(索引)
find()和findIndex(索引)
        let result = [1,2,3,4,5,6,7,8,9].find(function(item,index,arr){
            return item>5;
        });
        console.log(result);
        let result = [1,2,3,4,5,6,7,8,9].findIndex(function(item,index,arr){
            return item>5;
        });
        console.log(result);

5.includes(‘查找的值’,[开始的位置])
includes
		let arr = [1,2,3,4,5,6,7,8,9];
        console.log(arr.includes(4,2));//true
        console.log(arr.includes(4,9));//false
        console.log(arr.includes(10));//false
        console.log(arr.includes(1));//true

String

1.模板字符串
模板字符串
        let a ="你好";
        let b = {
            name:"张三",
            age:18,
        };
        let c = `${b.name}${a}今天是一个号好天气,我今年${b.age}岁`
        console.log(c);//张三你好今天是一个号好天气,我今年18岁
2.includes查找字符串中是否包含了某个字符串
includes查找字符串中是否包含了某个字符串
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.includes('A',0));//true  从索引为0的地方开始寻找A 返回boolean
        console.log(a.includes('A',1));//false
3.startWith() 查找字符串开头是否含有某个字符串
startWith() 查找字符串开头是否含有某个字符串
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.startsWith('A'));//true
        console.log(a.startsWith('B'));//false
4.endsWith() 查找字符串结尾是否含有某个字符串
endsWith() 查找字符串结尾是否含有某个字符串
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.endsWith('LMN'));//true
        console.log(a.endsWith('kMN'));//false
5.repeat() 重复一个字符串 参数为重复的次数
repeat() 重复一个字符串 参数为重复的次数
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.repeat(10));
6.trim() 去掉字符串两边的空白
trim()  去掉字符串两边的空白
        let a = '        ABCDEFGHIJKLMN      ';
        console.log(a.trim());

Number

		Number.parseInt()
        Number.parseFloat()
        console.log(Number.parseInt('123abc'));

数据结构Set、Map

set

Set
        //Set的特点就是该对象里面的成员不会有重复。
        // - `size`:属性,获取 `set` 中成员的个数,相当于数组中的 `length`
        // - `add(value)`:添加某个值,返回 Set 结构本身。
        // - `delete(value)`:删除某个值,返回一个布尔值,表示删除是否成功。
        // - `has(value)`:返回一个布尔值,表示该值是否为`Set`的成员。
        // - `clear()`:清除所有成员,没有返回值。

        let s = new Set();
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
        arr.forEach(function (item) {
            s.add(item) //set的add方法
        });
        console.log(...s); //去重  方式1
        console.log(Array.from(s)); // from是将伪数组变为数组; 去重 方式2
        console.log(s.size) //获取个数
        console.log(s.delete(9)); //删除数据返回boolean
        console.log(...s); //输出删除之后的set
        console.log(s.has(2)); //返回一个boolean,告知参数是否是set的成员
        s.clear(); //清空所有的成员,没有返回值
        console.log(s); //查看清空之后的set


 完成字符串去重
        let set = new Set('ababbc');
        let str = ([...set]).join('');
        console.log(str); // abc

遍历

			let arr = ['add', 'delete', 'clear', 'has'];
            let list = new Set(arr);
			********************1.***********************
            for (let key of list.keys()) {
                console.log('keys', key);
            }
            //  keys add
            //  keys delete
            //  keys clear
            //  keys has
            **********************************************
            ********************2.***********************
			for (let value of list.values()) {
                console.log('value', value);
            }
            //  value add
            //  value delete
            //  value clear
            //  value has
            **********************************************
            ********************3.***********************
			for (let [key, value] of list.entries()) {
                console.log('entries', key, value);
            }
            //  entries add add
            //  entries delete delete
            //  entries clear clear
            //  entries has has
            **********************************************
             ********************4.***********************
			list.forEach(function (item) {
                console.log(item);
            })
            //add  delete  clear  has
            **********************************************

weakset

  • 方法
    • WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员。
    • WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。
    • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中
  • 注意
    • WeakSet 没有size属性和forEach方法,没有办法遍历它的成员。
    • WeakSet的元素只能是对象, WeakSet中的对象是弱引用, 只是把地址拿过来, 没有clear属性, 不能遍历
  • 原因:
    • WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。
        let weakList = new WeakSet();
        let arg = {
            a: '1'
        };
        weakList.add(arg);
        weakList.add({
            b: '2'
        });
        console.log('weakList', weakList);
        //weakList WeakSet {Object {b: "2"}, Object {a: "1"}}

map

  • Map中的key可以是任意数据类型:字符串、数组、对象等 要注意集合Set添加元素用add(),而集合Map添加元素用set()
		*******************************1.***************************
		let map = new Map();
        let arr = ['123'];
        map.set(arr, 456);
        console.log('map', map, map.get(arr));
        ************************************************************
        *******************************2.***************************
        let map = new Map([
            ['a', 123],
            ['b', 456]
        ]);
        console.log('map args', map);
        //map args Map {"a" => 123, "b" => 456}

        //size delete clear方法 与 遍历同set一样
        console.log('size', map.size); //size 2
        console.log('delete', map.delete('a'), map); //delete true Map {"b" => 456}
        map.clear();
        console.log('clear', map); //clear Map {}
        ************************************************************

weakmap

  • 方法:
    • 1.没有遍历方法clear()、keys()、values()、entries()、size属性

    • 2.只有get()、set()、has()、delete()

  • 注意:
    • 同WeakSet一样接收的key值必须是对象, 没有size属性, clear方法, 也是不能遍历
        let weakmap = new WeakMap();
        let o = {};
        weakmap.set(o, 123);
        console.log(weakmap.get(o)); //123

定义对象的简洁方式

		let id = 1;
		let name = 'zs';
		let age = 20;
		
		// 之前定义对象的方案
		// let obj = {
		//     // 属性: 值
		//     id: id,
		//     name: name,
		//     age: age,
		//     fn: function () {
		//         console.log(this.age);
		//     }
		// };
		
		// obj.fn();
		
		// ES6的新方案
		let obj = {
		    id,  // 属性名id和前面的变量id名字相同,则可以省略 :id
		    name,
		    nianling: age,
		    // 下面的函数是上面函数的简化写法,可以省略 :function  。但是注意这里仅仅是上面函数的简化,不是箭头函数
		    fn () {
		        console.log(this.name);
		    }
		};
		obj.fn();

好了,今日就更新到这里,有时间我会持续更新ES6的最新语法的,欢迎大家前来评论!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值