JS 고급 - ES6 문법, let / const, 할당 해제, 화살표 함수, 나머지 매개 변수 수신, lES 6 내 장 된 대상 확장 (연산 자 확장, 템 플 릿 문자열,) set 데이터 구조
44687 단어 JS 고급
> ECMA
> ES2016 ES6
ES6 문법 추가
let/const
let 변수 특징
1、 、{ }
2、let
3、 、
/* ------- let ------- */
var num = 10
if (true) {
console.log(num);
let num = 20;
}
num let
let ，
//
let arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
} }
arr[0](); //0
arr[1]();//1
// let 、
// 、 i
const 변수 특징 성명 상수, 상수 값 (메모리 주소) 변경 할 수 없 는 데 이 터 를 저장 하 는 데 사용 할 수 있 습 니 다.
1、
2、
3、 ( )
//
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b'];
ary = ['a', 'b']; // Assignment to constant variable
총결산
var
let
cont
전역 적 역할 영역
블록 급 역할 영역
블록 급 역할 영역
변수 향상
변수 증가 없 음
변수 증가 없 음
값 변경 가능
값 변경 가능
값 을 바 꿀 수 없다
할당 해제
본질 적 으로 이런 표기 법 은 '
' 에 속 하 는데 등호 양쪽 의 모델 이 같 으 면 왼쪽 의 변 수 는 대응 하 는 값 배열 의 재 구성 이 배열 에서 값 을 추출 하고 해당 하 는 위치 에 따라 변수 에 값 을 부여 한다.let [a, b, c, d] = [1, 2, 3];
console.log(a)//1
console.log(b)//2
console.log(c)//3
console.log(d);//undefined
// ， undefined
대상 재 구성 속성 이 일치 하면 변 수 를 할당 합 니 다.
let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
let { name: myName, age: myAge } = person; // myName myAge
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
:name person name 、 name myName
，
， ， undefined
， ， ，
화살표 함수
：
：1、 this ， this this
2、 、
3、 ， ，
:` (window)`
() => {} //()： ； =>： ， ；{}：
const fn = () => {}// fn
// 、 、
function sum(num1, num2) { return num1 + num2; }
//es6
const sum = (num1, num2) => num1 + num2;
//
function fn (v) { return v; }
//es6
const fn = v => v;
// this ， this this
const obj={name:' '}
function fn () {
console.log(this);//this obj
return () => {
console.log(this);
//this ，
// fn ， fn obj ， this obj
}
}
const resFn = fn.call(obj);
resFn();
// : this
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say();
this、 this、 obj 、
、 、 this(window)、
남 은 매개 변수
일반적으로 함수 의 형 삼 에 쓰 이 는 역할: 1. 수량 이 정 해 지지 않 은 매개 변 수 를 사용 할 때 2. 나머지 매개 변수 와 재 구성 을 결합 하여 사용 합 니 다.
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
let ary1 = [' ' , ' ', ' '];
let [s1, ...s2] = ary1;
console.log(s1)//
console.log(s2)//[' ', ' ']
// s2 ... s2
lES 6 내장 대상 확장
Array 확장 방법 확장 연산 자
：` `
//
let ary = ["a", "b", "c"];
// ...ary // "a", "b", "c"
console.log(...ary)//a b c
console.log("a", "b", "c")//a b c
//
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// // ...ary1 // 1, 2, 3
// // ...ary1 // 4, 5, 6
let ary3 = [...ary1, ...ary2];//
console.log(ary3)//[1, 2, 3, 4, 5, 6]
//
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
ary1.push(...ary2);
console.log(ary1)//[1, 2, 3, 4, 5, 6]
// ... push
//
var oDivs = document.getElementsByTagName('div');
console.log(oDivs)//HTMLCollection(6) [div, div, div, div, div, div]
var ary = [...oDivs];
ary.push('a');
console.log(ary);//(7) [div, div, div, div, div, div, "a"]
// 、
// 、
// 、 push()
()
let newInfo = {
...oldInfo
}
구조 함수 방법:
Array.from()
//
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
、 ，
var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary)
// ： ，
：find(）
， undefined
let ary = [{
id: 1,
name: ' '
}, {
id: 2,
name: ' '
}];
//
let target = ary.find((item, index) => item.id == 2);// ， id 2 ， ，
console.log(target)
：findIndex(）
， -1
let ary = [10, 20, 50];
let index = ary.findIndex(item => item > 15);
console.log(index)//1
：includes()
，
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
String 확장 방법 템 플 릿 문자열
ES6 ，
let name = `zhangsan`;
()
let name = ' ';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
()
let result = {
name: 'zhangsan',
age: 20,
sex: ' '
}
let html = `
${result.name}
${result.age}
${result.sex}
`;
()
const sayHello = function () {
return ' ';
};
let greet = `${sayHello()} `;
console.log(greet); //
：startsWith() endsWith()
startsWith()： ，
endsWith()： ，
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
：repeat()
repeat n ，
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
set 데이터 구조 set 는 데이터 집합 으로 데 이 터 를 저장 하 는 set 는 배열 과 유사 하 며 구성원 값 은
이 고 (중복 값 은 여과)Set ， Set
const s = new Set();
Set ，
const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}//
console.log(set.size);// set 、set
set.size : set 、
add(value)： ， Set
delete(value)： ， ，
has(value)： ， Set
clear()： ，
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 // ： ，
// const s1 = new Set();
// console.log(s1.size)
// const s2 = new Set(["a", "b"]);
// console.log(s2.size)// s2
// set
// const s3 = new Set(["a","a","b","b"]);
// console.log(s3.size)
// const ary = [...s3];
// console.log(ary)
// const s4 = new Set();
// set add
// s4.add('a').add('b');
// console.log(s4.size)
// set delete
// const r1 = s4.delete('c');
// console.log(s4.size)
// console.log(r1);
// set has
// const r2 = s4.has('d');
// console.log(r2)
// set clear
// s4.clear();
// console.log(s4.size);
// set
// const s5 = new Set(['a', 'b', 'c']);
// s5.forEach(value => {
// console.log(value)
// })
// const s6 = ["1", "2", "3", "4"];
// s6.forEach(value => console.log(value))// s6
좋은 웹페이지 즐겨찾기
