ES6 기본 문법 - 연구 노트

첫째, 무엇 ES6입니다

ES는 표준화 ECMA 국제기구, 표준화 된 사양의 개발 스크립트 언어입니다, ECMAScript를 의미합니다. ES6 실제로 일반적인 기준 인 ES2015 후속 버전을 의미한다.

장점 :
변수 업그레이드 기능은 예측 불가능 성 프로그램이 실행이 추가
동일한 기능을 달성하기 위해, 너무 느슨 문법, 다른 사람들은 다른 코드를 작성할 수 있습니다.

두, ES6 새로운 구문

2.1하자
선언 변수에 사용되는 ES6 새로운 키워드를.

• 어떤 변수 리프트가 없습니다

 console.log(a); // a is not defined 
  let a = 20

• 임시 데드 존
  변수를 선언하는 키워드를 사용하여이의 루프 변수가 전역 변수가된다 방지 할 수 있습니다, 블록 레벨 범위가 보자.

if (true) {
			let num = 10;
			console.log(num);   //10
			
		}
           console.log(num);  //not defined

2.2const의
동작 : 상수 선언은 상수 양이 변경 될 수없는 값 (메모리 어드레스)이다.

• 블록 레벨의 범위를 갖는

if (true) {
 const a = 10; }
console.log(a) // a is not defined

• 할당은 상수를 선언해야 할 때

const PI;    // Missing initializer in const declaration

• 상수 값 후 값이 수정 될 수 없다.

const PI = 3.14;
PI = 100; // Assignment to constant variable. 

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 数据结构里面的值可以改
ary = ['a', 'b']; // Assignment to constant variable.

2.3하자, CONST, VAR의 차이

했다	허락하다	CONST
기능 수준 범위	블록 레벨 범위	블록 레벨 범위
변수 리프트	어떤 변수 리프트가 없습니다	어떤 변수 리프트가 없습니다
당신은 값을 변경할 수 있습니다	당신은 값을 변경할 수 있습니다	변경이 불가

2.4 destructuring 할당
ES6 변수에 대응하는 위치에서 상기 어레이로부터 추출 된 값을 허용했다. 객체는 해체를 달성 할 수있다.

• 해체 배열

// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
	//如果解构不成功，变量的值为undefined。
	let [a, b, c, d, e] =[1,2,3];
	console.log(a)  //1
	console.log(b)  //2
	console.log(c)  //3
	console.log(d) //undefined
	console.log(e) //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

2.5 함수 화살표
새로운 함수가 정의되는 실시 예를 ES6.

• 문법

(参数) => {函数体} 
const fn = () => {}

//函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function sum(num1, num2) {
 return num1 + num2; }
const sum = (num1, num2) => num1 + num2;
//如果形参只有一个，可以省略小括号
function fn (v) {
	  return v; 
 }
const fn = v => v;

• 이 기능의 맥락에서 정의 된 위치로이 키워드,이 화살표의 기능, 포인트를 결합하지 않는 기능을 화살표.

		var age = 100;

		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}

		obj.say();   //alter的是100

2.6 파라미터 나머지
나머지 매개 변수 및 해체를 사용하여

let students = ['wangwu', 'zhangsan', 'lisi'];
//...s2将剩余的实参归成一个数组
let [s1, ...s2] = students;
console.log(s1); // 'wangwu' 
console.log(s2); // ['zhangsan', 'lisi']

나머지 합계 함수 파라미터와 쓰기

const sum = (...args) => {
			let total = 0;
			args.forEach(item => total += item);
			return total;
		};

		console.log(sum(10, 20)); //30
		console.log(sum(10, 20, 30));//60
		

세, 내장에있는 개체의 ES6 확장

• 연장 방법 (1) 어레이

3.1.1, 확장 연산기 (현상 구문)
확장 연산기 어레이의 파라미터의 시퀀스로 분할 할 수 콤마로 분리된다.

	   // 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		// ...ary 等于 "a", "b", "c"
		let 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];
		let ary3 = [...ary1, ...ary2];
		console.log(ary3)  //[1，2，3，4，5，6]
		ary1.push(...ary2); // 合并数组的第二种方法
		console.log(ary1) //[1，2，3，4，5，6]

    // 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div');
		 var ary = [...oDivs];		

3.1.2 생성자있어서 Array.from ()는
배열로 변환하거나 실제 어레이 객체 클래스를 통과.

var arrayLike = {
			"0": "1",
			"1": "2",
			"length": 2
		}
		//将类数组或可遍历对象转换为真正的数组
		var ary = Array.from(arrayLike);
	   console.log(ary)  //["1", "2"]
	   
	   //方法还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组。
		var ary = Array.from(arrayLike, item => item * 2)
		console.log(ary)  //[2, 4]

3.1.3 인스턴스 방법 : 발견은 ()
를 찾을 수 없습니다 반환 정의되지 않은 경우, 첫 번째 자격 배열 구성원을 찾을 수

var ary = [{
			id: 1,
			name: '张三'
		}, {
			id: 2,
			name: '李四'
		}];
		let target1 = ary.find((item, index) => item.id == 2);
		console.log(target1);  //Object id: 2 name: "李四"
		let target2 = ary.find(item => item.id == 3);
		console.log(target2);//undefined

3.1.4 인스턴스있어서 findIndex ()는
위치의 조건에 부합하는 상기 어레이의 제 1 부재를 찾거나 발견되지 않으면 -1

let ary = [1, 5, 10, 15];
let index1 = ary.findIndex((value, index) => value > 9);
let index2 = ary.findIndex((value, index) => value > 20);
console.log(index1); // 2
console.log(index2); // -1

3.1.55 실시 예있어서, ()를 포함
어레이는, 소정의 값을 포함하는 부울 값을 반환 여부를 나타낸다.

	let ary = ["a", "b", "c"];
		let result1 = ary.includes('a')  
		let result2 = ary.includes('e')
		console.log(result1) //true	
		console.log(result2) //false

• (2) 문자열 확장 메쏘드

3.2.1 템플릿 문자열
새로운 ES6는, 안티 인용 정의의 사용 방법의 캐릭터를 만들 수 있습니다.

//用反引号定义
let name = `zhangsan`;

장점 :
템플릿 문자열 변수를 해결할 수 있습니다.
래핑 할 수 템플릿 문자열
템플릿 문자열에서 함수를 호출 할 수 있습니다.

//模板字符串中可以解析变量
let name = `张三`;
		let sayHello = `Hello, 我的名字叫${name}`;
		console.log(sayHello);   //Hello, 我的名字叫张三
		
//在模板字符串中可以调用函数
	const fn = () => {
			return '我是fn函数'
		}

		let h = `我是模板字符串 ${fn()}`;
		console.log(h);  //我是模板字符串 我是fn函数

		
//模板字符串中可以换行
let html = `
			<div>
				<span>${name}</span>
			</div>
		`;
		console.log(html);
		//输出：  <div>
		//		    <span>张三</span>
		//	   </div>

실시 예 3.2.2의 방법 startsWith () 및 endsWith ()
startsWith () : 문자열의 선두를 나타내는 매개 변수 문자열 부울 리턴하는지
() endsWith는 : 문자열의 끝에 매개 변수 문자열이 부울 값을 반환 여부를 나타냄

let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!') // true

실시 예 3.2.3의 방법은 : REPEAT ()
REPEAT 방법은 원래의 스트링이 반복 N 번 새로운 문자열을 반환 나타낸다.

	console.log("y".repeat(5))  //yyyyy

• (3) 데이터 세트 구조
  ES6 새로운 데이터 구조의 세트를 제공한다. 이 배열과 유사하지만 부재의 값은 고유없고 중복 값이다.
  3.3.1 구문
  세트 자체 집합 데이터 구조를 생성하는 생성자이다.
  설정 기능은 초기화 매개 변수로 배열을 받아 들일 수 있습니다.

const s = new Set();
const set = new Set([1, 2, 3, 4, 4]);

3.3.2 인스턴스 메소드
추가 (값) : 자체 설정 구조를 반환, 몇 가지 값을 추가
, 삭제 (값) : 값을 삭제는 부울 삭제 성공 여부를 나타내는 값을 반환
반환을 나타내는 부울 값 (값)이를 설정 값의 구성원
) (일반 : 모든 구성원을 제거, 더 리턴 값 없습니다

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 结构中的所有值

3.3.3 이송
예는 또한 각 부재에 소정의 동작을 수행하기위한 방법의 foreach를 가지며, 구조 및 배열을 설정, 리턴 값은 없다.

	// 遍历set数据结构 从中取值
		const s = new Set(['a', 'b']);
		s.forEach(value => {
			console.log(value)    //a b
		})