ES 6文法の新特性
6225 ワード
1 smbolデータタイプ
// 。
var str = Symbol();
var str2 = Symbol();
console.log(str == str2); //false
var str3 = Symbol(2);
var str4 = Symbol(2);
console.log(str3 == str4); //false
2セットデータタイプ// set 1 2 3 -> -> 4-> -> ->
var set = new Set([1, 2, 3]);
console.log(set.size); //3
set.add(4);
console.log(set.size); //4
set.clear();
console.log(set.size); //0
console.log("---------------------");
// set 1 2 3 4 3 4 5
// :new Set([1, 2, 3, 4, 3, 4, 5]) set
// : [...Set ]
var arr = [...new Set([1, 2, 3, 4, 3, 4, 5])];
console.log(arr) //[1, 2, 3, 4, 5]
3 Mapデータ// a :111 -> -> ['b'] :222 ->
var map = new Map();
map.set('a', 111);
console.log(map.get("a"));
// , ,
map.set(['b'], 222);
console.log(map.get(['b'])); //undefined
//
var temp = ['b'];
map.set(temp, 222);
console.log(map.get(temp)); //222
console.log("=================");
//
console.log(map.keys());
//
console.log(map.values());
4サイクルvar arr = ['a', 'b', 'c'];
//for
for (var i = 0; i < arr.length; i++) {
console.log(" :", i, ' :', arr[i]);
}
// .forEach
arr.forEach((item, index) => {
console.log(" :", index, ' :', item);
})
//for in ( , , , )
for (var index in arr) {
console.log(" :", index, ' :', arr[index]);
}
//for of ,
for (const val of arr) {
console.log(' :', val);
}
var set = new Set([1, 2, 3, 4, 5]);
for (const iterator of set) {
console.log(' :', iterator);
}
5関数の拡張 //es6
function fn(name) {
var name = name ? name : "";
}
//es6
function fn(name = " ", sex = " ") {
console.log(name, sex);
}
fn(); //
fn(" ");//
fn(" "," ");//
6矢印関数 // es6 ,3 ,1 ,
//function fn(name , age, sex){
//console.log(name,age,sex)
// }
// :function fn ( 1,.. n){}
// :( 1,.. n)=>{}
// : ,
var fn = () => console.log(" ");
var fn1 = name => console.log(" ");
var fn2 = (name, age, sex) => console.log(" ");
fn(); //
fn1("test"); //
fn2("test", 12, " "); //
7レスパラメータ // function fn() {
// console.log(arguments);
// for (let index = 0; index < arguments.length; index++) {
// const element = arguments[index];
// console.log(element);
// }
// }
// fn(1,2,3,4,5,6,7,);
// : ... vals
// ... vals
function fn(...vals) {
console.log(vals);
}
fn(1, 2, 3, 4, 5, 6);
// rest arguments
// : rest
function fn2(val, ...vals) {
console.log(val); //2
console.log(vals); // 3 4 5 6
}
fn2(2, 3, 4, 5, 6);
8文字列の拡張var str = "test";
console.log(str.repeat(3)); //testtesttest
//
var name = " ";
//
var html = "";
html += '';
html += '- ' + name + "
";
html += '- ' + name + "
";
html += '
';
console.log(html); //-
-
// ``
var html2 = `
- ${name}
- ${name}
`;
console.log(html2);
//
// -
// -
//
9クラス // stu ( )
//es5
//this var
function Stu(name, age) {
this.name = name;
this.age = age;
this.sayHay = function () {
console.log(this.name, this.age);
}
}
var stuObj = new Stu(" ", 800);
console.log(stuObj); //Stu {age: 800,name: " ",sayHay: ƒ ()__proto__: Object}
console.log(stuObj.name); //
console.log(stuObj.age); //800
stuObj.sayHay(); // 800
//es6
class Stu2 {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHay() {
console.log(this.name, this.age);
}
}
var stuObj2 = new Stu2(' ', 900);
console.log(stuObj2); //Stu2 {name: " ", age: 900}
console.log(stuObj2.name); //
console.log(stuObj2.age); //900
stuObj2.sayHay(); // 900
10配列の拡張 // 。 ,
// Array.prototype.find = Array.prototype.find || function (callback) {
// for (var i = 0, length = this.length; i < length; i++) {
// var item = this[i];
// if (callback(item)) {
// return item;
// }
// }
// return null;
// };
var array1 = [5, 12, 8, 130, 44];
// find() 。 undefined。
var found = array1.find(element => {
return element == 12;
});
//findIndex() 。 -1
var index = array1.findIndex(item => {
return item == 12;
})
console.log(found); // 12
console.log(index); // 1