for循环的使用方法

  • for:多次遍历代码块

  • for/in:遍历对象属性

for循环代码实例(数组遍历)

var arr = [11, 22, 33, 44, 55]
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// 执行结果
11 22 33 44 55

说明:

数组以[ ]来赋值。

for循环代码实例(对象遍历):

var obj = {name:"tom", gender:"man", age:32} 
for (var key in obj) {
    // 打印键
    console.log(key)
    // 打印值
    console.log(obj[key])
}
// 执行结果
name
tom
gender
man
age
32

说明:
JavaScript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for…in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引

字符串

字符串和数字的运算

字符串和数字进行加运算时,会将数字转换成字符串,然后和另一个字符串进行拼接

var num1 = '123' 
var num2 = 12 
var num3 = num1 + num2 
console.log(num3) // 预期输出:'12312'

字符串和数字进行减、乘、除运算,以及大小比较时,会将字符串转换成数字,再和另一个数字进行运算或比较

var num1 = '123' 
var num2 = 12 
var num3 = num1 - num2 
console.log(num3) // 预期输出:111 
var num1 = '123' 
var num2 = 12 
var num3 = num1 * num2 
console.log(num3) // 预期输出:1476 
var num1 = '123' 
var num2 = 12 
var num3 = num1 / num2 
console.log(num3) // 预期输出:10.25 
var num1 = '123' 
var num2 = 15 
var t = num1 > num2 
console.log(t) // 预期输出:true 

各种值转换成布尔值

数字0,空字符串””,null,undefined 转成布尔值的时候都是false

undefined,一个特殊值,通常用于指示变量尚未赋值。在高级程序设计语言设计应用程序时,用于指示变量尚未用单等号进行赋值(常量未定义)。

非0数字,非空字符串转成布尔值的时候都是true

任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true

var a = 0 
if (a) { 
    console.log('hello') 
} else { 
    console.log('world') 
} 
// 当a=0或""或null或undefined的时候,预期输出:world 
// 当a=[]或空对象的时候,预期输出:hello 
// 当a=-1或"abc"时候,预期输出:hello

逻辑运算 

我们假定 num = 5,下表中解释了比较运算符:

运算符 描述 示例 结果
== 等于 num == 6 false
=== 值相等且类型相等 num === “5” false
!= 不等于 num != 7 true
!== 值不相等或类型不相等 num !== 5 false
> 大于 num > 9 false
< 小于 num < 9 true
>= 大于或等于 num >= 8 false
<= 小于或等于 num <= 7 true

Math内置对象 

方法名称 作用 示例 结果
max() 用于确定一组数值中的最大值 Math.max(11,3,17,6) 17
min() 用于确定一组数值中的最小值 Math.min(11,3,17,6) 3
ceil() 执行向上取整,即它总是将数值向上取整为最接近的整数 Math.ceil(25.1) 26
floor() 执行向下取整,即它总是将数值向下取整为最接近的整数 Math.floor(25.8) 25
round() 执行标准取整,即它总是将数值四舍五入为最接近的整数 Math.round(25.8) 26
random() 该方法返回介于 0 到 1 之间一个随机小数,包括 0 和不包含 1 Math.random() 例如0.3123868992708143
abs() 该方法返回参数的绝对值 Math.abs(-9) 9
sqrt() 该方法返回参数的平方根 Math.sqrt(49) 7

对象属性

对象定义(以下操作都基于这个对象)

// 定义一个对象
var obj = { name: "李明", age: 18, gender: "man", city: "山东", hobby: "游泳" }

访问对象属性的语法

// 访问对象属性方式一
obj.name
// 访问对象属性方式二
obj['name']
// 访问对象属性方式三
// 将对象属性赋值给一个变量,使用变量方式访问
var key = 'name'
obj[key]

添加对象的属性语法

// 添加一个属性方式一
obj.nickName = "小明"
// 添加一个属性方式二
obj["nickName"] = "小明"
console.log(obj)
// {name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳', nickName: "小明"}

修改对象的属性语法

// 修改一个属性方式一
obj.age = 19
// 修改一个属性方式二
obj["age"] = 19
console.log(obj)
// { name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳'}

删除对象的属性语法

// 删除一个属性
delete obj.age

console.log(obj)
// {name:'李明', gender: 'man', city: '山东', hobby: '游泳'}

for循环遍历对象属性的语法

// for循环遍历对象,需要使用for ... in
for (var key in obj) {
    console.log(key)
    console.log(obj[key])
}

函数定义与调用

通过声明来定义函数

function关键字

我们可以使用function关键字来定义一个具有名称的函数,其语法结构如下

pri(); // 预期输出:"foo" 
function pri() { 
    console.log("foo"); 
}

通过表达式来定义函数

表达式定义法

我们还可以使用函数表达式的方式来定义一个函数,这时可以将函数直接赋值给一个变量,其语法结构如下

var myFunction = function foo() { 
    // statements 
} 
myFunction() 
foo() // 会报错,并不能调用成功。命名函数表达式的好处是当我们遇到错误时,堆栈跟踪会显示函数名,容易寻找错误。

函数调用

  • 对于使用函数声明的方法定义的函数,可以使用函数名加括号的方式来调用;对于使用函数表达式定义的函数,可以使用表达式所赋值的变量名加括号来调用。如上述代码所示。

  • 在函数被执行的时候,会运行函数体中的代码。如果函数体中有return语句,则会在函数被调用处返回return出来的值,并结束函数的运行。return并不是必需的,没有return的话,函数会返回undefined。

function add1(a, b) { 
   return a + b; 
} 
var res = add1(4, 5) 
console.log(res) // 预期输出:9 

function add2(a, b) { 
   a + b; 
} 
var res = add2(4, 5) 
console.log(res) // 预期输出:undefined 
  • 函数在调用的时候,会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够,那么函数体中没有绑定的参数将被赋值为undefined

function foo(a, b) { 
    console.log(b) 
} 
foo(4) // 预期输出:undefined 
foo(4,8) // 预期输出:8
  • 函数在调用时可以接受一个函数作为参数,也可以返回一个函数作为返回值。这是函数的高阶用法,暂不涉及,可自行查阅。

常见内置函数

1、eval

eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数,一般情况不建议使用。

var a = eval("2+2") 
console.log(a) 
// 预期输出:4 
// 这里eval把字符串"2+2",当成js代码执行,得到结果4 

eval("console.log('hello world')") 
// 预期输出:hello world 
// 这里eval把字符串"console.log('hello world')",当成js代码执行,打印输出:hello world

2、isNaN

用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型, isNaN函数会首先尝试将这个参数转换为数值,然后才会对转换后的结果是否是NaN进行判断。因此,对于能被强制转换为有效的非NaN数值来说(空字符串和布尔值分别会被强制转换为数值0和1),返回false值也许会让人感觉莫名其妙。比如说,空字符串就明显“不是数值(not a number)”。这种怪异行为起源于:”不是数值(not a number)”在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题:被测试的值在被强制转换成数值时会不会返回IEEE-754​中所谓的“不是数值(not a number)”。

在大多数编程语言中,0.89这样的小数也可以使用.89来表示,省略掉0

isNaN('abc') // 返回值:true 因为字符串'abc'不是一个数字 
isNaN('12.23') // 返回值:false 因为字符串'12.23'是一个数字 

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败, 返回NaN

3、parseFloat

根据给定的参数返回其对应的浮点数。

parseFloat(3.14); 
parseFloat('3.14'); 
parseFloat(' 3.14 '); 
parseFloat('314e-2'); 
parseFloat('0.0314E+2'); 
parseFloat('3.14some non-digit characters'); 
// 以上的返回值都是3.14

parseFloat内置函数是将给定的字符串转成一个浮点数。它会从给定的字符串的右边开始,一个一个字符的比对,直到不能构成一个有效的浮点数为止。

console.log(parseFloat(‘8.9a89bd’)) 预期输出: ____8.9

4、parseInt

解析一个字符串并返回指定基数的十进制整数。

parseInt("0xF", 16); 
parseInt("F", 16); 
parseInt("17", 8); 
parseInt(021, 8); 
parseInt("015", 10); // parseInt(015, 8); 返回 13 parseInt(15.99, 10); 
parseInt("15,123", 10); 
parseInt("FXX123", 16); 
parseInt("1111", 2); 
parseInt("15 * 3", 10); 
parseInt("15e2", 10); 
parseInt("15px", 10); 
parseInt("12", 13); // 以上都返回15,第二个参数表示基数(可以理解为进制)

字符串定义与转义字符

1、使用引号来定义字符串

我们可以使用一对单引号或者一对双引号来定义一个字符串

var str1 = "这是双引号定义的字符串" 
var str2 = '这是单引号定义的字符串' 
// 1. 在JavaScript中双引号定义的字符串和单引号定义的字符串没有本质区别 
// 2. 无论是单引号还是双引号,都必须配对使用,不能一个单引号和双引号配对 
// 3. 单引号中的字符串中不能出现单引号,可以出现双引号;双引号中的字符串中不能出现双引号,可以出现单引号

使用模板字符串的方式定义字符串:我们可以使用一对反引号来定义字符串

var str1 = `这是一个普通的字符串` 
var str2 = `这是一个换行的 
字符串` 
var a = 2 
var b = 3 
var str3 = `这是一个可以解析变量的字符串,例如:${a + b}` 
// 最终str3的值为: 
// 这是一个可以解析变量的字符串,例如:5

2、转义符

在定义一个字符串的时候,有些特殊字符并不适合直接出现。例如:换行符、单引号(不能出现在单引号内)、双引号(不能出现在双引号内),这个时候可以我们需要使用\转义符,例如:

var str1 = '这是一个换行的\n字符串' 
console.log(str1) 
// 预期输出: 
// 这是一个换行的 
// 字符串 

// 在这里使用了\n来代表换行符。如果直接在定义字符串的时候回车换行,将出现语法错误 

var str2 = "如何使用双引号\"" 
console.log(str2) 
// 预期输出: 
// 如何使用双引号" 
// 在这里使用了\"来代表双引号。如果在双引号定义的字符串中直接使用双引号,将出现语法错误。单引号同理。 

// 如果使用模板字符串的方式定义字符串,可以直接使用回车换行。但是要在其中使用反引号`,也必须转义

var str = ‘\”这是为什么呢?”‘ console.log(str) 预期输出: “这是为什么呢?”

在单引号定义的字符串中出现了双引号,可以直接使用,不会报语法错误。并且双引号前加转义符(\)和不加效果一样。 

字符串常见方法与属性

1、String对象属性

属性名称 作用 示例 结果
length 获取字符串入的长度 ‘abcd’.length 4

2、String对象的常用方法

方法名称 作用 示例 结果
charAt() 获取指定位置的字符 ‘abcd’.charAt(2) c
indexOf() 检索指定的字符串值在字符串中首次出现的位置 ‘abcd’.indexOf(‘a’) 0
lastIndexOf() 从后往前查询所要搜索的字符串在原字符串中第一次出现的位置(索引),找不到则返回-1 ‘abcdabc’.lastIndexOf(‘a’) 4
search() 检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串 ‘abcd’.search(‘c’) 2
match() 字符串内检索指定的值,或找到一个或多个正则表达式的匹配 ‘abcdabc’.match(‘a’) [‘a’, index: 0, input: ‘abcdabc’]
substring() 字符串截取方法,它可以接收两个参数,分别是要截取的开始位置和结束位置,它将返回一个新的字符串 ‘abcdabc’.substring(1, 4) bcd
slice() 与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。而区别在于,slice()中的参数可以为负值 ‘abcdabc’.slice(1, 4) bcd
replace() 用来进行字符串替换操作,它可以接收两个参数,前者为被替换的子字符串,后者为用来替换的文本 ‘abcd’.replace(‘a’, ‘A’) Abcd
split() 于把一个字符串分割成字符串数组 ‘abcd’.split(”) [‘a’, ‘b’, ‘c’, ‘d’]
toLowerCase() 可以把字符串中的大写字母转换为小写 ‘Abcd’.toLowerCase() abcd
toUpperCase() 可以把字符串中的小写字母转换为大写 ‘Abcd’.toUpperCase() ABCD

数组常见方法与属性

1、数组定义

// 直接使用中括号就能定义一个数组,数组中的值的类型不必相同,数组中可以嵌套数组 
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]

2、数组中值的访问与修改

var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标(或者叫索引)来取数组中的值。下标是从0开始的 

arr[0] // 取下标为0的值,即1 

arr[3] // 取下标为3的值,即'init' 

// 我们可以给数组中某一个下标的值进行重新赋值,即修改该下标的值 
arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置,此时arr[0]的值就为'name'了,而不是1了

3、数组常见属性

3.1 length

访问一个数组的length属性,返回该数组的长度,即该数组元素的个数

var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
 
arr.length // 返回数组arr的长度,即5

4、数组常见方法

4.1 forEach()

对数组的每个元素执行一次给定的函数

var array1 = ['a', 'b', 'c'] 

array1.forEach( function(element) { 
console.log(element) 
}) 
// 预期输出 
// "a" 
// "b" 
// "c"
var array1 = ['a', 'b', 'c'] 

array1.forEach(ass)

 function ass(element){ 
console.log(element) 
}
//a
//b
//c

 

4.2 indexOf()

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'] 
console.log(beasts.indexOf('bison')) // 预期输出: 1 
// start from index 2 
console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
console.log(beasts.indexOf('giraffe')) // 预期输出: -1

4.3 join()

将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

var elements = ['Fire', 'Air', 'Water'] 
console.log(elements.join()) // 预期输出: "Fire,Air,Water" 
console.log(elements.join('')) // 预期输出: "FireAirWater" 
console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"

4.4 map()

创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法 
var map1 = array1.map(function (x) { return x * 2 });
console.log(map1); // 预期输出: Array [2, 8, 18, 32]

4.5 pop()

从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; 
console.log(plants.pop()); // 预期输出: "tomato" 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"] 
plants.pop(); 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]

4.6 push()

将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

var animals = ['pigs', 'goats', 'sheep']; 
var count = animals.push('cows'); 
console.log(count); // 预期输出: 4 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"] 
animals.push('chickens', 'cats', 'dogs'); 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

4.7 reverse()

将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

var array1 = ['one', 'two', 'three']; 
console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"] 
var reversed = array1.reverse(); 
console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"] 
// 注意:该方法会修改原数组 
console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]

4.8 shift()

从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

var array1 = [1, 2, 3]; 
var firstElement = array1.shift(); 
console.log(array1); // 预期输出: Array [2, 3] 
console.log(firstElement); // 预期输出: 1

4.9 slice()

返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; 
console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"] 
console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"] 
console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"] 
console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"] 
console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]

4.10 sort()

对数组的元素进行排序,并返回数组。

var months = ['March', 'Jan', 'Feb', 'Dec']; 
months.sort(); 
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"] 
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(); 
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]

// 如果sort()方法调用的时候没有传入回调函数,会将数组转成字符串然后进行大小比较并升序排列,字符串的大小比较是按照字典顺序进行的。所以10000会比21小。

// 如果sort()方法调用的时候传入了回调函数,会按回调函数的返回值来决定相邻两个元素的排序,例如:
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(function (item1, item2) {
return item1 - item2
}); 
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]

// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0,那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0,那么item1将排在item2的前面
// 如果这个回调函数返回的是0,那么item1和item2的位置不变

4.11 unshift()

将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

var array1 = [1, 2, 3]; 
console.log(array1.unshift(4, 5)); // 预期输出: 5 
console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]

版权声明:本文为wchenfeng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/wchenfeng/p/16136698.html