50フロントエンド--JS

ジャバスクリプト

ECMAScriptのとJavaScriptの関係

　　1996年11月、JavaScriptの--Netscape会社の作成者は、この言語が国際標準になることを期待することができ、標準のJavaScript ECMAのための国際機関に提出することを決めました。翌年、ECMAは、標準番号262ドキュメント（ECMA-262）の最初のバージョンをリリースし、標準ブラウザのスクリプト言語を提供し、ECMAScriptのと呼ばれるこの言語は、このバージョンは1.0です。

　　JavaScript言語のための標準を開発し始めているが、JavaScriptを呼び出していませんでした、二つの理由があります。まず、商標、JavaScriptのネットスケープ自体が商標として登録されています。第二は、メーカーの言語を反映しているというよりも、ネットスケープ、これは言語の発達や中立性を確保するのに役立ちます、ECMAです。

　　したがって、関係のECMAScriptやJavaScriptは、ということである前者が達成前者は後者の仕様です。

ES6はECMAScriptの6バージョンを指します。

鉛の1 JSコード

方式1:
    <script>
        alert('欢迎来到德玛西亚!')      # 浏览器弹框
    </script>
    
方式2:外部文件引入
    # src属性值为js文件路径
    <script src="test.js"></script>

2.データ型VAR

セミコロンにはJavaScriptステートメント（;）ターミネータとして。そして、インデントは重要ではありません。

コメント：

// 单行注释
/*
    多行注释1
    多行注释2
*/

値型（番号）

var a = 1;
var b = 1.1;
var c = 123e5;  #e5:10的5次方
var d = 123e-5;

var num = 2.379
var newNum = num.toFixed(2)     # 保留两位小数

typeod a;   # number
typeof b;   # number

文字列（文字列）

var a = '字符串'；
typeof a;   # string

文字列値の型のターン

parseInt:
    var a = '111';
    var b = parseInt(a);
    typeof b;       //'number'
    
    
parseFloat:
    var a = '1.11';
    var b = parseFloat(a);
    
var a = 'aaa1';
var b = parseInt(a);
    b =NaN      NaN 是not a number
    typeof b;   # number类型 NaN和NaN不相等

文字列に関連する方法

字符串拼接 +:
    var a = "Hello"
    var b = "world"
    var c = a + b; 
    console.log(c); --- Helloworld


.length 查看字符串长度
    示例:  
        var c = 'hello';
        c.length; -- 5
.trim()  移除两端空格,得到一个新值,不会改变原来的值
    示例:
        var a = '   hello   ';
        var b = a.trim();
.trimLeft()     # 移除左边的空白
.trimRight()    # 移除右边的空白

.charAt(n)  找到索引为n的字符
var c = b.charAt(1);

.concat()  字符串拼接
    示例:
        var a = 'nihao';
        var b = 'girls';
        var c = a.concat(b);

.indexOf(元素) 查看元素的索引
    示例:
        var a = c.indexOf('a');
        var a = c.indexOf('i',3);  参数3的意思是从索引3的位置开始往后找,找到就返回对应的索引值,找不到就返回-1

.slice(n,m) 切片
    示例:
        var c = "nihaogirls";
        var a = c.slice(0,5); -- 'nihao'

.toLowerCase() #全部变小写
.toUpperCase()  #全部变大写
    示例:
        var c = "nihaogirls";
        var a = c.toUpperCase();
        
.split(分隔符,1) 字符串切割
    示例:
        var c = "nihaogirls";
        var a = c.split('g',1);  'g'是切割条件,1是切割后,返回结果的数量

ブール値（ブール値）

var a = true;
var b = false;

数据类型布尔值：
    ""(空字符串)、0、null、undefined、NaN都是false。

未定義の和はnull

null表示值是空，一般在需要指定或清空一个变量时才会使用，
如：name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

オブジェクトの種類

var b = new String('xx');
var a = 'oo'
typeof b;       # object
typeof a;       # string

配列array

我々は、すべてのデータ型を置くことができます。

var a = [1,2,3]
typeof a;       # object

var b = new Array([1,2,3])
typeof b;
"object"

一般的に使用される方法のアレイ

# 索引[]
var a = [1,2,3]
a[0];   // 1

# 切片slice(起始,终止)
var b = a.slice(0,2)    // [1,2]

# 长度length
a.length;       // 3

# 尾部增加push
a.push(元素);
a.push(4);      // [1,2,3,4]

# 尾部删除pop
var b = a.pop();
console.log(b);     // 4

# 首部插入unshift
a.unshift(元素)
a.unshift(0);   // [0,1,2,3]

# 首部删除shift
a.shift()   // [1,2,3]

# 反转 reverse()
a.reverse();    // [3,2,1]

# 字符串拼接 数组.join('连接符')
var a = ['a','b','c'];
var b = a.join('_');    // "a_b_c"

# 数组合并 数组1.concat(数组2)
var a = [1,2,3];
var b = ['a','b'];
var c = a.concat(b);    
    //[1, 2, 3, "a", "b"]

# 排序 sort
var b = a.sort()    // 转换成字符串，按ASCII码排序

# 真正的排序（冒泡）：
function sortNumber(a,b){
    return a-b          // a-b是升序   b-a是降序
};
var b = a.sort(sortNumber);
/*
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
*/

# 删除元素splice(开始位置，删除个数，替换值(可以多个))
var a = [1,2,3]
a.splice(1,1,4，5，6)     //a [1,4,5,6,3]

スプライス（）

構文：

スプライス（インデックス、howManyが、ITEM1、.....、itemX）

パラメータ：

パラメータ	説明
指数	必須。どこに追加/削除する要素の規定。このパラメータは削除添字アレイ素子を起動そして（または）が挿入され、それは数字でなければなりません。
幾つ	必須。それを削除する必要がありますどのように多くの要素を指定します。それは数でなければなりませんが、「0」することができ このパラメータが指定されていない場合、元の配列の末端にインデックスからすべての要素を削除します。
ITEM1、...、itemX	オプション。配列に新しい要素を追加するには

カスタムオブジェクト----辞書

var a ={'键1':'值1','键2':'值2'}    
// 键可以不加引号

// 取值的两种方法：
a['键'];     // 取值时要加引号
a.键;

示例：
var a = {'k1':'v1',k2:'v2'};
a["k1"]     // "v1"
a.k2        // "v2"

シンボルタイプ

新たに導入されたの生データの新しいタイプをES6、それが一意の値を表しています。

3.クエリtypeof演算を入力

typeof演算は、単項演算子ではなく、ステートメントの関数です。

4.演算子

算術演算子

+  -  *  /  %  ++  -- 

i++,是i自加1，i--是i自减1   
    i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑。

var a = 1;
a++ == 2;       # false 先执行判断==, 再加1
++a == 3;       # turn 先执行加1, 再判断==

比較演算子

>  >=  <  <=  ==  ===  !=  !==

==(弱等于)和===（强等于）区别：
    弱等于不区分数据类型。

var a=11;
var b='11';

a==b;           // true
a===b;          // false

論理演算子

&&  ||  !    // 与(and) 或(or) 非(not)

示例：
var a = 1;
var b = 0;
var c = 2;
a&&b    // 0
a&&c    // 2
a||c    // 1
a||b    // 1
!b      // true

代入演算子

=  +=  -=  *=  /=   # n += 1其实就是n = n + 1

前記プロセス制御

シングルの条件

if (条件){
    语句1;
}
else{
    语句2;
};

マルチ条件

if (条件1){
    语句1;
}
else if (条件2){
    语句2;
}
else{
    语句3;
};

示例：
var a = 5;
undefined
if (a>5){
    console.log("大于5");
}
else if (a<5){
    console.log("小于5");
}
else {
    console.log("等于5");
};
// 等于5

切り替えスイッチ（case文）

switch (参数){
    case 1:     // 如果=1，执行
        console.log('等于1');
        break;  //  跳出
    case 2:     // 如果=2，执行
        console.log('等于2')；
        break;
    default:        // 都不成立，执行
        console.log('都不是')
}

示例：
var a = 'good';
switch (a){
    case 'better':
        console.log('特别好');
        break;
    case 'best':
        console.log('非常好');
        break;
    case 'good':
        console.log('很好');
        break;
    default:
        console.log('很遗憾');
};

ループ6.

# 数组
var a = [11,22,33]

# 方式一：
for (var i in a){
    console.log(i,a[i]);
};

# 方式二：
for (var i=0;i<a.length;i++){
    console.log(i,a[i]);
}

# 自定义对象  不能使用 a.i 取值
var a ={"k1":'v1',k2:'v2'}

for (var i in a){
    console.log(i,a[i]);
};      // i取键，a[i]取值
/*
k1 v1
k2 v2
*/

7. whileループ

有休憩、継続

var a = 10;
var i = 0;
while (i<a){
    console.log(i);
    i++;
};
// 执行后i=10

8.三オペレータ

var a = 1;
var b = 2;
var c = a > b ? a:b;
//如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c 

9.機能

通常の関数

function 函数名(形参){
    语句；
    return v;   # 只能返回一个值，可加数组返回多个
}
函数名(实参);        # 执行函数

示例：
function fun(a,b){
    c = a + b;
    return c;
};

fun(1,2);   // 3

無名関数

var 变量名(函数名) = function(形参){
    语句；
}；

变量名(实参);

示例：
var f1 = function(a){
    console.log(a);
};

f1('hello');    // hello

自己実行機能

(function(形参) {
    语句；
})(实参)

伪数组：arguments
console.log(arguments);
console.log(arguments.length);  // 获取实参的个数
console.log(fn.length);         // 获取形参的个数

示例：
(function(a,b) {
    console.log(a);
    console.log(arguments.length);
})([1,2,3],4);
// [1, 2, 3]    2

グローバル変数と関数のローカル変数

ローカル変数：

　　（VARを使用して）関数内で宣言するJavaScript変数にはローカル変数であるため、それだけで（変数のスコープは、内部関数である）関数内でアクセスすることができます。限り、関数が完了すると、ローカル変数は削除されます。

グローバル変数：

　　関数の外で宣言された変数はグローバル変数であり、Webページ上の機能は、すべてのスクリプトがアクセスすることができます。

可変ライフサイクル：

　　彼らは宣言された時から生涯はJavaScript変数。

　　関数が実行された後、ローカル変数は削除されます。

　　ページが閉じられた後に、グローバル変数は削除されます。

スコープ

まず、関数内の変数を探し、見つけるために外側の関数を見つけることができない、と徐々に最外層を見つけます。

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();        // ShenZhen


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();      // BeiJing

クロージャ

そして、Python、非グローバル変数の使用

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();      // ShangHai

10.コンストラクタ（オブジェクト指向）

function Person(name){
    this.name = name;   // 封装属性
}；
var p = new Person('aaa'); //实例化对象
console.log(p.name);
// aaa


// 封装方法
Perso.prototype.sum = function(a,b){
    return a+b;
};

p.sum(1,2);     // 3

11日付オブジェクト

//方法1：不指定参数
var d1 = new Date();    //获取当前时间
console.log(d1.toLocaleString());  
//当前时间日期的字符串表示

//方法2：指定参数
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  //  月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());

//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

日付オブジェクト：

var d =new Date();

d.getDate()    // 获取日
d.getDay ()   //获取星期 ，数字表示（0-6），周日数字是0
d.getMonth ()   //获取月（0-11,0表示1月,依次类推）
d.getFullYear ()   //获取完整年份
d.getHours ()      // 获取小时
d.getMinutes ()    //获取分钟
d.getSeconds ()    //获取秒
d.getMilliseconds () //获取毫秒
d.getTime ()   // 返回累计毫秒数(从1970/1/1午夜),时间戳

12. JSON

var a = {'name':'alex','age':18};
var b = JSON.stringify(a);      
// 序列化"{"name":"alex","age":18}"

var c = JSON.parse(b);          
// 反序列化{name:"alex",age:18};

13. RegExpオブジェクト（レギュラー）

# 两种方式：
// 1.
var reg = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
//2.
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;   //常用这种方式

var s = 'abcdef';
reg.test(s);    // true  判断s是否符合定义的正则表达式。

注意事项：test() 空时
reg.test();     // 没有传参，如果undefined也符合表达式，也会返回true

メソッドの定期的な組み合わせ：

match：查找字符串中符合正则的内容 
s.match(/o/);
s.match(/o/g)   # g匹配所有

search:通过元素找索引,不能用g
s.search(/o/);

split:分割
s.split(/o/)

replace:替换
s.replace(/o/g,'xx');
s.replace(/o/gi,'xx');      # i不区分大小写

注意事项1：
如果reg带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性reg.lastIndex所指定的索引处开始查找。该属性值默认为0，所以第一次仍然是从字符串的开头查找。
当找到一个匹配时，test()函数会将reg.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将reg.lastIndex的值重置为0(reg.lastIndex=0)。
如果test()函数再也找不到可以匹配的文本时，该函数会自动把reg.lastIndex属性重置为 0。


# 循环判断是否符合正则：
var s = 'alex is a xxx';
var reg = /a/g;
reg.test(s);        // true
reg.lastIndex;      // 1
reg.test(s);        // true
reg.lastIndex;      // 9
reg.test(s);        // true
reg.lastIndex;      // 12
reg.test(s);        // false

注意事项2：
在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号，把匹配规则写的确定一些，尽量不用/xxx/

var reg = /foo/g;
reg.test('foo');        // true
reg.test('xxxfoo');     // true

Mathオブジェクト

あなたは直接数学の新しいオブジェクトを作成する必要はありません。

数学。メソッド（パラメータ）

Math.abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    小数部分进行直接舍去。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。