當前位置：首頁 >

项目中非常有用并且常见的ES6语法

發布時間：2023/11/27 29 豆豆

生活随笔收集整理的這篇文章主要介紹了项目中非常有用并且常见的ES6语法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天閑著無事，梳理下ES6常見的語法知識點；除此之外的知識點自行細化和梳理！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//ES6字符串擴展方法,三個方法都支持第二個參數，表示開始搜索的位置;
            let str = 'Hello world!';console.log(str.includes('o')) // true ----表示是否找到了參數字符串;類似ES5 indexOf()
            console.log(str.startsWith('Hello')) // true ----表示參數字符串是否在原字符串的頭部;
            console.log(str.endsWith('!')) // true ----表示參數字符串是否在原字符串的尾部;//ES6字符串擴展方法----模板字符串
            let hello = '你好';let str1 = `${hello}，這節課學習字符串模板`;console.log(str1); //你好，這節課學習字符串模板,省去拼接的煩惱；
            alert `123`// 等同于
            alert(123)//ES6解構賦值
            let res = {id: 1,status: "OK",list: [{name: 'bob',age: 20}]}let {id,status,list} = res;console.log(id, status, list);// 1, "OK", [{name: 'bob',age: 20}]//const 聲明常量 === var a = 1, b = 2, c = 3;or const a = 1;const b = 2;const c = 3;
            const [a, b, c] = [1, 2, 3];console.log(a, 'aaaaa'); //1 "aaaaa"
            console.log(b, 'bbbbb'); //2 "bbbbb"
            console.log(c, 'ccccc'); //3 "ccccc"//使用擴展運算符（...）拷貝數組
            let test = [1, 2, 3, 4, 5]let [...test1] = testtest[2] = 5console.log(test, '原數組') //[1, 2, 5, 4, 5] "原數組"
            console.log(test1, '深拷貝的數組') //[1, 2, 3, 4, 5] "深拷貝的數組"//不要在模塊輸入中使用通配符。因為這樣可以確保你的模塊之中，有一個默認輸出（export default）。// bad//import * as myObject from './importModule';// good//import myObject from './importModule';//reset參數---rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中function add(...values) {let sum = 0;for(var val of values) {sum += val;}return sum;}console.log(add(2, 5, 3)) // 10//箭頭函數var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) {return num1 + num2;};console.log(sum(1, 4), '求和') //5 "求和"//如果只有單個參數var fun = age => age; //or var fun = (age) => age;// 等同于var fun = function(age) {return age;};console.log(fun(20), '箭頭函數單個參數') //20 "箭頭函數單個參數"//擴展運算符加箭頭函數
            const sumList = (...num) => num;console.log(sumList(1, 2, 3, 4, 5), '擴展運算符運用場景一') //?[1, 2, 3, 4, 5] "擴展運算符運用場景一"
            const getList = (name, ...obj) => [name, obj];console.log(getList(1, 2, 3, 4, 5), '擴展運算符運用場景二') // [1,[2,3,4,5]] "擴展運算符運用場景二"//ES6數組擴展******將一個數組添加到另一個數組的尾部// ES5的 寫法var test2 = [0, 1, 2];var test3 = [3, 4, 5];//console.log(test2.push(test3),'push直接跟數組')// 4 "push直接跟數組" push方法的參數不能是數組;
            Array.prototype.push.apply(test2, test3);console.log(test2, '沒用...前') //[0, 1, 2, 3, 4, 5] "沒用...前"// ES6 的寫法
            let test4 = [0, 1, 2];let test5 = [3, 4, 5];test4.push(...test5);console.log(test4, '使用...后') //[0, 1, 2, 3, 4, 5] "使用...后"//ES6將類數組轉為數組的方法；dom類似除了document.getElementById()之外的找到的dom都為類數組;另外有length屬性的;
            let toList = {'0': 'bob','1': '20','2': 'man',length: 3};// ES5的寫法var newArr = [].slice.call(toList);console.log(newArr, '[].slice.call的方法') //["bob", "20", "man"] "[].slice.call的方法"// ES6的寫法
            let newArr1 = Array.from(toList);console.log(newArr1, 'Array.from方法') //["bob", "20", "man"] "Array.from方法"//find方法的回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組;如果沒有符合條件的成員，則返回undefined。
            let numList = [1, 5, 15, 20, 25];let newNumList = numList.find((value, index, arr) => {return value > 20;}) console.log(newNumList,'數組find方法')//25 "數組find方法"//findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。
            let numLogs = [5, 10, 15, 20];let newNumLogs = numLogs.findIndex((value, index, arr) => {return value > 10}) console.log(newNumLogs,'數組findIndex方法')//2 "數組findIndex方法"//ES6數組的 includes()  第一個參數是否包含一個指定的值，第二個參數表示搜索的起始位置，默認為0;//如果第二個參數為負數，則表示倒數的位置，如果這時它大于數組長度（比如第二個參數為-4，但數組長度為3），則會重置為從0開始;//沒有該方法之前，我們通常使用數組的indexOf方法，檢查是否包含某個值;
            console.log([1, 2, 3].includes(4),'includes一個參數')//false "includes一個參數"
            console.log([1, 2, 3].includes(3, -1),'includes兩個參數')//true "includes兩個參數"//ES6對象的結構和擴展運算符的運用*****...擴展運算符 解構賦值必須是最后一個參數(數組和對象都是一樣) 解構賦值的拷貝是淺拷貝；
            let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };console.log(x,'對象的第一個值');//1 "對象的第一個值"
            console.log(y,'對象的第二個值');//2 "對象的第二個值"
            console.log(z,'對象的第三個值');//{a: 3, b: 4} "對象的第三個值"
            let obj = {name:'bob',age:20}let obj1 = {sex:'sex',cash:22}let newObj = {...obj,...obj1};//等同于 let newObj = Object.assign({}, obj,obj1);
            console.log(newObj,'擴展運算符合并對象')//{name: "bob", age: 20, sex: "sex", cash: 22} "擴展運算符合并對象"//ES6 async 函數   await 是順序執行的，Promise.all() 是并行的;function fun1(){console.log('第一')//第一
            }function fun2(){console.log('第二')//第二
            }function fun3(){console.log('第三')//第三
            }async function testasync () {try {await fun1()await fun2()await fun3()} catch (error) {console.log(error)}}testasync ();//let [res1, res2, res3] = await Promise.all([fun1(), fun2(),fun3()])//async 函數中 return 的結果將作為回調的參數;
            async function testCallback () {return 'this is a test async function'}testCallback().then(userName => console.log(userName))// this is a test async function</script></body></html>

轉載于:https://www.cnblogs.com/lhl66/p/9555903.html

總結

以上是生活随笔為你收集整理的项目中非常有用并且常见的ES6语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。