ES6常用方法
1、字符串
1、模版字符串
反引號包裹 ``
|
1
2
3
4
5
6
7
8
9
|
var name = '張三';
var age = 18;
function fn(arr, v1, v2) {
console.log(arr); // ["他叫", ",今年", "歲了。", raw: Array(3)]
console.log(v1); //張三
console.log(v2); //18
}
fn `他叫${name},今年${age}歲了。` //標簽模版字符串
|
2、repeat() 重復
|
1
2
3
4
|
var name = 'zs';
var res = name.repeat(4)
console.log(name)
console.log(res)
|
3、includes() 表示是否包含某一項，有就返回true 沒有就返回false，同時支持第二個參數，代表從第幾項開始查找(從索引值開始計算)
|
1
2
3
4
|
var r = 'hello';
console.log(r.includes('w'));
console.log(r.includes('e'));
console.log(r.includes('e',2));
|
4、.startsWith() 表示是否是開始位置,同時支持第二個參數，代表從第幾項開始查找(從索引值開始計算) 返回結果是true或者false
|
1
2
|
var m = 'welcome';
console.log(m.startsWith('l',2));
|
5、endsWith() 表示是否是結束位置,同時支持第二個參數，針對前N個字符 返回結果是true或者false
|
1
2
|
var m = 'welcome';
console.log(m.endsWith('o',5));
|
6.String.raw() 未加工 \n 換行
|
1
2
|
console.log('hellow\nworld')
console.log(String.raw`hellow\nworld`)
|
2、數字的常用方法
1、isNaN window 下判斷，如果是一個數 返回false 否則返回true
|
1
2
|
console.log(Number.isNaN("abc"));
console.log(Number('abc'));//NaN
|
//注意：number.isNaN 返回結果為false時，不一定代表該值一定時數字，字符串可以返回false
2、isFinite（） 判斷一個值是否是無限的
|
1
2
|
console.log(Number.isFinite(3));//true 有限的也是非無窮
console.log(Number.isFinite(Infinity))//false 無窮的
|
3、parseInt parseFloat
|
1
2
|
console.log(Number.parseInt("12.3abc"));
console.log(Number.parseFloat("12.3df"));
|
4、isInteger 函數判斷是否是整數。是為true 否則false
|
1
2
|
console.log(Number.isInteger(3));//true
console.log(Number.isInteger(3.2));//false
|
5、 Math.trunc函數：用於去除一個數的小數部分，返回整數部分。
|
1
|
console.log(Math.trunc(3.1))//3
|
6、Math.sign函數：用來判斷一個數到底是正數、負數、還是零。
|
1
2
3
4
|
console.log(Math.sign(3))//1
console.log(Math.sign(-3))//-1
console.log(Math.sign(0))//0
console.log(Math.sign('aaa'))//NaN
|
7、toFixed（）保留幾位小數
|
1
2
|
var num = 111.22423;
console.log(num.toFixed(2));//111.22
|
3、數組的常用方法
1、Array.of() 將任意一組值，轉換成數組。
|
1
2
|
var str = 'abcdef';
console.log(Array.of(str));<
br
>
|
console.log(Array.of('abcdef'));
console.log(Array.of('[18,20]', 's', 'b'));
2、Array.from() 可以將類似數組的對象或者可遍歷的對象轉換成真正的數組。
|
1
2
3
4
5
6
7
|
var btn = document.getElementsByTagName('button');
console.log(btn instanceof Array);//false
console.log(btn instanceof Object);//true
console.log(Array.from(btn) instanceof Array);
var res = Array.from(btn);
console.log(res);
|
3、find() 找出數組中符合條件的第一個元素 找不到返回undefined
|
1
2
3
4
|
var arr = [1, 2, 3, 4, 5]
console.log(arr.find(function (val) {
return val > 2;
}))
|
4、 findIndex() 找出數組中符合條件的第一個元素位置(索引) 找不到返回-1
|
1
2
3
|
console.log(arr.findIndex(function (val) {
return val > 2;
}))
|
5、fill() 填充數組中的每一項或某一項
fill(x) 用x填充數組的所有內容
fill(x,y,z) x是填充內容，y是起始的索引值，z是結束的索引值，不包括該值
|
1
2
3
4
5
6
|
var arr1 = [1, 2, 3, 4];
var res = arr1.fill('a');
console.log(res);
var res1 = arr1.fill('b', 1, 3);
console.log(res1);
|
6、entries() 遍歷器返回鍵值對 k:v
|
1
2
3
|
for (let [i, v] of ['a', 'b'].entries()) {
console.log(i, v);
}
|
7、keys 對數組的索引鍵進行遍歷，返回一個遍歷器
|
1
2
3
|
for (let index of ['a', 'b'].keys) {
console.log(index);
}
|
8、values() 對數組的元素進行遍歷，返回一個遍歷器。
|
1
2
3
|
for (let value of ['a','b'].values()) {
console.log(value1);
}
|
4、對象的常用方法
1、ES6 對象寫法的更新
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var student = {
say:function(){
console.log("說話")
}
}
student.say();
var student1 = {
say(){
console.log('說話')
}
}
student1.say();
|
2、自定義變量名的更新
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var f = "first";
var n = "name";
var s = "say";
var h = "Hello";
var person = {
[f + n]: 'zhang',
[s + h]() {
return "你好嗎？";
}
};
console.log(person.firstname);
console.log(person.sayHello());
|
3、Object.is 作用是全等比較 ===
|
1
2
3
4
5
|
var str = '12';
var str2 = 12;
var str3 = 12;
console.log(str2 === str3);
console.log(Object.is(str2, str3));
|
4、Object.assign 函數 將源對象的屬性賦值到目標對象上。（assign [əˈsaɪn] :分派、指派、委派）
|
1
2
3
4
5
6
|
//目標對象
var target = { "a": 1 };
//源對象
var origin = { "b": 2, "c": 3 };
Object.assign(target, origin);
console.log(target);//{a:1,b:2,c:3}
|
5、Object.getPrototypeOf函數 作用：獲取一個對象的prototype屬性。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function Person() {
}
Person.prototype = {
name: 'zs',
say() {
console.log('我是old');
}
}
let allen = new Person();
allen.say();
Object.getPrototypeOf(allen);//{name: 'zs',say() {console.log('我是old');}
|
|
1
|
}
|
6、Object.setPrototypeOf函數 作用：設置一個對象的prototype屬性。
|
1
2
3
4
5
6
|
Object.setPrototypeOf(
allen, {
say() { console.log('hi') }
}
)
allen.say();//hi
|