生活随笔
收集整理的這篇文章主要介紹了
JavaScript高级之ES5 中的新增方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
3.1 ES5 新增方法概述
ES5 中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括：
數組方法字符串方法對象方法
3.2 數組方法
迭代(遍歷)方法：forEach()、map()、filter()、some()、every()；
1）array.forEach(function(currentValue, index, arr))
currentValue：數組當前項的值index：數組當前項的索引arr：數組對象本身
2）array.filter(function(currentValue, index, arr))
filter() 方法創建一個新的數組，新數組中的2元素是通過檢查指定數組中符合條件的所有元素,主要用于篩選數組注意它直接返回一個新數組currentValue: 數組當前項的值index：數組當前項的索引arr：數組對象本身
3）array.some(function(currentValue, index, arr))
some() 方法用于檢測數組中的元素是否滿足指定條件. 通俗點 查找數組中是否有滿足條件的元素注意它返回值是布爾值, 如果查找到這個元素, 就返回true , 如果查找不到就返回false.如果找到第一個滿足條件的元素,則終止循環. 不在繼續查找.currentValue: 數組當前項的值index：數組當前項的索引arr：數組對象本身
查詢商品案例：
把數據渲染到頁面中 (forEach)根據價格顯示數據 （filter）根據商品名稱顯示數據(some)
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><meta http
-equiv
="X-UA-Compatible" content
="ie=edge"><title
>Document
</title
><style
>table
{width
: 400px
;border
: 1px solid #
000;border
-collapse
: collapse
;margin
: 0 auto
;}td
,th
{border
: 1px solid #
000;text
-align
: center
;}input
{width
: 50px
;}.search
{width
: 600px
;margin
: 20px auto
;}</style
>
</head
><body
><div
class="search">按照價格查詢
: <input type
="text" class="start"> - <input type
="text" class="end"> <button
class="search-price">搜索
</button
> 按照商品名稱查詢
: <input type
="text" class="product"> <button
class="search-pro">查詢
</button
></div
><table
><thead
><tr
><th
>id
</th
><th
>產品名稱
</th
><th
>價格
</th
></tr
></thead
><tbody
></tbody
></table
><script
>var data
= [{id
: 1,pname
: '小米',price
: 3999}, {id
: 2,pname
: 'oppo',price
: 999}, {id
: 3,pname
: '榮耀',price
: 1299}, {id
: 4,pname
: '華為',price
: 1999}, ];var tbody
= document
.querySelector('tbody')var search_price
= document
.querySelector('.search-price')var start
= document
.querySelector('.start')var end
= document
.querySelector('.end')var product
= document
.querySelector('.product')var search_pro
= document
.querySelector('.search-pro')setData(data
)function setData(mydata) {tbody
.innerHTML
= ''mydata
.forEach(function(value) {var tr
= document
.createElement('tr')tr
.innerHTML
= `<td>${value.id}</td><td>${value.pname}</td><td>${value.price}</td>`tbody
.appendChild(tr
)})}search_price
.addEventListener('click', function() {var newData
= data
.filter(function(value) {return value
.price
>= start
.value
&& value
.price
<= end
.value
})console
.log(newData
)setData(newData
)})search_pro
.addEventListener('click', function() {var arr
= []data
.some(function(value) {if(value
.pname
=== product
.value
) {arr
.push(value
)return true }})setData(arr
)})</script
>
</body
></html
>
3.3 字符串方法
trim() 方法會從一個字符串的兩端刪除空白字符。
str.trim()
trim() 方法并不影響原字符串本身，它返回的是一個新的字符串。
3.4 對象方法
Object.keys() 用于獲取對象自身所有的屬性
Object.keys(obj)
效果類似 for…in
返回一個由屬性名組成的數組
Object.defineProperty() 定義對象中新屬性或修改原有的屬性。(了解)
Object.defineProperty(obj, prop, descriptor)
obj：必需。目標對象
prop：必需。需定義或修改的屬性的名字
descriptor：必需。目標屬性所擁有的特性
總結
以上是生活随笔為你收集整理的JavaScript高级之ES5 中的新增方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
