JavaScript 笔记-01
- 变量声明和初始化
- 算数运算和数学库函数
- 判断结构
- 循环语句
- 函数
- 变量作用域
- 递归
- 对象和面向对象编程
- 创建数组
- 读写数组
- 字符串和数组
- 浅复制与深复制
- 存取函数indexOf( ) 与 lastIndexOf( )
- 拼接和截取数组
- 数组中元素的添加和删除
1 基础知识:
- 变量声明和初始化:
JavaScript 中的变量默认是全局变量,如果对一个事先未声明的JavaScript变量进行初始化,该变量就是一个全局变量。在浏览器环境下,全局变量保存在 window 对象中,也就是说
var lei = "Are You OK ?"
等同于 window.lei = "Are You OK?"
。全局变量容易造成混乱和危险,是应该避免的。
var healthy;
var lv;
var beatsPerSecond = 112;
var weightInKg = 55.5;
var greeting = "wo, You can really dance!";
var flag = true;
- 算数运算和数学库函数:
var a = 1;
var b = 2;
var c = 3;
var d = 4;
console.log((a + b) * c / d % 10007); // example of add(+) minus(-) multiplication(*) division(/) mod(%)
console.log(Math.sqrt( b )) // 1.4142... example of sqrt function
console.log(Math.abs( a - b )) // 1 example of absolute function
console.log(Math.sqrt( b ).toFixed(3)) // 1.414 example of toFixed function, 将数字格式化为固定精度,返回值类型为 string
- 判断结构
if 语句
if-else 语句
if-else if 语句
switch 语句: JavaScript中switch语句的判断表达式可以是任意类型而不限于整型。
在比较两个值得时候,你有两种选择,使用 ==
或者 ===
,正经人都用三个等号,两个等号在比较不同类型的变量时,会通过某种人类无法记忆的复杂规则将两个变量转换为同类型的,然后再做比较。
- 循环语句
while 循环
for 循环
do while 循环
- 函数
// 第一种,有返回值的。
function factorial(number){
// 返回斐波那契数列的第number项
var product = 1;
for(var i=number; i>=1; --i){
product *= i;
}
return product;
}
// 第二种,无返回值的。
var friends = ["Alice", "Bob"];
function Hello(arr, greeting){
for(var i=0; i<arr.length; ++i){
arr[i] = greeting + arr[i];
}
}
Hello(friends, "Miss me ? ");
console.log(friends); // ["Miss me ? Alice", "Miss me ? Bob"]
需要说明的是,JavaScript中函数的传递方式都是按值传递,没有按引用传递的参数。但是JavaScript中有保存引用的对象,如数组,传入函数中的是“地址”或者说是引用。JavaScript 中的函数也是对象,JavaScript 中的函数还支持 闭包
,闭包
是个像是 亢龙有悔 一样花哨的名字,但它的定义却要简洁的多,我们以后再谈论闭包的事情。
- 变量作用域
变量的作用域是指一个变量在程序中的哪些地方可以访问。JavaScript中的变量作用域被定义为函数作用域。这是指变量的值在定义该变量的函数内是可见的,并且定义在该函数内的嵌套函数也可以访问该变量。 在主程序中,如果在函数外定义一个变量,那么该变量就拥有 全局作用域,这是指可以在包括函数体内的程序的任何部分访问该变量。关于变量作用域还有更多的内容,就像是 三生万物 那样的多样化和复杂。我们以后还会有机会谈论作用域的。
- 递归
举个例子:
function factorial(number){
if(number == 1){
return number;
}else{
return number * factorial(number - 1);
}
}
console.log(factorial(5)) // 120
任何可以被递归定义的函数,都可以被改写为迭代式(循环)的程序。
- 对象和面向对象编程
JavaScript提供了多种方式来创建和使用对象。对象可以通过如下方式创建:定义包含属性和方法声明的构造函数,并在构造函数后紧跟方法的定义。
// 定义构造器函数
function Checking(amount){
this.balance = amount; // 属性
this.deposit = deposit; // 方法
this.withdraw = withdraw; // 方法
this.toString = toString; // 方法
}
function deposit(amount){
this.balance += amount; // 存钱
}
function withdraw(amount){
if(amount <= this.balance){
this.balance -= amount; // 取钱
}
if(amount > this.balance){
console.log("余额不足")
}
}
function toString(){
return "Balance: " + this.balance;
}
// 创建并使用对象
var account = new Checking(5000);
account.deposit(8000);
console.log(account.toString()) // "Balance: 13000"
account.withdraw(10000);
console.log(account.toString()); // "Balance: 3000"
account.withdraw(4000); // "余额不足"
JavaScript 和 那些通过 类 实现面向对象的编程语言大不相同,特立独行,使用 原型 支持了面向对象。JavaScript 创建对象的方式可多了,甚至还有咬耳朵😎。明天我们就练习 JavaScript 创建对象的其他姿势。
2 数组:
JavaScript 中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可以是整数。但这些数字索引在内部被转换为字符串类型,这是因为JavaScript对象中的属性名必须是字符串。
- 创建数组
// 创建数组的多种方式
var numbers = []; // numbers.length == 0
var numbers = [1,2,3,4,5]; // numbers.length == 5
var numbers = new Array(10); // numbers.length == 10
在脚本语言中很常见的一个特性是,数组中的元素不必是同一种数据类型。前面说到JavaScript中的数组是一种特殊的对象,如果使用typeof()
无法将数组和对象区分开来。可以调用Array.isArray()
来判断一个对象是否是数组。
var objects = ["Hello", 1, 2, true, null];
var numbers = 12;
var arr = [1,2,3];
console.log(Array.isArray(numbers)); // false
console.log(Array.isArray(arr)); // true
大多数JavaScript专家推荐使用[]
操作符而不是使用Array
的构造函数,因为这种方式效率更高。
- 读写数组
var nums = [];
for(var i=0; i<100; ++i){
nums[i] = i+1;
}
var sum = 0;
for(var i=0; i<nums.length; ++i){
sum += nums[i];
}
console.log(sum) // 5050
JavaScript 中的数据也是对象,数组的长度可以任意增加,超出其创建时指定的长度,length
属性反映的是当前数组中元素的个数。
- 字符串和数组
调用 字符串对象的split()
方法可以生成数组,该方法通过一些常见的分隔符,比如分隔单词的空格,将一个字符串分为几部分,并将每部分作为一个元素保存于一个新建的数组中。
var sentence = "Happy birthday !";
console.log(sentense.split(" ")); // ["Happy", "birthday", "!"]
使用join( )
方法,为其传入一个空字符串作为参数可以返回一个数组各元素组成的字符串。
var words = ["Miss", "me", "?"];
console.log(words.join(" ")); // Miss me ?
- 浅复制与深复制
在浅复制中,当把一个数组赋给另一个数组时,被引用的数组增加了一个新的引用,新数组依然指向原来的数组。
var nums = [];
for(var i=0; i<100; ++i){
nums.push(i+1);
}
var newNums = nums;
newNums[0] = 100;
console.log(nums[0]); // 100
在深复制中,我们需要创建一个新的数组并将原数组中的元素对应的赋值给新数组。
function copy(sourceArray, targetArray){
for(var i=0; i<sourceArray.length; ++i){
targetArray[i] = sourceArray[i];
}
}
var nums = [];
for(var i=0; i<100; ++i){
nums.push(i+1);
}
var newNums = [];
copy(nums, newNums);
newNums[0] = 100;
console.log(nums[0]); // 1
- 存取函数
indexOf( ) 与 lastIndexOf( )
indexOf( )
函数用来查找传进来的参数在目标数组中是否存在。如果目标数组包含该参数则返回该元素在数组中的索引,否则返回-1
。
var stringArray = ['little', 'jojn', 'loves', 'dancing'];
console.log(stringArray.indexOf("loves")); // 2
如果数组中有多个相同的元素,indexOf( )
总是返回与参数相同的元素的较小的索引,而 lastIndexOf( )
总是返回相同元素中索引值较大的一个,如果没找到则返回 -1
。
var stringArray = ["little", "john", "loves", "singing", "and", "he", "loves", "dancing"];
console.log(stringArray.lastIndexOf("loves")); // 6
- 拼接和截取数组
concat( )
和splice( )
concat
方法合并多个数组创建一个新数组,splice
方法截取一个数组的子集创建一个新数组。concat
方法的发起者是一个数组,参数是另一个数组,参数数组中的元素被添加到发起者后面。
var stringArrayCaller = ['little', 'jojn', 'loves', 'dancing'];
var stringArray = ["and", "he", "loves", "dancing"];
console.log(stringArrayCaller.concat(stringArray)); // ["little", "jojn", "loves", "dancing", "and", "he", "loves", "dancing"]
splice
方法的第一个参数是截取的起始索引,第二个参数是截取的长度。注意splice是截取而不是复制数组的子集。
var stringArray = ["little", "john", "loves", "singing", "and", "he", "loves", "dancing"];
console.log(stringArray.splice(0, 2)); // ["little", "john"]
console.log(stringArray); // ["loves", "singing", "and", "he", "loves", "dancing"]
- 数组中元素的添加和删除
push( )
添加元素至数组末尾,unshift( )
添加元素至数组开头,pop( )
删除数组末尾的元素并返回,shift( )
删除数组开头的元素并返回。
var numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]
numbers.unshift(5);
console.log(numbers); // [5, 1, 2, 3, 4]
console.log(numbers.pop()); // 4
console.log(numbers); // [5, 1, 2, 3]
console.log(numbers.shift()); // 5
console.log(numbers); // [1, 2, 3]
splice方法可用于在数组的任意位置添加和删除元素。需提供三个参数,起始索引,需要删除的元素个数,需要添加进数组中的元素。
var numbers = [1, 2, 3, 3, 3, 6, 7];
numbers.splice(3, 2, [4, 5]);
console.log(numbers); // [1, 2, 3, Array(2), 6, 7]
numbers = [1, 2, 3, 3, 3, 6, 7];
numbers.splice(3, 2);
console.log(numbers); // [1, 2, 3, 6, 7]
numbers.splice(3, 0, 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]
参考文献: