ES6教程-字符串，函數的參數，瞭解函數的arguments對象，js面向對象，設計模式-單例模式，解構賦值

時間 2019-12-18

標籤 es6 教程字符串函數參數瞭解 arguments 對象面向對象設計模式解構賦值欄目 JavaScript 简体版

原文原文鏈接

前言

主要講解了ES6對字符串的拓展，包括includes，startsWith和endsWith，另外增長了字符串模板。html

Start

includes()是否包含 startsWith()以什麼開頭 endsWith()以什麼結尾設計模式

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-字符串</title>
</head>
<body>
 <script>
   let str = "你怎麼一直在這";
   let res = str.includes('一');
   console.log(res);
 </script>
</body>
</html>
複製代碼

返回結果爲true數組

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-字符串</title>
</head>
<body>
 <script>
   let str = "你怎麼一直在這";
   let res = str.startsWith('你');
   console.log(res);
 </script>
</body>
</html>
複製代碼

返回結果爲truebash

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-字符串</title>
</head>
<body>
 <script>
   let str = "你怎麼一直在這";
   let res = str.startsWith('你');
   if(str.startsWith('你')){
     執行語句;
   }else if(語句){
     執行語句;
   }else{  
     執行語句;
   }
 </script>
</body>
</html>
複製代碼

str.endsWith();app

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-字符串</title>
</head>
<body>
 <script>
   let str = "你怎麼一直在這";
   alert( str.endsWith('這'));
 </script>
</body>
</html>
複製代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-字符串</title>
</head>
<body>
 <script>
   let mail = '34234@qq.com';
  
   if( mail.endsWith('@qq.com') || main.endsWith('@163.com') ){
      alert('輸入正確');
    }else{
      alert('請輸入郵箱');
    }
 </script>
</body>
</html>
複製代碼

字符串模板函數

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-字符串</title>
</head>
<body>
 <script>
   let str2 = `
               <ul>
                 <li>內容</li>
               </ul>
               `;
    console.log(str2);
 </script>
</body>
</html>
複製代碼

函數的參數

函數的參數，展開運算符：...ui

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-函數參數</title>
</head>
<body>
 <script>
  function fun(a,b){
    console.log(a,b);
  }
 
  fun(1,2);
 </script>
</body>
</html>
複製代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-函數參數</title>
</head>
<body>
 <script>
  function fun(a,b,...args){
    console.log(a,b);
    console.log(...args);
  }
  fun(1,2,3,4,5);
  fun(1,2);
 </script>
</body>
</html>
複製代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-函數參數</title>
</head>
<body>
 <script>
  let arr = [1,2,3];
  function fun(a,b,c){
   console.log(a);
   console.log(b);
   console.log(c);
  }
  fun(arr[0],arr[1],arr[2]);
  fun(...arr);
 </script>
</body>
</html>
複製代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-函數參數</title>
</head>
<body>
 <script>
  let arr = [1,2,3];
  let arr1=[4,5,6];
  let array=[...arr,...arr1];
  console.log(array);
 </script>
</body>
</html>
複製代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ES6-函數參數</title>
</head>
<body>
 <script>
  function fun(a=1,b=2,c=3){
   console.log(a,b,c);
  }
  fun();
  // fun(4,5,6);
 </script>
</body>
</html>
複製代碼

瞭解函數的arguments對象

arguments爲一個對象，類數組this

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
   function add(a,b){
    return a+b;
   }
   console.log(add(1,2);
 </script>
</body>
</html>
複製代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
   function add(){
    // console.log( arguments); // 返回對象
    return arguments[0] + arguments[1];
   }
   add(1,2);
   console.log( add(1,2) );
 </script>
</body>
</html>
複製代碼

js面向對象

// var student = {}; //建立對象
var student = new Object();
student.name = "dashu";
student.age = 12;
student.job = "school student";
student.study = function(){
 alert("study");
}
student.study();
複製代碼

var student = {
 name : "dashu",
 age : 12;
 job: "school student",
 study : function(){
  alert("study");
  }
};
student.study();
複製代碼

數據屬性js中的spa

var student = {
 name: "dashucoding"
}
alert(student.name);
複製代碼

var student={};
Object.defineProperty(student,"name",{
 writable:true,
 value: "dashucoding"
});
alert(student.name);
複製代碼

configurable表示可否經過delete來刪除屬性值，默認爲true Enumerable表示可否經過for-in來枚舉對象的屬性值，默認爲true writable表示可否修改屬性值，默認爲true設計

設計模式-單例模式

var mask = function(){
 document.body.appendChild(document.createElement('div'));
}
var obtn = document.getElemetnById("btn");
obtn.onclick = function(){
 mask();
}
複製代碼

// 單例模式
var singleton = function(){
 var res;
 return function(fn){
  return res||(res=fn.apply(this,arguments))
 }
}();
var obtn = document.getElementById("btn");
obtn.onclick=function(){
 singleton(function(){
  return document.body.appendChild(document.createEelement('div'));
 })
}
複製代碼

解構賦值

解構賦值爲一種表達式，用來獲取數據

let arr=[1,2,3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
複製代碼

let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c);
複製代碼

let arr = {
 a:1,
 b:2,
 c:3
}
let (a,b,c) = arr;
// let(a,b,c) = [1,2,3];
console(a,b,c);
複製代碼

結語

本文主要講解 ES6教程-字符串，函數的參數，瞭解函數的arguments對象，js面向對象，設計模式-單例模式，解構賦值
下面我將繼續對其餘知識深刻講解，有興趣能夠繼續關注
小禮物走一走 or 點贊

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。