Es5.Es6区别

ES5&&ES6

一、let

1.块级作用域, let定义的变量只在代码块中有效

2.let声明的变量不会提前(前置)(意味着必须先定义后使用)

3.不能重复定义 ,在同一个作用域中不能声明同名的变量

4.暂时性死区(当内部变量与外部变量同名时,内部变量会屏蔽外部变量)

注:let和var的区别

1)let声明的变量是块级作用域(所在一对花括号里),var是函数作用域和全局作用域

注意:let是可以定义全局变量,局部变量,块级作用域的变量。(和写代码的位置有关)

2)let声明的变量不会声明提升,var会声明提升

3)从代码的写法上,let不能声明同名的变量,var可以。

二、const只读变量

用const来修饰的变量只是只读变量也叫常量,就意味着该变量里的数据只能被访问,而不能被修改,也就是意味着const“只读”(readonly)

const所修饰的变量必须赋初始值

const修饰的是直接指向(修饰)的内存

引用类型有两块内存区域

引用类型代表的是保存地址的内存区域,数组元素表示的是数据

三、this和bind

1.this

1).以函数的形式调用时,this永远都是window

2).在事件处理函数时,this是事件源.

2.bind(this重新指代的对象)(只能为匿名函数服务)

3.call和apply

call和apply本质上能改变函数所属的对象(函数内部的this)

参数是谁,this就是谁

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

四、JSON.parse/JSON.stringfy

JSON字符串和对象的直接的转换

字符串转换成JSON对象:JSON.parse

JSON对象转换成字符串:JSON. stringify

var str = ‘{"id":"123","name":"456"}‘;

let obj = JSON.parse(str);

console.log(obj.id);

console.log(obj.name);

let str1 = JSON.stringfy(obj);

console.log(str1.id);

console.log(str1.name);

五、for in与for of

let strArr = [];

for(let index in strArr){

console.log(strArr[index]);

}

for(let t of strArr){

console.log(t);

}

六、字符串的扩展

判断字符串是否包含在另一个字符串中

ES5    indexOf(参数)

ES6    includes(参数)    返回布尔值,表示是否找到参数的字符串

startsWith(参数)   返回布尔值,参数是否在源字符串的头部

endsWith(参数)   返回布尔值,参数是否在源字符串的尾部

七、箭头函数(针对于匿名函数)

1. eg:   x=>x*5相当于function(x){ return x*5 }

      箭头函数相当于匿名函数,省略了return和花括号

2.有名函数   let  函数名=参数=>函数体

eg:let num=(x=>x*5)(8)        //传入参数x=6,自运行

console.log(num) //30

let num=function(x){
                       return x*5

}

3.函数需要多个参数,参数需要花括号括起来

(x,y)=>x>y?x:y;

4.返回值是个对象

var f=(id,name)=>({id:id,name:name});

//等价于:

返回的是对象

var f=(id,name)=>({

return {id:id,name:name}

});

红色括起来的圆括号不能省略,因为对象的花括号和函数的花括号冲突了

箭头函数的优点:

    对this转移的处理,箭头函数内部的this是词法作用域,由上下文确定

八、解构赋值(针对于数组、对象)批量给变量赋值

优点:1. 可以让一个函数返回一个的值

2. 可以实现两个数的交换

3.可以将多个变量进行初始化

eg:  let a=1;b=22;t;

a=a+b;

b=a-b;

a= a-b;

console.log(a,b);

eg:  let [v1,[v2,v3],[v4,v5]] = [12,[23,34],[56,67],[5,6]];

console.log(v1);

console.log(v2);

console.log(v3);

console.log(v4);

console.log(v5);

let {name,age} = {name:"dahuang",age:18};

console.log(name,age);

九、Set和Map

set特点:自动去重,无下标

let set = Set([2,3,5,6,2,3,2,1]);

console.log(set.size);     //5

for(let t of set){

console.log(t);

}

set集合的方法:

add(参数)   向集合中添加一个元素

delete(参数)    删除集合中某个数

has(参数)        判断集合中是否含有某个值

clear(参数)     清空集合中的元素

from(参数)   将集合转为数组

Map : 键值对

set()   向集合中添加一个元素

get(键)    根据键去取值

delete( 键)    删除集合中的某个数

has(键)     clear(参数)     清空集合中的元素

from(参数)   将集合转为数组

Map的遍历

for(let t of map){

console.log(t[0] + t[1]);   //0代表key,1代表value

}

十、Symbol

1.表示独一无二的值,它是基本类型中的一种。

2.它是内置基本对象,不能使用new关键字来使用。let symbol = Symbol();

let symbol1 = symbol("heihei");

let symbol2 = symbol("heihei");

console.log(symbol1 === symbol2);    //false

let age =Symbol();

var a = {

name:"老王";

[age]: 18 ;

hobby: "写代码";

};

for(let i in a){

console.log(a[t]);    //老王

//写代码

}

console.log(a[age]);      //18

原文地址:https://www.cnblogs.com/manban/p/11109442.html

时间: 2024-10-04 09:49:20

Es5.Es6区别的相关文章

【转】「译」ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事?

ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning? Posted by Hux on September 22, 2015 JavaScript 有着很奇怪的命名史. 1995 年,它作为网景浏览器(Netscape Navigator)的一部分首次发布,网景给这个新语言命名为 LiveScript.一年后,为了搭上当时媒体热炒 Java 的顺风车,临时改名为了 JavaScript (当然,Java 和

ES5/ES6的区别研究(ECMAScript)

我所理解的概念应该是语法的区别和特性的区别 这里是ECMAScript的解析http://baike.baidu.com/item/ECMAScript 参考: (ES6)http://es6.ruanyifeng.com/ (ES5)http://www.zhangxinxu.com/wordpress/2012/01/introducing-ecmascript-5-1/ (ES5与ES6的区别)http://www.codesec.net/view/203109.html (ES6)htt

ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事?

原网址:http://huangxuan.me/2015/09/22/js-version/ JavaScript 有着很奇怪的命名史. 1995 年,它作为网景浏览器(Netscape Navigator)的一部分首次发布,网景给这个新语言命名为 LiveScript.一年后,为了搭上当时媒体热炒 Java 的顺风车,临时改名为了 JavaScript (当然,Java 和 JavaScript 的关系,就和雷锋和雷锋塔一样 -- 并没有什么关系) 歪果仁的笑话怎么一点都不好笑 译者注:wik

面向对象JS ES5/ES6 类的书写 继承的实现 new关键字执行 this指向 原型链

一 .什么是面向对象? 面向对象(Object Oriented),简写OO,是一种软件开发方法. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面.应用结构.应用平台.分布式系统.网络管理结构.CAD技术.人工智能等领域. 面向对象是相对于面向过程来讲的,面向对象方法,把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式. 编程范式 一般可以

Atitit js es5 es6新特性 attilax总结

1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 基本chrome ff 360se8全面支持了2 2. ECMAScript 2015(ES6)的十大特征 – WEB前端开发 - 专注前端开发,关注用户体验.html2 1.1. JavaScript发展时间轴: 1.1995:JavaScript诞生,它的初始名叫LiveScript. 2.1997:ECMAScript标准确立. 3.1999:ES3出

React/React Native 的ES5 ES6写法对照表

转载: http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 英文版: https://babeljs.io/blog/2015/06/07/react-on-es6-plus 很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends

js修改css时如何考虑兼容性问题es5+es6

es5的写法 var elementStyle = document.createElement('div').style var vendor = (function(){ let transformNames = { webkit: 'webkitTransform', Moz: 'MozTransform', O: 'OTransform', ms: 'msTransform', standard: 'transform' } for (let key in transformNames)

简述ES5 ES6

很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,我们知道javascript的三个基本组成部分是ECMAJavascript(European Computer Manufacturers Association javascript,也就是前面说的ES,但之前你问

React创建组件的不同方式(ES5 & ES6)

一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML element) & React.createClass(javascript DOM) >> 使用Javascript DOM创建HTML元素 // 创建lu元素 var ul = document.createElement('ul') // 创建class属性 var listClass =