자바 스크립트 학습! ! ! !

참조 튜토리얼 W3school_javascript

CSS, JS 에센스 요약! ! ! 이 기사는 정말 포괄적입니다

이 기사의 초점 : js 범위, 클로저, 상속, 객체 지향 디자인

Node.js 기본

표시 방식

window.alert()
document.write()
innerHTML
console.log()

// 直接放在HTML里面，一般测试的时候用
<script>
document.write(5 + 6);
</script>

계산

var x = 3 + 5 + '8'
// x 是 '88'
// 当数值和字符串相加时，JavaScript 将把数值视作字符串
// 但是顺序对结果有影响
var x = 911 + 7 + "Porsche"; //918Porsche
var x = "Porsche" + 911 + 7; //Porsche9117

데이터 유형

문자열 값, 숫자 값, 부울 값, 배열, 객체 유형
연산자는 배열이 JavaScript의 객체에 속하기 때문에 배열에 대해 "객체"를 반환합니다.
값을 정의되지 않음으로 설정하여 모든 변수를 지울 수 있습니다. 유형도 정의되지 않습니다.

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

// 科学计数法
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

JavaScript 값은 항상 64 비트 부동 소수점 숫자 (배정 밀도 부동 소수점 숫자)입니다.

목적

var car = {type:"porsche", model:"911", color:"white"};
// 在函数定义中，this 引用该函数的“拥有者”
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

person.lastName;
person["lastName"];
name = person.fullName();

새로운

새로운 생성 객체

var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object

문자열 방법

length 属性返回字符串的长度
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
search() 方法搜索特定值的字符串，并返回匹配的位置

有三种提取部分字符串的方法：
slice(start, end)
substring(start, end)
substr(start, length)
substring() 无法接受负的索引，slice()可以

replace() 方法用另一个值替换在字符串中指定的值

toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
concat() 连接两个或多个字符串
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

trim() 方法删除字符串两端的空白符
charAt() 方法返回字符串中指定下标（位置）的字符串，类似[]
split() 字符串分割

Node.js 범위

명확하게 말하면 js (프론트 엔드 기본 시리즈) 의 범위와 실행 환경 을 설명하는 코드가
있습니다.

목적

자바 스크립트에서는 거의 "모든 것"이 객체입니다.

布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象

개체가 휘발성입니다.

通过引用来寻址，而非值。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
var x = person;     // x就是person，x和person是相同的对象
x.age = 10;           // 这将同时改变 x.age 和 person.age

//新增属性
person.nationality = "English";
//改变属性
person.eyeColor= "black";
//删除属性
delete person.age;

개체 반복

var person = {fname:"Bill", lname:"Gates", age:62}; 
for (x in person) {
    txt += person[x];
}

개체 방법

<script>
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id     : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};
document.getElementById("demo").innerHTML = "My friend is " + person.name(); 
document.getElementById("demo").innerHTML = "My friend is " + person.fullName (); 
</script>

개체 접근 자

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
person.lang = "en";    //person.language被设置为en

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get fName() {
    return this.firstName + " " + this.lastName;
  },
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 以函数形式访问 fullName：person.fullName()
// 以属性形式访问 fName.fName

개체 생성자

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
    this.changeName = function (name) {
        this.lastName = name;
    };
}
var myFather = new Person("Bill", "Gates", 62, "blue");
myFather.changeName("Jobs");

기존 객체 생성자에 새 속성을 추가 할 수 없습니다. 생성자에 새 속성을 추가해야하는 경우 생성자 함수에 추가해야합니다 .JavaScript```prototype''`` 속성을 사용하면 객체 생성자 속성에 대한 새 속성

Person.prototype.nationality = "English";

함수

정의

// example1
function functionName(parameters) {
   // 要执行的代码
}
//example2
var x = function functionName(parameters) {
   // 要执行的代码
}
var z = x(params);

비 표현식으로 정의 된 함수는 승격됩니다 (호이 스팅은 선언을 현재 범위의 맨 위로 이동하는 JavaScript의 기본 동작입니다).

myFunction(5);

function myFunction(y) {
     return y * y;
}

함수 호출

자체 호출을 사용하여 변수의 블록 수준 범위를 설정할 수 있습니다.

(function () {
    var x = "Hello!!";      //我会调用我自己
})();

화살표 기능

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;
const x = (x, y) => { return x * y };

화살표 기능에는 고유 한 기능이 없습니다. 개체 메서드를 정의하는 데 적합하지 않습니다.
화살표 기능은 승격되지 않습니다. 사용하기 전에 정의해야합니다.
함수 표현식은 항상 상수 값이기 때문에 const를 사용하는 것이 var를 사용하는 것보다 안전합니다.

매개 변수

JavaScript 함수는 데이터 유형,
매개 변수 개수와 같은 매개 변수 값에 대한 검사를 수행하지 않습니다 . 매개 변수 호출시 매개 변수가 생략 된 경우 (선언 된 수보다 작음) 누락 된 값은 정의되지 않음으로 설정됩니다.

// 给参数设定默认值
function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

JavaScript 함수는 arguments내장 개체 개체 라고 하며 인수 개체에는 함수 호출에 사용되는 매개 변수 배열이 포함됩니다.

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

함수가 매개 변수의 값을 변경하더라도 매개 변수의 원래 값은 변경되지 않습니다. 매개 변수 변경 사항은 함수 외부에서 볼 수 없습니다.

이

JavaScript에서 이것을 호출하는 것은 현재 코드를 "소유"하는 객체를 나타냅니다.

요구()

call ()을 사용하면 다른 객체에 속하는 메서드를 사용할 수 있습니다.

var person = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
person.fullName();	

fullName 속성은 메서드입니다. 사람 개체는이 메서드의 소유자입니다.
fullName 속성은 사람 개체의 메서드입니다.
JavaScript에서 함수는 객체의 메서드입니다. 함수가 JavaScript 객체의 메서드가 아닌 경우 전역 객체의 함수입니다.

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

대다()

apply () 메서드는 call () 메서드와 매우 유사하며 메서드는
call()각각 매개 변수를받습니다.
apply()이 메서드는 배열 형식의 매개 변수를받습니다.

person.fullName.apply(person1, ["Oslo", "Norway"]);
person.fullName.call(person1, "Oslo", "Norway");

Math.max ()

팁 : 배열의 최대 값을 찾으려면 Math.max ()를 사용하십시오.

Math.max(1,2,3);  // 会返回 3
Math.max.apply(null, [1,2,3]); // 也会返回 3
Math.max.apply(Math, [1,2,3]); // 也会返回 3
Math.max.apply(" ", [1,2,3]); // 也会返回 3
// 第一个参数（null）无关紧要。在本例中未使用它。

전역 및 지역 변수

함수는 함수 내에 정의 된 모든 변수에 액세스 할 수 있습니다.

function myFunction() {
    var a = 4; //a是局部变量
    return a * a;
} 

함수는 함수 외부에서 정의 된 변수에 액세스 할 수도 있습니다.

var a = 4; //a是全局变量
function myFunction() {
    return a * a;
} 

웹 페이지에서 전역 변수는 창 개체에 속합니다.
페이지 (및 창)의 모든 스크립트에서 전역 변수를 사용하고 수정할 수 있습니다.
지역 변수는 정의 된 함수 내에서만 사용할 수 있습니다. 다른 기능과 스크립트 코드에서는 보이지 않습니다.

같은 이름의 전역 변수와 지역 변수는 다른 변수입니다. 하나를 수정해도 다른 하나는 변경되지 않습니다.
var 키워드없이 생성 된 변수는 함수에서 생성 된 경우에도 항상 전역 적입니다.

전역 변수는 응용 프로그램 (창, 웹 페이지) 동안 유지됩니다.
지역 변수는 오래 살지 않습니다. 함수가 호출 될 때 생성되고 함수가 완료된 후 삭제됩니다.

폐쇄

JavaScript 변수는 로컬 또는 전역 범위에 속합니다. 전역 변수는 클로저를 통해 로컬 (개인)이 될 수 있습니다.
闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

var add = (function () {
    var counter = 0; //初始化计数器
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3 

폐쇄 세부 정보

상속하다

배웠을 때 다시 작성하고 웹 프런트 엔드 개발을위한 필수 지식 중 하나 인 JS 상속 및 상속 기본 요약 에 대한 자세한 게시물을 작성하겠습니다
.