ES6基础3(扩展)-学习笔记
生活随笔
收集整理的這篇文章主要介紹了
ES6基础3(扩展)-学习笔记
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- ES6基礎(chǔ)3(擴(kuò)展)-學(xué)習(xí)筆記
- 字符串?dāng)U展
- 數(shù)值擴(kuò)展
- 函數(shù)擴(kuò)展
- 擴(kuò)展運(yùn)算符
ES6基礎(chǔ)3(擴(kuò)展)-學(xué)習(xí)筆記
字符串?dāng)U展
//擴(kuò)展//字符串?dāng)U展charAt(); //返回指定索引位置的字符 //var str = "hello world"; str.charAt(2) //lindexOf(); //返回字符串中檢索指定字符第一次出現(xiàn)的位置 //var str = "hello world"; str.indexOf('o') //llastIndexOf();//返回字符串中檢索指定字符最后一次出現(xiàn)的位置 slice() // 提取字符串的片斷,并在新的字符串中返回被提取的部分 //var str = "hello world"; str.slice(2,6) //"llo "split() //把字符串分割為子字符串?dāng)?shù)組 //var str = "hello world"; str.split('')toLowerCase()// 把字符串轉(zhuǎn)換為小寫toUpperCase() //把字符串轉(zhuǎn)換為大寫 substr(start,length) // 從起始索引號(hào)提取字符串中指定數(shù)目的字符//var str = "hello world"; str.substr(1,4)substring(start,stop) //提取字符串中兩個(gè)指定的索引號(hào)之間的字符//es6includes() //返回布爾值,表示是否找到了參數(shù)字符串。//var str = "hello world"; if(str.includes('h'))//數(shù)據(jù)匹配查詢---模糊匹配var arr = ['abcde','red','blue','orange','dfag','agabeiy']; //列表數(shù)據(jù)var a = 'e'; //輸入的值var f = arr.filter(function(item){//return item.indexOf(a) !=-1; //==-1不匹配 !=-1 匹配return item.includes(a);});console.log(f);startsWith() //返回布爾值,表示參數(shù)字符串是否在原字符串的頭部。 區(qū)分 大小寫//var str = "hello world"; str.startsWith('h')//var str = "hello world"; str.startsWith('h',3) //3表示位置endsWith() //返回布爾值,表示參數(shù)字符串是否在原字符串的尾部repeat() //返回一個(gè)新字符串,表示將原字符串重復(fù)n次。'x'.repeat(3); //'xxx' repeat(n) n重復(fù)的次數(shù)padStart() //用于頭部補(bǔ)全'x'.padStart(4,'ab') // 'x'.padStart(指定長(zhǎng)度,補(bǔ)全的內(nèi)容) padEnd() //用于尾部補(bǔ)全。'x'.padEnd(4,'ab') // 'x'.padStart(指定長(zhǎng)度,補(bǔ)全的內(nèi)容) //指數(shù)運(yùn)算符(**)2**2 //42**3 //8var a = 3;a**=3; //a=a*a*a a**=2 ==>a=a*aconsole.log(a)數(shù)值擴(kuò)展
//數(shù)值擴(kuò)展//ES5parseInt('10.05');parseFloat('10.05');//es6Number.parseInt('10.05');Number.parseFloat('10.05');//Number.isInteger()用來判斷一個(gè)數(shù)值是否為整數(shù)。//25 25.1Number.isInteger(25) //trueNumber.isInteger(25.0) //trueNumber.isInteger(25.1) //falseNumber.isInteger('10') //falseNumber.isInteger(null) //falseNumber.isInteger(true) //falseNumber.isInteger() //false//Math對(duì)象Math.round(3.6); //四舍五入 4Math.ceil(3.1); //向上 =4Math.floor(3.9); //向下 3//Math.trunc() 用于去除一個(gè)數(shù)的小數(shù)部分,返回整數(shù)部分。Math.trunc(3.1) // 3Math.trunc('3.9') //3Math.trunc(-3.9) //-3//Math.sign()方法用來判斷一個(gè)數(shù)到底是正數(shù)、負(fù)數(shù)、還是零。對(duì)于非數(shù)值,會(huì)先將其轉(zhuǎn)換為數(shù)值。//會(huì)返回五種值://1 參數(shù)為正數(shù) 返回+1//2 參數(shù)為負(fù)數(shù) 返回-1//3 參數(shù)為0 返回0//4 參數(shù)為-0 返回-0//5 參數(shù)為其它值 是非數(shù)值 會(huì)自動(dòng)轉(zhuǎn)為數(shù)值,無法轉(zhuǎn)換 會(huì)返回NANMath.sign(10)Math.sign(-10)Math.sign(0)Math.sign(-0)Math.sign('10')Math.sign(true)Math.sign(false)Math.sign('abc')函數(shù)擴(kuò)展
//函數(shù)擴(kuò)展//ES5function fun(x,y){y = y || 10;console.log(x,y);};fun(100);ES6function fun(x,y=10){console.log(x,y);};fun(100);//rest參數(shù) 表現(xiàn)形式(...變量名) arguments對(duì)象//rest參數(shù)和arguments對(duì)象的區(qū)別:arguments對(duì)象并不是一個(gè)數(shù)組,無法使用數(shù)組中的方法和屬性,rest參數(shù)是一個(gè)數(shù)組function fun(){console.log(arguments[2]) //{}}fun(1,2,3,4,2,3,5,2,6,234,3);//es6function fun(...value){console.log(value) }fun(1,2,3,4,2,3,5,2,6,234,3);//對(duì)比function fun(x,y,...value){value.push(10);console.log(value) }fun(1,2,3,5,7,9);//箭頭函數(shù)var f = v => v; //函數(shù)名 =參數(shù) => 函數(shù)體var f = function(v) {return v;};//參數(shù)為空var f =() => 123;//多個(gè)參數(shù)var f = (a,b) =>a+b;//返回的是一個(gè)對(duì)象var f = function(v) {return {id:1,name:v}};var f = v => ({id:1,name:v});f('abc');//傳默認(rèn)值var f = (x,y=10)=>{console.log(x,y);};f(100);//解構(gòu)var f = ({x=0,y=0}={})=> [x,y];f({x:10,y:8});//箭頭函數(shù) 注意點(diǎn)!!!//1、箭頭函數(shù)不能當(dāng)作構(gòu)造函數(shù),不可以使用new命令 var Fun = ()=>{this.name = 'a';};var f1 = new Fun(); //Fun is not a constructor//2、箭頭函數(shù)沒有原型屬性//每一個(gè)函數(shù)對(duì)象都有prototype屬性,普通對(duì)象沒有,prototype里面有一個(gè)constructor,指向這個(gè)函數(shù);function a(){}a.prototype; // constructor: ? a()//es6var a2 = ()=>{}a2.prototype;//3、不可以使用arguments對(duì)象,該對(duì)象在函數(shù)體內(nèi)不存在 替代 rest參數(shù)var fun = ()=>{console.log(arguments[2]) //{}}fun(1,2,3,4,2,3,5,2,6,234,3); //arguments is not defined//es6var fun = (x,y,...value)=>{value.push(10);console.log(value) }fun(1,2,3,5,7,9);//4、this指向 定義時(shí)所在的對(duì)象 并不是調(diào)用者 this指向外層調(diào)用者var name = 'abc';var obj = {name:'xyz',f:function(){console.log(this.name) //this = obj},f2:()=>{console.log(this.name) //this = window},f3:function(){var f4 = ()=>{console.log(this) } //this = objreturn f4();}};obj.f();obj.f2(); //window.obj.f2() f2函數(shù)是在obj對(duì)象中,而obj是全局的 ,f2固定在全局了//定時(shí)器 thisfunction Fun(){// this.name = 'abc';setTimeout(function(){console.log(this) //this = window},2000)};var f = new Fun();function Fun(){// this.name = 'abc';setTimeout(()=>{console.log(this) //this = Fun()},2000)};var f = new Fun();//作用域var x = 1;function f(x,y = x) {console.log(y)};f(10); //10var x = 1;function f(y = x) {let x = 20;console.log(y)};f(); //1function f(y = x) {let x = 20;console.log(y)};f(); //x is not defined擴(kuò)展運(yùn)算符
//擴(kuò)展運(yùn)算符 ... 將一個(gè)數(shù)組對(duì)象轉(zhuǎn)為用逗號(hào)分參數(shù)序列//數(shù)組合并//es5var a1 = [1,2,3]; //1,2,3var a2 = [4,5,6];a1 = a1.concat(a2); //a1.push(...a2)console.log(a1);//es6a1 = [...a1,...a2,...[7,8],9];a1.push(...a2);//[1,2,3,4,5,6,7,8,9]//深拷貝 淺拷貝var a3 = [1,2,3];var a4 = [...a3];a4[1] = 10;console.log(a3); //[1,2,3];var a3 = [1,{id:2},3];var a4 = [...a3];a4[1].id = 10;console.log(a3); // 淺拷貝 [1,{id:10},3];//擴(kuò)展運(yùn)算與rest的結(jié)合function add(x,y){return x+y};var n = [10,20];add(...n);//restfunction add2(...rest){return rest};add2(...n);//demovar arr = [1,2];function f(...item){ //rest參數(shù)console.log(item); //[0 1 2 3 4 5]console.log(...item); // 0 1 2 3 4 5 擴(kuò)展運(yùn)算符};f(0,...arr,3,4,...[5]) //擴(kuò)展運(yùn)算符//擴(kuò)展運(yùn)算符與解構(gòu)結(jié)合var [a,...b] = [1,2,3,4,5];var [a,...b] = [];var [a,...b] = ['a'];//注意 產(chǎn)生錯(cuò)誤 只能放在參數(shù)的最后一位,否則報(bào)錯(cuò)var [...a,b] = [1,2,3,4,5]; //errorvar [a,...b,c] = [1,2,3,4,5]; //error 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的ES6基础3(扩展)-学习笔记的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ES6基础2(块级作用域、数组对象解构)
- 下一篇: ES6基础4(数据结构)-学习笔记