ES6 新增的一些东西
一、常量
不允许重复定义
const a='HELLO' const a='world'//报错Uncaught SyntaxError: Identifier 'a' has already been declared
const a='HELLO' a='world'//Uncaught TypeError: Assignment to constant variable.
二 let使用
let:定义一个块级作用域的变量 需要先定义再使用;(不存在变量提升) 不能重复定义
普通变量(var 定义的):
这叫做变量提升:先使用变量,然后在定义变量
console.log(a);//不报错 undefined var a=100
相当于
var b; console.log(b);b=100; console.log(b)
let定义的(Es6新增)
不存在变量提升
console.log(c);//报错:Uncaught ReferenceError: c is not defined let c=10;
let是一个块级作用域的变量:
let c = 100; if(10> 9){ let c=200; console.log(c); } console.log(c); // var c = 300
结果:200,100
var 定义的话
var c = 100; if(10> 9){ var c=200; console.log(c); } onsole.log(c);
结果:200,200
var i=10; var arr = [22,33,44,55] for(let i=0;i< arr.length;i++){ } if(i>9){ console.log(i+10); }
结果:20
三,js基本数据类型
js的数据类型: string array number null undefined boolean object 基本数据类型:string number null undefined boolean 引用类型:array object
const obj = { name: "谢小二", age: 22 } var obj2 = obj; obj2.age = 90 console.log(obj.age);
结果:90
基本数据类型引用只是引用了值,改变互不影响 a=10 b=a b=20 a根本没变 而引用类型的引用引用的是内存地址,一个改变另一个也跟的改变,如上述代码
四 模板字符串
通过反引号来使用,字符串当中可以使用变量 可以当作普通字符串来处理 可以使用多行字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <ul id="ul"> </ul> </body> <script> var name='陈太章' console.log(`我的名字叫${name}`) document.getElementById('ul').innerHTML=` <li>赵俊明喜欢搞基</li> <li>肖博雅喜欢被搞</li> <li>路宁喜欢我给他戴帽子</li> ` </script> </html>
示例
五 解构变量
类型要一致,如果是对象的话字段名称要一致
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> // let [a,b,c,d]=[11,22,33,44]; // console.log(a);//11 // console.log(d);//44 // let [a,b,c,[d]] = [89,90,99,[100]]; // console.log(a);//89 // console.log(c);//99 // console.log(d);//100 let obj={ name:'aaa', sex:'male' } let {name,sex}=obj; console.log(name);//aaa console.log(sex);//male </script> </head> <body> </body> </html>
六对象的扩展
对象的扩展 对象当中的属性可以简写 对象当中的方法也可以简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> var username = '长安大学'; var addr = '陕西西安'; function fun() { alert('it is very beautiful') } //注意字段要保持一致 var obj = { username, addr, fun, }; console.log(obj.username); obj.fun() // var useranme = $("#text1").val(); // var password = $("#text2").val(); // $.get(url,{useranme,password},function(){ // // // }) </script> </head> <body> </body> </html>
七、函数的扩展
函数的扩展 可以给函数默认参数 剩余参数:function fun(a,...b ){ } fun(11,22,33) 则:b = [22,33]
默认参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> function aa(name='渣渣辉') { console.log(name) } aa() </script> </head> <body> </body> </html>
剩余参数:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> // function aa(name='渣渣辉') { // console.log(name) // } // aa() function bb(a,...b) { console.log(a); console.log(b); } bb('渣渣辉','古天乐','陈小春','贪玩蓝月') </script> </head> <body> </body> </html>
结果:
a=渣渣辉 b=["古天乐","陈小春","贪玩蓝月"]
八、数组的扩展
1)判断数组当中是否存在某个数值
indexOf 有就找出索引,没有则输出-1
<script> aa=[11,22,33,44,55,66]; console.log(aa.indexOf(55));//4 console.log(aa.indexOf(45))//-1 </script>
includes 有则显示true没有则显示false
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> aa=[11,22,33,44,55,66]; // console.log(aa.indexOf(55)); // console.log(aa.indexOf(45)) console.log(aa.includes(55));//true console.log(aa.includes(45))//false </script> </head> <body> </body> </html>
2)对数组的遍历
aa=[11,22,33,44,55,66]; aa.forEach(function (item,index) { console.log(item,'----',index) })
3)map操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> aa=[11,22,33,44,55,66]; // console.log(aa.indexOf(55)); // console.log(aa.indexOf(45)) // // console.log(aa.includes(55));//true // console.log(aa.includes(45))//false // // aa.forEach(function (item,index) { // console.log(item,'----',index) // }) arr=aa.map(function (item,index) { return item+1 }); console.log(arr)//[12,23,34,45,56,67] </script> </head> <body> </body> </html>
4)对数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> aa=[11,22,33,44,55,66]; // console.log(aa.indexOf(55)); // console.log(aa.indexOf(45)) // // console.log(aa.includes(55));//true // console.log(aa.includes(45))//false // // aa.forEach(function (item,index) { // console.log(item,'----',index) // }) // arr=aa.map(function (item,index) { // return item+1 // }); // console.log(arr)//[12,23,34,45,56,67] arr1=aa.filter(function (item,index) { return item>50 }); console.log(arr1)//[55,56] </script> </head> <body> </body> </html>
九、类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script> Object.prototype.hobby='play game'; function Person(name,age) { this.name=name; this.age=age; this.sayhello=function () { console.log('hello') } } Person.prototype.sayhello=function () { console.log('哈哈哈哈') }; Person.prototype.addr='北京'; var p=new Person('ctz',21); p.sayhello(); console.log(p.addr); console.log(p.hobby) </script> </head> <body> </body> </html>
hello 北京 play game
大佬地址链接:
github:
https://github.com/ruanyf/es6tutorial/tree/gh-pages/docs
ES6 新增的一些东西的更多相关文章
- ES6 有什么新东西
ES6 有什么新东西? 你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本 ...
- ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓
现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...
- es6新增
首先要说let,他是只在代码块中执行的变量,例如: { let a = 10; var b = 1;}console.log(a);//definedconsole.log(b);//1 ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- ES6新增对象方法的访问描述符:get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
- 浅谈ES6新增数据类型:Symbol
面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...
- ES6新增的数据类型Map和Set。
Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
- es6 新增字符串方法
es6新增了4个字符串处理的方法:startsWith,endsWith,includes,repeat. 1.简单使用 includes()返回布尔值,表示是否找到了参数字符串 startsWith ...
随机推荐
- 第61天:json遍历和封装运动框架(多个属性)
一.json 遍历 for in 关键字 for ( 变量 in 对象) { 执行语句; } 例如: var json = {width:200,height:300,left:50}co ...
- robot framework连接Oracle错误:ORA-12504: TNS:listener was not given the SERVICE_NAME in CONNECT_DATA
在使用robot framework的关键字Connect to Database Using Custom params连接Oracle数据库: Connect to Database Using ...
- FTP-成型版本
1. 旧知识回顾-反射 hasattr(object, name) 说明:判断对象object是否包含名为name的属性(方法) 测试代码如下: class tt(object): def __ini ...
- 【刷题】SPOJ 8222 NSUBSTR - Substrings
You are given a string S which consists of 250000 lowercase latin letters at most. We define F(x) as ...
- Android Canvas 绘图
画布(Canvas)是图形编程中一个很普通的概念,通常由三个基本的绘图组件组成: Canvas 提供了绘图方法,可以向底层的位图绘制基本图形. Paint 也称为" ...
- POJ3581:Sequence——题解
http://poj.org/problem?id=3581 给一串数,将其分成三个区间并且颠倒这三个区间,使得新数列字典序最小. 参考:http://blog.csdn.net/libin56842 ...
- 基础dp例题整理
背包: 消失之物 先直接做一遍,必然对于i,有 for(j=m;j>=w[i];--j) f[i]+=f[i-w[i]] 所以,如果排除用i做背包的结果,减去这个转移就好了. memcpy(g, ...
- C/C++中字符串与数字相互转换
数字转字符串: 用C++的streanstream: #include <sstream> #Include <string> string num2str(double i) ...
- HDU5533(水不水?)
Dancing Stars on Me Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Ot ...
- GYM 101875 2018 USP-ICMC
3月自训 (1):10/12 A: 题意:每个人可以连边,最远连到第(i+k)%n个人,边权为这个人与另一个人连边距离,求生成一颗最大生成树的权值和是多少 题解:可以证明的是,我们每一个人都向接下来的 ...