es6中一些基本的使用方法

const 定义常量

let 块级变量

用let定义的变量只在块当中起作用，离开变量外界的块（括号）就会被销毁。

模板字面量

用于字符串拼接和写模板,使用 ` (反引号，左上角波浪线)，变量使用${}

 1 var a="大帅比";2 var b="你呢";3 console.log( `my name is ${a},${b}?` );  //my name is 大帅比,你呢?4 5 var tpl=`<ul class="haha">  6     <li class="active">1</li>7     <li>2</li>8     <li>3</li>9     <li>4</li>
10     <li>5</li>
11 </ul>`  //不用加 \n来换行了

解构赋值

交换值

1 var a=1;
2 var b=2;
3 [a,b]=[b,a];
4 console.log(a,b);  // 2 1

从数组里获得元素

1 var array=[1,2,3,4];
2 var [a, ,b]=array;
3 console.log(a,b);  // 1 3

参数解构

1 var user={name:"李大白",age:"23",sex:"男"}
2 function getUser( {name,age} ){
3     return `我叫${name},今年${age}岁。`;
4 }
5 console.log( getUser(user) );  // 我叫李大白,今年23岁。

返回值的解构

1 function margin(){
2    var left=1,right=2,top=3,bottom=4;
3    return {left,right,top,bottom}
4 }
5 var {left,bottom}=margin();
6 console.log(left,bottom);   // 1 4

深度匹配

1 function setting(){
2     return { display:{color:'red'},keyboard:{layout:'querty'} }
3 }
4
5 var { display:{color: dis_color },keyboard:{layout: key_layout } }=setting();
6 console.log(dis_color,key_layout); // red querty

类和继承

 1 class Animal{2     constructor(name){   //构造函数3         this.name=name;4     }5     speak(){   //方法6         console.log(this.name+" makes a noise");7     }8 }9 var animal=new Animal("dog");
10 animal.speak();  //dog makes a noise

如果在es5中，要这么写

 1 var Animal=(function(){2     function Myconstructor(name){3         this.name=name;4     }5     Myconstructor.prototype.speak=function(){6         console.log(this.name+" makes a noise");7     }8     return Myconstructor;9 })();
10
11 var animal=new Animal("dog");
12 animal.speak();   //dog makes a noise

继承

1 class Cat extends Animal{
2     speak(){
3         super.speak();
4     }
5 }
6 var cat=new Cat("短尾猫");
7 cat.speak();    //短尾猫 makes a noise

extends关键字代表继承，super关键字代表父类

箭头函数

箭头函数相当于匿名函数，并且简化了函数定义。()中放参数，没有参数就省略，箭头后面是函数体。

 1 var fun1=(x)=>x*x;2 var fun2=(x,y)=>{3     if(x>y){4         return true;5     }else{6         return false;7     }8 }9 var set=(name,age)=>( {name:name,age:age} )  //直接返回对象需要加小括号
10
11 fun1(4);  //16
12 fun2(7,1);  // true
13 set("李大白","1000");  // Object {name: "李大白", age: "1000"}

es5中this比较坑，当需要外层的this时有几种方法

用变量存储引用

1 var _this=this;
2 $(".btn").click(function(){
3     _this.sendData();
4 });

直接绑定

1 $(".btn").click(function(){
2     this.sendData();
3 }.bind(this) );

es6中

1 $(".btn").click( ()=> this.sendData() );  //箭头函数this绑定的是词法作用域，肯定指向外层，哪怕用apply，call也没法改变

遍历for...of

es5的遍历

1 var array=["a","b","c","d"];
2 for (var i=0,l=array.length;i<l;i++){
3     var a=array[i];
4     console.log(a);
5 }

或者

1 array.forEach(function(a){  //不能用break语句跳出循环,且不能在这个封闭的函数内使用return语句
2     console.log(a);
3 })

es6 for...of

1 for(var a of array ){  //可以使用break,continue,return等语句
2     console.log(a);
3 }

　　for...of和for...in的区别，for...in主要用于获取属性名，如果用来遍历数组，确实可以获得序号，但序号都是字符串形式。

默认参数

1 function abc(x=0,y=2,flag=true){
2     console.log(x,y,flag);
3 }
4
5 abc();  // 0 2 true
6 abc(4,0,false); // 4 0 false

剩余参数

用于参数数量不固定的场合，剩余参数前面需要加...

1 function reduce(base,...nums){
2     var result=base;
3     for(var i of nums){
4         result-=i;
5     }
6     return result;
7 }
8 reduce(10,5,3); // 2

es5

1 function reduce(base){
2     var result=base;
3     [].shift.apply(arguments);
4     for(var i=0,l=arguments.length;i<l;i++){
5         result-=arguments[i];
6     }
7     return result;
8 }
9 reduce(10,5,3);  // 2

展开运算符 ...

1 Math.max(2,100,1,6,43);  //100
2 Math.max([2,100,1,6,43]); //NaN
3 Math.max(...[2,100,1,6,43]); //100   展开的效果

数组拼接也可以使用...

1 arr1=[2,100,1,6,43];
2 arr2=["a","b","c","d"];
3 arr3=arr1.concat(arr2);
4 arr4=[...arr1,...arr2];
5
6 console.log( arr3 );   // [2, 100, 1, 6, 43, "a", "b", "c", "d"]
7 console.log( arr4 );   // [2, 100, 1, 6, 43, "a", "b", "c", "d"]

转载于:https://www.cnblogs.com/MrZouJian/p/7649219.html

es6中一些基本的使用方法相关推荐

使对象具有ES6中Iterator接口的实现方法
es6中只有具有iterator接口的数组或者类数组(arguments)都可以使用for of来循环,但是对于对象来说不行,可以利用迭代器中的原理来给对象生成一个迭代器,实现让对象可以使用for o ...
ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
es6中的静态属性和方法
es6 中 class 带static 关键字是静态方法静态方法和对象无关,外部对象变量不能调用静态方法和属性外部可以通过类名来调用对象原型(就是类下面的方法)方法没有办法调用对象上面的静态方法 ...
ES6中的Promis的使用方法
什么是Promise? Promise是由 CommonJS 在 Promises/A 规范中提出来的,是js一部编程的重要概念,是比较就行的javascript一部变成解决方案之一. 常见的异步编程 ...
ES6中遍历对象属性的方法
1.For..in 可以遍历自身和继承的所有可枚举属性,不含Symbol. 2.Object.keys() 返回一数组,含自身非继承的所有可枚举属性,不含Symbol. 3.Object.getOwn ...
ES6中的4个字符串方法
大家好,我是半夏
ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
es6中symbol详解
ES6中引入了第6种原始类型:Symbol 创建Symbol let firstName = Symbol(); let person = {}; person[firstName] = '欧阳不乖' ...
ES6中新增字符串方法，字符串模板
ES6中新增字符串方法,字符串模板多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123';i ...
indexof方法_[ 翻译 ] ES6中数组去重的三种方法
原文:How to Remove Array Duplicates in ES6 翻译:Hytonight云息有三种方法可以过滤掉一个数组的重复元素并且返回去重后的新数组.我最喜欢使用Set,因为它 ...

es6中一些基本的使用方法

es6中一些基本的使用方法

const 定义常量

let 块级变量

模板字面量

解构赋值

类和继承

箭头函数

遍历for...of

默认参数

剩余参数

展开运算符 ...

es6中一些基本的使用方法相关推荐

最新文章

热门文章