Earlier shared four related ES6 related technologies, such as want to know more, you can check the following connection
"ES6 study notes (a): Easy to get to know object-oriented programming, and object-oriented class"
"ES6 study notes (b): to teach you Fun Object class inheritance and class "
" ES6 study notes (c): teach you to achieve the tab bar CRUD functionality with js object-oriented thinking "
" ES6 study notes (d): teach you to understand the new syntax for ES6 "
Article Directory
- Array extension methods
- Extended operator (developing syntax)
- Constructor method: Array.from ()
- Examples of the method: find ()
- Examples of the method: findIndex ()
- Examples of the method: includes ()
- String extension method
- Template string
- Examples of the method: startsWith () and endsWith ()
- Examples of the method: repeat ()
- Set data structure
- to sum up
Array extension methods
Extended operator (developing syntax)
Extended operator to convert an array or an object as a parameter sequence separated by commas
// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
let arr = [1, 2, 3]
console.log(...arr) // 1 2 3
Extended operator can be applied to merge array
// 扩展运算符应用于数组合并
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]
// 合并数组的第二种方法
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
arr1.push(...arr2)
console.log(arr1) // [1, 2, 3, 4, 5, 6]
Using the extended operator to traverse the array of classes or objects into the real array
<div>1</div>
<div>2</div>
<div>3</div>
let oDivs = document.getElementsByTagName('div')
console.log(oDivs) //HTMLCollection(3) [div, div, div]
const arr = [...oDivs];
console.log(arr) //(3) [div, div, div]
Constructor method: Array.from ()
Or converting the array can traverse the object class for the real array
let arrLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
let arr2 = Array.from(arrayLike) //['a', 'b', 'c']
The method can also accept a second parameter, the array acts like the map method, the elements to be processed, the processed value into the array returned.
let arrLike = {
'0': 1,
'1': 2,
'2': 3,
length: 3
}
let arr2 = Array.from(arrLike, item => item * 2)
console.log(arr2) //(3) [2, 4, 6]
Examples of the method: find ()
The first is used to find a qualified member of the array, if not found returns undefined
let arr = [{
id: 1,
name: 'lanfeng'
},
{
id: 2,
name: 'qiuqiu'
}
];
let target = arr.find((item, index) => item.id === 2)
console.log(target) //{id: 2, name: "qiuqiu"}
Examples of the method: findIndex ()
It used to find the first matching array member position, or -1 if not found
let arr = [1, 5, 10, 15]
let index = arr.findIndex(value => value > 9)
console.log(index); //2
Examples of the method: includes ()
It represents an array contains the given value and returns a Boolean value
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
String extension method
Template string
ES6 create a string of new ways to define the use of anti pilot number
template string can wrap
the template string can call the function
let name = `zhangsan`
let sayHello = `hello, my name is ${name}`
console.log(sayHello ) // 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>`;
console.log(html)
// 在模板字符串中是可以调用函数的
const sayHello = function() {
return 'hello'
}
let greet = `${sayHello()}, lanfeng`
console.log(greet) //hello, lanfeng
Examples of the method: startsWith () and endsWith ()
startsWith (): whether the parameter string representing the head of the string, returns a boolean
endsWith (): Indicates whether the parameter string at the end of the string, returns a Boolean value
let str = 'hello world !'
str.startsWith('hello') // true
str.endsWith('!') //true
Examples of the method: repeat ()
The method represents a repeat n times the original string, returns a new string
const str1 = 'x'.repeat(3)
console.log(str1) // xxx
const str2 = 'hello'.repeat(2)
console.log(str2) // hellohello
Set data structure
ES6 provided Set new data structure. It is similar to the array, but the value of the member are unique, no duplicates
Set itself is a constructor to generate a data structure Set
Set function can accept an array as a parameter, for initialization
const set = new Set([1, 2, 3, 4, 4])
console.log(set.size) // 4 数组去重
console.log(set) //Set(4) {1, 2, 3, 4}
//转换成数组
console.log([...set]) //[1, 2, 3, 4]
Examples of methods
- add (value): add some value, return Set structure itself
- delete (value): delete a value, it returns a Boolean value that indicates whether the deleted successfully
- It has (value): returns a Boolean value that indicates whether the value is
- Set the members of the
clear (): remove all members, no return value
const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值
s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
Traversal
Examples of Set Structure and arrays, also has forEach method for performing a certain operation on each member, there is no return value
const set = new Set([a, b, c])
set.forEach(item => {
console.log(item)
})
to sum up
Some examples of methods and usage of these surfaces contain this article is mainly shared objects ES6 built-in expansion of extension methods of Array, String extension method, Set data structure.