ES5 ES6 기초 지식
68027 단어 전단 학습
ES5 구문
수조 방법
반복(반복) 방법:forEach(),map(),filter(),some(),every();array.forEach(function(currentValue, index, arr))
// currentValue： index： arr：
var arr = [1,2,3];
var sum=0;
arr.forEach(function(value,index,array){
console.log(" "+value);
console.log(" "+index);
console.log(" "+array);
sum+=value;
})
console.log(sum);
filter () 방법으로 새 그룹을 만듭니다. 새 그룹의 요소는 지정된 그룹의 조건에 맞는 모든 요소를 검사하는 것입니다. 주로 그룹을 선별하는 데 사용됩니다.
** 참고: ** 새 배열로 바로 돌아갑니다.
some () 방법은 그룹의 요소가 지정된 조건을 충족하는지 검사하는 데 사용됩니다.통속점은 그룹에 조건을 충족시키는 요소가 있는지 찾아낸다
주의: 이 요소를 찾으면true로 돌아가고, 찾지 못하면false로 돌아갑니다.var arr=[12,66,4,88];
var newArr=arr.filter(function(value,index,array){
return value>=20;//
})
console.log(newArr);//Array(2)
//
var flag=arr.some(function(value){
return value>=20;
})
console.log(flag);//true
문자열 방법
trim () 방법은 문자열의 양쪽에서 공백 문자를 삭제합니다.//
var str=" andy ";
console.log(str.trim());
trim () 방법은 원래 문자열 자체에 영향을 주지 않습니다. 이것은 새로운 문자열을 되돌려줍니다.
대상 방법
array.forEach(function(currentValue, index, arr))
// currentValue： index： arr：
var arr = [1,2,3];
var sum=0;
arr.forEach(function(value,index,array){
console.log(" "+value);
console.log(" "+index);
console.log(" "+array);
sum+=value;
})
console.log(sum);
var arr=[12,66,4,88];
var newArr=arr.filter(function(value,index,array){
return value>=20;//
})
console.log(newArr);//Array(2)
//
var flag=arr.some(function(value){
return value>=20;
})
console.log(flag);//true
//
var str=" andy ";
console.log(str.trim());
var obj={
id: 1,
pname:' ',
price:1999,
num: 2000
}
// 1. for-in
var arr=Object.keys(obj);
console.log(arr);
arr.forEach(function(value){
console.log(value);
})
// 2.Object.defineProperty()
Object.defineProperty(obj,'num',{
value:1000
});
console.log(obj);
Object.defineProperty(obj,'id',{
//
writable:false,
});
Object.defineProperty(obj,'address',{
value:' xx ',
//
writable: false,
// enumerable false ， false
enumerable: false
});
ES6 구문
ES6
ES의 전체 명칭은 ECMAScript입니다. 이것은 ECMA 국제 표준화 기구가 제정한 스크립트 언어의 표준화 규범입니다.
ES6는 실제로 ES2015 및 후속 버전을 가리키는 범지입니다.
ES6 새 구문
let
ES6에 추가된 변수를 설명하는 키워드입니다.
if (true) {
let a = 10;
}
console.log(a) // a is not defined
주의: let 키워드를 사용하여 설명하는 변수는 블록급 작용역을 가지고 있으며, var 설명을 사용하는 변수는 블록급 작용역의 특성을 가지고 있지 않습니다.
console.log(a); // a is not defined
let a = 20;
var tmp = 123;
if (true) {
tmp = 'abc';// tmp is not defined
let tmp;
}
var arr = [];
for (var i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
} }
arr[0]();// 2
arr[1]();// 2
[외부 체인 이미지 저장 실패, 원본 사이트에 도난 방지 체인 메커니즘이 있을 수 있으므로 그림을 저장하여 직접 업로드하는 것을 권장합니다(img-VlKEN2L7-1587086429740)(https://s2.ax1x.com/2020/02/14/1jvLTS.png)]
let arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
} }
arr[0]();//0
arr[1]();//1
[외부 체인 이미지 저장 실패, 원본 사이트에 도난 방지 체인 메커니즘이 있을 수 있으므로 그림을 저장하여 직접 업로드하는 것을 권장합니다(img-fw VIKhIe-1587086429742)(https://s2.ax1x.com/2020/02/14/1jxfBV.png)]
const
작용: 상수를 성명합니다. 상수는 값(메모리 주소)이 변화할 수 없는 양입니다.
let,const,var의 차이
[외부 체인 이미지 저장 실패, 원본 사이트에 도난 방지 체인 메커니즘이 있을 수 있으므로 그림을 저장하여 직접 업로드하는 것을 권장합니다(img-7DBEj4Lq-1587086429745)(https://s2.ax1x.com/2020/02/14/1vSAz9.png)]
구성 해제 값
ES6에서는 배열에서 값을 추출하여 해당 위치에 따라 변수에 값을 지정할 수 있습니다.대상도 해체를 실현할 수 있다.
수조 해체
let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
// ， undefined
let [foo] = [];
let [bar, foo] = [1];
개체 구성
일정한 패턴에 따라 수조나 대상에서 값을 추출하여 추출한 값을 다른 변수에 부여한다.
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
화살표 함수
함수체에 코드가 한 줄만 있고 코드의 실행 결과는 되돌아오는 값으로 괄호를 생략할 수 있다
function sum(num1, num2) {
return num1 + num2;
}
const sum = (num1, num2) => num1 + num2;
만약 형삼이 하나밖에 없다면, 괄호를 생략할 수 있다
function fn (v) {
return v;
}
const fn = v => v;
화살표 함수는this 키워드를 연결하지 않습니다. 화살표 함수의this는 함수 정의 위치의 상하문this를 가리킵니다.우리는 콜이나 bind로 방향을 바꿀 수 있다
const obj = { name: ' '};
function fn () {
console.log(this); //obj
return () => {
console.log(this); //obj
}
}
const resFn = fn.call(obj);
resFn();
남은 매개변수
잉여 매개 변수 문법은 우리가 일정하지 않은 수량의 매개 변수를 하나의 수조로 표시할 수 있도록 한다.
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
잉여 매개 변수와 해체 협조 사용
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
ES6 내장형 개체 확장
Array 확장 방법
확장 연산자(확장 구문)
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3)
확장 연산자는 병합 그룹에 적용될 수 있다
let ary1=[1,2,3];
let ary2=[4,5,6];
let ary3=[...ary1,...ary2];
console.log(ary3);
//push
ary1.push(...ary2);
console.log(ary1);
//js
ary1=ary1.concat(ary2);
console.log(ary1);
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];
구조 함수 방법: Array.from()
클래스 그룹이나 훑어볼 수 있는 대상을 진정한 그룹으로 변환
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
방법은 두 번째 파라미터를 받아들일 수 있다. 수조와 유사한 맵 방법으로 모든 요소를 처리하고 처리된 값을 되돌아오는 수조에 넣는다.
let arrayLike = {
"0": 1,
"1": 2,
"length": 2
}
let newAry = Array.from(aryLike, item => item *2)
인스턴스 메서드:find()
첫 번째 조건에 맞는 그룹 구성원을 찾는 데 사용됩니다. undefined로 되돌아오는 것을 찾지 못하면
let ary = [{
id: 1,
name: ' ‘
}, {
id: 2,
name: ' ‘
}];
let target = ary.find((item, index) => item.id == 2);
인스턴스 메서드:findIndex()
첫 번째 조건에 부합되는 그룹 구성원의 위치를 찾는 데 사용됩니다. 되돌아오는 것을 찾지 못하면-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
인스턴스 방법: includes ()
어떤 그룹이 주어진 값을 포함하는지 표시하고 볼 값을 되돌려줍니다
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
String 확장 방법
템플릿 문자열
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 ()
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
인스턴스 메서드:repeat()
repeat 방법은 원래 문자열을 n번 반복하여 새 문자열을 되돌려줍니다.
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
Set 데이터 구조
ES6는 새로운 데이터 구조 세트를 제공합니다.그것은 그룹과 유사하지만, 구성원의 값은 모두 유일하며, 중복된 값은 없다.
Set 자체는 Set 데이터 구조를 생성하는 데 사용되는 구조 함수입니다.
const s = new Set();
Set 함수는 초기화에 사용할 수 있는 매개 변수로 그룹을 받아들일 수 있습니다.
const set = new Set([1, 2, 3, 4, 4]);
set 인스턴스 방법
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
Set 구조의 실례는 수조와 마찬가지로 forEach 방법도 가지고 있으며, 모든 구성원에게 어떤 조작을 수행하는 데 사용되며, 반환 값이 없습니다.
s.forEach(value => console.log(value))
기타
this 지향 문제
this: 최근에 function을 호출한 것을 가리킨다
{
//es6
var factory = function(){
var _this = this;
this.a='a';
this.b='b';
this.c={
a: 'a+',
b:() => {
return this.a;
}
}
}
console.log(new factory().c.b());// a=='a'
};
//es5 es3
{
var factory = function(){
var _this = this;
this.a='a';
this.b='b';
this.c={
a: 'a+',
b:funciton() {
return this.a;
}
}
}
console.log(new factory().c.b());// a=='a+'
}
기본 매개변수
//es6
function checkParameter(){
throw new Errror('can\'t be empty')
}
function f(x = checkParameter(),y = 7,z = 42){
return x+y+z
}
console.log(f(1));
f();//
가변 매개변수
//es3 es5
function f(){
var a=Array.prototype.slice.call(arguments);
var sum=0;
a.forEach(function(item){
sum+=item*1;
})
return sum
}
console.log(f(1,2,3,6));
//es6
function f(...a){
var sum=0;
a.forEach(item => {
sum+=item*1
});
return sum
}
console.log(f(1,2,3,6));
//es5
var params=['hello',true,7];
var other=[1,2].concat[params];
console.log(other);
//es6
var params['hello',true,7];
var other=[1,2,...params];
console.log(other);
객체 에이전트
//es3
var Person = function(){
var data={
name:'es3',
sex:'male',
age:15
}
this.get = function(key){
return data[key]
}
this.get = function(key,value){
if(ke!='sex')
{
data[key] = value
}
}
}
//
var person = new Person();
//
console.table({name: person.get('name')},sex: person.get('sex'));
//
person.set('sex','female');
//es5
varPerson = {
name: 'es5',
age: 15
};
Object.defineProperty(Person,'sex'.{
writable:false,
value:'male'
});
//
console.table({
name:Person.name,
age:Person.age,
sex:Person,sex
});
//
Person.sex='female';
//es6
let Person={
name: 'es6',
sex: 'male',
age: 15
};
let person=new Proxy(Person,{
get(target,key){
return target[key]
},
set(target,key,value){
if(key!=='sex'){
target[key]=value;
}
}
});
console.table({
name:person.name,
age:person.age,
sex:person,sex
});
//
person.sex='female';
[외부 체인 이미지 저장 실패, 원본 사이트에 도난 방지 체인 메커니즘이 있을 수 있으므로 그림을 저장하여 직접 업로드하는 것을 권장합니다(img-Ai7hl4sU-1587086429749)(https://s2.ax1x.com/2020/02/01/1GZ5i4.png)]
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Object 객체 메소드 요약주로 Object 객체의 메서드와 해당 객체가 작성된 인스턴스의 메서드입니다.일반적으로 서로 다른 실례 대상에 사용할 수 있는 방법. 대상의 모든 속성 이름을 가져올 수 있는 그룹을 가져옵니다. 대상의 원형에 있는 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
