JavaScript的遍历、数组方法、字符串方法、对象方法

一、遍历器：

        for、for-in、for-of。对于数组的遍历这三种方法都适合。

<script>
    var arr = [23,43,15,95,'hello'];
    for(var i = 0;i<arr.length;i++){
        console.log(arr[i])
    }
    //for(i in arr){
    //   console.log(arr[i])
    //}
    //for(i of arr){
    //    console.log(i)
    //}
</script>

        对于对象的遍历，使用for-in，且遍历时原型是上的也会进行遍历。 

<script>
    function fn(){
        this.a = 34
        this.age = 19
    }
    fn.prototype = {x:999}
    var obj = new fn()
    for(i in obj)
        console.log(obj[i])
    console.log('a' in obj)  //判断一个属性是否属于这个对象，原型上的也算
</script>

 二、数组的方法

        forEach()：相当于是一种对数组的遍历，forEach的参数是一个回调函数，回调函数的参数有三个，第一个为数组元素，第二个为数组下标，第三个为进行遍历的数组，没有返回值。

<script>
    var arr = [23,45,50,90,250]
    var re2 = arr.forEach(function(el,index){
        console.log(el,index)
        return el
    })
    console.log(re2)
</script>

         map()方法：对调用方法的数组中的每一个元素执行指定的函数，也就是作为参数的回调函数。返回值是回调函数每一次的返回值组成的新数组。

<script>
    var re = arr.map(function(el,index){
        console.log(el,index)
        return el
    })
    console.log(re)
</script>

         filter()方法：用以过滤数组中的元素，返回值是由符合要求的元素取出来组成的一个新数组。filter会根据每一次的返回值决定是否将此次取出来的元素放进新数组。

<script>
    var arr = [23,44,51,90,250]
    var re = arr.filter(function(el,index){
        if(el%2==0)
            return true
        else
            return false
    })
    console.log(re)  //结果：[44, 90, 250]
</script>

        every()：参数为回调函数，返回值是布尔值，用以判断数组中的元素是否都满足指定条件，若有一个不满足，则整个返回值为false。

<script>
    var arr = [23,44,51,90,250]
    var re = arr.every(function(el,index){
        if(el<50)
            return true
        else
            return false
    })
    console.log(re)  //结果：false
</script>

        some()：参数为回调函数，返回值是布尔值，与every相反，some方法是判断数组中的元素是否由满足条件的，有一个满足则返回true。

<script>
    var arr = [23,44,51,90,250]
    var re = arr.some(function(el,index){
        if(el>100)
            return true
        else
            return false
    })
    console.log(re)   //结果：true
</script>

        reduce()：用以对数组中的元素进行一个累计计算，最后得到的返回值是一个总的结果，在实际开发中通常用来计算购物车的总价。回调函数接收四个参数，累积值、当前元素的值、当前元素的索引和正在遍历的数组本身。

<script>
    var arr = [23,44,51,90,250]
    var re = arr.reduce(function(a,b){
        console.log(a,b)
        return a+b
    })
    console.log(re)
</script>

         reduceRight()：与reduce基本类似，区别在于，reduceRight是从右边开始累计。

<script>
    var arr = [23,44,51,90,250]
    var re = arr.reduceRight(function(a,b){
        console.log(a,b)
        return a+b
    })
    console.log(re)
</script>

 三、字符串方法：

        charAt()：将字符串当做一个数组，根据下标来访问字符。

        charCodeAt()：与charAt类似，区别在于返回值是该字符的ASCII码值。

<script>
    var str = 'hello,world,this is a string'
    var re = str.charAt(6)
    var re2 = str.charCodeAt(6)
    console.log(re,re2)  //结果：w 119
</script>

        split()：将字符串进行截取，分成的各段分别作为一个元素构成一个新数组返回。不给参数或者给了一个字符串中没有的字符，则将整个字符串作为一个元素放入数组，参数为空字符是将每一个字符都进行拆分。

<script>
    var str = 'hello,world,this is a string'
    var re = str.split(',')
    console.log(re)  //结果：["hello", "world", "this is a string"]
</script>

    

<script>
    var str = 'lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=ascii&fromurl=ippr_z2C'
    var re = str.split('&')
    var obj = {}
    var re2 = re.map(function(arg){
        console.log(arg)
        var arr = arg.split('=')
        obj[arr[0]] = arr[1]
    })
    console.log(obj)
</script>

         slice()：根据给定的下标范围，截取子字符串，左闭右开。

<script>
    var str = 'hello,world,this is a string'
    var re = str.slice(2,6)
    console.log(re)    //结果：llo,
</script>

        toLowerCase()：将字符串中的所以字母转为小写。

        toUpperCase()：将字符串中的所以字母转为大写。

<script>
    var str = 'hello world,CSDN GOOD'
    var re = str.toLowerCase()
    var re2 = str.toUpperCase()
    console.log(re,'\n',re2)
</script>

         startWith()：判断字符串是否由给定的字符串开头，返回值为布尔值。

        endWith()：判断字符串是否由给定的字符串结尾，返回值为布尔值。

<script>
    var str = 'nice to meet you'
    var re = str.startsWith('nice')
    var re2 = str.endsWith('y')
    console.log(re,re2)   //结果：true false
</script>

       indexOf()：判断给定字符在字符串中的下标位置，没有或为引用数据则结果为-1，若给的不是单个字符，以第一个字符为准。

<script>
    var str = 'nice to meet you'
    var re = str.indexOf('to')
    console.log(re)   //结果：5
</script>

        padStart()：在开头填充指定的字符串，直到达到指定的字符串长度。

        padEnd()：在结尾填充指定的字符串，直到达到指定的字符串长度。

<script>
    var str = 'nice to meet you'
    var re = str.padStart(30,'很高兴认识你')
    var re2 = str.padEnd(25,'我也一样')
    console.log(re,'\n',re2)
</script>

        trim()：去掉字符串首尾的空格。还有trimStart()、trimEnd()，分别为去掉开始、结尾的空格。

<script>
    var str = '  nihao  '
    var re = str.trim()
    console.log(re)  //结果：nihao
</script>

 四、文字加特效

        文字加特效是将该方法与里面的内容解析为一个对应的标签字符串，在实际运用中通过innerHTML将其解析显示在网页上（innerHTML可以解析标签，类似的是innerText，它只能显示为普通文本）。

<script>
    var str = '4'
    re = str.big();  //字体变大
    re = str.small()    //字体变小
    re = str.fontsize('40px')  //字体大小
    re = str.fontcolor('red')   //字体颜色
    re = str.bold()     //字体加粗
    re = str.italics()      //字体倾斜
    re = str.link('http://www.baidu.com')   //文字链接
    re = str.sup()      //字体上标
    re = str.sub()      //字体下标
    console.log(re)
    document.body.innerHTML= `CaSO${re}`
</script>

 五、Math方法

<script>
    var re = Math.floor(3.75)  //向下取整
    console.log(re)
    var re = Math.ceil(3.15)   //向上取整
    console.log(re)
    var re = Math.round(3.75)  //四舍五入
    console.log(re)
    var re = Math.max(10,20,40,23)  //取最大
    console.log(re)
    var re = Math.min(10,20,40,23)  //取最小
    console.log(re)
    var re = Math.LN10  
    console.log(re)
    var re = Math.PI   //近似π，但不是π
    console.log(re)
    var re = Math.log10(100)  //log 10 为底，100的对数
    console.log(re)
    var re = Math.sqrt(9)       //9开根号
    console.log(re)
    re = Math.random()  //生成随机数，范围是固定的0~1，不包括1
    console.log(re)
    console.log(parseInt(re*(100-10+10))) //将得到的随机数进行操作，以此来改变范围
</script>

 六、对象的方法：

        构造函数调用的方法叫静态方法，构造函数调用的属性叫静态属性。

<script>
    var re = Object.is('1',1)   //用以判断两个是否相同，此判断的相同指为同一个
    console.log(re)   //结果：false
</script>

        keys方法，将对象的键名取出，返回一个数组。values方法，将对象的属性值取出，返回一个数组。

<script>
    var obj = {name:'tom',age:22}
    var re = Object.keys(obj)
    var re2 = Object.values(obj)
    console.log(re,re2)
</script>

         Object.defineProperty()是JavaScript中用于在对象上定义新属性或修改现有属性的方法。接收三个参数，第一个是要操作的对象，第二个是要定义或修改的属性的名称，第三个是一个描述符对象，用于定义或修改属性的特性。

<script>
    var obj = {name:'tom',age:22}
    Object.defineProperty(obj,'sex',{
        value:'男'
    })
    console.log(obj)   //结果：{name: "tom", age: 22, sex: "男"}
</script>

        Object.create()方法创建一个新对象，并将其原型设置为指定的对象 。hasOwnProperty()只检查对象自身的属性，而不会检查继承的属性，也就是在即使原型链上存在该属性，如果自身不包含将返回false。

<script>
    var person = {sex:'男'};
    var john = Object.create(person, {
        name: {
            value: 'John',
            writable: true,
        },
        age: {
            value: 25,
            writable: false,
        }
    });
    console.log(john);  //结果：{name: "John", age: 25}
    console.log(john.sex);   //结果：男
    var re = john.hasOwnProperty('sex')
    console.log(re)    //结果：false
    var re = john.hasOwnProperty('name')
    console.log(re)   //结果：true
</script>