技術標籤：前端es6javascript

let關鍵字

var
1.可以重複宣告
2.無法限制修改
3.沒有塊級作用域

let 不能重複宣告，變數-可以修改，塊級作用域:

const不能重複宣告，常量-不能修改，塊級作用域:

箭頭函式

()=>{}
1.如果只有一個引數，小括號()可以省略
2.如果只有一個return,花括號{}可以省略

箭頭函式中的this關鍵字
//箭頭函式不繫結this箭頭函式沒有自己的this關鍵字，
//如果在箭頭函式中使用this，this關鍵字將指向箭頭函式定義位置中的this

1.剩餘引數、擴充套件

剩餘引數
function(a,b,...
 
args)
1.這個引數必須放在最後
2.接受所有剩餘的引數，用一個數組形式來存放,是一個偽陣列

擴充套件運算
let arr=[1,2,3];
...arr;   //1,2,3

合併陣列
//方法一
1et ary1=[1, 2, 3];
let ary2=[3，4, 5];
1et ary3=[...ary1,...ary2] ;
//方法二
ary1.push(...ary2);

將偽陣列變成真正的陣列
var arr=document.getElementsByTagName("div");
console.log(arr);   //偽陣列
var ary=[...arr]
 
;
console.log(ary);   //真正的陣列

2.預設引數

function fn(a,b=5,c=12){
    
}
fn(24)
fn(24,14,88)

即你傳我就更換，不傳我就用預設的

解構賦值

1.陣列解構

let [a,b,c]=[1,2,3];   //一一對應的關係，必須一一對應

let [a,...b]=[1,2,3];
a   //1
b  //[2,3]

2.物件解構

let person = { name: 'zhangsan',age: 20};
let {name,age} = person;
console.1og (name) ;    // 'zhangsan '
 

console.log(age) ; //    20

let {name:myName,age:myAge} = person; // myName myAge屬於別名
console.log (myName) ; // ' zhangsan'
console.log (myAge); // 20

Array的擴充套件方法

1.map 對映   一個對一個
arr.map(function(){})
let arr=[12,5,8];
let result=arr.map((item)=>{
	return item*2;
});

let score=[19, 85，99，25，90];
let result=score.map(item=>item>=60?'及格':'不及格');
alert(score);       //19, 85，99，25，90
alert(result);     //不及格，及格，及格，不及格，及格

2.reduce 彙總    一堆出來一個   算個總數
let arr=[12,69,180,87,63];
let result=arr.reduce(function(tmp,item,index){   //前一次最終結果 下一次要計算的 第幾個數
    return tmp+item;
});
算平均數
let result=arr.reduce(function(tmp,item,index){  
    if(index!=arr.length-1){
        return tmp+item;
    }
    else{
        return (tmp+item)/arr.length;
    }
});

3.filter    過濾器
返回ture留下，返回false不保留
let arr=[12,5,8,99,27,36,75];
let result=arr.filter(item=>{
	if(item%3==0){
		return true;
	}else{
		return false;
	}
    //以上程式碼等同於item%3==0
});
alert(result);

4.forEach    迴圈（迭代）
let arr=[12,5,8,9];
arr.forEach(item=>{
    alert(item);
})
arr.forEach((item,index)=>{
	alert(index+':'+item);
});

1.Array.form()
接受一個偽陣列轉換成一個真正的陣列
var ary=Array.form(arr);
console.log(ary)

2.find()
用於找出第一個符合條件的陣列成員,如果沒有找到返回undefined
let ary = [{
	id:1,
	name:'張三、
}，{
	id: 2,
	name:'李四'、
}];
let target = ary.find(item => item.id == 2) ;
console.log(target)   //返回id為2的物件

3.findIndex()
用於找出第一個符合條件的陣列成員的位置,如果沒有找到返回-1
Let ary =[ 10,20,50];
Let index = ary.findIndex( item=> item > 15)|
console.log(index)    //輸出1

4.includes()
表示某個陣列是否包含給定的值,返回布林值。
[1,2,3].includes (2)     // true
[1,2,3].includes (4)     // false

string

模板字串

模板字串中可以解析變數。
${}   //解析變數
let name = '張三';
let sayHe11o =`hello,my name is ${name}`; // hello, my name is zhangsan

模板字串可以換行顯示
let result = {
	name :' zhangsan' ,
	age: 20，
	sex: '男
}
let html =`<div>
	<span>${result.name} </span>
	<span>${result.age}</span>
	<span>${result.sex}</span>
</div>`;


模板字串可以呼叫函式
const sayHello = function () {
	return '我是fn函式' ;
};
let greet =`${sayHello()}哈哈哈哈`;
console.log (greet); // 我是fn函式哈哈哈哈

string 擴充套件方法

1.startsWith(): 表示引數字串是否在原字串的頭部，返回布林值
endsWith(): 表示引數字串是否在原字串的尾部，返回布林值

let str = 'Hello world!';
str.startsWith('Hello')    // true
str.endsWith('!')          // true

2.repeat()
repeat方法表示將原符串重複n次，返回一個新字串。
'X'.repeat(3)           // "'xxx"
'hello'.repeat(2)       // "hellohello"

Set資料結構

const s1 = new Set();
console. log(s1. size)    //0

const s2 = new Set(["a","b"]);
console. log(s2.size)     //2

陣列去重
const s3 = new Set(["a","a","b","b"]);
console.log(s3. size)    //2
const ary=[...s3]
console.log(ary)         //["a","b"]

例項方法

add(value): 新增某個值,返回Set結構本身
delete(value): 刪除某個值,返回一個布林值,表示刪除是否成功
has(value):返回一個布林值，示該值是否為Set的成員
clear(): 清除所有成員,沒有返回值
      
const S=newSet();
s.add(1).add(2).add(3); //向set結構中新增值
s.delete (2)        // 刪除set結構中的2值
s.has(1)           //表示set結構中是否有1這個值返回布林值
s.clear()           //清除set結構中的所有值

遍歷set資料結構，從中取值
Set結構的例項與陣列一樣,也擁有forEach方法, 
用於對每個成員執行某種操作,沒有返回值。
s.forEach(value => console.log (value) )