JavaScript数组、字符串回顾

JS的数组、字符串

  • JavaScript的数组、字符串
    • 一、数组篇
      • 1、检测是否为数组 instanceof
      • 2、数组重排序方法 reverse() 和 sort()
      • 3、添加数组元素方法 push、unshift
      • 4、删除数组元素方法 pop、shift
      • 5、数组索引方法(位置方法)indexOf()
      • 6、数组转换为字符串(转换方法)toString()
      • 7、数组操作方法 slice()、splice()、concat()
      • 8、遍历数组(迭代方法)forEach、map、filter等
      • 9、filter( )筛选数组和过滤空值
      • 10、归并数组方法 reduce()
      • 11、数组的includes方法
      • 12、数组的findIndex方法
      • 13、数组的find方法
    • 二、字符串篇
      • 1、根据字符返回位置,从字符串中查找子字符串的方法 indexOf
      • 2、根据位置返回字符,用于访问字符串中特定字符的方法 charAt()、charCodeAt()
      • 3、字符串操作方法 concat()、substr()
      • 4、替换字符 replace()
      • 5、字符转换为数组 split()
      • 6、基于子字符串创建新字符串的方法: slice() 、 substr() 和 substring()
      • 7、trim ()方法,这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果
      • 8、字符串大小写转换方法 , toLowerCase() 和 toUpperCase() 方法
      • 9、字符串的模式匹配方法 match()、 search()
      • 10、fromCharCode() 方法
      • 11、 localeCompare() 方法,这个方法比较两个字符串,并返回下列值中的一个;
      • 12、includes() 判断字符串中是否包含某个字符、endsWith() 、startWidth()
      • 13、repeat() 方法字符串复制指定次数 repeat()
    • 三、Number篇
      • 1、toString() 、toFixed()、
      • 2、toExponential()、toPrecision()
    • 四、对象篇
      • 1、 Object.keys(obj)用于获取对象自身所有的属性
      • 2、Object.defineProperty() 定义新属性或修改原有的属性

JavaScript的数组、字符串

一、数组篇

1、检测是否为数组 instanceof

 //对于一个网页,或者一个全局作用域而言,使用 instanceof 操作符就能得到满意的结果:
            if (value instanceof Array){
                //对数组执行某些操作
            }
            /*
            instanceof 操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那实
            际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的 Array 构造函数。如果你从
            一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自
            不同的构造函数。
            为了解决这个问题,ECMAScript 5 新增了 Array.isArray() 方法。这个方法的目的是最终确定某
            个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。这个方法的用法如下。*/
            if (Array.isArray(value)){
            //对数组执行某些操作
            }
        // 支持 Array.isArray() 方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+和 Chrome。

2、数组重排序方法 reverse() 和 sort()

 //reverse() 方法会反转数组项的顺序
            var values = [1, 2, 3, 4, 5];
            values.reverse();
            console.log(values); //5,4,3,2,1
 /*sort() 方法 数组排序
            在默认情况下, sort() 方法按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。
            为了实现排序, sort() 方法会调用每个数组项的 toString() 转型方法,然后比较得到的字符串,以
            确定如何排序。即使数组中的每一项都是数值, sort() 方法比较的也是字符串。*/
            var values = [0, 1, 5, 10, 15];
            values.sort();
            console.log(values); //0,1,10,15,5
            /*
            可见,即使例子中值的顺序没有问题,但 sort() 方法也会根据测试字符串的结果改变原来的顺序。
            因为数值 5 虽然小于 10,但在进行字符串比较时, "10" 则位于 "5" 的前面,于是数组的顺序就被修改了。
            不用说,这种排序方式在很多情况下都不是最佳方案。因此 sort() 方法可以接收一个比较函数作为参
            数,以便我们指定哪个值位于哪个值的前面。
            比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等
            则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数:*/
            function compare(value1, value2) {
                if (value1 < value2) {
                    return -1;
                } else if (value1 > value2) {
                    return 1;
                } else {
                    return 0;
                }
            }
            // 这个比较函数可以适用于大多数数据类型,只要将其作为参数传递给 sort() 方法即可,如下面这
            //个例子所示。
            var values= [0, 1, 5, 10, 15];
            values.sort(compare);
            console.log(values2); //0,1,5,10,15
            //在将比较函数传递到 sort() 方法之后,数值仍然保持了正确的升序。当然,也可以通过比较函数
            //产生降序排序的结果,只要交换比较函数返回的值即可
            
          // arr.sort() m没有参数的时候会按照ASCII 的编码排序
          // 改变原始数组
          // 按照数据的大小排序 需要给sort 添加 一个参数 为函数
          // 这个函数里面需要 两个参数 a  和 b
          // 这个函数还要有返回值 return a - b 得到的时候升序
          // return b - a 得到一个降序
          var arr = [10, 2, 34, 6, 9, 80, 72, 15, 119];
          // arr.sort(function (a, b) {
          //     return b - a
          // });
          var res = arr.sort(function (a, b) {
             return b - a
          })
          console.log(res) //[119, 80, 72, 34, 15, 10, 9, 6, 2]
          

3、添加数组元素方法 push、unshift

 // 1. push() 在数组的末尾 添加一个或者多个数组元素 
        var arr = [1, 2, 3];
        // arr.push(4, 'blue');
        console.log(arr.push(4, 'blue'));//5
        console.log(arr);//[1, 2, 3, 4, "blue"]
        //解析:
        // (1) push 是可以给数组追加新的元素
        // (2) push() 参数直接写 数组元素
        // (3) push完毕之后,返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化

// 2. unshift 在数组的开头 添加一个或者多个数组元素
        console.log(arr.unshift('red', 'orange'));//5
        console.log(arr);//["red", "orange", 1, 2, 3]
        //解析:
        // (1) unshift是可以给数组前面追加新的元素
        // (2) unshift() 参数直接写 数组元素
        // (3) unshift完毕之后,返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化

4、删除数组元素方法 pop、shift

// 1. pop() 它可以删除数组的最后一个元素 
        var arr = [1, 2, 3 ,4, 5, "red"]; 
        console.log(arr.pop());//red
        console.log(arr);//[1, 2, 3, 4, 5]
        //解析:
        // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
        // (2) pop() 没有参数
        // (3) pop完毕之后,返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化
        
// 2. shift() 它可以删除数组的第一个元素  
        console.log(arr.shift());//1
        console.log(arr);//[2, 3, 4, 5, "red"]
        //解析:
        // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
        // (2) shift() 没有参数
        // (3) shift完毕之后,返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化

5、数组索引方法(位置方法)indexOf()

//1、indexOf(数组元素)   返回数组元素索引号方法
        // 作用就是返回该数组元素的索引号 从前面开始查找
        // 它只返回第一个满足条件的索引号 
        // 它如果在该数组里面找不到元素,则返回的是 -1  
        var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr.indexOf('blue'));   //2

        var arr1 = ['red', 'green', 'pink'];
        console.log(arr1.indexOf('blue'));   //-1

//2、lastIndexOf(数组元素)   返回数组元素索引号方法 
        // 作用就是返回该数组元素的索引号 从后面开始查找
        var arr2 = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr2.lastIndexOf('blue'));    // 4

6、数组转换为字符串(转换方法)toString()

            /*所有对象都具有 toLocaleString() 、 toString() 和 valueOf() 方法。其中,调用
            数组的 toString() 方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而
            调用 valueOf() 返回的还是数组。实际上,为了创建这个字符串会调用数组每一项的 toString() 方
            法。*/
            var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
            alert(colors.toString()); // red,blue,green
            alert(colors.valueOf()); // red,blue,green
            alert(colors); // red,blue,green
// 1. toString() 将数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3
// 2. join(分隔符) 
        var arr1 = ['green', 'blue', 'red'];
        console.log(arr1.join()); // green,blue,red
        console.log(arr1.join('')); // greenbluered
        console.log(arr1.join('-')); // green-blue-red
        console.log(arr1.join('&')); // green&blue&red

7、数组操作方法 slice()、splice()、concat()

//1、slice()  注意不会影响原始数组
        /*
         slice() ,它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以
            接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice() 方法返回从该
            参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项—
            —但不包括结束位置的项。
        */
        var colors = ["red", "green", "blue", "yellow", "purple"];
        var colors2 = colors.slice(1);
        var colors3 = colors.slice(1,4);
        console.log(colors2); //green,blue,yellow,purple
        console.log(colors3); //green,blue,yellow
 //2、splice()  注意会影响原数组
        /*
        splice() 的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下 3 种:
            1、删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。
            例如, splice(0,2) 会删除数组中的前两项。
            2、插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、0(要删除的项数)
            和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如,
            splice(2,0,"red","green") 会从当前数组的位置 2 开始插入字符串 "red" 和 "green" 
            3、替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起
            始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,
            splice (2,1,"red","green") 会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串
            "red" 和 "green" 
            注意:splice() 方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何
            项,则返回一个空数组)。
        */
        
     var colors = ["red", "green", "blue"];
    // 第一个是索引号  , 第二个是 删除的个数 
    // 注意: 参数两个和多个 效果不一样

    var removed = colors.splice(0, 1); // 从索引号0 的 开始删除第一项
    console.log(colors); // ["green", "blue"]
    console.log(removed); // ["red"]  返回的数组中删除的

    var removed2 = colors.splice(2, 1); // 从索引号2的 开始 删除1个
    console.log(colors); //  ["red", "green"]
    console.log(removed2); // ["blue"]  返回的数组中删除的

    var removed3 = colors.splice(1, 2); // 从索引号2的位置开始 删除2个
    console.log(colors); //  ["red"]
    console.log(removed3); // ["green","blue"]  返回的数组中删除的

    removed4 = colors.splice(1, 0, "yellow", "orange"); // 从索引号 1 开始前面插入两项,不删除
    console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
    console.log(removed4); // [ ]  返回的是一个空数组 没有删除的

    removed5 = colors.splice(1, 1, "red", "purple"); //从索引号 1 开始前面插入两项,删除一项
    console.log(colors); // ["red", "red", "purple", "blue"]
    console.log(removed5); // ["green"]  返回的数组中删除的

    removed6 = colors.splice(2, 0, "pink"); // 从索引号 2 开始前面插入一项,不删除
    console.log(colors); // ["red", "green", "pink", "blue"]
    console.log(removed6); // [ ]  返回的是一个空数组 没有删除的

    removed7 = colors.splice(2, 2, "pink"); // 从索引号 2 开始前面插入一项,删除一项,因为索引号 2 开始 只有1个
    console.log(colors); // ["red", "green", "pink"]
    console.log(removed7); // ["blue"]  返回的数组中删除的
    
//3、concat()注意不会影响原数组
        /*
        concat() 方法可以基于当前数
        组中的所有项创建一个新数组。具体来说,这个方法会先创建当前数组一个副本,然后将接收到的参数
        添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat() 方法传递参数的情况下,它只是
        复制当前数组并返回副本。如果传递给 concat() 方法的是一或多个数组,则该方法会将这些数组中的
        每一项都添加到结果数组中。如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。
        */
        var colors = ["red", "green", "blue"];
        var colors2 = colors.concat("yellow", ["black", "brown"]);
        console.log(colors); //red,green,blue
        console.log(colors2); //red,green,blue,yellow,black,brown

8、遍历数组(迭代方法)forEach、map、filter等

以下是这 5 个迭代方法的作用。
1every() :对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true2filter() :对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
3forEach() :对数组中的每一项运行给定函数。这个方法没有返回值。
4map() :对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
5some() :对数组中的每一项运行给定函数,如果该函数对任一项返回 true ,则返回 true 。
以上方法都不会修改数组中的包含的值。
// forEach 迭代(遍历) 数组
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {
            console.log('每个数组元素' + value);
            console.log('每个数组元素的索引号' + index);
            console.log('数组本身' + array);
            sum += value;
        })
        console.log(sum);
         /*
        每个数组元素1
        每个数组元素的索引号0
        数组本身1,2,3

        每个数组元素2
        每个数组元素的索引号1
        数组本身1,2,3
        
        每个数组元素3
        每个数组元素的索引号2
        数组本身1,2,3
        6
        */

9、filter( )筛选数组和过滤空值

// filter 筛选数组
        var arr = [12, 66, 4, 88, 3, 7];
        var newArr = arr.filter(function(value, index) {
            // return value >= 20;
            return value % 2 === 0;
        });
        console.log(newArr);// [12, 66, 4, 88]
        
// filter 过滤空值
		let arr = ["",'1',"2","", "3",""]
    	let arr1 = arr.filter(item => item)
    	console.log(arr1);  // ['1',"2","3"]
    	
// 去重
	var arr = [1,3,4,5,6,3,7,4];
	console.log(arr.filter((value,index,arr1) => arr1.indexOf(value) === index));
	// [ 1, 3, 4, 5, 6, 7 ]

some( )查找数组中是否有满足条件的元素

// some 查找数组中是否有满足条件的元素 
        var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
        console.log(flag1);//true
        // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
        // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的
        //元素就终止循环

10、归并数组方法 reduce()

            /*ECMAScript 5 还新增了两个归并数组的方法: reduce() 和 reduceRight() 。这两个方法都会迭
            代数组的所有项,然后构建一个最终返回的值。其中, reduce() 方法从数组的第一项开始,逐个遍历
             到最后。而 reduceRight() 则从数组的最后一项开始,向前遍历到第一项。*/
            //reduce() 方法可以执行求数组中所有值之和的操作
            var values = [1,2,3,4,5];
            var sum = values.reduce(function(prev, cur, index, array){
            return prev + cur;
            //第一次执行回调函数, prev 是 1, cur 是 2。第二次, prev 是 3(1 加 2 的结果), cur 是 3(数组
            //的第三项)。这个过程会持续到把数组中的每一项都访问一遍,最后返回结果。
            });
             console.log(sum); //15
            /*这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传
            给 reduce() 和 reduceRight() 的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这
            个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第
            一个参数是数组的第一项,第二个参数就是数组的第二项。*/

            //reduceRight() 的作用类似,只不过方向相反而已,使用 reduce() 还是 reduceRight()
            //主要取决  于要从哪头开始遍历数组。除此之外,它们完全相同

11、数组的includes方法

// includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

12、数组的findIndex方法

/*findIndex()
findIndex()与find()的使用方法相同,只是当条件为true时findIndex()返回的是索引值,而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1,而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数,与find()相同。
*/

let arr = ['1','2','3','4', '2']
const seq = arr.findIndex(item => item === '2');
console.log(seq); // 1

13、数组的find方法

/*find()
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined。
*/
let arr = ['fqniu', 'niuniu', 'niuer', 'niufuqiang', 'fq', 'niuzai'];
let res = arr.find(value => value === 'fq');
console.log(res); // 'fq' 返回这个元素
let res1 = arr.find(value => value === 'test');
console.log(res1); // undefined
// 如果是对象 则返回的是查询到的这条对象 如果查不到 返回undefined
// 如果是字符串 则返回的是查询到的值 如果查不到 返回undefined

二、字符串篇

1、根据字符返回位置,从字符串中查找子字符串的方法 indexOf

// 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
// 如果要检索的字符串值没有出现,则该方法返回 -1
        var str = '你知道的越多,你不知道的越多';
        console.log(str.indexOf('越'));   //4 
        console.log(str.indexOf('越', 5)); // 从索引号是 4的位置开始往后查找 结果为12
        console.log(str.lastIndexOf('不')); //8 只是从后面查找,但索引号还是0-13

2、根据位置返回字符,用于访问字符串中特定字符的方法 charAt()、charCodeAt()

        // 1. charAt(index) 根据位置返回字符 index是字符串的索引号
        var str = 'fqniu';
        console.log(str.charAt(3)); //i
        // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的: 判断用户按下了那个键 
        console.log(str.charCodeAt(0)); // 102
        // 3. str[index] H5 新增的
        console.log(str[0]); // f
        // 4. 用charAt(index) 可以遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i)); //遍历字符 fqniu
        }

3、字符串操作方法 concat()、substr()

// 1. concat('字符串1','字符串2'....)
        //用于连接两个或多个字符串拼接字符串 等效于 + ,不过 + 更常用
        var str = 'fq';
        console.log(str.concat('niu'));   //fqniu

// 2. substr('start', 'length') 从start位置开始(索引号),length取的是个数
        // substr('截取的起始位置', '截取几个字符');
        var str1 = '你知道的越多,你不知道的越多';
        console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符  结果:道的

4、替换字符 replace()

// 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
        var str = 'fqliulll';
        console.log(str.replace('l', 'n'));  //fqniulll
// 2.有一个字符串 'abcdoefoxyozzoppol'  要求把里面所有的 o 替换为 -
        var str1 = 'abcdoefoxyozzoppol';
        while (str1.indexOf('o') !== -1) { //判断o 根据 indexOf 返回值,如果不存在,返回-1
            str1 = str1.replace('o', '-');
        }
        console.log(str1);  //abcd-ef-xy-zz-pp-l

5、字符转换为数组 split()

// 字符转换为数组 split('分隔符')    前面学过 toString() 把数组转换为字符串
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));  //["red", " pink", " blue"]
        var str3 = 'red&pink&blue';
        console.log(str3.split('&')); // ["red", "pink", "blue"]

6、基于子字符串创建新字符串的方法: slice() 、 substr() 和 substring()

     var stringValue = "hello world";
     console.log(stringValue.slice(3)); //"lo world"
     console.log(stringValue.substring(3)); //"lo world"
     console.log(stringValue.substr(3)); //"lo world"
     console.log(stringValue.slice(3, 7)); //"lo w"
     console.log(stringValue.substring(3,7)); //"lo w"
     console.log(stringValue.substr(3, 7)); //"lo worl"

     /*在传递给这些方法的参数是负值的情况下,它们的行为就不尽相同了。其中, slice() 方法会将传
     入的负值与字符串的长度相加, substr() 方法将负的第一个参数加上字符串的长度,而将负的第二个
     参数转换为 0。最后, substring() 方法会把所有负值参数都转换为 0。*/
     var stringValue = "hello world";
     console.log(stringValue.slice(-3)); //"rld"
     console.log(stringValue.substring(-3)); //"hello world"
     console.log(stringValue.substr(-3)); //"rld"
     console.log(stringValue.slice(3, -4)); //"lo w"
     console.log(stringValue.substring(3, -4)); //"hel"
     console.log(stringValue.substr(3, -4)); //"" (空字符串)
     /* 这个例子清晰地展示了上述三个方法之间的不同行为。在给 slice() 和 substr() 传递一个负值
      参数时,它们的行为相同。这是因为 -3 会被转换为 8 (字符串长度加参数 11+(-3)=8),实际上相当
     于调用了 slice(8) 和 substr(8) 。但 substring() 方法则返回了全部字符串,因为它将 -3 转换
     成了 0 。
     
     当第二个参数是负值时,这三个方法的行为各不相同。 slice() 方法会把第二个参数转换为 7,这
     就相当于调用了 slice(3,7) ,因此返回 "lo w" 。 substring() 方法会把第二个参数转换为 0,使调
     用变成了 substring(3,0) ,而由于这个方法会将较小的数作为开始位置,将较大的数作为结束位置,
     因此最终相当于调用了 substring(0,3) 。 substr() 也会将第二个参数转换为 0,这也就意味着返回
     包含零个字符的字符串,也就是一个空字符串。*/
     
     //substr(1)
     //substring(1)
     //去掉第一个字符串,取出剩下的字符串(具体看上内容)
     

7、trim ()方法,这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果

    <input type="text"> <button>点击</button>
    <div></div>
    <script>
        // trim 方法去除字符串两侧空格  trim() 返回的是字符串的副本,所以原始字符串中的前置及后缀空格会保持不变。
        var str = '   an  dy   ';
        console.log(str);
        var str1 = str.trim();
        console.log(str1);
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            var str = input.value.trim();//先去除字符串两侧空格
            if (str === '') {  //判断是否为空
                alert('请输入内容');
            } else {
                console.log(str);//打印str
                console.log(str.length);//打印str长度
                div.innerHTML = str;//改变div里面的内容
            }
        }

8、字符串大小写转换方法 , toLowerCase() 和 toUpperCase() 方法

        //toLowerCase() 、 toLocaleLowerCase() 、 toUpperCase() 和 toLocaleUpperCase()
        var stringValue = "hello world";
        console.log(stringValue.toLocaleUpperCase()); //"HELLO WORLD"
        console.log(stringValue.toUpperCase()); //"HELLO WORLD"
        var stringValue1 = "HeLLO worLD";
        console.log(stringValue1.toLocaleLowerCase()); //"hello world"
        console.log(stringValue1.toLowerCase()); //"hello world"
         /*
        其中, toLowerCase() 和 toUpperCase() 是两个经典的方法,借鉴自 java.lang.String 中的同名
        方法。而 toLocaleLowerCase() 和 toLocaleUpperCase() 方法则是针对特定地区的实现。对有些地
        区来说,针对地区的方法与其通用方法得到的结果相同,但少数语言(如土耳其语)会为 Unicode 大小
        写转换应用特殊的规则,这时候就必须使用针对地区的方法来保证实现正确的转换。
        */

9、字符串的模式匹配方法 match()、 search()

        // match() 方法只接受一个参数,要么是一个正则表达式,要么是一个 RegExp 对象。
        var text = "cat, bat, sat, fat";
        var pattern = /.at/;
        //与 pattern.exec(text)相同
        var matches = text.match(pattern);
        console.log(matches.index); //0
        console.log(matches[0]); //"cat"
        console.log(pattern.lastIndex); //0
        

        // var text = "cat, bat, sat, fat";
        var pos = text.search(/at/);
        console.log(pos); //1
        /*
        这个方法的唯一参数与 match() 方法的参数相同:由字符串或 RegExp 对象指定的一个正则表达式。
        search() 方法返回字符串中第一个匹配项的索引;如果没有找到匹配项,则返回 -1 。
        而且, search() 方法始终是从字符串开头向后查找模式。
        */

10、fromCharCode() 方法

        // String 构造函数本身还有一个静态方法: fromCharCode() 。
        // 这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符串。
        // 从本质上来看,这个方法与实例方法 charCodeAt(),执行的是相反的操作。
         console.log(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"
        // 在这里,是给 fromCharCode() 传递的是字符串 "hello" 中每个字母的字符编码。

11、 localeCompare() 方法,这个方法比较两个字符串,并返回下列值中的一个;

/*
        1、如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况下是 -1 ,具体
           的值要视实现而定);
        2、如果字符串等于字符串参数,则返回 0 ;
        3、如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(大多数情况下是 1 ,具体的
           值同样要视实现而定)
        */
        var stringValue = "yellow";
        console.log(stringValue.localeCompare("brick")); //1
        console.log(stringValue.localeCompare("yellow")); //0
        console.log(stringValue.localeCompare("ya")); //1
        console.log(stringValue.localeCompare("yi")); //-1
        console.log(stringValue.localeCompare("zoo")); //-1
        //因为 localeCompare() 返回的数值取决于实现,所以最好是像下面例子所示的这样使用这个方法。
        function determineOrder(value) {
        var result = stringValue.localeCompare(value);
        if (result < 0){
            console.log("The string 'yellow' comes before the string '" + value + "'.");
        } else if (result > 0) {
            console.log("The string 'yellow' comes after the string '" + value + "'.");
        } else {
            console.log("The string 'yellow' is equal to the string '" + value + "'.");
            }
        }
        determineOrder("brick");//The string 'yellow' comes after the string 'brick'.
        determineOrder("yellow");//The string 'yellow' is equal to the string 'yellow'.
        determineOrder("zoo");//The string 'yellow' comes before the string 'zoo'.
        //使用这种结构,就可以确保自己的代码在任何实现中都可以正确地运行了。

12、includes() 判断字符串中是否包含某个字符、endsWith() 、startWidth()

    /*
      【1】includes()  判断字符串中是否包含某个字符
          返回值:布尔值,有就返回 true,没有就返回 false
      【2】endsWith() 判断字符串是否以制指定的字符结尾
          返回值:布尔值 是就返回 true,不是就返回 false
      【3】startWidth()判断字符串知否以指定的字符开头
          返回值:布尔值 是就返回 true,不是就返回 false
    */
   
    let str = 'a123bcdef';
    if (str.indexOf('a') !== -1) {
        console.log('有包含a'); // 打印 有包含a
    }


    var res = str.includes('a')
    console.log(res); //true


    let res1 = str.endsWith('e')
    console.log(res1); //false

    let res2 = str.startsWith('1');
    console.log(res2);  //false

13、repeat() 方法字符串复制指定次数 repeat()


    var str = "hello".repeat(3)
    console.log(str) //hellohellohello
    // repeat()的功能是将字符串重复参数指定的次数
    

三、Number篇

1、toString() 、toFixed()、

2、toExponential()、toPrecision()


// 1.数据类型转 数值的数据类型
        /*
       (1)如果是数字的字符串 把字符串进行加法以外的数学运算可以将这个字符串转为 数值类型的数据(隐式转换)
       (2)Number(变量) 把其他的数据类型转换为数值类型的数据,把数据完整转化
       (3)parseInt(变量) 取整,把小数点后面的值省略
       (4)parseFloat(变量) 可以取小数点转换,从左到右取值,遇到不是数字的不在往下取值,只能识别一个 .
        */
        
// 2.其他数据类型转 字符串数据
        /*
        (1)变量名.toString()
        (2)String(变量)
        (3)隐式转换,使用数学运算中的 + 号  变量 + ' '
        在js中可以使用+来拼接字符串,把+两边的字符拼接起来,拼接后的数据为一个字符串
        */

// 3.其他的数据类型转Boolean数据类型
        /* 
        Boolean() 返回值 true 或者 false
        只有 ''、undefined、null 、0 、NaN 为false,其他的都为 true
        */
        

 // toString() 方法
            //可以为 toString() 方法传递一个表示基数的参数,告诉它返回几进制数值的字符串形式
            var num = 10;
            console.log(num.toString()); //"10"
            console.log(num.toString(2)); //"1010"
            console.log(num.toString(8)); //"12"
            console.log(num.toString(10)); //"10"
            console.log(num.toString(16)); //"a"


 // toFixed()
            //方法会按照指定的小数位返回数值的字符串表示
            var num = 10;
            console.log(num.toFixed(2)); //"10.00"

            var num1 = 10.005;
            console.log(num1.toFixed(2)); //"10.01"
            //能够自动舍入的特性,使得 toFixed() 方法很适合处理货币值。
            // 但需要注意的是,不同浏览器给这个方法设定的舍入规则可能会有所不同。


//toExponential()
           //该方法返回以指数表示法(也称 e 表示法)表示的数值的字符串形式。
           //与 toFixed() 一样, toExponential() 也接收一个参数,而且该参数同样也是指定输出结果中的小数位数。
           var num2 = 10;
           console.log(num2.toExponential(1)); //"1.0e+1"

// toPrecision() 
        //这么小的数值一般不必使用 e 表示法,如果想得到表示某个数值的最合适的格式;
            var num = 99;
            console.log(num.toPrecision(1)); //"1e+2"
            console.log(num.toPrecision(2)); //"99"
            console.log(num.toPrecision(3)); //"99.0"
            /*
            以上代码首先完成的任务是以一位数来表示 99,结果是 "1e+2" ,即 100。因为一位数无法准确地
            表示 99,因此 toPrecision() 就将它向上舍入为 100,这样就可以使用一位数来表示它了。而接下来的
            用两位数表示 99,当然还是 "99" 。最后,在想以三位数表示 99时, toPrecision() 方法返回了 "99.0" 。
            实际上, toPrecision() 会根据要处理的数值决定到底是调用 toFixed() 还是调用 toExponential() 。
            而这三个方法都可以通过向上或向下舍入,做到以最准确的形式来表示带有正确小数位的值。
            */

四、对象篇

1、 Object.keys(obj)用于获取对象自身所有的属性

 // Object.keys(obj)用于获取对象自身所有的属性 (类似于for..in..)
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999,
            num: 2000
        };
        var arr = Object.keys(obj);
        console.log(arr); ["id", "pname", "price", "num"]
        arr.forEach(function(value) {
            console.log(value);//依次打印属性

        });

2、Object.defineProperty() 定义新属性或修改原有的属性

        // Object.defineProperty() 定义新属性或修改原有的属性
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);
        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: true
        });
        console.log(obj);
        Object.defineProperty(obj, 'price', {
            value: 9.9
        });
        console.log(obj);
        Object.defineProperty(obj, 'id', {
            // 如果值为false 不允许修改这个属性值 默认值也是false
            writable: false,
        });
        obj.id = 2;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国某某省某某市某某路某某路xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: false,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: false,
            // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
            configurable: false
        });
        console.log(obj);
        console.log(Object.keys(obj));
        delete obj.address;
        console.log(obj);
        delete obj.pname;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国某某省某某市某某路某某路xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: true,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: true,
            // configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        });
        console.log(obj.address);

以上仅仅是基础掌握的部分内容,当然还有很多其他操作方法,我这就不举例了,可以评论区留言添加。 最后,你知道的越多,你不知道的越多 !

你可能感兴趣的:(JavaScript)