、JavaScriptの概要
JavaScriptの(JS)フロントエンドプログラミング言語は、1996年11月には、JavaScript --Netscape会社の作成者は、この言語が国際標準になることを期待することができ、標準のJavaScript ECMA国際機関に提出することを決めました。翌年、ECMAは、標準番号262ドキュメント(ECMA-262)の最初のバージョンをリリースし、標準ブラウザのスクリプト言語を提供し、ECMAScriptのと呼ばれるこの言語は、このバージョンは1.0です。JavaScript言語のための標準を開発し始めているが、JavaScriptを呼び出していませんでした、二つの理由があります。まず、商標、JavaScriptのネットスケープ自体が商標として登録されています。しかし、メーカーの言語を反映するというよりも、ネットスケープ、これは言語の発達や中立性を確保するのに役立ちます、ECMAです。ECMAScriptやJavaScriptとの関係は、前者が、前者の実装であり、後者の仕様であることです。
二、導入のJavaScriptの道
< スクリプト> // ここにあなたのJSコードを書くために 、</ スクリプト>
追加のJSファイルの紹介
< スクリプトSRC = "myscript.js" > </ スクリプト>
三、JavaScriptの言語仕様
メモ(Notesはコードの母親です)
/単一行コメント/
/ *複数行コメント
* /
ターミネータ
セミコロンにはJavaScriptステートメント(;)ターミネータとして
四、JavaScript言語の基礎
変数の評判
1.JavaScript変数名は、数字、文字、$組成、数字で始めることはできません_、使用することができます
2.変数にVAR変数名を宣言し、フォーマットを宣言
名前=「アレックスは」でした。
年齢= 18でした。
注意:
変数名は大文字と小文字が区別されます
キャメルは、命名規則を推奨しました
予約語は変数名として使用することはできません
彼は加えました:
ES6は、ユーザーが変数を宣言し、聞かせてコマンドを追加しました。その使用は、VARに似ていますが、変数は、letコマンドブロック内の有効な宣言しました。たとえば、次のように非常に適したループカウンタ用のコマンドを聞かせて
(;私は= 0せための< ARR {...}私は++; .LENGTH)
ES6は、定数を宣言するのconstを追加します。宣言すると、その値を変更することはできません。
constのPI = 3.1415;
PI //3.1415
PI = 3
//例外TypeError: "PI"は読み取り専用です
五、JavaScriptのデータ型
JavaScriptは、動的な型を持っています
VAR xは; // Xこの時点では不定である
のvar =×1; //この場合、xは数である
VAR X =「アレックス」//この時点で文字列であり、X
値(数値)
JavaScriptは整数と浮動小数点型を区別しない、唯一のデジタルタイプがあります。
= 12.34があります。
VaRのB = 20。
そこC = 123e5。12300000 //
VARさd = 123 A-5。// 0.00123
数(非数)は、NaNでもありません表しています
一般的な方法:
123を返す//のparseInt( "123")
はNaNを返す//のparseInt( "ABC")は、NaNは特殊な数値以外の値を表す属性値。この属性は数値を示すために使用されます。
123.456を返します// parseFloatは( "123.456")
文字列(String)を
VAR A = "こんにちは"
のvar B =「世界;
VARのC = A + B;
にconsole.log(C); //得到のHelloWorld
一般的な方法:
方法 | 説明 |
.LENGTH | 長さを返します。 |
。トリム() | 空白の削除 |
.trimLeft() | 左側の空白を削除します |
.trimRight() | 右側のホワイトスペースを削除します |
.charAt(N) | n文字を返します。 |
.concat(値、...) | スプライス |
.indexOf(サブストリング開始) | サブシーケンスの位置 |
(へ、から).substring | 取得シーケンスインデックス |
.slice(開始、終了) | 薄切 |
.toLowerCase() | 下ケース |
.toUpperCase() | 首都 |
.split(デリミタ、リミット) | 分割 |
彼は加えました:
ES6は、テンプレート文字列を導入しました。文字列テンプレート(テンプレート文字列)は、抗引用符で識別される文字列( `)の拡張版です。これは、通常の文字列として使用することができ、文字列の複数の行を定義するために使用される、または文字列変数に埋め込まれてもよいです。
//文字列が変数に埋め込ま
= "ジェイソン" VAR名、時間は= "今日";
`こんにちは$ {name}は、どのように$ {}`時間ありますか?
ブール値(ブール)
、パイソンは異なり、trueとfalseは小文字です
A =本当でした。
B =偽でした。
未定義の和はnull
- ヌル値がnullを表し、このような名前= NULLとして変数を指定した場合、空の又は一般に使用されるであろう。
- 未定義の変数を宣言したが初期化されていない場合は、この変数のデフォルト値は未定義であることを意味しています。定義されていない返された明確な関数の戻り値はありません。
オブジェクト(オブジェクト)
すべてがJavaScriptでのオブジェクトです:文字列、数値、配列、関数が...また、JavaScriptはカスタムオブジェクトを可能にします。
JavaScriptは、そのようなので、上の文字列、日付、配列、およびなど、複数のビルトインオブジェクトを提供します。
属性とメソッドを持つ唯一の特殊なデータ型オブジェクト。
配列
エフェクトオブジェクトは配列である:単一の変数名を使用することは、一連の値を格納します。Pythonはそのリストに似ています。
VaRのA = [123、 "ABC"]。 console.log([1])。//输出"ABC"
一般的な方法:
方法 | 説明 |
.LENGTH | 配列のサイズ |
.push(彼) | 尾の追加要素 |
。ポップ() | 要素の尾を取得します。 |
.unshift(ELE) | ヘッドインサート要素 |
。シフト() | 要素を削除するヘッダー |
.slice(開始、終了) | 薄切 |
。逆() | リバース |
.join(配列) | 配列要素は、文字列に接続されています |
.concat(ヴァル、...) | 接続の配列 |
。ソート() | シーケンス |
.forEach() | 配列の各要素は、コールバックに渡されます。 |
。スプライス() | 要素を削除し、配列に新しい要素を追加します。 |
。地図() | これは、新しい配列の呼処理機能の後に配列要素の値を返します。 |
forEachの()
構文:
forEachの(機能(currentValueは、インデックス、ARR)、thisValue)
スプライス()
構文:
スプライス(インデックス、howManyが、ITEM1、.....、itemX)
パラメータ:
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, ..., itemX | 可选。要添加到数组的新元素 |
地図()
構文:
map(function(currentValue,index,arr), thisValue)
参数:
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
|
||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
类型查询
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。
对变量或值调用 typeof 运算符将返回下列值之一:
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
运算符
算数运算符
+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
比较运算符
> >= < <= != == === !==
注意:
1 == “1” // true 弱等于 1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
流程控制
if-else
var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); }
if-else if-else
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
switch
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
for
for (var i=0;i<10;i++) { console.log(i); }
while
var i = 0; while (i < 10) { console.log(i); i++; }
三元运算
var a = 1; var b = 2; var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
x
10
函数
函数定义
JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。
// 普通函数定义 function f1() { console.log("Hello world!"); } // 带参数的函数 function f2(a, b) { console.log(arguments); // 内置的arguments对象 console.log(arguments.length); console.log(a, b); } // 带返回值的函数 function sum(a, b){ return a + b; } sum(1, 2); // 调用函数 // 匿名函数方式 var sum = function(a, b){ return a + b; } sum(1, 2); // 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱 (function(a, b){ return a + b; })(1, 2);
补充:
ES6中允许使用“箭头”(=>)定义函数。
var f = v => v; // 等同于 var f = function(v){ return v; }
如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
var f = () => 5; // 等同于 var f = function(){return 5}; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){ return num1 + num2; //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中 }
函数中的arguments参数
function add(a,b){ console.log(a+b); console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1 } add(1,2)
输出:
3 2
1
注意:
函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。
内置对象和方法
JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了,JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String("abc")的区别:typeof s1 --> string而 typeof s2 --> Object
自定义对象
JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
var a = {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);
遍历对象中的内容:
var a = {"name": "Alex", "age": 18}; for (var i in a){ console.log(i, a[i]); }
创建对象:
var person=new Object(); // 创建一个person对象 person.name="Alex"; // person对象的name属性 person.age=18; // person对象的age属性
Date对象
创建Date对象
//方法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"); 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()); //毫秒并不直接显示
Date对象的方法:
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月(0-11) //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON对象
var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
/*第一个注意事项,正则表达式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项,全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
RegExp