关于ES6的新特性
1 let声明变量
01 let声明的变量，不可重复声明，比如 let a=1 ； let a=2 ；这样申明会报错
02 let声明的变量，有块级作用域，比如 if( ){ }这用语句 有了作用域
03 let声明的变量不再声明提前
for (var i = 0; i < 100; i++){
setTimeout(function () {
console.log(i);
}, 0)
}
//结果是输出 100个100；
//setTimout属于异步操作，它会在主线程代码执行完毕之后，才执行
for (var let = 0; i < 100; i++){
setTimeout(function () {
console.log(i);
}, 0)
}
// 结果是输出，0 1 2 3-----直到 99
2 const声明的叫做常量
作用： 防止变量被修改，一些不想被修随意修改的属性值，可以用const定义
总结：
3 ES6 对象简写
01 属性简写，如果属性名和属性值的变量名相同，就可以简写为一个
02 方法简写，可以吧：和function去掉。
// 如：
let name = "周浩"
let obj = {
name: name,
sing: function () {
console.log("你好帅！！！")
}
} // es6 简写为：
let name = "周浩"
let obj = {
name,
sing() {
console.log("你好帅！！！")
}
}
4解构赋值
01对象的解构赋值
let obj = {
name: "周浩",
age: 18
}
//01普通方法获取对象中的属性值
let name = obj.name;//周浩
let age = obj.age; //
// 02解构赋值
// let {对象的属性名: 要声明的变量名} = 对象 如 ：let { name: mingzi } = obj;
// 就会自动声明一个变量出来，变量的值就是对象中对应的属性的值
let { name: mingzi } = obj;
console.log(mingzi);
// let {对象的属性名: 要声明的变量名} = 对象
// 03如果 对象的属性名 和要声明的变量名同名 可以简写成一个，（对象的简写+解构赋值）
// let { name： name, age: age } = obj;
let { name, age } = obj;
console.log(name, age);
对象和函数的解构赋值应用，如下
let obj = {
name: "周浩",
age: 18
}
function test({name, age}) {//设置解构
console.log(name, age)
}
test(obj);//把对象直接传入，在函数形参设置解构
数组的解构，如下
let arr = [1, 2, 3, 4];
//普通获取数组中值的写法
// let num1 = arr[0]
// let num2 = arr[1]
// let num3 = arr[2]
// let num4 = arr[3]
//利用解构的写法，获取数组中的值
let [num1, num2, num3, num4] = arr;
console.log(num1)//
console.log(num2)//
console.log(num3)//
console.log(num4)// 4
数组解构中的剩余元素(RestElement)
let arr = [1, 2, 3, 4, 5]; // ... 语法在数组解构赋值中叫做 RestElement
// 剩余元素！！ // 1. 剩余元素只能有一个！
// 2. 剩余元素只能是最后一个元素 let [num1, ...num2] = arr; console.log(num2);
// 输出结果：[ 2, 3, 4, 5 ]
5箭头函数
// 本题要点 ： 在浏览器中，函数中的this默认指向window; 在node.js中 函数的this默认指向一个空对象
var name="sb" //window中的name
let obj = {
name: "周浩",//对象中的name
sayHello() {
setTimeout(function(){
console.log('它叫'+ this.name);//函数中的this，在浏览器中指向window，在node中指向空对象
},1000)
}
}
obj.sayHello();
//结果 ： 在浏览器中，console.log 输出的是 它叫 sb 。 在node中输出的结果是 它叫undefined
var name="sb" //window中的name
let obj = {
name: "周浩",//对象中的name
sayHello() {
var that=this //对象方法中的this，默认指向 调用方法的对象。也就是说这里的this指的是obj
setTimeout(function(){
//函数会先在自己的作用域中找that，自己没有，继续往上找，所以函数中的that和sayHello方法中的that是一样的，都指向obj
console.log('它叫'+ that.name);
},1000)
}
}
obj.sayHello();
// 输出结果为： 它叫周浩
var name="sb" //window中的name
let obj = {
name: "周浩",//对象中的name
sayHello() {
setTimeout(function(){
//01函数作用域中没有obj，它会顺着作用域链继续往上找
//02syHello方法是由obj调用的，所以找到了obj。
console.log('它叫'+ obj.name);
},1000)
}
}
obj.sayHello();
// 输出结果: 它叫周浩
箭头函数中this的利用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script> let obj = {
name: "周浩",
sayHello() {
let func = () => {
//箭头函中没有this，所有它会顺着作用域链往上找
//找到syaHello方法，sayHello方法中的this指向的是obj
console.log(this); //obj对象
console.log(this.name);//周浩
}
func();
}
}
obj.sayHello(); </script>
</body>
</html>
在函数被调用的时候，会将所有的实参存储到arguments对象中
参数个数不确定的情况下需要使用arugments来获取所有的实参
例子： 封装一个函数，求和，参数不定，可能是两个参数求和，也可能是10个参数求和
<script>
function sum() {
var result = 0;
for (let i = 0; i < arguments.length; i++){
result += arguments[i];
}
return result;
}
console.log( sum(1) )
console.log( sum(1, 2) )
console.log( sum(1, 2, 3) )
</script>
判断是不是数组的方法：
特别注意：typeof 不能判断是不是数组 typeof array返回的是object
可以使用：
箭头函数中没有aguments怎么解决？ 使用...剩余参数
例子： 封装一个函数，求和，参数不定，可能是两个参数求和，也可能是10个参数求和，使用箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script> // 要点：forEach() 遍历数组arr中的每个元素，将每个元素执行相同的操作，无返回结果
// 因为箭头函数没有aguments 所以要使用 剩余参数...
var sum=(...arr)=>{
//此时传入的arr是一个数组
let result=0
arr.forEach( elem => result+=elem ) //elem表示arr数组中的每个值,箭头函数简写
return result
}
console.log( sum(1,2,3,4,2) ) </script>
</body>
</html>
// 剩余参数只能有一个，并且只能是参数列表的最后一个！！
// 剩余参数是一个真数组！！ 可以使用任何数组的方法！！
function func(...a) {
console.log(a);//[1, 2, 3, 4]
}
func(1, 2, 3, 4);
6 ES6函数默认值的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 函数参数默认值的使用，如果没传参调用，a默认等于100，b默认等于100
function sum(a = 100, b = 100) {
return a + b;
} console.log(sum(1, 2));//3
console.log(sum());// 200
console.log(sum(1));//101 </script>
</body>
</html>
7对象在声明的时候使用变量作为属性名
var key = "name"; // 如何以变量的值作为属性名
// key="name" 就想让对象的属性名是name
//只要上边变量key的值变化，下边对象[key]也会随着变化
var obj = {
[key]: "周浩" //{ name: '周浩' }
} console.log(obj);//{ name: '周浩' }
8对象扩展运算符
//将 a对象中的属性和方法 快速添加到b对象中
使用剩余参数 ...将 a对象中的属性和方法拷贝到b对象中。
var wcs = {
name: "周浩",
age: 18,
sing() {
console.log("解开yy的鞋带！")
}
} // 使用...可以将对象中所有的属性给当前对象添加一份！
var xiaowsc = { ...wcs, money: 9999999999999 }; console.log(xiaowsc)
// 输出结果
// { name: '周浩',
// age: 18,
// sing: [Function: sing],
// money: 9999999999999 }
9 class关键字
es6中class关键字 就相当于 构造函数。 用来创建对象的
构造函数写法如下方代码
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () {
}
var p = new Person("周浩", 18);
构造函数是用来批量创建 具有相同属性 和 相同方法的对象
class Person{// 相当于 function Person(){ }
constructor(name, age) {//固定格式 constructor
this.name = name;
this.age = age;
}
// 在类中的方法会自动添加到构造函数的原型中！！
say() {
console.log("lei hao a");
}
}
var p = new Person("周浩", 18);
console.log(p);//Person {name: "周浩", age: 18}
成员：属性和方法的统称
实例成员：通过实例访问的成员
静态成员：通过构造函数本身访问的成员
flat 可以数组扁平化
关于ES6的新特性的更多相关文章
- ES6常用新特性
https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...
- ES6 && ECMAScript2015 新特性
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES201 ...
- ES6:JavaScript 新特性
我相信,在ECMAScript.next到来的时候,我们现在每天都在写的JavaScript代码将会发生巨大的变化.接下来的一年将会是令JavaScript开发者们兴奋的一年,越来越多的特性提案将被最 ...
- ES6相关新特性介绍
你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...
- es6的新特性--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
- H5、C3、ES6的新特性
H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...
- ES6实用新特性
兼容性 http://kangax.github.io/compat-table/es5/ http://kangax.github.io/compat-table/es6/ ES6(ES2015)兼 ...
- JS - ECMAScript2015（ES6）新特性
友情提示:本文仅mark几个常用的新特性,详细请参见:ES6入门 - ryf: 碎片 var VS let VS const var:声明全局变量, let:声明块级变量,即局部变量 const:声明 ...
- ES6的新特性（1）——ES6 的概述
ES6 的概述 首先,感谢马伦老师的ES6新特性的教程. ECMAScript 和 JavaScript 的关系是 ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前 ...
随机推荐
- Atom 输入时按 Tab 快捷键提示怎么取消？
按 Esc 按 Ctrl + . 在 mac 中使用 Cmd + .
- wannafly 挑战赛9 E 组一组 （差分约束）
链接:https://www.nowcoder.com/acm/contest/71/E 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 65536K,其他语言131072K Spec ...
- HBase调优案例（一）——建表长时间等待最后失败
现象: 1.在HBase Shell里执行建表操作会等很久,最终失败: 2.通过代码侧进行建表同样不能成功. 原因排查: 1.查询HMaster日志,发现有接收到建表(create)的RPC请求: ...
- MYSQL与Navicat的连接错误问题
唱,跳,RAP,Basketball MySQL版本安装 遇到的一个坑(密码加密规则被修改导致Navicat连接不上) 众所周知,老师的一些任务,往往做起来不是很困难,只要按着步骤就可以,但是在程序的 ...
- ES6中对字符串处理的优点
目录 1.字符的Unicode表示法 2.字符串的遍历接口 3.直接输入 U+2028 和 U+2029(分行符 和 分段符) 4.JSON.stringify() 的改造 1.字符的Unicode表 ...
- 移动开发与PC开发区别
移动开发领域与PC 开发得区别,总结为:3低, 3高,3有限.开发移动程序是应该时刻记住这9个限制. 3低 低处理能力 低分辨率 低速的数据传输能力 ...
- 关于Anaconda的虚拟环境操作
# 1.创建虚拟环境 conda create -n env_name python==版本号 # 2.激活虚拟环境 conda activate env_name # 3.下载相关模块 pip in ...
- 细说python类3——类的创建过程
细说python类3——类的创建过程 https://blog.csdn.net/u010576100/article/details/50595143 2016年01月27日 18:37:24 u0 ...
- win10 iis部署后 浏览目录报错 500.19
错误摘要HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效.详细错误信息模块 IIS Web Core 通知 BeginReq ...
- cocos2dx基础篇(8) 开关按钮CCControlSwitch
[3.x] (1)去掉 “CC” (2)对象类 CCObject 改为 Ref (3)标签类 LabelTTF 改为 Label (4)CCControlEvent 改为强枚举 Control::Ev ...