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 ...
随机推荐
- Gradle sync failed: Failed to find Build Tools revision 26.0.2的解决办法
说明在android studio中没有 build tools 的26.0.2的版本,你确认一下,是否是这样: 点击==>android studio的菜单栏中Tools==>andro ...
- wpf拖拽
简单拖拽的实现是,实现源控件的MouseDown事件,和目标控件Drop事件.调用DragDrop.DoDragDrop()以启动拖放操作,DragDrop.DoDragDrop()函数接受三个参数: ...
- WC2017 划水记
Day 0 (2.2) 一寒假没有好好写题....于是晚上打了人生第一场codeforces,写了Div2三道水题就弃疗了23333333 Day 1 (2.3) 从德州高铁站坐小火车G57去绍兴 ...
- 【bzoj1093】[ZJOI2007]最大半连通子图 Tarjan+拓扑排序+dp
题目描述 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:对于u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u的有向路径. ...
- 【bzoj2318】Spoj4060 game with probability Problem 概率dp
题目描述 Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果正面朝上,则从n个石子中取出一个石子,否则不做任何事.取到最后一颗石子的人胜利.Alice在投掷硬币时有 ...
- BZOJ4771 七彩树（dfs序+树上差分+主席树）
考虑没有深度限制怎么做.显然的做法是直接转成dfs序上主席树,但如果拓展到二维变成矩形数颜色数肯定没法做到一个log. 另一种做法是利用树上差分.对于同种颜色的点,在每个点处+1,dfs序相邻点的lc ...
- BZOJ4869 六省联考2017相逢是问候（线段树+欧拉函数）
由扩展欧拉定理,a^(a^(a^(……^x)))%p中x作为指数的模数应该是φ(φ(φ(φ(……p)))),而p取log次φ就会变为1,也即每个位置一旦被修改一定次数后就会变为定值.线段树维护区间剩余 ...
- python函数调用关系图（python call graph）
由于要重构项目的部分代码,要整理好主要的函数调用关系,不想自己看代码慢慢画出结构,想找出一种通用的,节省人力的方法得出函数间的调用关系图,于是发现以下几个工具.(内网没装好graphviz,还没真正用 ...
- Java的第一个程序-Hello, World !
学了一个月的Java,现在总结一下,就算复习了. 一.安装Java环境 这个没啥好说的. 1. 官网下载JDK安装 2. 配置环境变量.注意的是:环境变量配置好以后,如果cmd中运行 java 命令没 ...
- CentOS 文本操作命令
1.cat 用于查看纯文本文件,显示行号,加-n参数,适合内容较少的情况 2.more 用于查看纯文本文件,适合内容较多的情况 3.less 用于查看纯文本文件,可以上下翻页 4.head 用于查看纯 ...