JavaScript 학습 노트 정리 (연습 포함)... 미 완성
대학 시절 1 년 동안 자 바스 크 립 트 지식 을 배 웠 습 니 다. 그 때 는 수업 연습 과 책 위의 코드 와 홈 페이지 에 필요 한 연습 에 그 쳤 을 뿐 자 바스 크 립 트 의 학습 을 깊이 연구 하지 않 았 습 니 다.그 후에 마침 자 바 를 주로 배 웠 기 때문에 대부분의 경험 도 그 위 에 놓 지 않 았 다.그 러 니까 이 까 먹 은 놈 의 성질 은 얼마 지나 지 않 아 잊 어 버 린 게 많 지 않 아.지금 은 알 아 볼 수 밖 에 없 지만 손 을 쓰 면 멍 하 다.그래서 그 동안 기초 지식 을 배우 고 여러 가지 사건 을 연습 해서 간단 한 홈 페이지 의 인 코딩 을 완성 하려 고 합 니 다.
JavaScript 빠 른 입문
JavaScript 코드 작성 방법
1.1 JavaScript 코드 는 웹 페이지 의 탭 에 작 성 됩 니 다:
<html>
<head>
<script>
alert('Hello, world'); // ：Hello, world
</script>
</head>
<body>
...
</body>
</html>
자바 스 크 립 트 코드 는 웹 페이지 의 어느 곳 에 나 끼 워 넣 을 수 있 지만, 우 리 는 일반적으로 자바 스 크 립 트 코드 를 여기에 두 고 있 습 니 다. 포 함 된 코드, 즉 우리 가 흔히 말 하 는 자바 스 크 립 트 코드 입 니 다.
1.2 자 바스 크 립 트 코드 를 단독. js 파일 에 넣 습 니 다.
코드 를. js 파일 에 넣 으 려 면 HTML 에서 이 파일 을 도입 해 야 합 니 다.src 에 이 js 파일 의 주 소 를 입력 하 십시오.주 소 는 상대 주소 와 절대 주소 가 있 습 니 다.절대 주 소 는 디스크 문자 가 있 는 것 을 말 하 며, 일반적인 상황 은 상대 주 소 를 참조 합 니 다.
js 코드 를 단독 파일 에 쓰 는 것 은 우리 가 코드 를 유지 하 는 데 유리 하 다.그리고 여러 페이지 에서 js 를 인용 하면 중복 되 는 코드 를 피 할 수 있다.
JavaScript 기본 문법
주: 자 바스 크 립 트 는 대소 문 자 를 엄 격 히 구분 합 니 다.
2.1 할당 문
var x=2;
2.2 판단 문
if 구문
if(2>1){
x=1;
y=2;
z=3;
}
주: {...} 끼 워 넣 을 수도 있 고 등급 구 조 를 형성 할 수 있 습 니 다.
if () {...} else {...} 문장:
var age=20;
if (age>=18)
alert(' ');
else
alert(' ');
다 중 조건 판단
var age=20;
if (age>=18){
alert(' ');
}else if(age>=6){
alert(' ');
}else
alert(' ');
2.3 순환
for 순환 구조 for (;
var x = 0;
var i;
for (i=1; i<=100; i++) {
x = x + i;
}
x;
i = 1; 이것 은 초기 조건 입 니 다. 변수 i 를 1 로 설정 합 니 다. 앞 에 변수 값 이 있 으 면 i. i < = 100 을 직접 쓸 수 있 습 니 다. 이것 은 순환 여 부 를 판단 하 는 조건 입 니 다. 만족 하면 순환 하고 만족 하지 않 으 면 종료 합 니 다. i + +, 이것 은 한 번 순환 한 후에 i 를 1 로 추가 하 는 것 을 말 합 니 다.
for…in
var student={
name:' ',
age:'20';
city:' '
};
for(var key in student){
console.log(key)//' ','20',' '
}
while
var b=8;
while(b>5){
b--;
}
b;//4
do…while
var n=1;
do{
n=n+1;
}while(n<5);
n;//5
주석
//
/*
*/
2.5 데이터 형식
Number
Number 형식 에 맞 는 다음 과 같 습 니 다.
123;// 123
0.145;// 0.145
1.222e3;// 1.222*1000
-99;//
NaN;// NaN
Infinity;// ， Number
Number 는 직접 사 칙 연산 을 할 수 있다.
문자열
작은 따옴표 나 작은 따옴표 로 묶 은 텍스트 를 문자열 이 라 고 할 수 있 습 니 다.
' '
" "
불 값
하나의 불 값 은 true 와 false 두 가지 값 만 있 습 니 다.
null 과 undefined
null 은 빈 값 을 표시 합 니 다. 0 과 '는 다 릅 니 다. undefined 는 정의 되 지 않 았 음 을 표시 합 니 다.
배열
배열 은 순서대로 배 열 된 집합 입 니 다. 집합 하 는 모든 값 을 요소 라 고 합 니 다. 배열 은 [] 로 요소 간 의 사용, 구분 을 표시 합 니 다. 주: 자바 스 크 립 트 배열 은 임의의 데이터 형식 을 폭발 시 킬 수 있 습 니 다. 예 를 들 어:
[1,4,5,'hello',1.23,null.true]
배열 을 만 드 는 데 는 두 가지 방법 이 있 습 니 다. 하 나 는 [] 을 직접 사용 하 는 것 이 고, 다른 하 나 는 Array () 함 수 를 통 해 이 루어 집 니 다. 일반적으로 우 리 는 첫 번 째 방법 으로 직접 만 듭 니 다.
var a=new Array(1,2,3) // [1,2,3], a
배열 길 이 를 가 져 오 면. length 를 통과 할 수 있 습 니 다.
a.length;//6
배열 에 접근 하면 아래 표 시 를 통 해 직접 접근 할 수 있 습 니 다. 작은 표 지 는 0 부터 문자 길이 - 1 까지 입 니 다.
a[1];//1
index Of 에서 지정 한 요소 의 위 치 를 검색 할 수 있 습 니 다.
var arr=[1,2,3,'w',5]
arr.indexOf(1);// 1 0
arr.indexOf('3');// '3' ， -1。
slice 는 배열 의 일부 요 소 를 캡 처 한 다음 새 요 소 를 되 돌려 줍 니 다.
var arr=[' ',' ',' ',' ',' '];
arr.slice(0,3);// 0 ， 3 ， 3.
arr.slice(3);// 3 。
push 는 배열 의 끝 에 약간의 요 소 를 추가 합 니 다.
var a=[1,3,5]
a.push('t');
a;//[1,3,5,'t']
pop 에서 배열 의 마지막 요 소 를 삭제 합 니 다.
var a=[1,3,5]
a.pop();
a;//[3,5]
unshift 는 배열 의 머리 에 약간의 요 소 를 추가 합 니 다.
var a=[1,3,5]
a.unshift(6,7);
a;//[6,7,1,3,5]
shift 에서 배열 머리 에 있 는 몇 가지 요 소 를 삭제 합 니 다.
var a=[1,3,5]
a.shift();
a;//[3,5]
sort 배열 의 요 소 를 정렬 합 니 다.
var a=[1,7,3,5]
a.sort();
a;//[1,3,5,7]
reverse () 는 배열 안의 요 소 를 반전 시 킵 니 다. 바로 마지막 이 첫 번 째 가 됩 니 다. 다음 과 같 습 니 다.
var a=[1,3,5]
a.reverse();
a;//[5,3,1]
splice 는 지정 한 색인 부터 몇 가지 요 소 를 삭제 하거나 몇 가지 요 소 를 추가 할 수 있 습 니 다.
var a=[1,3,5]
a.splice(1,2,' ',99);// 1 ， 2 ， 2
a;//[1,' ',99]
concat 는 현재 배열 을 다른 배열 과 연결 하여 새로운 배열 로 되 돌려 줍 니 다.
var a=[1,3,5]
var adda=a.concat(2,' ',99);
adda;//[1,3,5,2,' ',99]
a;//[1,3,5]
join 은 현재 배열 을 지정 한 방식 으로 연결 합 니 다.
var a=[1,3,5]
a.join('*');
a;//[1*3*5]
다 차원 배열
var a=[1,[1,2,3],[4,5,6],'a']
Map 은 키 가 맞 는 구조 로 빠 른 검색 속 도 를 가지 고 있 습 니 다.
var m = new Map(); // Map
m.set('amei', 67); // key-value
m.set('ali', 69);
m.has('amei'); // key 'amei': true
m.get('amei'); // 67
m.delete('amei'); // key 'amei'
m.get('amei'); // undefined
set 는 key 의 집합 이지 만 value 를 저장 하지 않 습 니 다. set 에 중복 되 는 key 가 없습니다.
var s1 = new Set(); // Set
var s2 = new Set([1, 2,2, 3]); // 1, 2, 3
s2.add(3,4,5);//add(key) Set
s2.delete(4,5);// delete(key)
s2;set{1,2,3}
반복 요 소 는 set 집합 에서 자동 으로 걸 러 집 니 다.
iterable 은 Array 를 옮 겨 다 니 며 아래 표 시 를 사용 할 수 없습니다. Array, Map, Set 은 모두 iterable 형식 에 속 합 니 다. iterable 형식의 집합 은 새로운 for... of 순환 을 통 해 옮 겨 다 닐 수 있 습 니 다.
for in 과 for of 의 차이 점:
for... in 순환 은 name 을 포함 하지만 Array 의 length 속성 은 포함 되 지 않 습 니 다.
var a = ['A', 'B', 'C'];
a.name = 'D';
for (var x in a) {
console.log(x); // '0', '1', '2', 'name'
}
for... of 순환 은 이 문제 들 을 완전히 복 구 했 습 니 다. 이 문 제 는 그 자체 의 요소 만 순환 합 니 다.
var a = ['A', 'B', 'C'];
a.name = 'D';
for (var x in a) {
console.log(x); // 'A', 'B', 'C'
}
foreach 는 배열 의 모든 요소 에 대해 한 번 에 제공 하 는 함 수 를 실행 합 니 다. 문법:
[ ].forEach(function(value,index,array){
//code something
});
foreach 방법 중의 function 리 셋 은 세 가지 매개 변수 가 있 습 니 다. 첫 번 째 매개 변 수 는 옮 겨 다 니 는 배열 내용 이 고 두 번 째 매개 변 수 는 대응 하 는 배열 색인 이 며 세 번 째 매개 변 수 는 배열 자체 입 니 다.
reduce reduce () 는 두 개의 인 자 를 받 아들 여 결과 와 서열 의 다음 요 소 를 누적 계산 해 야 합 니 다. 예 를 들 어 Array 구 화 는 reduce 실현 방법 으로:
var a=[1,2,3,4,5];
a.reduce(function(x,y){
return x+y;
});//15
filter 는 Array 의 일부 요 소 를 걸 러 내 는 데 사 용 됩 니 다.
var a=[1,3,4,5,8,9]
var r=a.filter(function(x){
return x%2!==0;
});
r;
//[1,3,5,9]
sort () sort () 방법 은 정렬 에 사 용 됩 니 다. 그러나 Array 의 sort () 방법 은 기본적으로 모든 요 소 를 String 으로 변환 하고 정렬 하기 때문에 우리 가 예상 한 결과 와 다 를 수 있 습 니 다.
every every () 방법 은 배열 의 모든 요소 가 테스트 조건 을 만족 시 키 는 지 판단 할 수 있다.
find find () 방법 은 조건 에 맞 는 첫 번 째 요 소 를 찾 는 데 사 용 됩 니 다. 찾 으 면 이 요 소 를 되 돌려 줍 니 다. 그렇지 않 으 면 undefined 로 돌아 갑 니 다.
findIndex findIndex () 는 find () 와 유사 하 며 조건 에 맞 는 첫 번 째 요 소 를 찾 습 니 다. 다른 점 은 findIndex () 가 이 요소 의 색인 을 되 돌려 줍 니 다. 찾 지 못 하면 되 돌려 줍 니 다 - 1
대상 은 우리 의 현실 적 인 대상 이 아 닙 니 다. 자바 스 크 립 트 대상 은 키 값 으로 구 성 된 무질서 한 집합 입 니 다.
var student={
name=' ',
age='18',
class='1618',
teacher=' '
};
자 바스 크 립 트 대상 의 키 는 모두 문자열 형식 이 며 값 은 임의의 데이터 형식 일 수 있 습 니 다.
대상 의 속성 을 가 져 오 면 대상 변수, 속성 이름 을 사용 할 수 있 습 니 다.
student.name;//' '
만약 우리 가 대상 에 게 함 수 를 연결 하면 더 많은 일 을 할 수 있다.
var student={
name=' ',
class='1618',
birth=2000,
age:function(){
var y=new.Date().getFullYear();
return y-this.birth;
}
};
student.age;//function.student.age()
student.age();// 20
this 아래 이 링크 는 js 에서 this 가 가리 키 는 방향 을 잘 이해 할 수 있 습 니 다.https://www.cnblogs.com/pssp/p/5216085.html
this 는 현재 대상 을 가리 키 는 특수 변수 입 니 다.
apply () 와 call () apply (): 두 개의 인 자 를 받 습 니 다. 첫 번 째 인 자 는 바 인 딩 이 필요 한 this 변수 입 니 다. 두 번 째 인 자 는 Array 입 니 다. 함수 자체 의 인 자 를 표시 합 니 다. call (): apply 와 유사 합 니 다. apply () 는 인 자 를 Array 로 포장 하여 전송 해 야 합 니 다. call () 은 인 자 를 순서대로 전달 합 니 다.
변량
변 수 는 이전 수학 방정식 에서 말 했 던 변수 와 같 습 니 다. 변 수 는 대소 문자, 영어, 숫자, $와 의 조합 이 며 숫자 로 시작 할 수 없습니다. 변 수 는 자 바스 크 립 트 의 키워드 일 수도 없습니다. 변 수 는 var 문 구 를 사용 합 니 다. 변수 가 var 를 통 해 설명 되 지 않 으 면 이 변 수 는 자동 으로 전역 변수 로 표 시 됩 니 다.
변수 역할 영역 부분 변수 와 전역 변수 입 니 다. JavaScript 는 기본적으로 전역 대상 window 가 있 습 니 다. 전역 역할 영역 변 수 는 실제로 window 의 속성 에 연결 되 어 있 습 니 다. 내부 함 수 는 외부 함수 가 정의 하 는 변 수 를 방문 할 수 있 지만 방법 내 부분 적 인 방법 은 방법 내 에서 만 사용 할 수 있 습 니 다.
상수 var 와 let 는 변수 이기 때문에 상수 하 나 를 설명 하려 면 ES6 이전에 안 됩 니 다. 우 리 는 보통 모든 대문자 변수 로 "이것 은 상수 입 니 다. 값 을 수정 하지 마 십시오" 라 고 표시 합 니 다.
var PI=3.14;
할당 을 해제 하면 한 그룹의 변 수 를 동시에 할당 할 수 있 습 니 다.
'use strict';
// :
var [x, y, z] = ['A', 'B', 'C'];
엄격 한 패턴
var 를 통 해 변 수 를 강제로 설명 하고 var 설명 변 수 를 사용 하지 않 으 면 실행 오류 가 발생 합 니 다.
함수.
정의 함수 첫 번 째 방법:
function opp(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
function 는 이것 이 함수 정의 라 고 지적 합 니 다. opp 는 함수 의 이름 입 니 다. (x) 괄호 안에 함수 의 매개 변 수 를 표시 합 니 다. 여러 매개 변 수 는 '구분' {...}사이 의 코드 는 함수 체 입 니 다. 몇 개의 문 구 를 포함 할 수 있 습 니 다. 심지어 어떤 문구 도 포함 되 지 않 을 수 있 습 니 다. 함수 체 내부 의 문 구 는 실 행 될 때 return 이 실 행 될 때 함수 가 실 행 됩 니 다. 따라서 함수 내 부 는 조건 판단 과 순환 을 통 해 매우 복잡 한 논 리 를 실현 할 수 있 습 니 다. return 문구 가 없 으 면 함수 가 실 행 된 후 결 과 를 되 돌려 줍 니 다.결 과 를 되 돌려 줍 니 다. 결 과 는 undefined 입 니 다. 두 번 째 방법:
var opp= function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};
function (x) {...} 은 익명 함수 입 니 다. 함수 이름 이 없습니다. 그러나 이 익명 함 수 는 변수 opp 에 할당 되 어 있 기 때문에 변수 opp 를 통 해 이 함 수 를 호출 할 수 있 습 니 다.
호출 함수
argument
rest 매개 변수
고급 함수
패 킷 화살표 함수 생 성기 generator
표준 개체
Date RegExp JSON
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
