前端笔记5

一、for循环

for (let i = 1; i <= 10; i++) {
    document.write(i)
    document.write(`<br>`)
}

   console.log(i)


   for (let i = 1; i <= 7; i++) {
        for (let j = 1; j <= 7; j++) {
            document.write(`今天是星期${i},这是送的第${j}朵`)
            document.write(`<br>`)
  }

  }
for (initializer; exit-condition; final-expression) {
  // code to run
}
  1. 一个初始化器 - 这通常是一个设置为一个数字的变量,它被递增来计算循环运行的次数。它也有时被称为计数变量
  2. 一个退出条件 - 如前面提到的,这个定义循环何时停止循环。这通常是一个表现为比较运算符的表达式,用于查看退出条件是否已满足的测试。
  3. 一个最终条件 - 这总是被判断(或运行),每个循环已经通过一个完整的迭代消失时间。它通常用于增加(或在某些情况下递减)计数器变量,使其更接近退出条件值。

二、while循环

   

let i = 11
        while (i <= 10) {
            document.write(`${i}<br>`)
            i++
        }
initializer
while (exit-condition) {
  // code to run

  final-expression
}
除了在循环之前设置初始化器变量,并且在运行代码之后,循环中包含 final-expression,而不是这两个项目被包含在括号中,这与以前的 for 循环非常类似。

三、do...while循环

let i = 11
        do {
            console.log(i)
            i++
        } while (i <= 10)
initializer
do {
  // code to run

  final-expression
} while (exit-condition)
在 do ... while 循环中,花括号中的代码总是在检查之前运行一次,以查看是否应该再次执行(在 while 和 for 中,检查首先出现,因此代码可能永远不会执行)。

四、break continue

 for (let i = 1; i <= 100; i++) {
            if (i === 50) {
                break  //跳出循环
                continue//跳出本次循环,直接开始下一次循环

            }
            console.log(i)
        }

五、数组

// 1、[元素1,元素2,……]
        //    0        1   2   3  
        let arr1 = ["zhangsan", 1, 2, true]
        // 数组下标:从0开始
        // 通过数组下标:   数组名[下标]

        console.log(arr1[0])
        // 通过数组下标重新对对应的数组元素进行赋值
        arr1[1] = 666
        console.log(arr1)

        // console.log(typeof (arr1))
        // arr1 instanceof (Array)判断数据类型
        // console.log(arr1 instanceof (Array))

        // Array.isArray(arr1)判断是否是数组类型

        // 2、Array对象
        // let arr2 = new Array()
        // arr2[0]
        // console.log(arr2 instanceof Array)


        // let arr2 = new Array(1, 2, 3, 4, "zhangsan")
        // console.log(arr2)


        // 二维数组
        let arr3 = [["zhangsan", 21], ["lisi", 22]]
        console.log(arr3[0][1])

数组:简单来说,数组是一个包含了多个值的对象。 数组下标:从0开始

创建数组

数组由方括号构成,其中包含用逗号分隔的元素列表

数组中的每个项目都是一个字符串,但请记住,你可以将任何类型的元素存储在数组中 - 字符串,数字,对象,另一个变量,甚至另一个数组。你也可以混合和匹配项目类型 - 它们并不都是数字,字符串等

访问数组控制台中输入以下内容

控制台中输入以下内容

shopping[0];
// returns "bread"
获取数组长度

通过使用 length属性获取数组的长度(数组中有多少项元素)

sequence.length;
// should return 7

通过数组下标重新对对应的数组元素进行赋值

arr1[1] = 666
console.log(arr1)

判断数据类型

console.log(arr1 instanceof (Array))
 Array.isArray(arr1)判断是否是数组类型

六、数组的遍历

let arr = [1, 2, 3, 4, 5, "zhangsan"]
 console.log(arr.length)   返回数组中元素的个数
for (let i = 0; i <= arr.length - 1; i++) {
         console.log(arr[i])
}
 循环加强  for   in
 for (let i in arr) {
     console.log(arr[i])
 }


 for   of
 for (let i of arr) {
  console.log(i)
  }
console.log(arr.length)

返回数组中元素的个数

for (let i in arr) {
  console.log(arr[i])
}
for (let i of arr) {
            console.log(i)
        }

循环加强

七、数组的方法

 // length    数组名.属性名             数组名.方法名()
        // in运算符
        let arr1 = ["aaa", 1, 2]
        console.log(arr1.length)
        // console.log(4 in arr1)
        console.log(arr1[3])


        // 添加元素 unshift("lisi")向数组的开头添加一个或多个元素
        arr1.unshift("lisi", "zhangfei")

        // push()向数组的最后添加一个或多个元素
        arr1.push("wangmazi")
        //['lisi', 'zhangfei', 'aaa', 1, 2, 'wangmazi']


        // 删除shift()删除并返回数组的第一个元素
        let a = arr1.shift()

        // pop()删除并返回数组的最后一个元素
        arr1.pop()
        // ['zhangfei', 'aaa', 1, 2]
        // splice(删除元素的起始位置,删除几个元素)


        arr1.splice(1, 1)


        arr1.splice(1, 0, "zhangfei", "cnjdcjd")
        console.log(arr1)

        // 
        let a1 = [1, 2, 3]
        let a2 = ["zhangsan", "lisi"]
        // concat()连接两个或者多个数组并且返回结果
        let a3 = a1.concat(a2)
        console.log(a3)

        // join()
        let a4 = ["222", "n", "a", "n", 111]

        let b1 = a4.join("")
        console.log(b1)

        // 
        a4.reverse()
        console.log(a4)


        // sort()
        let b4 = [1, 22, 3, 11, 22, 121, 33]
        // b4.sort()
        // console.log(b4)


        // slice()
        let c2 = b4.slice(1, 4)
        console.log(c2)

        // indexOf()

        console.log(b4.indexOf(22))

        // lastIndexOf()
        console.log(b4.lastIndexOf(22))


        alert(c2.valueOf())

        let str = "aaaaa"

        console.log(str.valueOf()
let arr1 = ["aaa", 1, 2]
console.log(arr1.length)

length

实例属性,表示该数组中元素的个数。该值是一个无符号 32 位整数,并且其数值总是大于数组最大索引。

console.log(4 in arr1)

in运算符

in右操作数必须是一个对象值

如果你使用 delete 运算符删除了一个属性,则 in 运算符对所删除属性返回 false

如果你只是将一个属性的值赋值为undefine,而没有删除它,则 in 运算仍然会返回true

arr1.unshift("lisi", "zhangfei")

添加元素 unshift("lisi")向数组的开头添加一个或多个元素

arr1.push("wangmazi")

push()向数组的最后添加一个或多个元素

let a = arr1.shift()

删除shift()删除并返回数组的第一个元素

arr1.pop()

pop()删除并返回数组的最后一个元素

arr1.splice(1, 1)
arr1.splice(1, 0, "zhangfei", "cnjdcjd")
console.log(arr1)

splice(删除元素的起始位置,删除几个元素或添加新元素就地改变一个数组的内容。)

let a3 = a1.concat(a2)
console.log(a3)

concat()连接两个或者多个数组并且返回结果

let a4 = ["222", "n", "a", "n", 111]
let b1 = a4.join("")
console.log(b1)

join()方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。

a4.reverse()
console.log(a4)

reverse()反转数组中的元素,并返回同一数组的引用。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。换句话说,数组中的元素顺序将被翻转,变为与之前相反的方向。

let b4 = [1, 22, 3, 11, 22, 121, 33]
b4.sort()
console.log(b4)

sort()对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。

let c2 = b4.slice(1, 4)
console.log(c2)

slice()方法返回一个新的数组对象,这一对象是一个由 start 和 end 决定的原数组的浅拷贝(包括 start,不包括 end),其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

console.log(b4.indexOf(22))

indexOf()方法返回数组中第一次出现给定元素的下标,如果不存在则返回 -1。

console.log(b4.lastIndexOf(22))

lastIndexOf()方法返回数组中给定元素最后一次出现的索引,如果不存在则返回 -1。

 let str = "aaaaa"
console.log(str.valueOf())

valueOf()返回 string对象的字符串值。

八、math

        console.log(Math.E)
        console.log(Math.PI)
        console.log(Math.SQRT2)

        let a = -3.14
        console.log(Math.ceil(a))
        console.log(Math.floor(a))

        console.log(Math.abs(a))

        console.log(Math.max(1, 2, 12, 33, 21))
        console.log(Math.min(1, 2, 12, 33, 21))

        console.log(Math.random())

        // 四舍五入
        console.log(Math.round(3.54))


        // 开平方根
        console.log(Math.sqrt(9))

        // 幂次方
        console.log(Math.pow(2, 3))

shi

Math.E欧拉常数,也是自然对数的底数,约等于 2.718
Math.PI圆周率,一个圆的周长和直径之比,约等于 3.14159
Math.SQRT22 的平方根,约等于 1.414
Math.ceil(a)返回大于一个数的最小整数,即一个数向上取整后的值。
Math.floor(a)返回小于一个数的最大整数,即一个数向下取整后的值

Math.abs(a)

返回一个数的绝对值。

Math.max(1, 2, 12, 33, 21)

Math.min(1, 2, 12, 33, 21)

max 返回零到多个数值中最大值。

min 返回零到多个数值中最小值。

Math.random

返回一个 0 到 1 之间的伪随机数。

Math.round(3.54)

返回四舍五入后的整数。

Math.sqrt(9)

返回一个数的平方根。

Math.pow(2, 3)

返回一个数的 y 次幂。

九、date

        // 获取参数对应的时间对象
        let date = new Date()
        console.log(date)
        // 年
        let year = date.getFullYear()
        // 月
        let mon = date.getMonth() + 1
        // 日
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
        console.log(day)
        // 时
        let hour = date.getHours()
        // 分
        let mm = date.getMinutes()
        // 秒
        let ss = date.getSeconds()

        // 星期几
        let week = date.getDay()

        // 毫秒数
        let ms = date.getMilliseconds()

        // 获取时间戳   1970-1-1 0;0:0
        let ts = date.getTime()
        console.log(ts)
let date = new Date()
 console.log(date)

获取参数对应的时间对象

let year = date.getFullYear()

方法根据本地时间返回指定日期的年份。
let mon = date.getMonth()

方法根据本地时间,返回一个指定的日期对象的月份,为基于 0 的值(0 表示一年中的第一月)。
let day = date.getDate()

方法以世界时为标准,返回一个指定的日期对象为一个月中的第几天
let hour = date.getHours()

以世界时为标准,返回一个指定的日期对象的年份。
let mm = date.getMinutes()

方法以世界时为标准,返回一个指定的日期对象的分钟数。
let ss = date.getSeconds()

方法以世界时为标准,返回一个指定的日期对象的秒数。
let week = date.getDay()

方法根据本地时间,返回一个具体日期中一周的第几天,0 表示星期天。对于某个月中的第几天
let ms = date.getMilliseconds()

方法以世界时为标准,返回一个指定的日期对象的毫秒数。
let ts = date.getTime()
console.log(ts)

方法返回一个时间的格林威治时间数值。

你可以使用这个方法把一个日期时间赋值给另一个Date 对象。这个方法的功能和 valueOF() 方法一样。

十、字符串对象

        // " "   ''   ``
        let str = '1111'


        // 使用String()
        let str1 = new String("hello")

        console.log(typeof (str1))


        // 3|
        let str2 = String("cnjdcjd")


        console.log(str2.length)
" "  '  '    `  `双引 单引  反引
        let str1 = new String("hello")

        console.log(typeof (str1))

定义String

十一、方法

        
        // nixuog
        let str = "nanjincheng"
        console.log(str.charAt(4))
        // 
        console.log(str.indexOf("h"))
        console.log(str.lastIndexOf("h"))



        // 连接字符串
        let str1 = "nan"
        let str2 = "jincheng1234"


        // 和+的作用类似
        let str3 = str1.concat(str2)
        console.log(str3)


        // 

        console.log(str3.match(/\d/g))


        // 使用正则替换原来的内容

        console.log(str3.replace(/a/g, "######"))


        // slice()
        console.log(str3.slice(1, 4))


        // 分割   split()

        console.log(str3)

        console.log(str3.split(""))
        let str4 = str3.split("")
        console.log(str4.join("##"))

        // 转大写
        console.log(str3.toUpperCase())
        console.log(str3.toLowerCase())


        let str5 = "zhangsan"
        let aaa = str5.split("")
        console.log(aaa)

        let bbb = aaa.reverse()
        console.log(bbb)
        console.log(bbb.join(""))
        let str1 = "nanhang"
        let str2 = "jincheng1234"
        let str3 = str1.concat(str2)
        console.log(str3)

连接字符串

concat方法将字符串参数连接到调用的字符串,并返回一个新的字符串。

console.log(str3.replace(/a/g, "######"))

使用正则替换原来的内容

replace 方法返回一个新字符串,其中一个、多个或所有匹配的 pattern 被替换为 replacement

        console.log(str3)

        console.log(str3.split(""))
        let str4 = str3.split("")
        console.log(str4.join("##"))

分割   split()

方法接受一个模式,通过搜索模式将字符串分割成一个有序的子串列表,将这些子串放入一个数组,并返回该数组。

        console.log(str3.toUpperCase())
        console.log(str3.toLowerCase())

转大写

toUpperCase方法将该字符串转换为大写形式。

转小写

toLowerCase方法将该字符串转换为小写形式。

console.log(str.charAt(4))

charAt方法返回一个由给定索引处的单个 UTF-16 码元构成的新字符串。
        console.log(str.indexOf("h"))
        console.log(str.lastIndexOf("h"))

indexOf方法在字符串中搜索指定子字符串,并返回其第一次出现的位置索引。它可以接受一个可选的参数指定搜索的起始位置,如果找到了指定的子字符串,则返回的位置索引大于或等于指定的数字。

lastIndexOf方法搜索该字符串并返回指定子字符串最后一次出现的索引。它可以接受一个可选的起始位置参数,并返回指定子字符串在小于或等于指定数字的索引中的最后一次出现的位置。

console.log(str3.match(/\d/g))

Match方法检索字符串与正则表达式进行匹配的结果。

console.log(str3.slice(1, 4))

slice方法提取字符串的一部分,并将其作为新字符串返回,而不修改原始字符串。

十二、函数

        Number("1111")
        parseFloat("200px")
        parseInt("200px")

        // getSum(1, 2, 3)

        // 函数:一段独立功能的代码的集合
        // function 函数名(参数){
        // 代码
        // }
        // 

        let a = getSum(4, 5)
        console.log(a)

        function getSum(num1, num2) {
            // console.log(num1 + num2)
            return num1 + num2

            console.log("66666你老6")

        }


        // 函数调用   函数名()
        // getSum()
        // getSum()
        // getSum()
        // 一个函数没有return的情况下,默认返回的是undefined
        let sum = getSum(3, 4)
        console.log(sum)

函数

一段独立功能的代码的集合

function 函数名(参数){

        代码

         }

        Number("1111")
        parseFloat("200px")
        parseInt("200px")

Number构造函数包含常量和处理数值的方法。其他类型的值可以使用 Number() 函数转换为数字。

parseFloat函数解析一个参数(必要时先转换为字符串)并返回一个浮点数

parseInt解析一个字符串并返回指定基数的十进制整数,radix 是 2-36 之间的整数,表示被解析字符串的基数。

函数调用   函数名()
        let sum = getSum(3, 4)
        console.log(sum)

一个函数没有return的情况下,默认返回的是undefined

十三、值传递和引用传递

let a = 1
        let b = 2

        // 引用传递
        let arr = [1, 2, 3]
        function change(a) {
            // a += 10
            // b += 20
            a.push(100)

        }
        // change(a, b)
        // console.log(a)
        // console.log(b)

        change(arr)

        console.log(arr)

十四、作用域

       // 全局作用域、函数作用域
        let a = 1

        function fn() {
            let num = 1
            console.log(a)

        }

        fn()
        console.log(num)

作用域是当前的执行上下文,和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中,那么它是不可用的。作用域也可以堆叠成层次结构,子作用域可以访问父作用域,反过来则不行。

全局作用域:脚本模式运行所有代码的默认作用域

模块作用域:模块模式中运行代码的作用域

函数作用域:由函数创建的作用域

十五、函数作为参数进行传递

function fn1() {
            console.log("我是第一个函数")
        }

        function fn2(a) {
            a()
            console.log("我是函数2")
        }

        fn2(fn1)

十六、默认参数

        function area(r, PI = 3.14) {
           return PI * r * r
         }

         console.log(area(1))
        let a = [17, "aadd", 34, 1]
        a.push(10)
        alert(a)

允许在没有值或 undefined 被传入时使用默认形参。

十七、arguement

         function getSum() {
            // return a + b
            // console.log(arguments)
            let sum = 0
            for (let i in arguments) {
                sum += arguments[i]

            }
            return sum

        }
        console.log(getSum(1, 2, 3, 4))
arguement是一个对应于传递给函数的参数的类数组对象。

十八、匿名函数、函数表达值

        let a = function () {
            console.log("666");
        }
        a()

匿名函数:一个 JS函数在定义后立即执行。也被熟知为 IIFE(立即调用函数表达式)。

十九、箭头函数

        // function fn(x) {
        //     return x + 5

        // }
        // let a = fn(4)
        // console.log(a)


        // let fn = () => alert("hello")

        let fn = x => x + 5
        console.log(fn(4))


        let fn1 = (x, y) => {
            let f = 6
            return x + y + z
        }

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguements或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

二十、递归

递归:函数自身调用自身
 9! =1!*2*3*4*5*6*7*8*9
function jC(n) {
 if (n === 1) {
 return 1
} else {
      return jC(n - 1) * n
  }
 }
console.log(jC(3))

一种函数调用自身的操作。递归被用于处理包含有更小的子问题的一类问题。一个递归函数可以接受两个输入参数:一个最终状态(终止递归)或一个递归状态(继续递归)。

  • 14
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值