zoukankan      html  css  js  c++  java
  • 一些 ES6的扩展

    一些 ES6的扩展

    es6部分

    let,const

    1.var 定义的变量:全局变量和局部变量(函数)

    function fn(){
    	var num = 10;
    	alert(num)
    }
    fn();
    alert(num); //num is not define
    
    for(var i=1;i<=10;i++){ //i是全局的
    	
    }
    alert(i); //11
    
    	es6中新增了let命令,用来声明变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内{}有效
    

    ​ 即let所声明的变量就“绑定”这个区域,不再受外部的影响

    ​ es6中还新增了const命令,它用来声明常量,一般被const声明的变量不可改变

    var 和let的区别:

    ​ 1.let声明的不存在变量提升

    ​ 2.let不允许在相同作用域内,重复声明同一个变量

    ​ 3.ES6中允许块级作用域的任意嵌套,外层无法读取内层作用域的变量,反之可以

    案例:

    {
    	alert(a); //a is not define
    	let b = 10;
    	{
    		let a = 10;
    		alert(b);	//10
    	}
    }
    

    解构赋值

    变量的结构赋值 -- 快速的给变量赋值

    1.解构赋值:数组,对象,字符串

    let arr = [1,2,3,4,5];
    
    //一般我们赋值
    //let a = arr[0];
    //let b =arr[1]
    
    //解构赋值 赋值
    let [a,b,c,d,e] = arr // a = 1 ,b =2 ....
    
    

    对象解构赋值

    对象解构赋值,变量名和属性名保持一致,如果修改的话,得到的值是后者

    let {name:xingming,age:nianling} = {name:'zhangsan',age:100};
    console.log(xingming,nianling); //zhangsan,100
    

    扩展运算符

    扩张运算符用三个点表示(...),功能是把数组或类数组对象展开成一系列用逗号隔开的值

    let arr=[1,2,3,4,5];
    console.log(arr);
    console.log(...arr); //1 2 3 4 5  用console.log输出看不到‘,’号
    
    let arr=[1,6,7,3,5,6,8,9,0];
    console.log(Math.max(...arr)) //9
    
    相当于 console.log(Math.max(1,6,7,3,5,6,8,9,0)) //这里证明是用‘,’隔开
    

    扩展运算符还可以用于数组的合并

    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    let arr3 = [7,8,9];
    
    console.log([...arr1,...arr2,...arr3]) //[1,2,3,4,5,6,7,8,9]
    

    扩展运算符还可以用于引用传递浅拷贝

    let arr1 = [1,2,3];
    let arr2 = arr1;
    arr2.push(4);
    console.log(arr1); 	//[1,2,3]
    console.log(arr2);	//[1,2,3,4]
    
    
    //对象浅拷贝
    //obj1复制给obj2
    const obj1 = {a: 1};
    const obj2 = {...obj1};
    

    字符串的扩展 --模板字符串

    //1.模板字符串
    let obj={
    	name:'zxh',
    	age:20,
    	sex:'男'
    }
    
    document.body.innerHTML = '我的姓名是'+obj.name+',我今年'+.....等很麻烦
    document.body.innerHTML = `我的姓名是${obj.name},我今年${obj.age}`  结果一样
    

    字符串的扩展 --字符串新加的方法

    // repeat(n)方法返回一个新字符串,表示将原字符串重复n次
    let str = 'hello';
    console.log(str.repeat(10)); //输出10次hello
    
    //includes():返回布尔值,表示是否找到了参数字符串
    let str = 'javascript';
    console.log(str.includes('ava'))  //返回true
    
    //startsWith():放回布尔值,表示参数字符串是否在源字符串头部
    let str = 'javascript';
    console.log(str.startsWith('java')) //true
    
    //endsWith():放回布尔值,表示参数字符串是否在源字符串尾部
    let str = 'javascript';
    console.log(str.endsWith('java')) //false
    console.log(str.endsWith('t')) //true
    console.log(str.endsWith('pt')) //true
    

    函数

    1.函数的默认参数

    2.箭头函数

    <script>
    	const sum = function(n1,n2){
    		return n1+n2;
    	}
    	console.log(sum()) //NaN
    	console.log(sum(1,2)) //3
    </script>
    
    
    //函数参数默认值
    
    //在以前这样设置
    const sum = function(){
    	n1 = n1 || 10;
    	n2 = n2 || 20;
    	return n1+n2
    }
    
    //现在
    const sum = function(n1=10,n2=10){
    	return n1+n2
    }
    

    2.箭头函数

    特点:简洁

    const sum = function(a,b){
    	return a+b
    }
    
    //用箭头函数表示
    const sum1 = (a,b) => n1 + n2
    

    重要:箭头函数里面的this是定义的时候确定的,this一旦确定无法改变

    总结:1.箭头函数最吸引最吸引人的地方是简洁。同时函数体内this对象,就是定义时所在的 对象,而不是使用时所在的对象,this不会改变了

    ​ 2.不可以当做构造函数,也就是说不可以使用new命令,否则会抛出一个错误

    ​ 3.不可以使用arguments对象,该对象在函数体内不存在

    ​ 4.箭头函数一定是匿名函数

    ​ 5.箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如map,reduce, filter的回调函数(函数当作参数)定义中;

    ​ 6.不要在最外层定义箭头函数,因为在函数内部操作this会容易污染全局作用域。最起 码在箭头函数外部包一层普通函数,将this控制在可见的范围内

    数组和对象的扩展

    1.数组的扩展

    ​ 1.Array.from()方法用于将对象转为真正的数组(类数组转数组)

    let obj={
    	0:'zhangsan',
    	1:'lisi',
    	2:'wangwu',
    	length:3
    }
    //需要固定的对象格式才可以使用Array.from()方法转成数组,否则无效
    console.log(Array.from(obj))	//['zhangsan','kisi','wangwu']
    

    ​ 2.Array.of()方法用于将一组值,转换为数组

    console.log(Array.of('zhangsan','lisi','wangwu')) //['zhangsan','lisi','wangwu']
    

    ​ 3.fill()方法使用给定值,填充一个数组

    var a = [1,2,3,4,5]
    console.log(a.fill('hello')) //['hello','hello','hello','hello','hello']
    
    console.log(a.fill('hello',2,3)) //[1,2,'hello',4,5]
    

    2.对象的扩展

    对象的简介表示

    var num = 100
    var obj = {
    	num:100,
    	shownum:function(){
    		return this.num;
    }
    }
    
    //当属性和属性名重名的时候可以省略	//方法可以省略function
    var obj = {
    	num,
    	shownum(){
    		return this.num;
    }
    }
    
  • 相关阅读:
    RMQ(模板 ST 区间最值,频繁的间隔时间)
    编程算法基地-2.1利用字符串API
    android学习记录(三)百度地图错误---只有一个电话显示帧,没有地图内容。
    【MongoDB】在windows平台mongodb切片集群(三)
    Android MenuItem 设置文本颜色-TextColor设置
    wikioi 1034 家 实时动态的网络流量(费用流)
    where can I find source of com.android.internal.R.styleable.AlertDialog_multiChoiceItemLayout?
    Android开发之自定义Spinner样式的效果实现(源代码实现)
    Java注释@interface的用法
    依赖注入及AOP简述(十三)——AOP应用举例(完结) .
  • 原文地址:https://www.cnblogs.com/xiaohanga/p/11101701.html
Copyright © 2011-2022 走看看