ES6入门

1、ECMAScript 6.0 简介

ECMAScript 6.0 (以下简称ES6, ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是
European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言)一种脚本语
言的标准,已经在2015年6月正式发布了,并且从ECMAScript6开始,开始采用年号来做版本。即ECMAScript
2015,就是ECMAScript6它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语
言。每年一个新版本。

关键点： ECMAScript是每年更新的 初始的ECMAScript版本是从1按照数字递增的：ES1,ES2,ES3,ES4,ES5 新的版本(从2015年开始)根据发布的年份命名：ES2015,ES2016,ES2017 ECMAScript是个标准。Javascript是这个标准最流行普遍的实现。其他实现包括：SpiderMonkey,V8和 ActionScript

2、 ES6新特性-let&const

我们以后会经常使用let来声明一个变量，还有一个const常量（声明之后不允许改变，一旦声明必须初始化， 否则报错）

<script>
const a=3在这里插入代码片
a=4
//Uncaught TypeError: Assignment to constant variable. at let&const.html:36
</script>

<script>
//var声明的变量往往会越域
//let声明的变量有严格的局部作用域
{
var a=1
let b=2
}
console.log(a)
console.log(b)
 //Uncaught ReferenceError: b is not defined at let&const.html:19
 </script>

<script>
//var可以声明多次,let只可以声明一次
var a=1
var a=3
let b=2
let b=4
console.log(a)
console.log(b)
//Uncaught SyntaxError: Identifier 'b' has already been declared
 </script>

<script>
//var会变量提升
//let不会变量提升
console.log(a)
var a=1
console.log(b)
let b=2
//let&const.html:33 Uncaught ReferenceError: b is not defined at let&const.html:33
</script>

3、 ES6新特性-解构&字符串

<script>
//数组解构
let arr=[1,2,3];
let d=arr[0];
let b=arr[1];
let c=arr[2];
let [dd,bb,cc]=arr;// 获取数组中对应位置元素的值
console.log(dd,bb,cc);
 </script>

<script>
//对象解构
let person={
name: "jack",
age: 21,
language: ['java','js','css'],
}
let {name,age,language}=person
 console.log(name,age,language)
 </script>

<script>
//字符串扩展
let str="hello.vue";
console.log(str.startsWith("hello"))//true
console.log(str.endsWith(".vue"))//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"))//true
</script>

<script>
//字符串模板
let ss=`<div>
<a>11</a>
</div>`
console.log(ss)//<div><a>11</a></div>
 </script>

<script>
let person={
name: "jack",
age: 21,
language: ['java','js','css'],
}
let {name,age,language}=person
 console.log(name,age,language)

 //字符串插入变量和表达式.变量名写在${},${}中可以放入js表达式
 function fun(){
 return "这是一个函数"
 }

 let info=`我是${name},今年${age+10},我想说${fun()}`
 console.log(info)
 </script>

4、ES6新特性-函数优化

 <script>
//函数默认值
//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
}
 // 传一个参数
 console.log(add(10));

 //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
 function add2(a, b = 1) {
 return a + b;
 }
 console.log(add2(20));

 //可变长度参数
 function fun(...values){
 console.log(values.length)
 }
 fun(5)
 fun(5,5,6)
 //简单的箭头函数
 function fun(a,b){
 return a+b;
  }
 var sum=(a,b) => a+b
 console.log(sum(11,11))
 //箭头函数
 const person={
 name: "jack",
 age: 21,
 language: ['java','js','css'],

 }
 function hello (person) {
 console.log(person.name)
 }

 let hellos=(obj) => console.log(obj.name)
 hellos(person)//jack
 </script>

5、ES6新特性-对象优化-merged

<script>
// 对象的内置函数
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
 console.log(Object.values(person));//["jack", 21, Array(3)]
 console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
 // 对象合并
 const target = { a: 1 };
 const source1 = { b: 2 };
 const source2 = { c: 3 };
 //{a:1,b:2,c:3}
 Object.assign(target, source1, source2);
 console.log(target);//{a:1,b:2,c:3}
  
 //2）、声明对象简写
 const age = 23
 const name = ""
 const person1 = { age: age, name: name }
const person2 = { age, name }
console.log(person2);
  
  //3）、声明对象书写方式
let person={
name: "xushu",
eat: function(food){
console.log("我吃了"+food)
},
eat1: food => console.log("我吃了"+food),
eat3(food){
console.log("我吃了"+food)
 }
 }
 person.eat("香蕉")
 person.eat1("苹果")
 person.eat3("肥肠")
 </script>
 //对象优化.html:12 我吃了香蕉
 //对象优化.html:14 我吃了苹果
 ///对象优化.html:16 我吃了肥肠

//4）、对象拓展运算符
<script>
//拷贝对象
let p1={
name: "zlj",
age: 19
}
let someone={...p1}
console.log(someone)
 //{name: "zlj", age: 19}
 </script>

<script>
 //对象合并
 let name={name: "zlj"}
 let age={age: 19}

 let someone={...name,...age}
 console.log(someone)
 //{name: "zlj", age: 19}
 </script>