Job-ES6 語法

*塊級作用域,字符串,函數
*對象擴展,解構
*類,模塊化

使用let 完全可以替換var ,使用var ,在{}之外是可以找到的,使用let在{}之外是找不到的.

---

模版字符串

name="imooc";
course = "React 開發 App"
console.log("hello" + name + ",course is" + course)
console.log(`hello ${name},course is ${course}`)
支持中間換行的寫法

ES6中的函數:

參數默認值

箭頭函數

展開運算符

var 不會報錯


let 會報錯


*js 也擁有了塊級作用於,{}中間的作用域,使用let定義,外部是獲取不到的,let可以完全替換var 定義一個變量

const name = "experience";
name = "solidadc";
cosole.log(name);

const 定義一個常量,不能給一個常量賦值.

let name = "experience";
name = "solidadc";
console.log(name);
let 不是定義一個常量,可以賦值.

/*var 不會報錯,但是let會報錯*/
// {
//     let name = "experience"
// }
// console.log(name);

/*const 定義一個常量,不能給一個常量賦值.*/
// const name = "experience";
// name = "solidadc";
// cosole.log(name);

/*let 不是定義一個常量,可以賦值.*/
// let name = "experience";
// name = "solidadc";
// console.log(name);

/*模版字符串   中間可以任意換行,都不會報錯*/
// name = "experience";
// course = "solidadc";
// console.log("hello " + name +" is course "+course);
// console.log(`hello ${name} is course ${course}`);
//
// console.log(`hello
//
//
// ${name} is course
//
//  ${course}`);

/*箭頭函數   簡寫函數   保持函數的this作用域*/
// function hello(name){
//     console.log(`Hello ${name} !`)
// }
// hello("src");
//
// const hellos = (name)=>{
//     console.log(`Hello ${name} !`)
// }
// hellos("background");
//
// setTimeout (()=>{
//     console.log("xxx")
// },3000)

/*如果{}裏,只有一條return語句的話,{}是可以省略不寫的!~~*/
// const double =x =>x*2
// console.log(double(5))

/*默認參數*/
// const hello = (name=`girl`) =>{
//     console.log(`Hello ${name}`)
// }
// hello();
// hello("boy");

/*展開符的使用*/
// function hello(name1,name2){
//     console.log(name1,name2);
// }
// arr = ["girl","boy"]
// hello.apply(null,arr)
//
// hello(...arr)

/*對象擴展  Object 擴展   把一個對象壓成一個數組  */
// obj = {name: "experience",course: "fairy"}
// console.log(Object.keys(obj))
// console.log(Object.values(obj))
// console.log(Object.entries(obj))

/*對象展開符 的擴展 */
// const obj1 = {name:"experience" ,course:"solidadc"}
// const obj2 = {type:"IT"         ,name:"fairy"}
// console.log({...obj1,...obj2,data:"2017"})

/*數組 解構*/
// const arr =["hello","fairy"]
// let arg1 = arr[0]
// let arg2 = arr[1]

// let[arg1,arg2] = arr
// console.log(arg1,`|`,arg2)

/*對象解構 */
// const obj = {name:"experience",course:"fairy"}
// const {name,course} = obj
// console.log(name,`|`,course)

/*提供class的語法糖
*是 prototype的語法糖
*Extends繼承
* Constructor構造函數
*/
// class Myapp {
//     constructor(){
//         this.name = "experience"
//     }
//     sayHello(){
//         console.log(`hello${this.name}!`)
//     }
// }
// const app = new Myapp()
// app.sayHello()

/*ES6中新出現的數據結構
* set元素不可重合
* Map
* Symbol*/

/*ES6中自帶了模塊化機制,告別sea.js require.js
* import,import{}
* Export,export default
* Node現在還不支持,還需要require來加載
* */

/*未解之謎*/
// import * as mod1 from "./module1"
// console.log(mod1)

/*遍歷數組*/
// [1,2,3].forEach(function(value,index){
//     console.log(value);
// });

/*映射新數組*/
arr = [1,2,3].map(v=>v*2);

/*所有元素是否通過測試*/
[1,2,3,4].every(v=>v>3);
/*是否有元素通過測試*/
[1,2,3,4].some(v=>v>3);
/*過濾數組*/
[1,2,3,4,5].filter(v=>v>3);
/*查找符合條件的元素*/
arr = [{name:"xiaoxi",age:"13"},{name:"romio",age:"23"}];
/*查找索引*/
[1,2,3].indexOf(2);
/*連接數組*/
arr1=[1,2,3];
arr2=[4,5,6];
[...arr1,...arr2];
/*數組去重*/
arr = [1,2,3,4,3,2,1];
[...new Set(arr)];
/*獲取對象的key*/
Object.keys({name:"experience",age:"43"})
/*獲取對象裏數據的流量*/
Object.keys({name:"experience",age:"43"}).length;
/*遍歷數組*/
Object.entries({name:"experience",age:"43"});
/*extend 功能*/
const obj = {name:"experience",age:"43"};
const newObj = {...obj,job:"IT",age:15};
console.log(newObj)
/*獲取列表的頭和尾*/
const [head,...tail] = [1,2,3];
const [last,...initial] = [1,2,3].reverse();